Skip to content
This repository has been archived by the owner on Aug 30, 2021. It is now read-only.

Upgrading to use Material Design #369

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

Upgrading to use Material Design #369

roboflank opened this issue Jan 19, 2015 · 41 comments
Labels
enhance:feature feedback:discuss
Milestone
Backlog

Comments

@roboflank
Copy link

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

I suggest we use angular-material.

@ilanbiala
Copy link
Member

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

@ilanbiala ilanbiala self-assigned this Jan 24, 2015
@roboflank
Copy link
Author

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

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

amirmo commented Feb 19, 2015

angular-material +1 👍

@aarosil
Copy link

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

Yeah, that would be awesome. +1

@SOSANA
Copy link

SOSANA commented Feb 19, 2015

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

@roboflank
Copy link
Author

Yeah,as an option in the generator

@ilanbiala
Copy link
Member

@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 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 commented Mar 9, 2015

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

@ilanbiala
Copy link
Member

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

@roboflank
Copy link
Author

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

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

@mbukosky mbukosky mentioned this issue Mar 11, 2015
Closed
@lirantal
Copy link
Member

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

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

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

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

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

@gsavoie
Copy link

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.

@roboflank
Copy link
Author

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

+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

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

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

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
@simison simison mentioned this issue Sep 8, 2015
Closed
@mg1075
Copy link

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

@roboflank
Copy link
Author

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

@mg1075 mg1075 mentioned this issue Jan 30, 2016
Closed
@joshlongerbeam
Copy link

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

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

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

@sujeethk sujeethk mentioned this issue Sep 30, 2016
Merged
mleanos pushed a commit that referenced this issue Oct 10, 2016
@sujeethk @mleanos
feat(core): add notification feedback with angular-ui-notification (#…
607ed06 
…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 commented Oct 18, 2016 •
edited
Loading

@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 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 commented Oct 19, 2016 •
edited
Loading

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

@lirantal
Copy link
Member

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 commented Oct 19, 2016 •
edited
Loading

@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 subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhance:feature feedback:discuss
Projects
None yet
Milestone
Backlog
Development

No branches or pull requests