From 7c1c1168a2aa09cff6f49ed392cddbe66fe2f79c Mon Sep 17 00:00:00 2001
From: Robert Down <robertdown@live.com>
Date: Mon, 19 Sep 2016 04:35:08 -0400
Subject: [PATCH] Improved tabs layout styling (#254)

---
 interface/main/tabs/css/menu.css                   | 111 +++++++++--------
 interface/main/tabs/css/tabs.css                   | 131 ++++++++++++---------
 interface/main/tabs/templates/menu_template.php    |   6 +-
 .../main/tabs/templates/patient_data_template.php  |  72 ++++++-----
 interface/main/tabs/templates/tabs_template.php    |  19 ++-
 5 files changed, 185 insertions(+), 154 deletions(-)

diff --git a/interface/main/tabs/css/menu.css b/interface/main/tabs/css/menu.css
index b4aa11bc5..415433917 100644
--- a/interface/main/tabs/css/menu.css
+++ b/interface/main/tabs/css/menu.css
@@ -24,10 +24,13 @@
 .appMenu > span
 {
     float: left;
-    padding:0px 0px;
+    padding: 0px;
     white-space: nowrap;
 }
-.appMenu > span:hover 
+
+.appMenu
+
+.appMenu > span:hover
 {
     color: #fff;
     text-decoration: none;
@@ -40,41 +43,27 @@
     margin:0;
     padding: 1px 5px 2px 1px;
 }
-.appMenu li
-{
-    padding-left: 14px;
-}
-.appMenu li:hover
-{
-    color: #fff;
-    text-decoration: none;
-    background-color: #1C5ECF;
-    text-shadow: none;
-}
+
 .appMenu li:hover > .menuDisabled
- {   
+ {
     background-color: transparent;
 }
 .menuSection{
     position: relative;
 }
+.menuSection:hover {
+    background-color: #CCE3F8;
+}
 .menuSection > .menuEntries{
-    background-color:#C9DBF2;
+    background:#fff;
     display: none;
     position: absolute;
-    top: 22px;
+    top: 48px;
     z-index:1000;
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
     min-width: 175px;
-    border: 0.5pt solid gray;
-    border-radius: 0px 5px 5px 5px;
-    color: black;
-    margin-top: 3px;
-    padding-top: 3px;
-    padding-left: 0px;
-    padding-right: 0px;
-    padding-bottom: 4px;
-    whitespace:nowrap;
+    box-shadow: 0px 5px 5px #adadad;
+    padding: 0px;
+    whitespace: nowrap;
 }
 
 .menuSection > .menuEntries .menuEntries {
@@ -82,20 +71,54 @@
     position: absolute;
     top: -3px;
     left: 161px;
-    transition: 2s background-color;
 }
 .menuSection:hover > .menuEntries{
     display: block;
 }
 
+/* Need separate styling for top level vs submenu items
+ * This currently controls ALL links in menu, no bueno
+ * --Robert Down */
 .menuLabel
 {
-    cursor: pointer;
-    padding: 5px 12px 3px;
+    color: #333;
+    display:inline-block;
+    padding: 15px 10px;
+    font-weight: 600;
 }
+.menuLabel:hover {
+    background: #CCE3F8;
+    color: #333;
+}
+
+/** Only apply if not an actual link **/
+div.menuLabel:hover {
+    cursor: default !important;
+}
+
+/** Sub menu **/
+.menuEntries li .menuLabel {
+    font-size: 90%;
+    display: block;
+    padding: 10px 20px;
+}
+.menuEntries li .menuLabel:hover {
+    background-color: #CCE3F8;
+    color: #333;
+}
+
+.logo {
+    padding: 10px 0px;
+}
+
 .menuDisabled
 {
-    color:gray;
+    color: #d7d7d7;
+}
+.menuDisabled:hover {
+    color: #d7d7d7 !important;
+    background-color: #f4f4f4 !important;
+    cursor: not-allowed;
 }
 
 #username
@@ -107,39 +130,31 @@
     min-width: 200px;
     right:10px;
 }
+
+/* Main menu bar */
 .body_top {
-    background-color: #C9DBF2;   
-    padding:0px;
-    border-bottom:0.1pt solid black;
-    -moz-box-shadow:    0 0 10px #000;
-    -webkit-box-shadow:  0 0 10px #000;
-    box-shadow:          0 0 10px #000;
-    z-index:10;
+    background-color: #f4f4f4;
+    color: #333;
+    padding: 0px;
+    margin: 0px;
+    z-index: 10;
 }
 .body_title {
     color: black;
-    background-color: #c9dbf2;
+    background-color: #f4f4f4;
     padding:10px 0px 0px 0px;
 }
 #username:hover > .userfunctions
 {
     display: block;
-    Xwidth:98%;
+    width:98%;
 }
 
 #username > .userfunctions > div:hover
 {
     color: red;
 }
-.logo {
-  border-radius: 50%;
-  -webkit-transition: -webkit-transform .8s ease-in-out;
-  transition: transform .8s ease-in-out;
-}
-.logo:hover {
-  -webkit-transform: rotate(360deg);
-  transform: rotate(360deg);
-}
+
 .acck {}
 
 .menu_arrow {
diff --git a/interface/main/tabs/css/tabs.css b/interface/main/tabs/css/tabs.css
index de16c2ca0..5ec5c1d91 100644
--- a/interface/main/tabs/css/tabs.css
+++ b/interface/main/tabs/css/tabs.css
@@ -28,11 +28,12 @@ html
 }
 body
 {
-    font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
+    /*font-family: 'FontAwesome', Arial, Helvetica, sans-serif;*/
     flex: 1 0 auto;
     display: flex;
     flex-direction: column;
     margin: 0px;
+    background-color: #f4f4f4;
 }
 #mainBox
 {
@@ -90,40 +91,64 @@ body
 
 .tabControls
 {
-    margin: 0 0 0 0;
-    padding: 0 0 0 0;
+    border-bottom: 1pt solid #1976d2;
+    margin: 0px;
+    padding: 0px;
+    padding-top: 4px;
     display: flex;
     flex-direction: row;
+    background: #f4f4f4;
 }
 
 .tabSpan
 {
-    margin: 0 0 0 0;
-    padding:  1px 7px;
-    border: 1pt solid black;
-    border-bottom:0pt;
-    border-radius: 6px 6px 0 0;
+    margin: 0px;
+    padding: 8px 8px;
+    border-top: 3pt solid #1976d2;
+    border-left: 1px solid #1976d2;
+    border-bottom: none;
+    border-right: 1px solid #1976d2;
     cursor: pointer;
+    /**
+     * This next part "connects" the tab to the
+     * "content" by hiding the containing border
+     */
+    position: relative;
+    bottom: -1px;
     flex: 0 1 auto;
-    white-space:nowrap;
-    box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.6);
+    white-space: nowrap;
     overflow: visible;
 }
+.tabSpan:last-child {
+    /*border-right: 1pt solid #1976d2;*/
+}
+
+.tabSpan .fa {
+    font-size: 80%;
+    color: #888888;
+}
 
 .tabSpan:hover
 {
-    color: red;
+    /*color: red;*/
 }
 .tabHidden
 {
-    color: gray;
+    color: #888888;
 }
 .tabNotchosen {
-    border-bottom:1pt solid black;
-    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
+    position: relative;
+    bottom: 0px;
+    background: transparent;
+    border-top: 3pt solid transparent;
+    border-left: none;
+    border-right: none;
     display:block;
     max-width:1000px;
 }
+.tabNotchosen:hover {
+    background: #e9e9e9;
+}
 
 #dialogDiv
 {
@@ -134,16 +159,16 @@ body
 
     width: 99%;
     height:99%;
-    
-    background-color: gray;
+
+    background-color: #fff;
     z-index:1000;
-    opacity: 0.5;
+    opacity: 0.65;
 }
 
 #dialogDiv > div.container
 {
     display: table;
-    background-color: gray;
+    /*background-color: gray;*/
     margin: auto auto;
     opacity: 1;
 }
@@ -151,25 +176,35 @@ body
 .dialogIframe
 {
     position: absolute;
-    top:0;
-    left:0;
+    top: 0;
+    left: 0;
     margin: auto auto;
     opacity: 1;
-    z-index:10000;
-    border: 1px solid black;
-    border-radius: 10px;
+    z-index: 10000;
+    box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
 }
 
 div.closeDlgIframe {
-
-	position: absolute;
-	top: -12px;
-	right: -15px;
-	height: 30px;
-	width: 30px;
-	background: url('iframe_close.png') top left no-repeat;
-	cursor: pointer;
-	z-index: 10010;
+    background: #ff5d5a;
+    position: absolute;
+    top: -12px;
+    right: -12px;
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+    z-index: 10010;
+}
+div.closeDlgIframe:before {
+    color: #fff;
+    content: "\f00d";
+    font-family: "FontAwesome";
+    font-weight: bold;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    margin: auto;
+    line-height: 30px;
+    height: 30px;
 }
 
 .dialogIframe > iframe{
@@ -180,7 +215,10 @@ div.closeDlgIframe {
 }
 #patientData
 {
-    min-height: 4em;
+    background-color: #f4f4f4;
+}
+.patientInfo a {
+    color: #333 !important;
 }
 
 .patientDataColumn
@@ -204,20 +242,15 @@ div.closeDlgIframe {
     z-index:1;
 }
 
-.patientEncounterList  table.encounters
-{
+.patientEncounterList  table.encounters {
     display: none;
 }
 
-
-.patientEncounterList:hover table.encounters
-{
+.patientEncounterList:hover table.encounters {
     display: block;
-
 }
 
-.patientEncounterList > div
-{
+.patientEncounterList > div {
     padding: 2px;
 }
 .patientEncounterList:hover
@@ -257,19 +290,7 @@ div.closeDlgIframe {
     padding: 1px 1px 1px 10px;
 }
 
-.patientInfo .clear
-{
-    font-size: x-small;
-    margin: 1px;
-    padding: 3px;
-    border: 1px solid black;
-    background-color: lightgray;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-.patientInfo .clear:hover
-{
-    color:red;
+.patientInfo .clear:hover i {
+    color: #ff5d5a;
 }
 
diff --git a/interface/main/tabs/templates/menu_template.php b/interface/main/tabs/templates/menu_template.php
index 230d1d098..47aa16894 100644
--- a/interface/main/tabs/templates/menu_template.php
+++ b/interface/main/tabs/templates/menu_template.php
@@ -21,13 +21,13 @@
 
 <script type="text/html" id="menu-action">
     <i data-bind="css: icon,text:helperText" class="fa closeButton"></i>
-    <div class='menuLabel' data-bind="text:label,click: menuActionClick,css: {menuDisabled: ! enabled()}"></div>
-    
+    <a class='menuLabel' href="#" data-bind="text:label,click: menuActionClick,css: {menuDisabled: ! enabled()}"></a>
+
 </script>
 <script type="text/html" id="menu-header">
     <i data-bind="css: icon" class="fa closeButton"></i>
     <div class="menuSection">
-        <div class='menuLabel' data-bind="text:label"></div>
+        <div class='menuLa-bel' data-bind="text:label"></div>
         <ul class="menuEntries" name="menuEntries" data-bind="foreach: children">
            <li data-bind="template: {name:header ? 'menu-header' : 'menu-action', data: $data }"></li>
         </ul>
diff --git a/interface/main/tabs/templates/patient_data_template.php b/interface/main/tabs/templates/patient_data_template.php
index 70af0095d..6a474935a 100644
--- a/interface/main/tabs/templates/patient_data_template.php
+++ b/interface/main/tabs/templates/patient_data_template.php
@@ -14,45 +14,41 @@
  * along with this program. If not, see <http://opensource.org/licenses/gpl-license.php>;.
  *
  * @package OpenEMR
+ * @author  Robert Down <robertdown@live.com>
  * @author  Kevin Yeh <kevin.y@integralemr.com>
  * @link    http://www.open-emr.org
  */
 ?>
 
 <script type="text/html" id="patient-data-template">
-        <div>
-            <span class="patientDataColumn">
-                <div class="patientInfo">
-                    <b>
-                    <span>
-                            <?php echo xlt("Patient"); ?>:
-                    </span>
-                    <!-- ko if: patient -->
-                        <a data-bind="click:refreshPatient,with: patient" href="#">
-                            <span data-bind="text: pname()"></span>(<span data-bind="text: pubpid"></span>)
-                        </a>
-                    <!-- /ko -->
-                    <!-- ko ifnot: patient -->
-                        <span><?php echo xlt("None");?></span>
-                    <!-- /ko -->
-
-                    <!-- ko if: patient -->
-                    <span class="clear" data-bind="click:clearPatient"><?php echo xlt("Clear") ?></span>
-                        <!-- /ko -->
-                    </b>
-                </div>
-                <div class="patientInfo">
-                    <b>
-                    <!-- ko if: patient -->
-                        <span data-bind="text:patient().str_dob()"></span>
-                    <!-- /ko -->
-                    </b>
-                </div>
+    <div>
+        <span class="patientDataColumn">
+            <div class="patientInfo">
+                <?php echo xlt("Patient"); ?>:
+                <!-- ko if: patient -->
+                    <a class="ptName" data-bind="click:refreshPatient,with: patient" href="#">
+                        <span data-bind="text: pname()"></span>(<span data-bind="text: pubpid"></span>)
+                    </a>
+                <!-- /ko -->
+                <!-- ko ifnot: patient -->
+                    <?php echo xlt("None");?>
+                <!-- /ko -->
+                <!-- ko if: patient -->
+                    <strong><a href="#" class="clear" data-bind="click:clearPatient" title="<?php echo xlt("Clear") ?>">
+                        <i class="fa fa-times"></i>
+                    </a></strong>
+                <!-- /ko -->
+            </div>
+            <div class="patientInfo">
+                <!-- ko if: patient -->
+                    <span data-bind="text:patient().str_dob()"></span>
+                <!-- /ko -->
+            </div>
             </span>
             <span class="patientDataColumn">
                 &nbsp;
-                 <!-- ko if: patient -->                
-                <!-- ko with: patient -->                
+                 <!-- ko if: patient -->
+                <!-- ko with: patient -->
                 <div>
                     <span>Selected Encounter:</span>
                     <!-- ko if:selectedEncounter() -->
@@ -61,15 +57,15 @@
                     <!-- /ko -->
                     <!-- ko if:!selectedEncounter() -->
                         <?php echo xlt("None") ?>
-                    <!-- /ko -->                
+                    <!-- /ko -->
                 </div>
-                <!-- /ko -->  
-                <!-- /ko -->  
+                <!-- /ko -->
+                <!-- /ko -->
             </span>
             <span class="patientDataColumn patientEncountersColumn">
-                <!-- ko if: patient -->                
-                <!-- ko with: patient -->                
-                
+                <!-- ko if: patient -->
+                <!-- ko with: patient -->
+
                 <span class="patientEncounterList" >
                     <div data-bind="click: clickNewEncounter"><?php echo xlt("New Encounter");?></div>
                     <div data-bind="click: clickEncounterList"><?php echo xlt("Past Encounter List");?>
@@ -90,8 +86,8 @@
                         </tbody>
                     </table>
                 </span>
-                <!-- /ko -->                
-                <!-- /ko -->                
+                <!-- /ko -->
+                <!-- /ko -->
 
             </span>
         </div>
diff --git a/interface/main/tabs/templates/tabs_template.php b/interface/main/tabs/templates/tabs_template.php
index 91726684d..0f9423767 100644
--- a/interface/main/tabs/templates/tabs_template.php
+++ b/interface/main/tabs/templates/tabs_template.php
@@ -25,26 +25,25 @@
             <i class="fa fa-caret-up menu_arrow" id="patient_caret" title="<?php echo xla('Toggle the Patient Panel'); ?>" aria-hidden="true"></i>
         </span>
         <!-- ko  foreach: tabsList -->
-            <span class="tabSpan bgcolor2" data-bind="click: tabClicked, css: {tabNotchosen: !visible()}">
-                <span  data-bind="text: title, click: tabClicked, css: {tabHidden: !visible()}"></span>
-                <span class="typcn typcn-refresh" data-bind="click: tabRefresh"></span>
+            <div class="tabSpan bgcolor2" data-bind="click: tabClicked, css: {tabNotchosen: !visible()}">
+                <span class="tabTitle" data-bind="text: title, click: tabClicked, css: {tabHidden: !visible()}"></span>
+                <span class="fa fa-fw fa-refresh" data-bind="click: tabRefresh"></span>
                 <!--ko if:!locked() -->
-                    <span class="typcn typcn-lock-open"  data-bind="click: tabLockToggle"></span>
+                    <span class="fa fa-fw fa-unlock"  data-bind="click: tabLockToggle"></span>
                 <!-- /ko -->
                 <!--ko if:locked() -->
-                    <span class="typcn typcn-lock-closed"  data-bind="click: tabLockToggle"></span>
+                    <span class="fa fa-fw fa-lock"  data-bind="click: tabLockToggle"></span>
                 <!-- /ko -->
 
                 <!-- ko if:closable-->
-                    <span class="typcn typcn-delete" data-bind="click: tabClose"></span>
-                <!-- /ko -->    
-            </span>
+                    <span class="fa fa-fw fa-times" data-bind="click: tabClose"></span>
+                <!-- /ko -->
+            </div>
         <!-- /ko -->
-        <span class="tabNotchosen" style="width:100%"></span>
     </div>
 </script>
 <script type="text/html" id="tabs-frames">
-        
+
         <!-- ko  foreach: tabs.tabsList -->
         <div class="frameDisplay" data-bind="visible:visible">
             <iframe data-bind="location: $data, iframeName: $data.name, ">
-- 
2.11.4.GIT