Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrading to use Material Design #369

Closed
wamburu opened this issue Jan 19, 2015 · 41 comments
Closed

Upgrading to use Material Design #369

wamburu opened this issue Jan 19, 2015 · 41 comments

Comments

@wamburu
Copy link

@wamburu wamburu commented Jan 19, 2015

The default notification and warning is kind of 'flat' i stumbled upon a fancy notification add on https://github.com/Salakar/angular-toasty. Trying to integrate this poses issue since i can't find the location of the attribute in the whole find system specifically the one rendering the result to the client.

@ilanbiala
Copy link
Member

@ilanbiala ilanbiala commented Jan 19, 2015

I suggest we use angular-material.

@ilanbiala
Copy link
Member

@ilanbiala ilanbiala commented Jan 24, 2015

@denzelwamburu did you take a look at the angular-material $mdToast API? Also, angular-toasty seems to be neglected.

@wamburu
Copy link
Author

@wamburu wamburu commented Jan 25, 2015

I have been trying to work around with material and seems its not that hard,the front end tags will need to be modified heavily.The angular-material will need to be installed as a module using bower then declared in the modules of angular,maybe something like that.I haven't successfully done one yet but am in the process

@wamburu wamburu changed the title Upgrading Notifications to Use ngToasty Upgrading to use Material Design Feb 5, 2015
@amirmo
Copy link

@amirmo amirmo commented Feb 19, 2015

angular-material +1 👍

@aarosil
Copy link

@aarosil aarosil commented Feb 19, 2015

+1
On Feb 18, 2015 5:06 PM, "amirmo" notifications@github.com wrote:

angular-material ++ [image: 👍]


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

@andresmanz
Copy link

@andresmanz andresmanz commented Feb 19, 2015

Yeah, that would be awesome. +1

@SOSANA
Copy link

@SOSANA SOSANA commented Feb 19, 2015

1+ Add me to that list, maybe we can just add it to build process as an option?

@wamburu
Copy link
Author

@wamburu wamburu commented Feb 21, 2015

Yeah,as an option in the generator

@ilanbiala
Copy link
Member

@ilanbiala ilanbiala commented Mar 9, 2015

@denzelwamburu I think we should start with porting over meanjs/mean to ngMaterial, and then moving the generator over. However, I think that's more appropriate for the next major version after 0.4, which hopefully will come along much quicker than 0.4 is.

@lirantal
Copy link
Member

@lirantal lirantal commented Mar 9, 2015

agree with @ilanbiala, and @denzelwamburu if you're up for the challenge we'll be more than happy if you want to take a look into it.

@amirmo
Copy link

@amirmo amirmo commented Mar 9, 2015

Going with ngMaterial = big time community exposure for meanjs
+1

@ilanbiala
Copy link
Member

@ilanbiala ilanbiala commented Mar 10, 2015

I've already worked with ngMaterial, so I can definitely help guide you, but it should definitely be off the 0.4 branch.

@wamburu
Copy link
Author

@wamburu wamburu commented Mar 11, 2015

Sure,i agree with all the suggestion.But it should not replace the bootstrap,it should be an option during installation in the generator.
I don't have that experience in ngMaterial but am ready to give it a try

@neilhanekom
Copy link

@neilhanekom neilhanekom commented Mar 11, 2015

I also using ngMaterial with the 0.4.0 branch. Obviously upgrading to
Angular 1.3 is required. This off course works great in Development mode. I
have picked up a few issues when minification is done through "grunt
build". Seems like $injector cannot pickup certain dependencies that being
injected. Dunno whether is due to ngAnnotate that is causing this.... If
any of you can help resolved this.. it would be great.

On Wed, Mar 11, 2015 at 10:35 AM, Denzel Wamburu notifications@github.com
wrote:

Sure,i agree with all the suggestion.But it should not replace the
bootstrap,it should be an option during installation in the generator.
I don't have that experience in ngMaterial but am ready to give it a try


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

Neil Hanekom
082 098 1180 (C)
neilhanekom1@gmail.com

@lirantal
Copy link
Member

@lirantal lirantal commented Mar 11, 2015

Let's leave this thread open and get back to it once we release 0.4, until then all efforts should focus on 0.4 getting out.

@darko-mijic
Copy link

@darko-mijic darko-mijic commented Mar 17, 2015

I suggest using Lumix (http://ui.lumapps.com/) instead of Angular Material. Lumix is also AngularJS implementation of material design.

My suggestion is also migrating forms to angular-formify (https://github.com/formly-js/angular-formly) with Lumix templates (https://github.com/formly-js/angular-formly-templates-lumx).

@britztopher
Copy link

@britztopher britztopher commented Mar 29, 2015

+1 for Angular Material. I also use this with the 0.4.0 branch. Lumix looks nice, however, there arent as many directives yet out of the box like AM has. Also, Google is pushing AM hard, and they are doing monthly milestones.

@max-mog
Copy link

@max-mog max-mog commented Mar 29, 2015

Lumix is pretty neat but nowhere close to maturity of Angular Material design.
Yes. AM is well supported and will be pushed even more by Google. Mean.js is based upon stable and supported libraries and going with AM supprts this idea also.

@britztopher
Copy link

@britztopher britztopher commented Mar 29, 2015

@spyhole i was thinking use the one backed by google found here:

https://material.angularjs.org/#/

@gsavoie
Copy link

@gsavoie gsavoie commented Apr 5, 2015

+1 for using Angular Material (the one backed by Google). I already started integrating it to a Meanjs project and it's been great yet. Some features still seems missing but it's moving fast.

@wamburu
Copy link
Author

@wamburu wamburu commented Jul 8, 2015

There has been some major updates in the Material Design Framework by Google which were announced at the I/O 15, am totally sold out to the idea of using it. 👍

There is another framework by google also - Details here - Material Design Lite (http://www.getmdl.io/) build with polymer components can also be of intrest.

@simison
Copy link
Member

@simison simison commented Jul 8, 2015

I'm using material.angularjs.org at one project and it's evolving quite fast. It's some extra work to keep up with the changes.

For Mean.js, I'd wait a little bit before moving to it. Perhaps when Bootstrap goes 4.0 and we'd anyway need to upgrade frontend framework, it would be good time to check this again?

@andreafdaf
Copy link

@andreafdaf andreafdaf commented Aug 7, 2015

+1 for material.angularjs.org, I'm using it and it is great! if a hand is needed I'm in ✌️

@ilanbiala
Copy link
Member

@ilanbiala ilanbiala commented Aug 16, 2015

@spyhole I checked out MDL a couple weeks ago, but I didn't notice any way to use it with Angular. Is there a specific page/part I'm missing?

@simison
Copy link
Member

@simison simison commented Aug 20, 2015

BTW Bootstrap 4.0 is in alpha now.

Angular-Material is still in flux (0.10.1). I'd stick with BS 3.0 for a while and see if Angular-Material gets more stable.

@lirantal
Copy link
Member

@lirantal lirantal commented Aug 21, 2015

Honestly I think we have other PRs to resolve before we rush into Bootstrap 4 or Material Design.
This can wait...

@ilanbiala
Copy link
Member

@ilanbiala ilanbiala commented Aug 24, 2015

Yes, that is agreed. Functionality before a redesign.

@ilanbiala ilanbiala added this to the Backlog milestone Aug 24, 2015
@ilanbiala ilanbiala removed their assignment Aug 24, 2015
@mg1075
Copy link

@mg1075 mg1075 commented Dec 15, 2015

ngMaterial should be optional via a generator rather than part of the default boilerplate. It is good, but an extremely opinionated way to go about building your application.

@max-mog
Copy link

@max-mog max-mog commented Dec 15, 2015

Please correct me if wrong, but ngMaterial has already been separated into
a different package called 'material' which you can find on mean.io
packages section.
That said bootstrap to a great extend has lost popularity and web is moving
towards adopting material design in many projects. And that's mainly
because the MD designs and NG directives are very well thought out...
On Dec 15, 2015 6:51 AM, "mg1075" notifications@github.com wrote:

ngMaterial should be optional via a generator rather than part of the
default boilerplate. It is good, but an extremely opinionated way to go
about building your application.


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

@mg1075
Copy link

@mg1075 mg1075 commented Dec 15, 2015

@max-mog ?
This project is mean.js, not mean.io.
http://stackoverflow.com/questions/23199392/difference-between-mean-js-and-mean-io

If you go with angular-material, it has its advantages and disadvantages; it looks to me that you are locked in with angular-material in a sort of "all or nothing" way if you choose it.

Yes, angular-material is up-and-coming and looks awesome. However, not everyone wants to use angular, and not everyone wants to use material design, whereas bootstrap does not necessarily lock you down the same way, and you can achieve some of the material design appearance using a bootstrap base but without locking in to angular material itself.

Do you have data for your assertion about bootstrap losing popularity? It looks to be popular on github.

It has the most stars on github:
https://github.com/search?q=stars:%3E1&s=stars&type=Repositories

And it still shows up (as of 12/15/2015) in the weekly trending repositories list.
https://github.com/trending?since=weekly

@wamburu
Copy link
Author

@wamburu wamburu commented Dec 16, 2015

I back @mg1075 , material design should be optional during installation, hence it should be injected in the generator. But it's true functionality first before redesign. The debate for whats hot or not shouldn't be here. I think it should be given to the user to decide during installation.

@mleanos
Copy link
Member

@mleanos mleanos commented Dec 16, 2015

I agree with @mg1075 & @denzelwamburu

Angular Material is nice, but it doesn't really have a place in a framework like MEANJS. This project isn't trying to solve UI/UX problems; it's strength lies in the back-end, and architecture.

I vote for leaving it out. Bootstrap is very flexible, and users can decide what type of front-end library they want to include.

@mleanos
Copy link
Member

@mleanos mleanos commented Dec 16, 2015

As for a toaster implementation @denzelwamburu, I've been using https://github.com/jirikavi/AngularJS-Toaster.git

The project seems actively maintained, and it's a rather simple implementation.

I didn't have any problems integrating this into the default MEANJS framework.

  1. installed using bower
  2. Added 'public/lib/angularjs-toaster/toaster.css' to my default assets client.lib.css config
  3. Added 'public/lib/angularjs-toaster/toaster.js' to my default assets client.lib.js config
  4. Added 'toaster' to my core.client.app config
  5. Added this <toaster-container></toaster-container> to the server layout above this line

Then all I needed to do was inject toaster wherever I needed it.

@joshlongerbeam
Copy link

@joshlongerbeam joshlongerbeam commented Mar 3, 2016

I'd like to throw angular-toastr into the ring of notification-contenders. I've been using it extensively in my production projects, it's very versatile, and it has thorough documentation. And unlike md-toast, it allows multiple, simultaneous and devastating defensive deep strikes toasts.

Also, I'd like to renew interest in this topic since Angular Material is now at version 1.0.6.

@mleanos, I get that MEANJS doesn't want to force the user to "opt-out" of Angular Material for UI. But at the same time, CSS-wise, I think col-xs-12 col-md-offset-4 col-md-4 is a large hassle compared to Angular Material's use of the flex attribute. So at the very least, it (or raw flexbox) should be considered for CSS over bootstrap.

Perhaps it could exist as a branch? Or would a branch so different cause too much burden to support? It would only be HTML changes I believe. I guess my underlying proposal is- how can it be prepared as a pre-made option for the MEANJS stack?

Edit: Note, I'm interested in replacing Bootstrap with Angular Material in a fork as a side project, regardless of the decisions made here, just so the option exists for beginning users.

@PierreBrisorgueil
Copy link
Contributor

@PierreBrisorgueil PierreBrisorgueil commented Apr 8, 2016

Hello, i'm agree too Angular Material have no place in a framework like MEANJS.

MeanJs is light today , it's perfect. On the other hand , a small css work to make the modules more sexy ... why not :), but it's just marketing ;). I would make a try, if I have time in the coming months.

On my side, i have a quick integration of http://krescruz.github.io/angular-materialize/ & http://materializecss.com/ in MeanJs for the moment, it's on my private gitlab. I reworked the design to be like gitlab design https://gitlab.com/explore/groups (but make disappear sidenav keeps my icons , like the old version of gitlab). So I have two services instead of Menus, Nav and SideNav.

it's not perfect yet, but I kept a version i improve. If some are interested , I could probably share. But it's complicated to keep it updated with the work done on MeanJS , but probably not impossible :)

@lirantal
Copy link
Member

@lirantal lirantal commented Aug 28, 2016

Closing this thread unless someone ( @PierreBrisorgueil @mleanos @denzelwamburu ) would actually like to propose a PR.

@lirantal lirantal closed this Aug 28, 2016
mleanos added a commit that referenced this issue Oct 10, 2016
…1532)

Added visual notification for user/article updates
angular-ui-notification config added to core client config
Notification idea from #369
@PierreBrisorgueil
Copy link
Contributor

@PierreBrisorgueil PierreBrisorgueil commented Oct 18, 2016

@lirantal @mleanos Hello again :)

Not a PR but I worked on a vesion (for me) with angular-material, it also integrates JWT token with our little fix @mleanos. Nothing is finished because of sidenav / headernav, it's just a test for the moment.

(i deleted materialize / angular-materiaize, more evolutions on angular-material, and a version one day for angular 2)

But you can have a look, it's not far behind the master. We could imagine a PR if you're interested.

http://romeanet.weareopensource.me/
https://github.com/weareopensource/roMEANet

@mleanos
Copy link
Member

@mleanos mleanos commented Oct 19, 2016

@PierreBrisorgueil Thanks for sharing the repo. How is the JWT stuff working out? Were you able to fix all the issues raised in #1300?

@PierreBrisorgueil
Copy link
Contributor

@PierreBrisorgueil PierreBrisorgueil commented Oct 19, 2016

@mleanos Only this #1300 (comment) ( as said in the comment)

@lirantal
Copy link
Member

@lirantal lirantal commented Oct 19, 2016

I would say that the only interest for the current MEAN.JS state is any updates for JWT support. Any major refactoring to change to material, es6, etc will wait for a much bigger MEAN.JS release.

@PierreBrisorgueil
Copy link
Contributor

@PierreBrisorgueil PierreBrisorgueil commented Oct 19, 2016

@lirantal Okok, I understand! I will still continue to angular material on my side, for personal needs. I would integrate your changes in my version as often as possible to keep it updated (on https://github.com/weareopensource/roMEANet).

I'll let you know, and if one day you want to go in this direction, I should be able to make a PR if I have time. We can start it now if you're interested.

I think that might be a good thing for the customization of the project and do a faster starter.

Hello, i'm agree too Angular Material have no place in a framework like MEANJS.

I've changed my mind !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.