User Interface Renovations

bradymiller wrote on Monday, March 07, 2016:

Hi Robert,

I just brought in your commit (from your ui2016 branch) into the main codebase. Thanks for the contribution!

-brady
OpenEMR

bradymiller wrote on Monday, March 07, 2016:

Hi Sharon,

There are 2 separate projects going on here:

  1. Robert’s work has just been committed to the official development codebase and is a more modern stylesheet (it will not get into a official OpenEMR release for at least several months). This would be easy to bring into your OpenEMR instance by simply copying the new stylesheet into you current OpenEMR instance and then selecting it in Administration->Globals.
  2. Practice Provider’s is more extensive and is still in the review/revision process(I am guessing it will get in the official development codebase within a couple weeks).

-brady
OpenEMR

bradymiller wrote on Monday, March 07, 2016:

Hi,

If anybody is up to it, it would make a lot of sense to create a wiki page that provides a quick overview of the theme selections(since we now have Robert’s new theme, and will soon have two other new themes by Ray and Practice Provider).

-brady
OpenEMR

bradymiller wrote on Thursday, March 10, 2016:

Hi,

I think that Practice Provider’s bootstrap theme code is ready to be brought into the main codebase, which plan to bring into the main codebase sometime over the next several days(expediting this since there is another large project regarding RTL internationalization starting up). Please let me know if you think otherwise.

Code is here:

It can be tested here:
http://www.open-emr.org/wiki/index.php/Development_Demo#192.168.1.131

-brady
OpenEMR

yehster wrote on Thursday, March 10, 2016:

There are still FAR too many changes to existing files, without sufficient explanation of what’s going on for my comfort. Comments have been posted to the commit.

robertdown wrote on Saturday, March 12, 2016:

Here is the latest screenshot continuing my work. Definitely getting very close to a polished new theme.

Noticable changes include: left navigation has a slight grey gradient and some small padding/position changes, the top navigation bar is now dark with light text colors, and tab colors were changed a bit and the font size was reduced a hair.

Other things I am working on include: patient table lists and the encounter screen.

I’ll commit later today.

There are a couple of things I would like to focus on when this is complete – Action buttons and cancel buttons should always be positioned in the same way. You can look at any human interface guideline and see that consistency is the key to great UI. Also, save buttons should be visually different than a cancel button. That’s easy enough, just have a primary button class and a secondary button class (Which, by the way, is built into Bootstrap). This is relatively straightforward, it’s just a matter of moving some buttons around.

mdsupport wrote on Sunday, March 13, 2016:

In addition to action buttons,

  1. Some scripts use text links for actions - best example is patient->documents->document details where each document field seem to have an individual update link. Short of rebasing, is there any help from css to make those links look like standard buttons?

  2. Is there set of standard graphic characters that should be used in place of long texts - e.g. expand/collapse links on patient summary screen could be maximize/minimize pictures/symbols? Same can probably said about Edit/Update/New etc…

Thank you for great work!

robertdown wrote on Sunday, March 13, 2016:

re #1 - Let me look into it and see what we can do.

re #2 - Yes, I am partial to fontawesome. It’s a large collections of icons that can be used to create some effective icons. Bootstrap has a base of icons built in, but fontawesome is more expansive and I prefer it.

It is possible to take that font and encode it as base64 and actually embed it directly into a CSS file (I am actually doing that in my theme, have you noticed the default font is Ubuntu?).

I’ve been itching to get vector-based icons into the project for some time…

bradymiller wrote on Monday, March 14, 2016:

Hi Robert,

Just let us know when you have something to commit. If you need bootstrap/fontawesome now, then feel free to add this. Just ensure you add them to same path as Practice Provider is doing in their commit(this way there will be no redundant/conflicting libraries):

And if you do this, keep it as a separate commit from other work.

-brady
OpenEMR

mdsupport wrote on Tuesday, March 15, 2016:

Are we open to /vendor/<vendor/product name>//… type of structure when we use 3rd party components? Current library can over time become exclusively openemr common code.

tmccormi wrote on Tuesday, March 15, 2016:

Well YES. However might be a thread all it’s own to talk about that.

tmccormi wrote on Monday, April 04, 2016:

John,
How are thing going on this? It would be good to get the bootstrap based code in place so we can merge Yehster’s iframe code base as well, he removed all the frameset code already.

juggernautsei wrote on Thursday, April 07, 2016:

tmccormi wrote on Friday, April 15, 2016:

Guys,
If we aren’t going to get the bootstrap project completed and merged very soon, I would like to recommend that we push forward with Kevin’s iframe merge and use Roberts style_light.css for a similar feel.

Kevin’s branch still needs some work (in the styling and installation process mostly) but we shouldn’t it hang there much longer due to version drift …

–Tony

bradymiller wrote on Saturday, April 16, 2016:

Hi Tony,

I agree with making Robert’s style the default setting.

I’ll ping Practice Provider to see if their still planning to pursue this.

-brady
OpenEMR

yehster wrote on Saturday, April 16, 2016:

There are two parts to Practice Providers commit.

  1. Bringing bootstrap into the project
  2. Significant changes within the OpenEMR code itself to change styling of existing elements

I’ve provided feedback during code review of the commit regarding part 2, but we discussed possibly doing part 1 separately so others might not have to wait. (Matrix has a new theme too.) Consistent and appropriate use of CSS classes was my primary concern, in addition to a step back in a few places where inline styles were added.

My iframe code honestly should not be impacted by code changes resulting from either of these two issues, I will work towards getting the iframe code with a few bug fixes rebased to the current dev-tip (hopefully by the end of the coming week.)

osverdlov wrote on Sunday, April 17, 2016:

Robert’s style looks very promising.

We agree that a set of standard CSS classes would help . Since it will lead to a lot of small changes in HTML code, the sooner we start the better.

Following Kevin’s question, Bootstrap does have classes to make links look like buttons.

bradymiller wrote on Monday, April 18, 2016:

Hi,

I just committed change to codebase to make Robert’s style the default setting.

Practice Provider just let me know that they should soon have a new revision of code which should address Kevin’s previous issues (ie. a less invasive method was used).

-brady
OpenEMR

brian1888 wrote on Tuesday, May 03, 2016:

Hi all,

I am thinking about starting to use this platform. I found this thread about the improvements to the UI. I would prefer to start my initial implementation after this is at least in the build. Is there an expected timeline to add this responsive user interface support to the live build?

Thank you in advance,
Brian

bradymiller wrote on Monday, May 09, 2016:

Hi Brian,

Robert’s style sheet is the current default setting in OpenEMR’s development codebase and will be the default for the next OpenEMR release, which is 4.2.2 (likely to be released sometime over next 2 weeks).

The bootstrap project that has been discussed above is still not in the development codebase.

-brady
OpenEMR