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

OHIFViewer/client/components/toolbarSection/toolbarSection.html

@@ -8,6 +8,9 @@
             <div class="pull-right m-t-1 rm-x-1">
                 {{>roundedButtonGroup rightSidebarToggleButtonData}}
             </div>
+            <div class="pull-right">
+                {{> toolbarSectionTools toolbarButtons=hangingProtocolButtons}}
+            </div>
         </div>
     </div>
 </template>

OHIFViewer/client/components/toolbarSection/toolbarSection.js

@@ -82,6 +82,27 @@ Template.toolbarSection.helpers({
             iconClasses: 'fa fa-undo'
         });
 
+        buttonData.push({
+            id: 'toggleCinePlay',
+            title: 'Toggle CINE Play',
+            classes: 'imageViewerCommand',
+            buttonTemplateName: 'playClipButton'
+        });
+
+        buttonData.push({
+            id: 'toggleCineDialog',
+            title: 'CINE',
+            classes: 'imageViewerCommand',
+            iconClasses: 'fa fa-youtube-play'
+        });
+
+        buttonData.push({
+            id: 'layout',
+            title: 'Layout',
+            iconClasses: 'fa fa-th-large',
+            buttonTemplateName: 'layoutButton'
+        });
+
         return buttonData;
     },
 
@@ -145,6 +166,26 @@ Template.toolbarSection.helpers({
         });
 
         return buttonData;   
+    },
+
+    hangingProtocolButtons() {
+        let buttonData = [];
+
+        buttonData.push({
+            id: 'previousPresentationGroup',
+            title: 'Prev. Stage',
+            iconClasses: 'fa fa-step-backward',
+            buttonTemplateName: 'previousPresentationGroupButton'
+        });
+
+        buttonData.push({
+            id: 'nextPresentationGroup',
+            title: 'Next Stage',
+            iconClasses: 'fa fa-step-forward',
+            buttonTemplateName: 'nextPresentationGroupButton'
+        });
+
+        return buttonData;
     }
 
 });
@@ -152,6 +193,8 @@ Template.toolbarSection.helpers({
 Template.toolbarSection.onRendered(function() {
     const instance = Template.instance();
 
+    instance.$('#layout').dropdown();
+
     // Set disabled/enabled tool buttons that are set in toolManager
     const states = toolManager.getToolDefaultStates();
     const disabledToolButtons = states.disabledToolButtons;