wip on react transition 4

Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar/ImageScrollbar.js

@@ -0,0 +1,68 @@
+import { Component } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import './ImageScrollbar.styl';
+
+class ImageScrollbar extends Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = this.onChange.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+  }
+
+  render() {
+    this.style = {
+      width: `${this.props.height}`
+    };
+
+    return (
+      <div className="scroll">
+        <div className="scroll-holder">
+          <input
+            className="imageSlider"
+            style={this.style}
+            type="range"
+            min="0"
+            max={this.props.max}
+            step="1"
+            value={this.props.value}
+            onChange={this.onChange}
+            onKeyDown={this.onKeyDown}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  onChange(event) {
+    const intValue = parseInt(event.target.value, 10);
+    this.props.onInputCallback(intValue);
+  }
+
+  onKeyDown(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)
+
+    // Store the KeyCodes in an object for readability
+    const keys = {
+        DOWN: 40,
+        UP: 38
+    };
+
+    if (event.which === keys.DOWN) {
+        OHIF.commands.run('scrollDown');
+        event.preventDefault();
+    } else if (event.which === keys.UP) {
+        OHIF.commands.run('scrollUp');
+        event.preventDefault();
+    }
+  }
+}
+
+ImageScrollbar.propTypes = {
+  value: PropTypes.number.isRequired,
+  onInputCallback: PropTypes.func.isRequired
+};
+
+export default ImageScrollbar;

Packages/ohif-viewerbase/client/components/viewer/ImageScrollbar/ImageScrollbar.styl

@@ -0,0 +1,123 @@
+@import "{ohif:design}/app"
+
+$imageSliderBorderRadius = 57px
+$imageSliderTrackColor = rgba(0,0,0,0)
+$imageSliderBorder = none
+
+// Note that these are backwards due to the magic needed to make a cross-browser vertical slider
+$imageSliderWidth = 12px
+$imageSliderHeight = 39px
+
+.scroll
+  height: 100%
+  padding: 5px
+  position: absolute
+  right: 0
+  top: 0
+
+  .scroll-holder
+    height: calc(100% - 20px)
+    margin-top: 5px
+    position: relative
+    width: 12px
+
+    .imageSlider
+      height: $imageSliderWidth
+      left: 12px
+      padding: 0
+      position: absolute
+      top: 0
+
+      vendorize(transform, rotate(90deg))
+      vendorize(transform-origin, top left)
+
+      -webkit-appearance: none
+      background-color: $imageSliderTrackColor
+
+      // Remove focus highlights on range input
+      &:focus
+        outline: none
+        vendorize(box-shadow, none)
+
+      // Remove focus border in Firefox
+      &::-moz-focus-outer
+        border: none
+
+      // --- Style the range track --- //
+      &::-webkit-slider-runnable-track
+        background-color: $imageSliderTrackColor
+        border: none
+        cursor: pointer
+        height: 5px
+        z-index: 6
+
+      &::-moz-range-track
+        background-color: $imageSliderTrackColor
+        border: none
+        cursor: pointer
+        height: 2px
+        z-index: 6
+
+      &::-ms-track
+        animate: 0.2s
+        background: transparent
+        border: none
+        border-width: 15px 0
+        color: $imageSliderTrackColor
+        cursor: pointer
+        height: $imageSliderWidth
+        width: 100%
+
+      // Hide any fill IE tries to add
+      &::-ms-fill-lower
+        background: $imageSliderTrackColor
+
+      &::-ms-fill-upper
+        background: $imageSliderTrackColor
+
+      // --- Style the range thumb --- //
+      &::-webkit-slider-thumb
+        -webkit-appearance: none !important
+        theme('background-color', '$imageSliderColor')
+        border: $imageSliderBorder
+        border-radius: $imageSliderBorderRadius
+        cursor: -webkit-grab
+        height: $imageSliderWidth
+        margin-top: -4px
+        width: $imageSliderHeight
+
+        &:active
+          theme('background-color', '$activeColor')
+          cursor: -webkit-grabbing
+
+      &::-moz-range-thumb
+        theme('background-color', '$imageSliderColor')
+        border: $imageSliderBorder
+        border-radius: $imageSliderBorderRadius
+        cursor: -moz-grab
+        height: $imageSliderWidth
+        width: $imageSliderHeight
+        z-index: 7
+
+        &:active
+          theme('background-color', '$activeColor')
+          cursor: -moz-grabbing
+
+      &::-ms-thumb
+        theme('background-color', '$imageSliderColor')
+        border: $imageSliderBorder
+        border-radius: $imageSliderBorderRadius
+        cursor: ns-resize
+        height: $imageSliderWidth
+        width: $imageSliderHeight
+
+        &: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