search

meanjs / mean

MEAN.JS - Full-Stack JavaScript Using MongoDB, Express, AngularJS, and Node.js -
http://meanjs.org
MIT License
4.87k stars 1.98k forks source link

Upgrading to use Material Design #369

Closed roboflank closed 8 years ago

roboflank commented 9 years ago

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 commented 9 years ago

I suggest we use angular-material.

ilanbiala commented 9 years ago

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

roboflank commented 9 years ago

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

amirmo commented 9 years ago

angular-material +1 :+1:

aarosil commented 9 years ago

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

angular-material ++ [image: :+1:]

— Reply to this email directly or view it on GitHub https://github.com/meanjs/mean/issues/369#issuecomment-74982213.

andresmanz commented 9 years ago

Yeah, that would be awesome. +1

SOSANA commented 9 years ago

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

roboflank commented 9 years ago

Yeah,as an option in the generator

ilanbiala commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

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

ilanbiala commented 9 years ago

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

roboflank commented 9 years ago

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 commented 9 years ago

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 https://github.com/meanjs/mean/issues/369#issuecomment-78223243.

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

lirantal commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

+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 commented 9 years ago

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 commented 9 years ago

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

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

gsavoie commented 9 years ago

+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.

roboflank commented 9 years ago

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. :+1:

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 commented 9 years ago

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 commented 9 years ago

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

ilanbiala commented 9 years ago

@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 commented 9 years ago

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 commented 9 years ago

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

ilanbiala commented 9 years ago

Yes, that is agreed. Functionality before a redesign.

mg1075 commented 8 years ago

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 commented 8 years ago

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 https://github.com/meanjs/mean/issues/369#issuecomment-164786099.

mg1075 commented 8 years ago

@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

roboflank commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

PierreBrisorgueil commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

@mleanos Only this https://github.com/meanjs/mean/pull/1300#issuecomment-225118728 ( as said in the comment)

lirantal commented 8 years ago

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 commented 8 years ago

@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 !