From 35903109ab519aa4f70595e803f18c40ac92b719 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Wed, 19 Apr 2017 07:45:39 -0300 Subject: [PATCH] Fixing scrollbar thumb width on IE11 --- .../viewer/cineDialog/cineDialog.styl | 7 ++++-- .../viewer/imageControls/imageControls.html | 10 +++------ .../viewer/imageControls/imageControls.js | 12 +++++----- .../viewer/imageControls/imageControls.styl | 22 +++++++++++-------- 4 files changed, 28 insertions(+), 23 deletions(-) diff --git a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl index a237890ef..a421f6b86 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl @@ -28,7 +28,7 @@ &:active, &.active theme('color', '$activeColor') - + &[disabled] &:hover color: inherit @@ -37,13 +37,16 @@ .cine-navigation, .cine-controls, .cine-options cursor: default - + .fps-section input[type="range"] background-color: transparent border: 0 none outline: 0 none + &::-ms-tooltip + display: none + .double-row-style box-sizing: border-box width: 300px diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.html b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.html index 2a27ab718..0264889e4 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.html +++ b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.html @@ -1,11 +1,7 @@ \ No newline at end of file + diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js index 3cdc3a88a..abf880ec1 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js +++ b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js @@ -1,5 +1,6 @@ import { Template } from 'meteor/templating'; import { $ } from 'meteor/jquery'; +import { OHIF } from 'meteor/ohif:core'; import { setActiveViewport } from '../../../lib/setActiveViewport'; import { switchToImageByIndex } from '../../../lib/switchToImageByIndex'; @@ -11,12 +12,12 @@ Template.imageControls.onRendered(() => { // Set the current imageSlider width to its parent's height // (because webkit is stupid and can't style vertical sliders) - const $slider = instance.$('#imageSlider'); + const $slider = instance.$('.imageSlider'); const $element = $slider.parents().eq(2).siblings('.imageViewerViewport'); const viewportHeight = $element.height(); $slider.width(viewportHeight - 20); -}) +}); Template.imageControls.events({ 'keydown input[type=range]'(event) { @@ -37,6 +38,7 @@ Template.imageControls.events({ event.preventDefault(); } }, + 'input input[type=range], change input[type=range]'(event) { // Note that we throttle requests to prevent the // user's ultrafast scrolling from firing requests too quickly. @@ -44,13 +46,13 @@ Template.imageControls.events({ slideTimeout = setTimeout(() => { // Using the slider in an inactive viewport // should cause that viewport to become active - const slider = $(event.currentTarget); - const newActiveElement = slider.parents('.viewportContainer').find('.imageViewerViewport'); + const $slider = $(event.currentTarget); + const newActiveElement = $slider.parents('.viewportContainer').find('.imageViewerViewport'); setActiveViewport(newActiveElement); // Subtract 1 here since the slider goes from 1 to N images // But the stack indexing starts at 0 - const newImageIdIndex = parseInt(slider.val(), 10) - 1; + const newImageIdIndex = parseInt($slider.val(), 10) - 1; switchToImageByIndex(newImageIdIndex); }, slideTimeoutTime); diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.styl b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.styl index 1ceb8129f..b3ac6a0b6 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.styl +++ b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.styl @@ -7,7 +7,6 @@ $imageSliderBorder = none // Note that these are backwards due to the magic needed to make a cross-browser vertical slider $imageSliderWidth = 12px $imageSliderHeight = 39px -$imageSliderCursor = grab .imageControls position: absolute @@ -16,12 +15,12 @@ $imageSliderCursor = grab height: 100% padding: 5px - #scrollbar + .scrollbar height: calc(100% - 20px); margin-top: 5px width: 31px - #imageSlider + .imageSlider position: absolute left: 20px @@ -57,7 +56,7 @@ $imageSliderCursor = grab &::-ms-track width: 100% - height: 2px + height: $imageSliderWidth border: none cursor: pointer animate: 0.2s @@ -80,11 +79,12 @@ $imageSliderCursor = grab border: $imageSliderBorder height: $imageSliderWidth width: $imageSliderHeight - cursor: $imageSliderCursor + cursor: -webkit-grab margin-top: -7px &:active theme('background-color', '$activeColor') + cursor: -webkit-grabbing &::-moz-range-thumb theme('background-color', '$imageSliderColor') @@ -92,11 +92,12 @@ $imageSliderCursor = grab border: $imageSliderBorder height: $imageSliderWidth width: $imageSliderHeight - cursor: $imageSliderCursor + cursor: -moz-grab z-index: 7 &:active theme('background-color', '$activeColor') + cursor: -moz-grabbing &::-ms-thumb theme('background-color', '$imageSliderColor') @@ -104,12 +105,15 @@ $imageSliderCursor = grab border: $imageSliderBorder height: $imageSliderWidth width: $imageSliderHeight - cursor: $imageSliderCursor + cursor: ns-resize &:active theme('background-color', '$activeColor') + &::-ms-tooltip + display: none + // Set left position in IE, border-width attribute breaks left position of imageSlider @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) - #imageSlider - left: 50px \ No newline at end of file + .imageSlider + left: 50px