AWV-3: Adding next and previous display set buttons for CINE dialog

Packages/ohif-core/client/components/base/index.js

@@ -21,6 +21,7 @@ import './mixins/select2.js';
 import './mixins/selectTree.js';
 
 // Templates
+import './templates/button.html';
 import './templates/custom.html';
 import './templates/div.html';
 import './templates/form.html';
@@ -29,4 +30,4 @@ import './templates/select.html';
 
 // wrappers
 import './wrappers/label.html';
-import './wrappers/title.html';
+import './wrappers/labelContent.html';

Packages/ohif-core/client/components/base/templates/button.html

@@ -0,0 +1,11 @@
+<template name="baseButton">
+    <button
+        id="{{this.id}}"
+        class="{{this.class}}"
+        disabled="{{#if this.disabled}}disabled{{/if}}"
+        title="{{this.title}}"
+        {{this.tagAttributes}}
+    >
+        {{>UI.contentBlock}}
+    </button>
+</template>

Packages/ohif-core/client/components/base/templates/input.html

@@ -7,6 +7,7 @@
         value="{{reactive this.value}}"
         placeholder="{{this.placeholder}}"
         checked="{{#if this.checked}}checked{{/if}}"
+        disabled="{{#if this.disabled}}disabled{{/if}}"
         min="{{this.min}}"
         max="{{this.max}}"
         maxlength="{{choose this.maxlength this.max}}"

Packages/ohif-core/client/components/base/wrappers/label.html

@@ -1,11 +1,15 @@
 <template name="wrapperLabel">
-    <label class="wrapperLabel {{this.labelClass}}">
+    {{#unless this.labelAsDiv}}
-        {{#if this.labelAfter}}
+        <label class="wrapperLabel {{this.labelClass}}">
-            {{>UI.contentBlock}}
+            {{#wrapperLabelContent}}
-        {{/if}}
+                {{>UI.contentBlock}}
-        <span class="wrapperText">{{>section 'labelBeforeText'}}{{reactive this.label}}{{>section 'labelAfterText'}}</span>
+            {{/wrapperLabelContent}}
-        {{#unless this.labelAfter}}
+        </label>
-            {{>UI.contentBlock}}
+    {{else}}
-        {{/unless}}
+        <div class="wrapperLabel {{this.labelClass}}">
-    </label>
+            {{#wrapperLabelContent}}
+                {{>UI.contentBlock}}
+            {{/wrapperLabelContent}}
+        </div>
+    {{/unless}}
 </template>

Packages/ohif-core/client/components/base/wrappers/labelContent.html

@@ -0,0 +1,9 @@
+<template name="wrapperLabelContent">
+    {{#if this.labelAfter}}
+        {{>UI.contentBlock}}
+    {{/if}}
+    <span class="wrapperText">{{>section 'labelBeforeText'}}{{reactive this.label}}{{>section 'labelAfterText'}}</span>
+    {{#unless this.labelAfter}}
+        {{>UI.contentBlock}}
+    {{/unless}}
+</template>

Packages/ohif-core/client/components/base/wrappers/title.html

@@ -1,11 +0,0 @@
-<template name="wrapperTitle">
-    <div class="wrapperTitle {{this.labelClass}}">
-        {{#if this.labelAfter}}
-            {{>UI.contentBlock}}
-        {{/if}}
-        <span class="wrapperText">{{>section 'labelBeforeText'}}{{reactive this.label}}{{>section 'labelAfterText'}}</span>
-        {{#unless this.labelAfter}}
-            {{>UI.contentBlock}}
-        {{/unless}}
-    </div>
-</template>

Packages/ohif-core/client/components/bootstrap/form/button.html

@@ -0,0 +1,9 @@
+<template name="button">
+    {{#baseComponent (extend this
+        base='baseButton'
+        class=(concat 'btn ' this.class)
+        mixins=(concat 'formItem ' this.mixins)
+    )}}
+        {{>UI.contentBlock}}
+    {{/baseComponent}}
+</template>

Packages/ohif-core/client/components/bootstrap/index.js

@@ -1,3 +1,4 @@
+import './form/button.html';
 import './form/form.html';
 import './form/group.html';
 

Packages/ohif-core/client/components/bootstrap/input/groupRadio.html

@@ -3,9 +3,10 @@
         class=(concat 'group-radio ' this.class)
         mixins=(concat 'groupRadio ' this.mixins)
         wrappers=(concat ''
-            (valueIf reactive this.label 'wrapperTitle ' '')
+            (valueIf reactive this.label 'wrapperLabel ' '')
             this.wrappers
         )
+        labelAsDiv=true
     )}}
         {{>UI.contentBlock}}
         {{#each item in (reactive this.items)}}

Packages/ohif-core/client/components/bootstrap/input/range.html

@@ -2,6 +2,7 @@
     {{#baseComponent (extend this
         base='baseInput'
         type='range'
+        class=(concat 'form-control ' this.class)
         mixins=(concat 'input ' this.mixins)
         wrappers=(concat ''
             (valueIf reactive this.label 'wrapperLabel ' '')

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

@@ -1,40 +1,52 @@
 <template name="cineDialog">
     {{#form id='cineDialog' class='noselect' schema=instance.schema}}
         <h5>CINE Controls</h5>
-        <div class="btn-group">
+        <div class="cine-navigation">
-            <a id="cineFirstButton" title="Skip to first image" class="btn" data-toggle="tooltip">
+            <div class="btn-group">
-                <i class="fa fa-fast-backward"></i>
+                {{#button id='cineDisplaySetPrevious' title='Previous display set'}}
-            </a>
+                    <i class="fa fa-toggle-up"></i>
-            <a id="cineBackButton" title="Previous image" class="btn" data-toggle="tooltip">
+                {{/button}}
-                <i class="fa fa-step-backward"></i>
+                {{#button id='cineDisplaySetNext' title='Next display set'}}
-            </a>
+                    <i class="fa fa-toggle-down"></i>
-            <a id="cineSlowPlaybackButton" title="Slow playback" class="btn" data-toggle="tooltip">
+                {{/button}}
-                <i class="fa fa-backward"></i>
-            </a>
-            <a id="cinePlayButton" title="Play / Stop" class="btn {{#if isPlaying}}active{{/if}}" data-toggle="tooltip">
-                {{#if isPlaying}}
-                    <i class="fa fa-fw fa-stop"></i>
-                {{else}}
-                    <i class="fa fa-fw fa-play"></i>
-                {{/if}}
-            </a>
-            <a id="cineFastForwardButton" title="Increase playback speed" class="btn" data-toggle="tooltip">
-                <i class="fa fa-forward"></i>
-            </a>
-            <a id="cineNextButton" title="Next image" class="btn" data-toggle="tooltip">
-                <i class="fa fa-step-forward"></i>
-            </a>
-            <a id="cineLastButton" title="Skip to last image" class="btn" data-toggle="tooltip">
-                <i class="fa fa-fast-forward"></i>
-            </a>
-        </div>
-        <div id="cineOptions">
-            <div id="loopSection">
-                {{>inputCheckbox id='cineLoopCheckbox' key='loop'}}
             </div>
-            <div id="fpsSection">
+        </div>
-                {{#inputRange id='cineSlider' key='speed' labelClass='form-group'}}
+        <div class="cine-controls">
-                    {{#section 'labelAfterText'}}: <span id="fps">{{framerate}}</span>{{/section}}
+            <div class="btn-group">
+                {{#button id='cineFirstButton' title='Skip to first image'}}
+                    <i class="fa fa-fast-backward"></i>
+                {{/button}}
+                {{#button id='cineBackButton' title='Previous image'}}
+                    <i class="fa fa-step-backward"></i>
+                {{/button}}
+                {{#button id='cineSlowPlaybackButton' title='Slow playback'}}
+                    <i class="fa fa-backward"></i>
+                {{/button}}
+                {{#button id='cinePlayButton' title='Play / Stop' class=(valueIf isPlaying 'active' '')}}
+                    {{#if isPlaying}}
+                        <i class="fa fa-fw fa-stop"></i>
+                    {{else}}
+                        <i class="fa fa-fw fa-play"></i>
+                    {{/if}}
+                {{/button}}
+                {{#button id='cineFastForwardButton' title='Increase playback speed'}}
+                    <i class="fa fa-forward"></i>
+                {{/button}}
+                {{#button id='cineNextButton' title='Next image'}}
+                    <i class="fa fa-step-forward"></i>
+                {{/button}}
+                {{#button id='cineLastButton' title='Skip to last image'}}
+                    <i class="fa fa-fast-forward"></i>
+                {{/button}}
+            </div>
+        </div>
+        <div class="cine-options">
+            <div class="fps-section">
+                {{#inputRange id='cineSlider' key='speed' class='p-a-0' labelClass='form-group m-a-0' labelAsDiv=true}}
+                    {{#section 'labelAfterText'}}:
+                        <span id="fps">{{framerate}}</span>
+                        {{>inputCheckbox id='cineLoopCheckbox' key='loop' labelClass='pull-right m-a-0'}}
+                    {{/section}}
                 {{/inputRange}}
             </div>
         </div>

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

@@ -23,8 +23,8 @@ Template.cineDialog.onCreated(() => {
         OHIF.viewer.cine.framesPerSecond = rate;
 
         // Update playClip toolData for this imageId
-        var element = getActiveViewportElement();
+        const element = getActiveViewportElement();
-        var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
+        const playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
         playClipToolData.data[0].framesPerSecond = OHIF.viewer.cine.framesPerSecond;
 
         // If the movie is playing, stop/start to update the framerate
@@ -38,12 +38,19 @@ Template.cineDialog.onCreated(() => {
 });
 
 Template.cineDialog.onRendered(() => {
-    const instance = Template.instance();
+    // Make the CINE dialog bounded and draggable
-    const dialog = instance.$('#cineDialog');
+    Template.instance().$('#cineDialog').bounded().draggable();
-    dialog.draggable();
 });
 
 Template.cineDialog.events({
+    'click #cineDisplaySetPrevious'(event, instance) {
+        OHIF.viewer.moveDisplaySets(false);
+    },
+
+    'click #cineDisplaySetNext'(event, instance) {
+        OHIF.viewer.moveDisplaySets(true);
+    },
+
     'click #cineFirstButton'(event, instance) {
         switchToImageByIndex(0);
     },
@@ -79,16 +86,20 @@ Template.cineDialog.events({
     },
 
     'change #cineLoopCheckbox'(event, instance) {
-        var element = getActiveViewportElement();
+        const element = getActiveViewportElement();
-        var playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
+        const playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
         playClipToolData.data[0].loop = $(event.currentTarget).is(':checked');
         OHIF.viewer.cine.loop = playClipToolData.data[0].loop;
     },
 
     'input #cineSlider'(event, instance) {
         // Update the FPS text onscreen
-        var rate = parseFloat($(event.currentTarget).val());
+        const rate = parseFloat($(event.currentTarget).val());
         instance.updateFramerate(rate);
+    },
+
+    submit(event, instance) {
+        event.preventDefault();
     }
 });
 

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

@@ -4,25 +4,29 @@
   theme('border', '1px solid $uiBorderColor')
   theme('background', '$uiGrayDarkest')
   theme('color', '$textSecondaryColor')
-  display: none
+  border-radius: 8px
-  z-index: 1000
-  position: absolute
-  top: auto
-  left: auto
   bottom: 3px
-  right: 3px
+  box-sizing: border-box
+  display: none
+  height: 150px
+  left: auto
+  opacity: 0.95
   overflow: hidden
   padding: 10px
+  position: absolute
+  right: 3px
+  top: auto
   width: 300px
-  height: 175px
+  z-index: 1000
-  opacity: 0.95
+
-  border-radius: 8px
+  h5
+    font-size: 20px
+    line-height: 35px
+    margin: 0
 
   h5, label
     font-weight: 400
 
-  box-sizing: border-box
-
   .btn
     theme('background', '$uiGrayDarkest')
     theme('color', '$textSecondaryColor')
@@ -33,9 +37,25 @@
     &:active, &.active
       theme('color', '$activeColor')
 
-  #cineOptions
+  .cine-navigation
+    position: absolute
+    right: 24px
+    top: 4px
+
+    .btn
+      padding: 0 4px
+
+      i
+        font-size: 36px
+        line-height: 36px
+
+  .cine-controls
+    display: table
+    margin: 0 auto
+
+  .cine-options
     padding: 5px 0
     overflow: auto
 
-    #loopSection
+    .loop-section
       padding-right: 12px