After installing the addon when trying to run ember serve I get the following error app/styles/app.[scss/sass] does not exist.

I've noticed a bunch of issues that appear only on Webkit browsers because ember-paper seems to largely be missing any -webkit prefixes on its CSS selectors. Maybe something like broccoli-autoprefixer can be added so that it'll add the prefixes automatically?

i install ember paper on a new CLI app ,when trying to use elements like navbar...i get this errors in console like 10 of them

Refused to load the font 'https://fonts.gstatic.com/s/robotodraft/v1/er-TIW55l9KWsTS1x9bTfgeOulFbQKHxPa89BaxZzA0.woff2' because it violates the following Content Security Policy directive: "font-src 'self'".

havent found a way of fixing them yet

version: 0.2.0-beta.1

please help!!!!

@miguelcobain When I click a button, I see the background color change within a rounded rect and no animation.

@BryanHunt do you see any difference between http://miguelcobain.github.io/ember-paper/#/button and https://material.angularjs.org/#/demo/material.components.button ?

A new css framework for Material design has emerged. It's called materialize: http://materializecss.com/

Their [github repository] looks really good: https://github.com/Dogfalo/materialize
Decent amount of commits, contributers and stars.

Additionally, ember-cli-materialize appeared. This addon goal is very similar to ember-paper, but using materialize CSS (which is really the hardest part).

I began wondering if it made sense to migrate all our efforts to ember-cli-materialize and materialize.
I like diversity, but I'm definitely not a fan of duplicated projects. That confuses users and it isn't efficient.

I would like to know ember-paper users thoughts on this question.

Ember-CLI 0.1.4, fresh install.
I tried ''npm install --save-dev ember-paper" and got this:

installing node-sass
\
> [email protected] install /home/akha/mbr/node_modules/ember-paper/node_modules/node-sass
> node scripts/install.js

Binary downloaded and installed at /home/akha/mbr/node_modules/ember-paper/node_modules/node-sass/vendor/linux-x64/binding.node

> [email protected] postinstall /home/akha/mbr/node_modules/ember-paper/node_modules/node-sass
> node scripts/build.js

`linux-x64` exists; testing
module.js:355
  Module._extensions[extension](this, filename);
                               ^
Error: Module did not self-register.
    at Error (native)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/home/akha/mbr/node_modules/ember-paper/node_modules/node-sass/lib/index.js:181:15)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)

npm ERR! Linux 3.16.0-28-generic
npm ERR! argv "/home/akha/.nvm/v0.11.14/bin/node" "/home/akha/.nvm/v0.11.14/bin/npm" "install" "node-sass"
npm ERR! node v0.11.14
npm ERR! npm  v2.0.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is most likely a problem with the node-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/build.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls node-sass
npm ERR! There is likely additional logging output above.
compiling CSS to /vendor with node-sass
./postinstall.sh: 13: ./postinstall.sh: ./node_modules/.bin/node-sass: not found

npm ERR! Linux 3.16.0-28-generic
npm ERR! argv "/home/akha/.nvm/v0.11.14/bin/node" "/home/akha/.nvm/v0.11.14/bin/npm" "install" "--save-dev" "ember-paper"
npm ERR! node v0.11.14
npm ERR! npm  v2.0.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: `./postinstall.sh`
npm ERR! Exit status 127
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is most likely a problem with the ember-paper package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ./postinstall.sh
npm ERR! You can get their info via:
npm ERR!     npm owner ls ember-paper
npm ERR! There is likely additional logging output above.

Hi,
I am a novice developer, just starting out with ember, and I have question about you implementation of Cards:
Is there a property that can allow using cards as buttons? I want to be able to select a card in my app, and I'm not sure if this is a trivial thing to do or something that needs to be implemented and hasn't yet.

Reference: https://github.com/angular/material/blob/master/src/components/switch/switch.js

https://github.com/miguelcobain/ember-paper/blob/master/addon/components/paper-button.js#L26-L37

rather then an observer the explicitly sets z let me recommend z becomes a computed property, that has the same dependentKeys are the observer does today.

• this is a more natural way to allow data to flow their the app
• only computed if someone consumes after dirtying
• most commonly will only result in 1 compute, regardless of the number of its DK's that change.

Hi, by default when adding paper-toolbar is not fixed position. The sidenav is also not fixed and scrolls when scrolling the main content. After it didn't work in my project, I tried a new fresh app and copied everything from ember-paper and still the same thing. Is this how it is supposed to be or am I missing something.

These properties are needed on the body tag: overflow-x: hidden; overflow-y: hidden

Is this possible ? The angular implementation does it, so I guess if the SCSS is partially borrowed from there, it should be doable.

Another SASS variable I'd like to flag is a "standard" distance parameter. In material design, there's some nice padding here and there, and it would be great to be able to use this throughout - it's nice on the eyes to have a standard distance.

An example is on the sidebar menu:

It's 1x standard-padding from top, and 2x standard-padding from left

Thoughts?

Currently the backdrop disappears instantly instead of fading out animation

just noticed this - I'm about to watch Jupiter rising and can't do right now :)

I've been trying to switch over to importing Hammer as an AMD module and I haven't gotten it to work. I tried both

import Hammer from "hammer"

and

import Hammer from "hammerjs"

and neither of them worked. Does Hammer definitely support being imported as a module?

The paper-backdrop component should recognize a tap as well as a click to trigger hiding the sidebar again.

Possible sources

From what I could find out, there are 3 main sources for Material Design using web technologies:

• Material design for Angular - https://github.com/angular/material
• Polymer Paper Elements - https://www.polymer-project.org/docs/elements/paper-elements.html
• Google Web Starter Kit (material-sprint branch) - https://github.com/google/web-starter-kit/tree/material-sprint

Google is porting material design to Google WSK, but it is in an early stage, and it is built with simplicity in mind (vanilla javascript). That's not bad, but right now it seems like it is missing some features that are present in the other options and it is in an early stage.

Polymer Paper Elements is more mature, but really hard to port from (at least for me). I can't fully get my head get around these Polymer components yet. I often found unnecessary styles and/or behavior for an Ember port/app.

Material design for Angular seems like the most decent source for us. Partly because it is the most similar to Ember from these options. I feel like this should be our main source for this project.

What are your thoughts on this?

I'd like to override the primary color for the app to get away from the blue. I know I can import ember-paper in my app.scss file but how do I change the primary and any other variables?

I'd like to raise a discussion for angular material layout capabilities: https://material.angularjs.org/#/layout/container

It's based on flexbox. How do you feel about it?
Should we go ahead and bring it to ember-paper right away?
Browser compatibility issues?

I was using the paper-button for a form, and the button was firing action and then submitting the form. I was able to fix it by changing

click:function(){
   this.sendAction();
}

to

click:function(){
  this.sendAction();
  return false;
}

Howdy,

I've been meaning to try out your project for while but i haven't quite gotten around to it until now. I was hoping to follow a "getting started" section or something but I didn't see any on the website http://miguelcobain.github.io/ember-paper/#/

Is this a private github repo? I'd love to write some documentation as I go and maybe submit it as a PR

postinstall.sh does not work on Windows

Currently the sidenav animation doesn't follow the spec.
There's a different animation for opening and closing.
Not really sure how to accomplish that here.

@fouad

This is just nitpicking, but thoughts on changing prefix to md- like {{md-button}} so that it's more like http://material.angularjs.org. Also it's faster to type.

The paper- prefix idea came from polymer. I'm open to change to a more "standardish" md- prefix.
Also, would play along better with our current classes and tagnames.

Nevertheless, I would like to hear users' input on this.

I wanted to add some actions to the paper-item component. I first tried {{#paper-item action="someAction"}} but quickly realized this wasn't going to work since I need that action to pass some parameters as well. (BTW, if there's a better way to set up action handlers on components, I would love to know). I went to extend the paper-item component but the components live under ember-paper/addon instead of ember-paper/app. This prevents people from being able to import the ember-paper components in their own app and extend them.

I am extending paper button in my component and I have a click function to handle an event, but I noticed after extending the paper button the action got sent twice.
When checking the code I saw the line below but I am not quite sure if I understand what action it sends and why? Is this intentional? After removing that it works fine and as expected.

https://github.com/miguelcobain/ember-paper/blob/master/addon/components/paper-button.js#L31

demo page shows paper-list components but it's not accessible via 0.0.7

Would it be ok to move the internals over to a POD structure?

I think that's the current, or future standard... and I like it.

After looking at the specs, I came to this conclusion:
Material Design doesn't define any select component. Instead it has the concept of menus. Menus are pretty much the same everywhere. Some common features are:

• they're all triggered by an element, a button for example
• their styling is pretty much the same everywhere, including the ripple effect, animation, icons, etc
• they all have a list of items/options
• they can have separators between the options
• clicking an item triggers an action

Use cases that menus should cover:

• Textfield drop down/select (video)
• App bar drop down (video)
• Cascading drop down (video)
• List views (image)
• enabled/disabled items and separators (image)

I'm willing to make a full-featured material menu component, or at least the base abstractions for having a decent way to compose future menus.

I separated this on a number of tasks I could identify, so we don't step on each others toes:

• create component paper-menu.
  • Animation styling should be here, probably
  • Will contain all menu items
  • should center itself on a certain menu item (tricky, javascript must be used :/)
• create component paper-menu-item (that's what the spec calls them)
  • are meant to be used inside paper-menu
  • Styling, including ripple effect
  • trigger action/event/something on click/tap
  • should have a disabled state
  • styling should support a paper-icon on the right or left side (image)
• create component paper-menu-item-divider or reuse existing paper-divider
• create component paper-menu-container
  • holds a paper-menu and a triggering element element that shows the menu. This is generic, any element could trigger it, probably meant to be subclassed by ember-paper or to customize menu elements users.
  • Is responsible for receiving the actions open and close

Proposal for the generic menu usage:

{{#paper-menu-container}}
  {{#paper-button action="open"}}
    Open
  {{/paper-button}}

  {{#paper-menu open=isOpen}}
    {{#paper-menu-item action="open"}} {{!-- this action will go to the user's controller --}}
      Open
    {{/paper-menu-item}}
    {{#paper-menu-item action="close"}} {{!-- this action will go to the user's controller --}}
      Close
    {{/paper-menu-item}}
    {{#paper-menu-item action="refresh"}} {{!-- this action will go to the user's controller --}}
      Refresh
    {{/paper-menu-item}}
  {{/paper-menu}}
{{/paper-menu-container}}

Notice that this follows ember's new motto "actions up, data down", i.e paper-menu has open from parent component and paper-menu-item sends actions to parent. Correct me if I'm wrong.

After this, it may be the time where we need to create specific components for each use case:

• paper-button-menu extends paper-menu-container
  • displays a ready to use button with menu upon clicking
  • should also cover the case for Cascading drop down menus. Perhaps with a boolean attribute to distinguish. Or we can just create a new component for them.
• paper-select extends paper-menu-container
  • displays the selected option and a menu upon triggering
• paper-list-item-menu extends paper-menu-container

Not so sure about how one would use these concrete components, though. We'll give it some more thoughts later.

Any suggestions/comments?

In a fresh ember-cli project, the addon currently fails to install:

$ ember install:addon ember-paper
version: 0.2.0-beta.1
Installed packages for tooling via npm.
Cannot find module 'broccoli-autoprefixer'
Error: Cannot find module 'broccoli-autoprefixer'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (fresh_project/node_modules/ember-paper/index.js:4:20)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

After adding broccoli-autoprefixer, it installs correctly.
However, then the build fails:

$ ember build
version: 0.2.0-beta.1
Build failed.
Cannot find module 'fresh_project/node_modules/broccoli-sass'
Error: Cannot find module 'fresh_project/node_modules/broccoli-sass'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at requireLocal (fresh_project/node_modules/ember-cli/lib/utilities/require-local.js:6:10)
    at fresh_project/node_modules/ember-cli/lib/preprocessors/style-plugin.js:44:18
    at Array.map (native)
    at fresh_project/node_modules/ember-cli/lib/preprocessors/style-plugin.js:27:40
    at $$$internal$$tryCatch (fresh_project/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:490:16)
    at $$$internal$$invokeCallback (fresh_project/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:502:17)

After installing broccoli-sass, it fails in a different and interesting way:

$ ember build
version: 0.2.0-beta.1
Build failed.
fresh_project/tmp/tree_merger-tmp_dest_dir-K4flMPFy.tmp/app/styles/app.[scss|sass] does not exist

And that I'm not sure how to fix.

$ ember --version
version: 0.2.0-beta.1
node: 0.12.0
npm: 2.1.8

There is a parallel effort to bring Material to ember, and I think it would be awesome if you and @sgasser could join forces and provide a single addon to the Ember community. Thanks for this awesome work!

@ef4 introduced me (and many people) to Ember-Paper at EmberConf during a talk that mainly focuses on LiquidFire. Both projects are fantastic and I want to be able to use them both together.

However working with ember-paper it seems like {{liquid-outlet}} actually breaks functionality and many of the styles for MD as they are very particular.

Has anyone had success integrating the two?

I would love to help out especially if @ef4 or @miguelcobain have thoughts on the integration.

Brendan

Here is my suggestion for the next components to develop. I think we should have the most essential features first. Please read #2 for contributing.

Task list

• Buttons (review)
• FAB buttons
• Cards
• Checkbox (review)
• Dialog
• Material icons (google will release an official iconic font soon. Using unofficial font for now)
• List (and possibly Divider)
• List Controls
• Radio Button (review)
• Sidenav (not complete)
• Slider
• Switch (aka toggle in Polymer)
• Progress Linear
• Progress Circular
• Tabs
• Menus
• Inputs with errors, char counter, etc (currently only simple text field based on Polymer's)
• Toolbar
• Ripple effect (review. I think this could be improved.)
• Shadow (review)
• Normalize touch and mouse events (see EventsMixin). Checkboxes are not working in mobile, for example.
• Flex layout (missing docs)
• Autocomplete

I think that once we get all of these, we have a decent UI kit.
It would be great if we get everyone's effort into this.

Is the behavior of the side bar intentional? It differs substantially from the way that it's handled on the Google Material Design site, Materialize, and any of the Material Design apps I've seen that have come from Google themselves.

Ember Paper's Behavior

Google's Example

Was there a particular reason that Ember Paper handles the behavior differently?

How do you test the components locally? ember test and ember serve both seem to fail, so I'm not sure how to check the changes that are made.

The introduction page at http://miguelcobain.github.io/ember-paper/#/ still recommends installing the addon the old-school way which does not work.

When the sidebar comes into view based on the browser width increasing past a certain point, the md-content element should transition gradually with the sidebar instead of "jumping" to the other position and leaving a blank space that the sidebar then fills. That's how the Material Angular site does it, anyway, and it looks/feels a lot nicer. I'm happy to fix this if you want it fixed.

On mobile, the navigation drawer doesn't close itself when a link is clicked.

This can be observed by going to the demo site on a mobile device (or using Chrome's device emulation) and opening the drawer and selecting one of the nav options.

These were initially based from Polymer, but the spec has changed.

http://www.google.com/design/spec/components/switches.html

Progress:

• Checkboxes
• Radio buttons
• Toggles

I the sidenav I can see you set fix width to 304px on the element. Angular Material does not have that and also the material guideline states the sidenav should be 254px. I think that the default width has to be defined in css classes not in the md-sidenav element. Any thoughts?

After upgrading to Ember 1.11, I observed in my test app that sidenav toggling does not to work anymore, it just silently fails.

Ahoy! I'm interested in contributing.

I'd like to know if you're using any specific SCSS structure, like SMACSS, BEM, or OOCSS.

• Do you have any style guidelines to follow?
• Which versions of Ember do you plan to support in the next version?
• Do you have an issue tracking tool like HuBoard, Waffle, or Trello to watch?
• What can I help with?

Cheers

Hi Miguel,

Any chance you could register this as a bower package? I'm not using ember-cli and would like to be able to include it with my app.

Thanks,
Jake

I just updated to 0.0.5 and when trying to run ember serve I get the following:

Object.keys called on non-object
TypeError: Object.keys called on non-object
    at Function.keys (native)
    at StylePlugin.toTree (/Users/username/webapp/node_modules/ember-cli/lib/preprocessors/style-plugin.js:24:22)
    at /Users/username/webapp/node_modules/ember-cli/lib/preprocessors.js:104:26
    at Array.forEach (native)
    at processPlugins (/Users/username/webapp/node_modules/ember-cli/lib/preprocessors.js:103:11)
    at module.exports.preprocessCss (/Users/username/webapp/node_modules/ember-cli/lib/preprocessors.js:75:10)
    at Class.Addon.compileStyles (/Users/username/webapp/node_modules/ember-cli/lib/models/addon.js:193:27)
    at Class.Addon.treeForAddon (/Users/username/webapp/node_modules/ember-cli/lib/models/addon.js:174:25)
    at Class._treeFor (/Users/username/webapp/node_modules/ember-cli/lib/models/addon.js:118:31)
    at Class.treeFor (/Users/username/webapp/node_modules/ember-cli/lib/models/addon.js:97:19)

Then I noticed you use node-sass to compile the style sheets so just to tried to uninstall broccoli-sass and ember serve works fine and I get the compiled style sheets but now since I don't have broccoli-sass my styles aren't getting compiled.

Is there a way to overcome this issue? I can see that broccoli-sass has node-sass as a dependency so I am not sure why this happens.

When I try to import the sass file in the app.scss file I am getting this error in the terminal that is running the ember server

FSEventStreamStart failed
Error: FSEventStreamStart failed
    at null.<anonymous> (/Users/jordanriser/workspace/blog/client/node_modules/ember-cli/node_modules/broccoli-sane-watcher/node_modules/sane/node_modules/fb-watchman/index.js:84:23)
    at emit (events.js:107:17)
    at readableAddChunk (_stream_readable.js:163:16)
    at Readable.push (_stream_readable.js:126:10)
    at Transform.push (_stream_transform.js:140:32)
    at JSONStream._transform (/Users/jordanriser/workspace/blog/client/node_modules/ember-cli/node_modules/broccoli-sane-watcher/node_modules/sane/node_modules/fb-watchman/node_modules/json-stream/lib/json-stream.js:30:14)
    at Transform._read (_stream_transform.js:179:10)
    at Transform._write (_stream_transform.js:167:12)
    at doWrite (_stream_writable.js:301:12)
    at writeOrBuffer (_stream_writable.js:288:5)
unable to resolve root /Users/jordanriser/workspace/blog/client/bower_components/hammerjs: directory /Users/jordanriser/workspace/blog/client/bower_components/hammerjs is not watched
Error: unable to resolve root /Users/jordanriser/workspace/blog/client/bower_components/hammerjs: directory /Users/jordanriser/workspace/blog/client/bower_components/hammerjs is not watched
    at null.<anonymous> (/Users/jordanriser/workspace/blog/client/node_modules/ember-cli/node_modules/broccoli-sane-watcher/node_modules/sane/node_modules/fb-watchman/index.js:84:23)
    at emit (events.js:107:17)
    at readableAddChunk (_stream_readable.js:163:16)
    at Readable.push (_stream_readable.js:126:10)
    at Transform.push (_stream_transform.js:140:32)
    at JSONStream._transform (/Users/jordanriser/workspace/blog/client/node_modules/ember-cli/node_modules/broccoli-sane-watcher/node_modules/sane/node_modules/fb-watchman/node_modules/json-stream/lib/json-stream.js:30:14)
    at Transform._read (_stream_transform.js:179:10)
    at Transform._write (_stream_transform.js:167:12)
    at doWrite (_stream_writable.js:301:12)
    at writeOrBuffer (_stream_writable.js:288:5)
unable to resolve root /Users/jordanriser/workspace/blog/client/bower_components/ember-cli-moment-shim: directory /Users/jordanriser/workspace/blog/client/bower_components/ember-cli-moment-shim is not watched
Error: unable to resolve root /Users/jordanriser/workspace/blog/client/bower_components/ember-cli-moment-shim: directory /Users/jordanriser/workspace/blog/client/bower_components/ember-cli-moment-shim is not watched
    at null.<anonymous> (/Users/jordanriser/workspace/blog/client/node_modules/ember-cli/node_modules/broccoli-sane-watcher/node_modules/sane/node_modules/fb-watchman/index.js:84:23)
    at emit (events.js:107:17)
    at readableAddChunk (_stream_readable.js:163:16)
    at Readable.push (_stream_readable.js:126:10)
    at Transform.push (_stream_transform.js:140:32)
    at JSONStream._transform (/Users/jordanriser/workspace/blog/client/node_modules/ember-cli/node_modules/broccoli-sane-watcher/node_modules/sane/node_modules/fb-watchman/node_modules/json-stream/lib/json-stream.js:30:14)
    at Transform._read (_stream_transform.js:179:10)
    at Transform._write (_stream_transform.js:167:12)
    at doWrite (_stream_writable.js:301:12)
    at writeOrBuffer (_stream_writable.js:288:5)

I am only getting this when trying to import ember paper, I made sure to install broccoli sass first and then ember paper but when I get to the import step I get this error.

Let's add tests!

• paper-checkbox
• paper-radio
• paper-sidenav
• paper-nav-container
• paper-sidenav-toggle
• sidenav custom events initializer
• paper-backdrop
• paper-button
  • sends action
• paper-card
• paper-content
• paper-divider
• paper-icon
• paper-list / paper-item / paper-tile-left / paper-tile-content
• paper-switch
• paper-text
• paper-toolbar
• base focusable
• ripple mixin
• events mixin (also access its need)
• flex mixin (also access its need)

Common tests:

• Test tagname and class for all components.

Scroll broken here -- http://miguelcobain.github.io/ember-paper/#/typography
Probably because of sidemenu