Giters

miguelcobain / ember-paper

The Ember approach to Material Design.

Home Page:http://miguelcobain.github.io/ember-paper

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Update components to be on par with angular material v1

miguelcobain opened this issue · comments

commented

Angular material has reached v1.0.0.
It is now a good time for us to update ember-paper to be on par with angular material.

Component List

Components should be updated using the automatically-imported Angular Material stylesheets. See
Angular Material v1.0.6 for reference: https://github.com/angular/material/tree/v1.0.6

How to get started

For each component in the above list, one should:

  1. do your work in a branch based on the master branch.
  2. angular-material 1.0 styles are now included. Check if we need to update our markup to conform the styles (the "hbs" part).
  3. Double check for missing or buggy functionality (the "js" part, you can use the docs, the dummy app, to quickly test 1 and 2).
  4. use new ember features when applicable (e.g closure actions, contextual components, ddau in general).
  5. write/review tests. convert unit to integration tests. check angular material tests to make sure we're not forgetting anything.
  6. update the docs if necessary. The website hosted at http://miguelcobain.github.io/ember-paper/ is the "dummy" app in the tests/ folder. It's a regular ember application. Don't waste too much time on docs for now. We'll update the docs later using angular material docs for inspiration, where applicable.
  7. document changes, especially breaking changes if any, in CHANGELOG.md (see other examples there)

Example commit (paper-progress-circular): 1a9b641
Try to follow the same style.

Current work for ember-paper v1 is being done at master Reference in issues to branch wip/v1.0.0 now refer to master as the wip branch was merged into master.

FAQ

See this comment for some more info: FAQ

commented

Does updating also mean including closure actions?

commented

@SirZach Sure! Just added "use new ember features when applicable (e.g closure actions)" as a part of the update process.

commented

@miguelcobain if you can describe how you would best like to see that implemented, I'll give a stab at a PR. I know you like the ember-actions(?) addon that you're using ember-leaflet.

commented

@SirZach A PR that uses ember-actions will be accepted, of course. People could use them immediately. However, feels easier if that was to be made part of the update process.

commented

Will this lead to breaking changes? If so can we make an effort to document them with a clear migration path?

commented

@joukevandermaas It may lead to breaking changes or may not. I'm not into angular 1 changes yet.
But good point I'll add that as a part of the update process.

commented

@miguelcobain do you want to work from the 1.0 branch or the 1.0.1 branch that was released a couple of days ago?

commented

Currently working for 1.0.0 release. Shouldn't be hard to take it to
further patch versions later (1.0.x).

A sáb, 19/12/2015, 23:28, James Dixon notifications@github.com escreveu:

@miguelcobain https://github.com/miguelcobain do you want to work from
the 1.0 branch or the 1.0.1 branch that was released a couple of days ago?

—
Reply to this email directly or view it on GitHub
#249 (comment)
.

commented

thanks, @miguelcobain. before I start, anything special when bringing over the style sheets -- literally just a copy/paste or is there anything else that needs to be done to prep for EP?

commented

One of the main features of ember-paper 1.0 will be the automatic pulling
of angular material stylesheets. So you won't need to copy paste anything.
Just "import" it.

A dom, 20/12/2015, 00:23, James Dixon notifications@github.com escreveu:

thanks, @miguelcobain https://github.com/miguelcobain. before I start,
anything special when bringing over the style sheets -- literally just a
copy/paste or is there anything else that needs to be done to prep for EP?

—
Reply to this email directly or view it on GitHub
#249 (comment)
.

commented

Styles are now being imported from angular material directly: d001c4a

Goodbye copy pasting and version inconsistency!

Current work being done in the wip/v1.0.0 branch.

@mike1o1 can I count on you to review theming? Colors seem a bit broken with AM v1.0.0 styles.

commented

Awesome work! I won't be able to work on this until the weekend, but I'll take a look then. 👍

commented

@miguelcobain how about converting components into pod structure, hbs next to the components js

commented

@xomaczar That would be awesome. Is that possible in addons?

commented

Yes, just do ember g component --pod my-comp and it'll set it up.

commented

pod discussion at #82

commented

Also, can 1.0 make use of contextual components (2.3+)?

commented

@knownasilya Yes, for a couple of reasons:

  • by the time ember-paper v1 is done, contextual components will hopefully be widespread
  • if backwards compatibility is desired, there is a way to provide specific templates for lower ember versions

Nevertheless, I think we should discuss the use of contextual components on a per component basis.

commented

I was able to get layout working, and better handling off some themes for non-standard names, such as foreground and background. This fixed the issue with md-content not pulling in the correct colors, so now the demo page looks much nicer!

commented

Updated list with completed RippleMixin and Icons, all done in #275

PS. great work on the dynamic import of angular css

commented

@miguelcobain Just noticed this when I tried to install ember-paper#wip/1.0.0 to another app:

Does not happen when I use the development version of ember-paper, but only when I try to install wip to an existing app:

peec@peec-virtual-machine ~/Projects/app $ ember serve
version: 1.13.8
undefined is not a function
TypeError: undefined is not a function
    at Class.module.exports.treeForStyles (/home/peec/Projects/app/node_modules/ember-paper/index.js:116:24)

Couldn't figure it out as im not familiar with the build process

commented

There are plenty of PRs and commits to take inspiration from.
People that were thinking about contributing to this huge milestone in material design for ember: you can take a look at previous commits and that will make your life easier.

commented

Since 2b483d2 ember-paper has integrated ember-suave. So, the next PRs will need to conform the codestyle, or you get an error. Neat!

commented

@miguelcobain we are planning to use ember-paper and angular-material in our organization and started doing some initial work. We were thinking on how to keep both repos in sync and I luckily found this thread. I'm really delighted to see that you are working towards reusing angular stylesheets directly. I tried building out of this branch and see that lot of components still doesn't work. Not sure how much I can contribute, but wanted to check, if this is because of stylesheet issues or more? I see that there are no ember sass files (except color-pallette and default-theme) any more. Is it going to be that way (no more css) or are you planning to add some stylesheet overrides to fix the issues? Or if the direction is to update javascript and hbs files to use the angular stylesheets?

It would really help if I could get some direction on this and also some tentative timelines on when we could expect a release of this version.

commented

@jaichandra

I'm really delighted to see that you are working towards reusing angular stylesheets directly.

Historically, ember-paper always used angular material stylesheets. The difference with 1.0.0 is that:

  1. stylesheets are now pulled in directly through npm (previously we had to copy paste and find-replace them into the project)
  2. stylesheets now get version-locked. This means that we make sure that we use styles from the same version. Previously we could copy paste styles from different angular material versions and it was hard to keep track of inconsistencies

I tried building out of this branch and see that lot of components still doesn't work.

It is normal. This is a wip (work in progress) branch. That happens because we now pull in the styles from angular material 1.0 but we still didn't update the ember components to conform those style updates. In this issue you can see a list of completed components. Those should work fine.

I see that there are no ember sass files (except color-pallette and default-theme) any more. Is it going to be that way (no more css) or are you planning to add some stylesheet overrides to fix the issues?

The idea is to not write any styles. Angular material's styles are maintained officially by google. That means that we're as close as possible to the spec without having maintenance nightmares (writing so much components is already an herculean task, imagine if we had to style components as well).

Or if the direction is to update javascript and hbs files to use the angular stylesheets?

This is exactly what this issue is about: updating current ember components to conform the latest angular material stylesheets. It is a good time for that now that angular material reached v1.0. I expect some more stability from now on.

Not sure how much I can contribute

This is the correct issue for that question. Just pick a component and follow the "How to get started" guide in this issue!
If you need any ad-hoc guidance, me and other users are at the #e-paper channel at ember's slack.

we are planning to use ember-paper and angular-material in our organization

It would be best for both if we joined forces.

It would really help if I could get some direction on this and also some tentative timelines on when we could expect a release of this version.

It is very difficult to predict a release date or a timeline. But considering the current activity, maybe two/three months? I hope more people jump in because I believe ember-paper v1.0.0 will be a game changer in the ember landscape for building UIs.

commented

Thanks @miguelcobain for the detailed response. helps a lot.

commented

I think we should start using getAttr instead of get for attributes. Right now, using just get works because of the attributes proxy. I now there's this article by locks stating we shouldn't get the attrs hash directly. However, getAttr helps us enforce one-way-bindings and makes variables more explicit in our code base.

commented

@jaichandra I'm really glad that you were considering using Ember Paper in your organization. I wanted to follow up and see how things were going with that effort? I had to take the same considerations into account before adopting it at my organization. Are there any major blockers that you've run into so far?

Ember Paper has been gaining a lot of momentum, and community contributions are still welcome to help get ember-paper@1.0.0 shipped. If you haven't joined already, I'd like to invite you to also connect with the Ember Community #ember-paper channel.

commented

@chbonser We can hide it behind an officially maintained component, but I do this for now:

hbs: <md-subheader class="md-primary">Unread Messages</md-subheader>

commented

But for anything more than static styles, we'll have to see about tying that into a pattern for "sticky" items.

commented

Do we want to add Chips to this list? #267 it has been rebased and will probably pass tests if the PR is reopened.

The only current issue with that PR at the moment is that Autocomplete seems to be broken. It's broken on the main Autocomplete demo page as well so it's not something silly I'm doing 😂

commented

Quite close to milestone and things looking quite solid.
Looks like its time for an alpha release for the cli users who would like to test drive?
Thanks

commented

@v3ss0n there are already alpha releases. :)

commented

how to get them on CLI ?

commented

i mean 0.2.14 is still 0.2x release right? not after new 1.0x branch merged , right?

commented

@v3ss0n Correct.

Follow instructions on website to install latest version (the main website runs on alpha).
To install an alpha release ember install ember-paper@1.0.0-alpha.1 should do it.

commented

thanks gonna try now.

commented

@miguelcobain it doesn't look like v1.0.0-alpha.1 has been published to npm, so ember install will not work unless you reference the git rep: ember install miguelcobain/ember-paper.git#1.0.0-alpha.1

commented

@steven-ferguson just use master version right now. it is much improved and stable ember install miguelcobain/ember-paper

commented

Can you do something similar for the latest release? Create a milestone document what needs to be done to reach 1.0.0 and we can all pitch in?

commented

@anthonycollini not sure I understand. This is the document to reach 1.0. we didn't reach it yet (although we're close).

commented

@miguelcobain Can you update the reference in "Tabs (@mellatone in #314)" in the top comment, to point to #578 ?

commented

@saerdnaer done. thanks.

commented

Just wanted to check in here - read most of this thread, but see no activity here in the last several months - totally cool, everyone has lives! :-) Just wanted to ask how the 1.0.0 release is coming, and how everyone feels - is it close? This-year-close? Next year perhaps? Just checking, no worries, just curious. Great work everyone!

commented

@josiahbryan It might be closer than you think. No one's commenting in this thread but the OP is being updated.

1.0.0-beta.1 was released 18 days ago and went into 1.0.0-beta.2 3 days ago.

I consider the current release to be fully stable and am using it in production and I know many others are too. #738 (comment)

commented

Wow, good job all! Thanks for the input, good to hear! I'll seriously consider it then for my next project for sure.

Quick question, since you and others are using it in prod quite successfully - does it play nice with bootstrap then? Or is bootstrap and this project (and styles) mutually exclusive?

commented

Hmm i guess they are both class based so you might be able to use them both. Personally I'd just use one though since they accomplish the same task. Using 1 means a more cohesive style for your app and doesn't force your users to download 2 separate styling frameworks.

There's things like this out there too https://mdbootstrap.com/material-design-for-bootstrap/

commented

Yeah, tried m-d-for-bs but ...yeah...felt very poorly done in practice and left me gun-shy of material design in general....that is, until I started my latest project, based on bootstrap, and found myself constantly trying to emulate the navbars, buttons, side menus, input fields, et al - all manually, through my own CSS modifications on top of bootstrap. Then I realized (just today), that even though I started with a bootstrap base, I was constantly moving closer and closer to a material look and feel for it since I kept trying to emulate native android apps.

At this point, I'm too invested and too close to beta launch of Sept 1 (per management) on the project to switch to ember-paper, but the next project we start here, I absolutely will try ember-paper with at least one of the betas, even if not full 1.0.0 yet.

Thanks for the space to rant, sorry to clutter the thread. All that is to say, good work guys, and this looks like an awesome project. Stoked to get my hands dirty with your {{paper}} components in my hbs in my next project. Cheers!

commented

@jaichandra we are using it in production for a mobile + Desktop app medical consultation chat platform for medical consultation. We have it running : more than 10K monthly active users.Not in english tho.
https://play.google.com/store/apps/details?id=co.ondr.chat

commented

What stylesheets does 1.0.0 use? Are they the latest angular stylesheets (https://material.angular.io/)?

commented

@anthonycollini correct.