Update to newest Bootstrap 4

[tywrenn]

This has been pushed back for 4 years (as the latest revision we are on is from 2015) and it has now come to the time to address it - we should now begin updating to Bootstrap 4. This will take awhile as some frameworks may break during this transition to Bootstrap 4.

New things expected with Bootstrap 4:

• Bootstrap 4 uses flexboxes instead, making content spacing act different than Bootstrap 3
• Glyphicons are no longer implemented in Bootstrap and should be replaced with the FontAwesome framework as recommended by Bootstrap (FontAwesome can be installed here)
• Navbars are now using flexbox as well and may behave differently
• Tons of new components were added to Bootstrap 4, including some great utility CSS classes like w-50 to turn the width to 50%
• Bootstrap 4 no longer supports IE8 or IE9 with this transition (yet it's best to transition away from Internet Explorer anyways)
• Offsetting columns were renamed. e.g. Bootstrap 3 says col-md-offset-4 while Bootstrap 4 says offset-md-4
  For some more differences between the two frameworks, check out this article.
  If anyone is having any issues with any Bootstrap code contact me.

This issue is being actively sponsored by PEER Technologies PLLC.

To Do List:

• Replace Old Code: Replaced pull-left and pull-right with new float-* class
• Replace Old Code: Removed outdated col-xs-* and replaced with new col-* class
• Replace Old Code: Removed outdated col-*-offset-* class format with new offset-*-* class format
• Replace Old Code: Replaced table-condensed class with table-sm
• Replace Old Code: Replacedbtn-xs class with btn-sm
• Replaced the well class with the jumbotron class as wells aren't supported anymore (This can also be fluid with jumbotron-fluid)
• Signer API fixed from migrating to Bootstrap 4
• Redesigned OpenEMR themes to work around Bootstrap 4 (using docs on themes)
• Replaced most theme colors with Bootstrap colors
• RTL works fine
• Reformatted CSS and JS files from /interface/modules/zend_modules/public

Things I will need help from the OpenEMR community in:

• Replace outdated inline CSS styling with new Bootstrap variables
• Help with fixing nav-pills as most of these navigations are using very outdated code that might break if changed
• Help with replacing visible-* classes as they aren't supported anymore
• Help sorting out CSS and SCSS conflicts while merging things into the core CSS
• Angular dependency BS4 update. (Not gonna do, must update angular first using upgrading guidelines.
• Other code fixes.

Things that will be in a separate pull request in the future:

• Moving MedEx CSS into core themes
• Removing outdated CSS and JS files from /interface/modules/zend_modules/public
• Adding more themes

[tywrenn]

There is Bootstrap RTL yet it should be temporary until the full transition occurs. @mdsupport might also have some suggestions.

[sjpadgett]

First item to be addressed is to figure out where bs4 is currently being used so we can ensure we don't break anything bringing in latest bs4 release.

[sjpadgett]

@zbig01 You may have some comments on this matter.

[sjpadgett]

We don't current have BS4 in our dependency tree so checking is mute. I'm going to modify header class to allow BS4 include while ensuring BS3 is not included at same time.
This way we'll be ready for the carefully thought through leap.

[bradymiller]

You know you just want to drop BS3 and put BS4 in it's place to see what happens :)
Maybe we'll get lucky.

[sjpadgett]

lol, you know luck has not been my friend lately! I will however give it a try on my test server.

[tywrenn]

I just tested 4.3.1 with RTL 4.3.1-6 on my Virtual Machine and it runs fine, you also have to have popper.js installed as well.

[sjpadgett]

Okay, i'll get the dependencies squared away in header class. Tonights dev demo reset will include.

[mdsupport]

you also have to have popper.js installed as well.

We have been using standard bootstrap.bundle.min.js which include Popper but not jQuery.

[mdsupport]

The Migration page of BS4 documentation is a must read for anyone considering BS4. The differences between BS3 and BS4 are sometimes subtle - e.g. .col-xs-6, is now .col-6.

Based on our expectation of testing efforts involved, it may be prudent to let BS3 and BS4 be selectable - maybe add bootstrap4 as the header component explicitly invoked by migrated pages.

[bradymiller]

It would be interesting to see what happens on a full conversion (we could set up a Up for Grabs demo to a PR that does this) to give us an overall take on how much things break. If we are lucky, we may get away with this (we've got several months until next release to clean up any bugs). Otherwise we may get stuck in the position where we are indefinitely trying to convert/test all scripts (we may need to do this, but would nice if we didn't need to do this).

[sjpadgett]

Menus and custom menus have to be touched. Font-sizes and padding seem different and more of course.

• maybe add bootstrap4 as the header component explicitly invoked by migrated pages.

Was my initial thought. Problem I see here is we'd need tandem theme and css files until done. However, that's doable where after all scripts are bootstrap 4 we simply delete old BS3 css files.

It would be interesting to see what happens on a full conversion

This would work if we got all hands on deck and freeze development till done.

I think before we move to BS4 we need to decide what we gain in doing so. I'm not experienced enough with BS4 to have an opinion accept it is active in development, I believe.
I was hoping @mdsupport who has been doing BS4 in their version for awhile now could lend some wisdom on this point.

[tywrenn]

I think before we move to BS4 we need to decide what we gain in doing so. I'm not experienced enough with BS4 to have an opinion accept it is active in development, I believe.
I was hoping @mdsupport who has been doing BS4 in their version for awhile now could lend some wisdom on this point.

@sjpadgett I've been coding in Bootstrap 4 for awhile so I think I can help with that

[tywrenn]

Also i've just tested Bootstrap 4 without any RTL on it and it seems stable and just needs a few fixes here and there

[sjpadgett]

Okay @tywrenn ,
Why don't you go ahead and get your openemr branch current then open a PR. Call it something like refactor to BS4.
I'll then push the modified dependencies config to your branch. Afterwards @bradymiller can set up a Up for Grabs.
How do you want the default bootstrap to load. As is, bootstrap 3 where you may select Bootstrap4 in script header or default to bootstrap 4?
What do you think?

[tywrenn]

Since Bootstrap 4 runs fine without Bootstrap 3 (more testing needed though) we should just update to Bootstrap 4 and then start coding in all the code fixes which in my opinion shouldn't take too long.

[sjpadgett]

That's fine, if that's the way you want to attack.
Couple things though:

• you can use the bundled version
• must use UMD version for popper
• may as well bring in popper-utils(unclear if bundle has)

This all is configured in our Header config at: openemr/config/config.yaml

did an edit if bundle is not use to auto load popper.

popper:
    basePath: %assets_static_relative%/popper.js/dist/umd/
    script: popper.min.js
    autoload: true
popper-utils:
    basePath: %assets_static_relative%/popper.js/dist/umd/
    script: popper-utils.min.js
    autoload: true

[mdsupport]

Maybe we'll get lucky.

If one is looking for status quo, good news is that current code with inline styles painfully controls the layouts. Add the overrides in emr stylesheets and existing code essentially insulates you from BS.
So one of the major decision for us was to position bs4 css last with aim to progressively eliminate emr's css as well as jQ UI...

For the project, suggestion would be to follow BS4 documentation on themes.

At the risk of repetition, we have focused efforts on small(ish) devices. That's why BS4 with an opinionated (their words) design philosophy has been very productive. Here is one such example :

Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.

Glad the standard interface is moving to current ui component.

p.s.
In case anyone is interested, here is a POC approach that we tried and shows promise to get developers to focus on implementing business logic rather than formatting issues.

[tywrenn]

@sjpadgett I'll be using the bundled version to make it easy for us. I'll add another commit to fix the config file - let me know if i'm missing anywhere else that needs changing besides the NPM and config file.

[tywrenn]

Added to do list to the issue request to show our progress 👍

[sjpadgett]

opinionated

Show me an engineer who isn't! Thanks for the info. Will be handy.

[tywrenn]

I was able to get around adding popper JS in this commit.

Here are some things I noticed immediately after upgrading:

• I noticed immediately on upgrade the navbar doesn't really collapse too well when using Bootstrap 4.
• Spacing fixes are DEFINITELY needed (probably cause of col offsets being changed)
• Patient Portal needs a lot more fixes in Bootstrap 4
• The login logo isn't centered anymore

[mdsupport]

Surely there are more elegant approaches but providing ours if it helps.

Since we did not want to touch current code until it was up for refactoring, we let jQ do the work. Here is an example of main frame code that is used by all tabs (just pass their own $):

// Utility functions
function utilSwitchClass(sel, add, rem) {
    sel.addClass(add).removeClass(rem);
}

// Common actions for all
function auto_common_transforms($) {
    utilSwitchClass($('.col-xs-12'), 'row col-12', 'col-xs-12');

    $('table').addClass('table table-sm table-hover table-striped table-borderless');
    $('thead').addClass('thead-light');

    $('.btn-group').addClass('btn-group-sm');

    $('input[type=button]').attr({'role':'button'}).addClass('btn');
    utilSwitchClass($('.css_button'), 'btn', 'css_button');
    $('.btn').addClass('btn-sm');

    $('.form-control').addClass('form-control-sm p-1');
}

Header library inserts a standard script that checks and calls a script specific formatter if it exists otherwise it calls auto_common_transforms. Here is a sample formatter for script /interface/patient/file/front_payment.php:

function auto_interface_patient_file_front_payment($) {
    auto_common_transforms($);
    $('.detail').removeClass('detail');
    $('form > div').addClass('form-group form-group-sm');
    $('form input, form select').addClass('form-control form-control-sm');
    $('tr').removeAttr('height');
    $('td label.radio-inline').parent().addClass('form-check form-check-inline');
    $('.radio-inline input').addClass('form-check-input pl-2');
    $('label.radio-inline').addClass('form-check-label p-2');
}

This strips some of inline styles and converts all forms to BS4 as a workaround. As seen from selectors, the php script is using a table for form rows that works well for probably 1024x768 desktop. Responsive design will need form field label linkages and probably a grid layout. Review, design and refactor efforts could be significant compared to few minutes needed for this function. Major saving is the testing time since php script is not affected at this stage.

[tywrenn]

After using a linux sed replace method, I found that there were some 500+ lines of code that needed to be changed over to Bootstrap 4.

Most of the code I found was using col-xs which isn't supported, so replacing that with the new col tag will fix that area. Another big one was btn-xs, which isn't supported either and needs to be removed entirely due to their being no alternative.

@mdsupport I like this approach to fix this issue on a temporary scale, yet it should be something that we can easily toggle on and off so we can figure out where these changes are gonna be needed as we go along with this transition. Perhaps making a hidden toggle switch somewhere?

As far as Bootstrap RTL goes @sjpadgett i'd like to know what we currently use it for and if we should keep it or remove it as that's a bit of a gray area for me in terms of my knowledge. I would like us to use the Bootstrap theming standards as much as possible.

[sjpadgett]

As far as Bootstrap RTL goes

RTL is extremely important to OpenEMR. It is one of our keystones along with internationalization for languages.
We have hundred if not thousands of arabic and hebrew users. So, no RTL no BS4.

[sjpadgett]

@matrix-amiel
Could you or one of your team take a look at the newer bootstrap 4 RTL and tell us how closely it fits with our current solution? We are trying to upgrade to bootstrap 4 in core code.

[bradymiller]

Regarding sessions, that will be another large project, but is something we'll need to attack at some point in the future, since I am guessing it's only a matter of time until browsers do not allow viewing/modification of the session cookies (this is what OpenEMR does to support multiple browser tabs with different sessions):
#2556

[bradymiller]

Regarding Full versus Compact tab theme, I've noted a generation gap on this regarding preference :)
Age < 40 prefer Full
Age 40-50 ok with either Full or Compact
Age > 50 prefer Compact

[bradymiller]

btw, I wholeheartedly agree on goal of optimizing real estate no matter what theme is chosen.

[tywrenn]

Updated to-do list.

[tywrenn]

Updated to-do list

[tywrenn]

Updated to-do list. I'm hoping to get this issue done by the end of the month.

[sjpadgett]

Fixed Secure Chat. Header include was out of scope(did someone move the use?) Anyway, after going through portal for BS4, i'm excited about portal again. It is crying out for Telemedicine!!!

I know there are vendors that have added and maintain some form of telemedicine to portal. Be a great time to maybe offer to OpenEMR. Or pick up this mission and if so, i'd help get it started.

I think Secure Chat is cool as #$*^. Sending photo or video of boo boos for provider feedback in real time sort of gives some telemedicine support. Includes conferencing other care team members to chat or doing message blast to some/all portal users/users where they're notified when they log in. Point is a message can be sent and will persist 'till attended. At one time I had video as a part but abandoned at time due to security. To really secure video, streams should be integral to OpenEMR and use of external video streaming services should be avoided. IMO. (Please let's not argue this here:))

lol point here is angular is not an issue for BS4 project unless someone sees an issue I don't. Also now'd be a good time to speak up concerning current features limitations or functionality while portal has my attention.
Not sure why i'm so chatty these days:)

[stephenwaite]

thanks @sjpadgett , been enjoying the diatribe, err dialog :)

plan to test out the bootstrap-updates branch to check on the portal

[tywrenn]

@sjpadgett dangit you beat me to the exact same conclusion 😂. Don't add it in cuz I found some other issues to it as well.

[sjpadgett]

been enjoying the diatribe, err dialog :)

Prefer to think of it as gentle nudgings while circling and finally making the main point. Not really meant to be a discourse. :)
@tywrenn

Don't add it in cuz I found some other issues to it as well.

like what? i'm fixing rid inline classes and doing restructure of some directives so i'm on this and don't want dup of effort. If you're doing, I have plenty else to do.....

[tywrenn]

@sjpadgett When I did this I also got rid of the summernote toolbar that kept popping up and fixed the container so it doesn't look terrible. Also had to replace label label-default with the new badge class. I'm currently working on patient list view at the moment since it looks like garbage.

[sjpadgett]

@tywrenn Okay. go ahead and i'll fix the coding standards issues if you haven't already. I had this thing about keeping to one script thus multi classes and namespaces.

Thinking also maybe could move styles out and rid no_theme header....

[sjpadgett]

um patient documents is weird. Adding patientportal-style to Header will lock up and crash on new document click. Haven't looked but don't think these styles are compiled. Anyway @tywrenn Patient documents styling wasn't your fault....sorry.

[sjpadgett]

@tywrenn Working on gulp to include compiling patientportal-style. Trying to import from css creates pathing issues. You're not working this are you?

[tywrenn]

@sjpadgett As far as I'm aware the patient portal style was working correctly from the start...dunno what happened

[sjpadgett]

patient portal style was working correctly from the start..

was okay unlit assets/styles was removed to patientportal-style. The oe-sidebar.scss import no longer had a valid path and more, just hurting now and am tired of typing but you'll see on PR.
Fixed up needed mixin's and set the style up to closer theme pattern. Please move file and/or fixup if i'm off track from your design.
Will submit document and a couple other minor changes from patientportal-style now working....

[sjpadgett]

Working next on:

• integrating recurring appts @epsdky kindly fixed for us. Will touch portal home.php and find_appt_popup_user.php. Mostly for displaying to patient.
• Portal labs reporting. Difference where lab manual entry and electronic reporting different.
• Portal download CCDA(currently view only). Will leave to patient how forwarded ie no plans to use secure direct mail. Also auto disable feature if ccdaservice not installed. Gesh, yet another project to auto install node module depends.
• Better portal patient billing reporting and retest patient invoice notification from EOB. Fixup invoice admin notification secure mail some.
• Portal invoice hidden bug for context payment options. ie prepayment.
• Procedure form and procedure finder dialog attention. I'd love to bring in my Quest/Lab Corps modules for 5.0.3. Pretty nice stuff and been thru certifications.
• Bronkitis form.
• Dialog and utility auto dependency includes. load synchronous a no no.

Easy list to make. Now what? :)
Don't stop if need to bring in new commits. I'll keep up.

Another todo:

• Add ability to request refills from portal medication list. Add active/pending/expired status. Does anybody know off top of head if medication education is required when doing from portal?

[sjpadgett]

@bradymiller
How worried are we about merging soon? Do you know of many whom are running production from master?
I'm thinking we are close enough to bring in soon because i'd bet many are holding back contrib to master because they don't want to push to a development branch.
We also need to give our vendors time to start catching up with their custom integrations.
Also I would like to get back to our normal peer reviews.

@tywrenn
What's your opinion? What's your biggest concerns with project standing as of today.

I feel we need to allow as much testing time as possible for our international vendors concerning RTL/translations where they would be far more likely to fix if working in master.

[bradymiller]

@sjpadgett and @tywrenn ,
I agree that we are closely nearing time to bring the PR into the main codebase. The only thing that seems "broken" at this time is the eye form (the menu at top isn't working). I am planning to look into that. After that is fixed, I think we are good to go (unless @tywrenn knows of other places where things are broken).

[sjpadgett]

@tywrenn Perfect! Finally, Portal Patient Documents has gotten to where I envisioned. Now I can concentrate on adding some new template tags and templates. First up should be a generic intake form that includes history etc. where practice can expand for specialties.
Anyone out there who'd be willing to donate a simple text/html flat file? I'll take from there.

Anyway, I know how much effort you put into getting this to where it is and I do very much appreciate. Not an easy thing so, great work!

[tywrenn]

Merged with master - closed