Difference between revisions of "UI Modernization"
Robert Down (talk | contribs) (Created page with "This page tracks the improvements to the user interface / user experience. Owned by Robert Down. == CSS Framework == The new user interface uses [http://getbootstrap.com Bootstr...") |
Robert Down (talk | contribs) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 30: | Line 30: | ||
|} | |} | ||
Example of available helper icons: | |||
[[File:Bootstrap-Icon-examples.png]] | |||
Add any of those classes to an element with <code>.btn</code> to add icon support | Add any of those classes to an element with <code>.btn</code> to add icon support. The only caveat is that bootstrap must be included in the page, this can be accomplished by adding <code><?php require_once "{$GLOBALS['srcdir']}/templates/standard_header_template.php"; ?></code> in the <code><head></code> of the page. See https://github.com/openemr/openemr/issues/635 for more details on the standard header template | ||
Latest revision as of 22:59, 9 May 2017
This page tracks the improvements to the user interface / user experience. Owned by Robert Down.
CSS Framework
The new user interface uses Bootstrap 3. Currently we include the bootstrap CSS as a whole and allow themes to override as needed in a separate stylesheet.
Standardize Button Syntax
Throughout the code buttons are displayed in different ways. Sometimes they are displayed as an <a> tag, other times it is a <button> tag, but most often it is a <input type="button"> tag. We are actively standardizing all of this to <button> (Unless good reason for a <a> to be used). This essentially requires manually changing every instance of <input type="button"> to <button type="button|submit" class="btn btn-default|primary">Text of button</button>
Some helper classes have been created:
.btn-save
|
Prepends a checkmark to text |
.btn-cancel
|
Prepends x (times symbol) to text |
.btn-add
|
Prepends + (plus symbol) to text |
.btn-search
|
Prepends search symbol to text |
.btn-delete
|
Prepends tash can to text |
.btn-duplicate
|
Prepends copy symbol to text |
Example of available helper icons:
Add any of those classes to an element with .btn to add icon support. The only caveat is that bootstrap must be included in the page, this can be accomplished by adding <?php require_once "{$GLOBALS['srcdir']}/templates/standard_header_template.php"; ?> in the <head> of the page. See https://github.com/openemr/openemr/issues/635 for more details on the standard header template
