Generator-jhipster: Migrate to Bootstrap 4 and refresh the UI

[deepu105]

This is tracker for Bootstrap 4 migration and a minor UI refresh
The discussion started here
The bootstrap team is going full fledged to release v4 see this hence we can start migration as well

The main focus would be to get this done for the ng2 client sub generator first, all work will be done on the angular-2 branch. then we see if we can migrate the ng1 sub generator to this as well (but ui-bootstrap might be a blocker)

So for now we need to do the below for client-2

• [x] Add bootstrap 4
• [x] _Decide on what font library to use - [ Bootstrap 4 don't have support for glyphicons]_ @deepu105 check this
• [x] Revamp application to follow bootstrap 4 completely
• [x] Remove all bootstrap 3 dependency
• [x] Polish and Publish for client-2

I'll add in ideas for UI refresh here as well, this is up for discussion and will make it based on the feedback from the core dev team and ofcourse the community.

• [ ] Sidebar collapsible menu - should have a configurable way to set initial closed/open status as different people would have different needs. will be collapsed by default in mobile.
• [ ] User avatar support, and user info widget on the navbar. linked to #4095
• [x] A custom JHipster bootstrap theme if possible. ofcourse it shouldn't have any huge customization and should be drop in replaceable with any bootstrap theme
• [x] Better page layouts, remove wells

work will happen here https://github.com/jhipster/generator-jhipster/tree/ng2-bs4

[sendilkumarn]

@deepu105 Adding bootstrap 4 disrupts UI. Navbar is completely destroyed.

You want to amend navbar or add in a side bar now ?

I will submit a WIP. Have a look.

[deepu105]

Ya I tried as well thats why didn't commit that. It needs some work. May be
ill create a new branch and we can work on that

Thanks & regards,
Deepu

On 26 Sep 2016 09:05, "Sendil Kumar N" [email protected] wrote:

I will submit a WIP. Have a look.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/4110#issuecomment-249472655,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF8keIAdVID5Scdiecm3hU-P3nnMPks5qtz18gaJpZM4J46Ih
.

[codespicelabs]

i've been waiting for JHipster 4 release since the milestone was created but what do you guys think about https://github.com/angular/material2
so if you gonna use NG2 why not to use some kind of 'native' UI for Angular 2 from the NG core team.
Surely it still in alpha but most of important components are ready and very 'sexy' IMO

by the way, look at https://github.com/valor-software/ng2-bootstrap/ it may helps

[wmarques]

@codespicelabs I'm also a big fan of the material design but I think, for now at least, we should follow on bootstrap as it will be much faster to migrate than moving to material. Also, people are most used to the bootstrap grid system.

Maybe in further versions we could let the user choose his front lib (boostrap/material) or do a survey to check if our users prefer bootstrap or material :)

[gabrielfreire]

I personally prefer bootstrap

[jdubois]

Let's not mix up stuff: this is a ticket on Bootstrap, we've always used Bootstrap and have excellent experience and feedback on it, so let's stick to it.
Migrating to something else would be another ticket/discussion, and we don't have the time right now as we should focus first on Angular 2.

[deepu105]

Migration to material2 is another head ache. Im already very frustrated
with ng2 to be honest so nope, we don't want to rewrite everything again

Thanks & regards,
Deepu

On 2 Nov 2016 22:02, "Julien Dubois" [email protected] wrote:

Let's not mix up stuff: this is a ticket on Bootstrap, we've always used
Bootstrap and have excellent experience and feedback on it, so let's stick
to it.
Migrating to something else would be another ticket/discussion, and we
don't have the time right now as we should focus first on Angular 2.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/4110#issuecomment-257919965,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF1yJX-WFNLOlH_8Z5axHIkrAzbsrks5q6LsOgaJpZM4J46Ih
.

[raulgomis]

I agree, it's better to continue with Bootstrap as it has proven to be a great framework for frontend development. Have you considered using AdminLTE template for the redesign? It has a great work behind in terms of CSS, JS, HTML that we could benefit, saving time in the redesign.

[gmarziou]

AdminLTE uses Bootstrap 3 so far.

[jdubois]

@raulgomis we focus on the standard, vanilla Bootstrap. Then many people, including me, change the default theme to something that they like better. I use AdminLTE quite often in fact.
JHipster is just for getting you started, and gives you the tools to do more. Otherwise it would become too bloated, which is also a common criticism.
Now sorry to be annoying but I would like this ticket to keep its focus: this is for migrating to Bootstrap 4. We can have discussions on other options via the normal channels, including creating a specific "feature request" ticket.

[jdubois]

I've add a look at Bootstrap 4, and I would like to postpone this:

• It is still an alpha release, and it has been in alpha for more than one year. I don't think this has the level of quality we require.
• It breaks a lot of stuff, as @deepu105 mentioned, so this is going to be a lot of work: I don't think we can do this work with our Angular 2 migration. It's just changing too much things at the same time.

Could we close this, and we'll work again on it when Bootstrap 4 reaches a Release Candidate?

[gzsombor]

Of course, if someone contributes the implementation for Bootstrap 4, that would be an entirely different conversation :)

[deepu105]

We use ng2 version of angular bootstrap which needs BS4 to work well else
we would have some ugly screens here and there when using any widgets see
the metrics screen for example.
BS4 is moving forward fast now as they have frozen BS3 dev to get BS4 going
so I think this will be releases soon. So I would like to do this atleast
before our final release. our alpha can go without this hence please keep
this open

[jdubois]

OK but I didn't find any broken screens with BS 3. I will have a closer
look.

[ramzimaalej]

@deepu105 any help you need on this story?

[deepu105]

Yes please take a look at the branch. Generate an app with it and fix whatever you can

[jdubois]

@ramzimaalej and don't forget to tell your colleagues to put JHipster in the next technology radar :-)

[dimeros]

Hi @ramzimaalej,

Are you working on it? I was thinking of working on the navbar.

Regards

[dimeros]

Testing with choices:
use Libsass: No
enable internationalizen support Yes

Languages tab does not work. I tested it using one only language (changing the ngIf condition).
Bower install was not valid and did not fetch bower files.

Next step: I would like to correct the v4 boostrap scss files when selecting the option 'Use Libsass Yes' and proceed with Glyphicon's issue.

[jdubois]

Which icon library should we use? Now that Glyphicon is removed, maybe it's better to switch to Font Awesome, which has a lot more icons, and which most people use.
Can people vote on this comment? Thumb up for Font Awesome, thumb down for Glyphicon

[gmarziou]

Font Awesome is definitely the way to go especially with all the features that will be released with v5 due to its successful kickstarter.

[deepu105]

Yes font awesome is the best

Thanks & regards,
Deepu

On 26 Nov 2016 4:54 p.m., "Gaël Marziou" [e-mail] wrote:

Font awesome is definitely the way to go especially with all the features
that will be released with v5 due to its sucessful kickstarter.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/4110#issuecomment-263070530,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF-QeS6Ukw3LWGvYUGJbYL0yGd800ks5rCFYjgaJpZM4J46Ih
.

[lluiscanals]

Font awesome too!

[dimeros]

I tried to rebase from angular-2 to this branch https://github.com/dimeros/generator-jhipster/tree/ng2-bs4-rebased-angular-2 but it cannot load the auth-jwt.service. I can search for it later.
Font awesome is a good approach. I added this library and I replaced all the glyphicons (except of glyphicon tower) with similar of font awesome.

Any comments?

Quick question: Sass should also be supported for font awesome, right?

[ddbullfrog]

FontAwesome awesome！

[deepu105]

Yes sass can be supported but not urgent

Thanks & regards,
Deepu

On 27 Nov 2016 8:26 p.m., "ddbullfrog" [e-mail] wrote:

FontAwesome awesome！

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/4110#issuecomment-263141431,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlFzeYD2r6tUXLT4JgsdYvv2KDrvEUks5rCdlQgaJpZM4J46Ih
.

[dimeros]

The rebased branch https://github.com/dimeros/generator-jhipster/tree/ng2-bs4-rebased-angular-2 works ok with these choices:

Jwt authentication enabled
Libsass disabled
internationalization support enabled

But I cannot pull request this branch from my forked branch to yours. How can we proceed?

[sendilkumarn]

@dimeros Let me have a look at this. 👍

[dimeros]

I think that it needs a rebase with webpack. I am planning to create a branch with the new changes.

[dimeros]

Ι have created a new pull request. This is tested with settings

• Libsass disabled
• internationalization support enabled

[ramzimaalej]

@dimeros the build fails, https://travis-ci.org/jhipster/generator-jhipster/builds/180325332

[dimeros]

I think that protractor is not installed yet to angular-2 branch. That's why the build fails.

[dimeros]

Changes rebased to angular-2 branch: https://github.com/jhipster/generator-jhipster/pull/4592

[dimeros]

I am trying to work on sass generation of bootstrap and font-awesome. I created an example before proceed to a pull request:
https://github.com/dimeros/jhipster-ng2-sass

@deepu105 could you have a review on this?

My concern is that even if I am using the default .bootstraprc. I have commented the pager and the label components at the moment because it does not work.
Furthermore do we agree with the custom sass paths?

[deepu105]

I really tight on schedule. can you do it as a PR so that I can review just
the changes you have made?

Thanks & regards,
Deepu

On 7 Dec 2016 4:36 p.m., "dimeros" [e-mail] wrote:

I am trying to work on sass generation of bootstrap and font-awesome. I
created an example before proceed to a pull request:
https://github.com/dimeros/jhipster-ng2-sass

@deepu105 https://github.com/deepu105 could you have a review on this?

My concern is that even if I am using the default .bootstraprc. I have
commented all the Bootstrap scripts at the end because there are not loaded
correctly. Furthermore do we agree with the custom sass paths?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/4110#issuecomment-265479600,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABDlF5CCz-KHZoIaJj67i2Of10xn4Kmfks5rFtKMgaJpZM4J46Ih
.

[dimeros]

Ok. I made a pull-request https://github.com/jhipster/generator-jhipster/pull/4630. Let's discuss it there.

[ramzimaalej]

@here I'm trying to work on this item (User avatar support, and user info widget on the navbar. linked to #4095), but there seem to be an issue with social buttons. Social login is not working as nothing happens when I click on social buttons. Can you guys give me guidance on how to solve this ?

[deepu105]

@ramzimaalej I myself have not tried that option for a long time. Did you setup the social login token and stuff required? @flaviencathala since you worked on migrating social login can you guide @ramzimaalej

[gzsombor]

There were recent fixes on social buttons, have you pulled the latest code @ramzimaalej ?

[ramzimaalej]

@gzsombor yes I have pulled latest from master.

[ramzimaalej]

nvm guys, I got it working after merging master from upstream and creating a new app.

[ramzimaalej]

For the Avatar feature, here is my PR: https://github.com/jhipster/generator-jhipster/pull/4772

[jdubois]

Let's not aim for something too complex, I'd like to release JHipster 4 at some point -> for me, once #4772 is merged, we should close this

[deepu105]

@jdubois yes indeed this is never a blocker it was just a wishlist

[jdubois]

Great, let's do it :-)

[deepu105]

closing this as the core todo are done.

[pankajppr]

@deepu105 Does the latest version of Jhipster support material design?

[gmarziou]

No and there's no plan to do so as it would require to rewrite all templates and some components too.

[qiuwei]

It would be great if there is support for sidebar. The entites can show up there.

[gmarziou]

@qiuwei please don't comment on an issue that was closed 9 months ago.
If you have a feature request then please open a new issue with more details or propose a pull request.