AWV-3: Merging changes from upstream

Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl

@@ -6,7 +6,7 @@
       display: inline-block
       font-family: $logoFontFamily
       font-weight: $logoFontWeight
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       font-size: 20pt
       line-height: 45px
       text-decoration: none

Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl

@@ -1,15 +1,15 @@
 @import "{design}/app"
 
 .thumbnailEntry.active .imageThumbnail
-  border-color: $activeColor
+  theme('border-color', '$activeColor')
   box-shadow: none
   transition($sidebarTransition)
 
 .imageThumbnail
-  background-color: $primaryBackgroundColor
+  theme('box-shadow', 'inset 0 0 0 1px $uiBorderColorDark')
+  theme('background-color', '$primaryBackgroundColor')
   border: 5px solid transparent
   border-radius: 12px
-  box-shadow: inset 0 0 0 1px $uiBorderColorDark
   height: 135px
   margin: 0 auto
   padding 1px 7px
@@ -25,7 +25,7 @@
   margin: 0 !important
 
   &:hover
-    border-color: $hoverColor
+    theme('border-color', '$hoverColor')
     box-shadow: none
 
 .imageThumbnailCanvas
@@ -35,7 +35,7 @@
 .thumbnailLoadingIndicator
   display: none
   pointer-events: none
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
   height: 20px
   width: 100%
   top: 0

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl

@@ -13,7 +13,7 @@ $seriesCountBackgroundColor = #678696
     cursor: -moz-grab
 
   .seriesDetails
-    color: $textPrimaryColor
+    theme('color', '$textPrimaryColor')
     font-size: 14px
     line-height: 1.3em
     margin-top: 5px
@@ -61,7 +61,7 @@ $seriesCountBackgroundColor = #678696
       height: 18px
 
     .value
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       display: inline-block
       float: right
       font-size: 12px
@@ -69,7 +69,7 @@ $seriesCountBackgroundColor = #678696
       width: calc(100% - 15px)
 
     .icon
-      color: $activeColor
+      theme('color', '$activeColor')
       display: inline-block
       float: left
       font-size: 10px
@@ -83,7 +83,7 @@ $seriesCountBackgroundColor = #678696
         position: relative
 
         &:after
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
           box-shadow: 1px 1px rgba(0, 0, 0, .115)
           left: -5px
           position: absolute
@@ -91,7 +91,7 @@ $seriesCountBackgroundColor = #678696
 
         &
         &:after
-          border: 1px solid $primaryBackgroundColor
+          theme('border', '1px solid $primaryBackgroundColor')
           content: ''
           display: inline-block
           height: 11px

Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl

@@ -1,6 +1,9 @@
 @import "{design}/app.styl"
 
 .annotationDialog
+  theme('border', '1px solid $uiBorderColor')
+  theme('background', '$uiGrayDarkest')
+  theme('color', '$textSecondaryColor')
   display: none
   z-index: 1000
   position: absolute
@@ -9,17 +12,12 @@
   left: 0
   right: 0
   margin: auto
-
   overflow: hidden
   padding: 10px
   width: 300px
   height: 140px
-
   opacity: 0.95
   border-radius: 8px
-  border: 1px solid $uiBorderColor
-  background: $uiGrayDarkest
-  color: $textSecondaryColor
 
   h5, label
     font-weight: 400
@@ -31,4 +29,4 @@
     margin-left: 5px
 
   .annotationDialogConfirm
-    float: right
+    float: right

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl

@@ -1,6 +1,9 @@
 @import "{design}/app.styl"
 
 #cineDialog
+  theme('border', '1px solid $uiBorderColor')
+  theme('background', '$uiGrayDarkest')
+  theme('color', '$textSecondaryColor')
   display: none
   z-index: 1000
   position: absolute
@@ -8,17 +11,12 @@
   left: auto
   bottom: 3px
   right: 3px
-
   overflow: hidden
   padding: 10px
   width: 300px
   height: 175px
-
   opacity: 0.95
   border-radius: 8px
-  border: 1px solid $uiBorderColor
-  background: $uiGrayDarkest
-  color: $textSecondaryColor
 
   h5, label
     font-weight: 400
@@ -26,18 +24,18 @@
   box-sizing: border-box
 
   .btn
-    background: $uiGrayDarkest
-    color: $textSecondaryColor
+    theme('background', '$uiGrayDarkest')
+    theme('color', '$textSecondaryColor')
 
     &:hover
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
     &:active, &.active
-      color: $activeColor
+      theme('color', '$activeColor')
 
   #cineOptions
     padding: 5px 0
     overflow: auto
 
     #loopSection
-      padding-right: 12px
+      padding-right: 12px

Packages/viewerbase/client/components/viewer/imageControls/imageControls.js

@@ -16,14 +16,33 @@ Template.imageControls.onRendered(() => {
 })
 
 Template.imageControls.events({
-    'input #imageSlider, change #imageSlider': function(e) {
+    'keydown #imageSlider'(event) {
+        // We don't allow direct keyboard up/down input on the
+        // image sliders since the natural direction is reversed (0 is at the top)
+
+        // Prevent the browser's default behaviour (scrolling)
+        event.preventDefault();
+
+        // Store the KeyCodes in an object for readability
+        const keys = {
+            DOWN: 40,
+            UP: 38
+        };
+
+        if (event.which === keys.DOWN) {
+            OHIF.viewer.hotkeyFunctions.scrollDown();
+        } else if (event.which === keys.UP) {
+            OHIF.viewer.hotkeyFunctions.scrollUp();
+        }
+    },
+    'input #imageSlider, change #imageSlider'(event) {
         // Note that we throttle requests to prevent the
         // user's ultrafast scrolling from firing requests too quickly.
         clearTimeout(slideTimeout);
         slideTimeout = setTimeout(() => {
             // Using the slider in an inactive viewport
             // should cause that viewport to become active
-            const slider = $(e.currentTarget);
+            const slider = $(event.currentTarget);
             const newActiveElement = slider.parents().eq(2).siblings('.imageViewerViewport').get(0);
             setActiveViewport(newActiveElement);
 

Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl

@@ -75,7 +75,7 @@ $imageSliderCursor = grab
       // --- Style the range thumb --- //
       &::-webkit-slider-thumb
         -webkit-appearance: none !important
-        background-color: $imageSliderColor
+        theme('background-color', '$imageSliderColor')
         border-radius: $imageSliderBorderRadius
         border: $imageSliderBorder
         height: $imageSliderWidth
@@ -84,10 +84,10 @@ $imageSliderCursor = grab
         margin-top: -7px
 
         &:active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
       &::-moz-range-thumb
-        background-color: $imageSliderColor
+        theme('background-color', '$imageSliderColor')
         border-radius: $imageSliderBorderRadius
         border: $imageSliderBorder
         height: $imageSliderWidth
@@ -96,10 +96,10 @@ $imageSliderCursor = grab
         z-index: 7
 
         &:active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
       &::-ms-thumb
-        background-color: $imageSliderColor
+        theme('background-color', '$imageSliderColor')
         border-radius: $imageSliderBorderRadius
         border: $imageSliderBorder
         height: $imageSliderWidth
@@ -107,7 +107,7 @@ $imageSliderCursor = grab
         cursor: $imageSliderCursor
 
         &:active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
 // Set left position in IE, border-width attribute breaks left position of imageSlider
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl

@@ -15,7 +15,7 @@
 .viewportInstructions
   display: none
   font-size: 13px
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
   line-height: 18px
   pointer-events: none // Necessary for drag/drop through to cornerstone element below
   text-align: center

Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl

@@ -3,29 +3,28 @@
 $borderColor = rgba(77, 99, 110, 0.81)
 
 .layoutChooser
+  theme('background', '$uiGrayDarkest')
   width: 92px
   height: 92px
   min-width: 92px // to override bootstrap's dropdown-menu class
   min-height: 92px
-
-  //background-color: $primaryBackgroundColor
+  // theme('background-color', '$primaryBackgroundColor')
   opacity: 0.95
   border-radius: 8px
   border: 1px solid $borderColor;
-  background: $uiGrayDarkest
 
   &.open
     display: block
 
   table
     margin: 0 auto
-    
+
     td
+      theme('border', '1px solid $uiBorderColorDark')
       cursor: pointer
-      border: 1px solid $uiBorderColorDark
-      width: 20px
       height: 20px
       transition(background-color 0.1s ease)
-      
+      width: 20px
+
       &:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave
-        background-color: $activeColor
+        theme('background-color', '$activeColor')

Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl

@@ -1,13 +1,13 @@
 @import "{design}/app.styl"
 
 .imageViewerLoadingIndicator
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
 
 .faded
   opacity: 0.5
 
 .imageViewerErrorLoadingIndicator
-  color: $uiYellow
+  theme('color', '$uiYellow')
 
   p, h4
     padding: 4px 0

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html

@@ -1,22 +1,22 @@
 <template name="toolbarSectionButton">
-    {{ #if this.buttonTemplateName }}
-    {{> UI.dynamic template=this.buttonTemplateName data=this }}
-    {{ else }}
-    <div id="{{this.id}}"
-         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}}"
-         title="{{this.title}}">
-        <div class="svgContainer">
-            {{ #if this.svgLink }}
-            <svg>
-                <use xlink:href={{this.svgLink}}></use>
-            </svg>
-            {{ else }}
-            <i class={{iconClasses}}></i>
-            {{ /if }}
+    {{#if this.buttonTemplateName}}
+        {{>UI.dynamic template=this.buttonTemplateName data=this}}
+    {{else}}
+        <div id="{{this.id}}"
+            class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if this.disabled}}disabled{{/if}}"
+            title="{{this.title}}">
+            <div class="svgContainer">
+                {{#if this.svgLink}}
+                <svg>
+                    <use xlink:href={{this.svgLink}}></use>
+                </svg>
+                {{else}}
+                <i class={{iconClasses}}></i>
+                {{/if}}
+            </div>
+            <div class="buttonLabel">
+                {{this.title}}
+            </div>
         </div>
-        <div class="buttonLabel">
-            {{this.title}}
-        </div>
-    </div>
-    {{ /if }}
+    {{/if}}
 </template>

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js

@@ -15,6 +15,11 @@ Template.toolbarSectionButton.helpers({
 
 Template.toolbarSectionButton.events({
     'click .imageViewerTool'(event, instance) {
+        // Stop here if the tool is disabled
+        if ($(event.currentTarget).hasClass('disabled')) {
+            return;
+        }
+
         const tool = event.currentTarget.id;
         const elements = instance.$('.imageViewerViewport');
 
@@ -29,6 +34,11 @@ Template.toolbarSectionButton.events({
         }
     },
     'click .imageViewerCommand'(event, instance) {
+        // Stop here if the tool is disabled
+        if ($(event.currentTarget).hasClass('disabled')) {
+            return;
+        }
+
         const command = event.currentTarget.id;
         if (!OHIF.viewer.functionList || !OHIF.viewer.functionList.hasOwnProperty(command)) {
             return;

Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl

@@ -2,9 +2,9 @@
 
 .toolbarSectionButton
   display: inline-block
-  color: $defaultColor
-  fill: $defaultColor
-  stroke: $defaultColor
+  theme('color', '$defaultColor')
+  theme('fill', '$defaultColor')
+  theme('stroke', '$defaultColor')
   min-width: 30px
   cursor: pointer
   text-align: center
@@ -14,7 +14,7 @@
     cursor: not-allowed
 
   .buttonLabel
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     font-size: 12px
     font-weight: 500
 
@@ -34,22 +34,22 @@
 
   &:hover
     .buttonLabel
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
     svg
-      fill: $hoverColor
-      stroke: $hoverColor
+      theme('fill', '$hoverColor')
+      theme('stroke', '$hoverColor')
       
     i
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
   &:active, &.active
     .buttonLabel
-      color: $activeColor
+      theme('color', '$activeColor')
 
     svg
-      fill: $activeColor
-      stroke: $activeColor
+      theme('fill', '$activeColor')
+      theme('stroke', '$activeColor')
       
     i
-      color: $activeColor
+      theme('color', '$activeColor')

Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl

@@ -9,13 +9,14 @@ $distance = 12px
     bottom: - ($toolbarDrawerHeight + $distance)
     height: $toolbarDrawerHeight
     left: 0
+    min-width: 100%
     position: absolute
-    width: 100%
+    white-space: nowrap
 
     .toolbarSectionDrawer
-      background-color: $uiGrayDarker
+      theme('background-color', '$uiGrayDarker')
       border-radius: 7px
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       content: ''
       display: block
       font-size: 18px
@@ -30,4 +31,4 @@ $distance = 12px
       width: 8px
 
     &.active .buttonLabel i
-      transform(rotateX(180deg))
+      transform(rotateX(180deg))

Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl

@@ -11,8 +11,8 @@
 
     #imageViewerViewports
       .viewportContainer
+        theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
         float: left
-        border: $viewportBorderThickness solid $viewportBorderColor
 
         outline: 0 // Prevent blue outline in Chrome
 
@@ -22,12 +22,12 @@
           outline: 0 // Prevent blue outline in Chrome
 
         &:hover
-          border: $viewportBorderThickness solid $viewportBorderColorHover
-          
+          theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
+
         &.active, &:hover.active
-          border: $viewportBorderThickness solid $viewportBorderColorActive
+          theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
 
         .removable
           width: 100%
           height: 100%
-          position: relative // Necessary so that the viewportOverlay is on top of the viewports
+          position: relative // Necessary so that the viewportOverlay is on top of the viewports

Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl

@@ -6,7 +6,7 @@ $viewportTagPadding = 20px
   display: none
 
 .imageViewerViewportOverlay
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
 
   .dicomTag
     position: absolute