Updating design of OHIF Viewer using (OHIF-49)

Packages/hangingprotocols/client/components/hangingProtocolButtons/hangingProtocolButtons.html

@@ -1,6 +1,6 @@
 <template name="hangingProtocolButtons">
     <button id="previousPresentationGroup" type="button"
-            class="btn btn-sm btn-default"
+            class="btn btn-sm"
             data-container="body"
             data-toggle="tooltip"
             data-placement="bottom"
@@ -9,7 +9,7 @@
         <span class="fa fa-step-backward"></span>
     </button>
     <button id="nextPresentationGroup" type="button"
-            class="btn btn-sm btn-default"
+            class="btn btn-sm"
             data-container="body"
             data-toggle="tooltip"
             data-placement="bottom"

Packages/hangingprotocols/client/components/matchedProtocols/matchedProtocols.html

@@ -19,11 +19,5 @@
             {{ /each }}
         </ul>
         {{ /if }}
-
-        <button id="toggleProtocolEditor" type="button" class="btn btn-sm"
-                title="Toggle Hanging Protocol Editor"
-                data-toggle="tooltip">
-                <i class="fa fa-cog"></i>
-        </button>
     </div>
 </template>

Packages/hangingprotocols/client/components/matchedProtocols/matchedProtocols.js

@@ -1,14 +1,15 @@
 import { OHIF } from 'meteor/ohif:core';
 
-Template.matchedProtocols.onRendered(function() {
-    $('#matchedProtocols button').tooltip(OHIF.viewer.tooltipConfig);
+Template.matchedProtocols.onRendered(() => {
+    const instance = Template.instance();
+    instance.$('#matchedProtocols button').tooltip(OHIF.viewer.tooltipConfig);
 });
 
 Template.matchedProtocols.helpers({
     /**
      * Reactively re-render the MatchedProtocols Collection contents
      */
-    matchedProtocols: function() {
+    matchedProtocols() {
         return MatchedProtocols.find();
     }
 });
@@ -20,33 +21,5 @@ Template.matchedProtocols.events({
     'click .matchedProtocol': function() {
         var protocol = this;
         ProtocolEngine.setHangingProtocol(protocol);
-    },
-    /**
-     * Show/hide the Protocol Editor sidebar
-     */
-    'click #toggleProtocolEditor': function() {
-        // Select the Protocol Editor DOM element
-        var editor = $('#protocolEditor');
-
-        // Modulate the main viewer width in response to the sidebar being open
-
-        // This code is commented out so that the protocol editor is an overlay, rather than a sidebar
-        // This is something that is debatable at the moment, so I am not removing the code just yet
-        //
-        /* if (editor.hasClass('cbp-spmenu-open')) {
-            // Set the Viewer widths to reflect a hidden Protocol Editor
-            $('.viewerMain').width('calc(100% - 120px)');
-            $('.navbar').width('100%');
-        } else {
-            // Set the Viewer widths to reflect an open Protocol Editor
-            $('.viewerMain').width('calc(100% - 120px - 450px)');
-            $('.navbar').width('calc(100% - 450px)');
-        }*/
-
-        // Toggle a class reflect whether or not the Protocol Editor is displayed
-        editor.toggleClass('cbp-spmenu-open');
-
-        // Fire the resize handler after a short delay so that the animation can complete
-        setTimeout(handleResize, 150);
     }
 });

Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.html

@@ -2,7 +2,7 @@
     {{ >ruleEntryDialog }}
     {{ >settingEntryDialog }}
     {{ >textEntryDialog }}
-    <div id='protocolEditor' class="cbp-spmenu cbp-spmenu-right">
+    <div id='protocolEditor'>
         <div class="row">
             <div class="navigationButtons col-xs-12">
                 <ul class="nav nav-pills">

Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl

@@ -1,10 +1,14 @@
+@import "{design}/app.styl"
+
+$height = 20px
+
 #protocolEditor
   height: 100%
   width: 450px
   padding: 10px
   position: absolute
   top: 0
-  background: #212121
+  background: $primaryBackgroundCOlor
 
   .navigationButtons
     ul
@@ -31,29 +35,27 @@
         cursor: pointer
         text-decoration: none
         outline: none
-        background: #3e3e3e
-        color: #ffffff
+        background-color: $uiGrayDark
+        border: 1px $uiBorderColorDark solid
+        color: $textSecondaryColor
+        transition: transition($sidebarTransition)
+        border-radius: $height
 
-        -webkit-transition: all 0.3s ease
-        -moz-transition: all 0.3s ease
-        -o-transition: all 0.3s ease
-        -ms-transition: all 0.3s ease
-        transition: all 0.3s ease
-
-      &.active
-        a
-          background: #ffffff
-          color: #3e3e3e
+      &.active a
+        background-color: $activeColor
+        border-color: $uiBorderColorActive
+        color: $textColorActive
+        transition: transition($sidebarTransition)
 
   p
   h2
   h3
   h4
-    color: #f5f5f5
+    color: $defaultColor
 
   label
   ul
-    color: #f5f5f5
+    color: $defaultColor
     font-weight: 400
 
   label
@@ -66,7 +68,7 @@
     width: 40%
     border: none
     background: #212121
-    color: #ffffff
+    color: $defaultColor
     text-align: center
 
   button.btn
@@ -85,7 +87,7 @@
 
     p
       font-size: 8pt
-      color: #B3B3B3
+      color: $defaultColor
       margin: 0 10px
       display: inline-block
 
@@ -137,18 +139,4 @@
       padding: 40px
 
       h3
-        color: #f5f5f5
-
-.cbp-spmenu-right 
-  right: -450px
-
-.cbp-spmenu-right.cbp-spmenu-open 
-  right: 0
-  
-
-/* Transitions */
-
-.cbp-spmenu
-  -webkit-transition: all 0.3s ease
-  -moz-transition: all 0.3s ease
-  transition: all 0.3s ease
+        color: $defaultColor

Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl

@@ -1,8 +1,10 @@
+@import "{design}/app.styl"
+
 table.ruleTable
   thead
     tr
       th
-        color: whitesmoke
+        color: $defaultColor
         text-align: center
 
       th:first-child
@@ -11,7 +13,7 @@ table.ruleTable
   tbody
     tr
       td
-        color: #ffffff
+        color: $defaultColor
         text-align: center
 
         .failWarning
@@ -21,12 +23,13 @@ table.ruleTable
         .deleteRule
           &:hover, &:active
             cursor: pointer
-            color: #48d3ff
-
-            -webkit-transition: all 0.1s ease
-            -moz-transition: all 0.1s ease
-            transition: all 0.1s ease
-
+            transition(all 0.1s ease)
+            
+            &:hover
+              color: $hoverColor
+              
+            &:active  
+              color: $activeColor
 
       td:first-child
         text-align: left
@@ -34,13 +37,14 @@ table.ruleTable
 .addRuleContainer
   margin: 10px 0
   text-align: center
-  color: #ffffff
+  color: $defaultColor
 
   .addRule
-    &:hover, &:active
-      cursor: pointer
-      color: #48d3ff
-
-      -webkit-transition: all 0.1s ease
-      -moz-transition: all 0.1s ease
-      transition: all 0.1s ease
+    cursor: pointer
+    transition(all 0.1s ease)
+    
+    &:hover
+      color: $hoverColor
+      
+    &:active  
+      color: $activeColor

Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl

@@ -1,8 +1,10 @@
+@import "{design}/app.styl"
+
 table.settingsTable
   thead
     tr
       th
-        color: whitesmoke
+        color: $defaultColor
         text-align: center
 
       th:first-child
@@ -13,32 +15,34 @@ table.settingsTable
 
     tr
       td
-        color: #ffffff
+        color: $defaultColor
         text-align: center
 
         .editSetting
         .deleteSetting
-          &:hover, &:active
-            cursor:pointer
-            color: #48d3ff
-
-            -webkit-transition: all 0.1s ease
-            -moz-transition: all 0.1s ease
-            transition: all 0.1s ease
-
+          cursor: pointer
+          transition(all 0.1s ease)
+          
+          &:hover
+            color: $hoverColor
+            
+          &:active  
+            color: $activeColor
+            
       td:first-child
         text-align: left
 
 .addSettingContainer
   margin: 10px 0
   text-align: center
-  color: #ffffff
+  color: $defaultColor
 
   .addSetting
-    &:hover, &:active
-      cursor: pointer
-      color: #48d3ff
-
-      -webkit-transition: all 0.1s ease
-      -moz-transition: all 0.1s ease
-      transition: all 0.1s ease
+    cursor: pointer
+    transition(all 0.1s ease)
+    
+    &:hover
+      color: $hoverColor
+      
+    &:active  
+      color: $activeColor

Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl

@@ -1,3 +1,5 @@
+@import "{design}/app.styl"
+
 #stageDetails
   overflow-y: auto
   overflow-x: hidden
@@ -6,12 +8,13 @@
   margin-right: -16px
   width: 100%
   height: 100%
+
   &::-webkit-scrollbar
     display: none
 
   h3
   label
-    color: #f5f5f5
+    color: $defaultColor
 
   label
     margin-right: 10px
@@ -21,8 +24,8 @@
     min-width: 50px
     width: 40%
     border: none
-    background: #3e3e3e
-    color: #ffffff
+    background: $boxBackgroundColorDark
+    color: $defaultColor
     text-align: center
 
   .stageEditorSection

Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl

@@ -1,14 +1,19 @@
+@import "{design}/app.styl"
+
 #stageSortingContainer
   #stageSortable
     .sortable-item
       padding: 3px
 
       span
-        color: #ffffff
+        color: $defaultColor
         cursor: pointer
 
+        &:hover
+          color: $hoverColor
+        
         &.active
-          color: #46e7ff
+          color: $activeColor
 
     .sortable-handle
       cursor: move
@@ -29,42 +34,43 @@
 
     .deleteStage
       cursor: pointer
-      color: white
-      -webkit-transition: all 0.1s ease
-      -moz-transition: all 0.1s ease
-      transition: all 0.1s ease
-
-      &:active, &:hover
-        color: #48d3ff
+      color: $defaultColor
+      transition(all 0.1s ease)
+      
+      &:hover
+        color: $hoverColor
+        
+      &:active  
+        color: $activeColor
 
   .addStage
     margin: 10px 0
     text-align: center
 
     #addStage
-      cursor: pointer
-      color: #ffffff
-      -webkit-transition: all 0.1s ease
-      -moz-transition: all 0.1s ease
-      transition: all 0.1s ease
-
-      &:active, &:hover
-        color: #48d3ff
+      transition(all 0.1s ease)
+      
+      &:hover
+        color: $hoverColor
+        
+      &:active  
+        color: $activeColor
 
   .moveStageButtons
     margin: 10px 0
     text-align: center
 
     a
+      color: $defaultColor
       cursor: pointer
-      color: #ffffff
       text-decoration: none
-      -webkit-transition: all 0.1s ease
-      -moz-transition: all 0.1s ease
-      transition: all 0.1s ease
-
-      &:active, &:hover
-        color: #48d3ff
+      transition(all 0.1s ease)
+      
+      &:hover
+        color: $hoverColor
+        
+      &:active  
+        color: $activeColor
 
       &[disabled="true"]
         opacity: 0.7