Fixed OHIF Viewer layout / CINE / Hanging Protocol buttons (OHIF-49)

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

@@ -1,20 +0,0 @@
-<template name="hangingProtocolButtons">
-    <button id="previousPresentationGroup" type="button"
-            class="btn btn-sm"
-            data-container="body"
-            data-toggle="tooltip"
-            data-placement="bottom"
-            title="Previous presentation group"
-            disabled="{{ #unless isPreviousAvailable }} true {{ /unless }}">
-        <span class="fa fa-step-backward"></span>
-    </button>
-    <button id="nextPresentationGroup" type="button"
-            class="btn btn-sm"
-            data-container="body"
-            data-toggle="tooltip"
-            data-placement="bottom"
-            title="Next presentation group"
-            disabled="{{ #unless isNextAvailable }} true {{ /unless }}">
-        <span class="fa fa-step-forward"></span>
-    </button>
-</template>

Packages/hangingprotocols/client/components/hangingProtocolButtons/hangingProtocolButtons.js

@@ -1,73 +0,0 @@
-Template.hangingProtocolButtons.helpers({
-    /**
-     * Check if a later stage exists for the user to switch to
-     *
-     * @returns {boolean} Whether or not a later stage exists
-     */
-    isNextAvailable: function() {
-        // Run this helper whenever the ProtocolEngine / LayoutManager has changed
-        Session.get('LayoutManagerUpdated');
-
-        // If no ProtocolEngine has been defined yet, stop here
-        if (!ProtocolEngine) {
-            return;
-        }
-
-        // Return whether or not the current stage is the last stage
-        return ProtocolEngine.stage < ProtocolEngine.getNumProtocolStages() - 1;
-    },
-    /**
-     * Check if an earlier stage exists for the user to switch to
-     *
-     * @returns {boolean} Whether or not an earlier stage exists
-     */
-    isPreviousAvailable: function() {
-        // Run this helper whenever the ProtocolEngine / LayoutManager has changed
-        Session.get('LayoutManagerUpdated');
-
-        // If no ProtocolEngine has been defined yet, stop here
-        if (!ProtocolEngine) {
-            return;
-        }
-
-        // Return whether or not the current stage is the first stage
-        return ProtocolEngine.stage > 0;
-    }
-});
-
-Template.hangingProtocolButtons.events({
-    /**
-     * Switch to the previous Presentation group
-     *
-     * @param event The click event on the button
-     */
-    'click #previousPresentationGroup': function(event) {
-        // If no ProtocolEngine has been defined yet, do nothing
-        if (!ProtocolEngine) {
-            return;
-        }
-
-        // Hide the button's Bootstrap tooltip in case it was shown
-        $(event.currentTarget).tooltip('hide');
-
-        // Instruct the ProtocolEngine to switch to the next stage
-        ProtocolEngine.previousProtocolStage();
-    },
-    /**
-     * Switch to the next Presentation group
-     *
-     * @param event The click event on the button
-     */
-    'click #nextPresentationGroup': function(event) {
-        // If no ProtocolEngine has been defined yet, do nothing
-        if (!ProtocolEngine) {
-            return;
-        }
-
-        // Hide the button's Bootstrap tooltip in case it was shown
-        $(event.currentTarget).tooltip('hide');
-
-        // Instruct the ProtocolEngine to switch to the next stage
-        ProtocolEngine.nextProtocolStage();
-    }
-}); 

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

@@ -6,7 +6,8 @@
                 aria-haspopup="true"
                 aria-expanded="false"
                 title="Select Hanging Protocol">
-            <i class="fa fa-list-ol"></i><span class="caret"></span>
+            <i class="fa fa-list-ol"></i>
+            <span class="caret"></span>
         </button>
         <ul class="dropdown-menu">
             <li>
@@ -14,7 +15,9 @@
             </li>
             {{ #each matchedProtocols }}
             <li>
-                <a class='matchedProtocol {{#if active}}active{{/if}}'>{{name}}</a>
+                <a class='matchedProtocol {{#if active}}active{{/if}}'>
+                    {{name}}
+                </a>
             </li>
             {{ /each }}
         </ul>

Packages/hangingprotocols/client/components/nextPresentationGroupButton/nextPresentationGroupButton.html

@@ -0,0 +1,19 @@
+<template name="nextPresentationGroupButton">
+    <div id="{{this.id}}"
+         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{ #if nextNotAvailable }}disabled{{ /if }}"
+         title="{{this.title}}"
+         disabled="{{ #if nextNotAvailable }}true{{ /if }}">
+    <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>
+</template>

Packages/hangingprotocols/client/components/nextPresentationGroupButton/nextPresentationGroupButton.js

@@ -0,0 +1,39 @@
+Template.nextPresentationGroupButton.helpers({
+    /**
+     * Check if a later stage exists for the user to switch to
+     *
+     * @returns {boolean} Whether or not a later stage exists
+     */
+    nextNotAvailable() {
+        // Run this helper whenever the ProtocolEngine / LayoutManager has changed
+        Session.get('LayoutManagerUpdated');
+
+        // If no ProtocolEngine has been defined yet, stop here
+        if (!ProtocolEngine) {
+            return;
+        }
+
+        // Return whether or not the current stage is the last stage
+        return ProtocolEngine.stage === ProtocolEngine.getNumProtocolStages() - 1;
+    }
+});
+
+Template.nextPresentationGroupButton.events({
+    /**
+     * Switch to the next Presentation group
+     *
+     * @param event The click event on the button
+     */
+    'click #nextPresentationGroup'(event) {
+        // If no ProtocolEngine has been defined yet, do nothing
+        if (!ProtocolEngine) {
+            return;
+        }
+
+        // Hide the button's Bootstrap tooltip in case it was shown
+        $(event.currentTarget).tooltip('hide');
+
+        // Instruct the ProtocolEngine to switch to the next stage
+        ProtocolEngine.nextProtocolStage();
+    }
+});

Packages/hangingprotocols/client/components/previousPresentationGroupButton/previousPresentationGroupButton.html

@@ -0,0 +1,19 @@
+<template name="previousPresentationGroupButton">
+    <div id="{{this.id}}"
+         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{ #if previousNotAvailable }}disabled{{ /if }}"
+         title="{{this.title}}"
+         disabled="{{ #if previousNotAvailable }}true{{ /if }}">
+        <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>
+</template>

Packages/hangingprotocols/client/components/previousPresentationGroupButton/previousPresentationGroupButton.js

@@ -0,0 +1,39 @@
+Template.previousPresentationGroupButton.helpers({
+    /**
+     * Check if an earlier stage exists for the user to switch to
+     *
+     * @returns {boolean} Whether or not an earlier stage exists
+     */
+    previousNotAvailable() {
+        // Run this helper whenever the ProtocolEngine / LayoutManager has changed
+        Session.get('LayoutManagerUpdated');
+
+        // If no ProtocolEngine has been defined yet, stop here
+        if (!ProtocolEngine) {
+            return;
+        }
+
+        // Return whether or not the current stage is the first stage
+        return ProtocolEngine.stage === 0;
+    }
+});
+
+Template.previousPresentationGroupButton.events({
+    /**
+     * Switch to the previous Presentation group
+     *
+     * @param event The click event on the button
+     */
+    'click #previousPresentationGroup'(event) {
+        // If no ProtocolEngine has been defined yet, do nothing
+        if (!ProtocolEngine) {
+            return;
+        }
+
+        // Hide the button's Bootstrap tooltip in case it was shown
+        $(event.currentTarget).tooltip('hide');
+
+        // Instruct the ProtocolEngine to switch to the next stage
+        ProtocolEngine.previousProtocolStage();
+    }
+});