Creating helpers to add classes in viewports and Layout Manager elements, so any app using ohif-viewerbase can style on its own

Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html

@@ -1,7 +1,7 @@
 <template name="gridLayout">
     <div id='imageViewerViewports'>
         {{#each viewport in viewports}}
-            <div class="viewportContainer" style="height:{{height}}%;width:{{width}}%;">
+            <div class="viewportContainer {{getClass @index}}" style="height:{{height}}%;width:{{width}}%;">
                 <div class="removable">
                     {{>imageViewerViewport (clone viewport)}}
                 </div>

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

@@ -1,6 +1,10 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 
+const TOP_CLASS = 'top';
+const BOTTOM_CLASS = 'bottom';
+const MIDDLE_CLASS = 'middle';
+
 Template.gridLayout.helpers({
     // Get the height percentage for each viewport
     height() {
@@ -16,6 +20,27 @@ Template.gridLayout.helpers({
         return 100 / columns;
     },
 
+    // Get class for each viewport, so each app
+    // using ohif-viewerbase can style on their own
+    getClass(index) {
+        const { rows, columns } = this;
+
+        if (rows === 1) {
+            return `${TOP_CLASS} ${BOTTOM_CLASS}`;
+        }
+
+        const actualRow = Math.floor(index / columns);
+            
+        if ( actualRow === 0 ) {
+            return TOP_CLASS;
+        }
+        if ( actualRow + 1 === rows ) {
+            return BOTTOM_CLASS;
+        }
+
+        return MIDDLE_CLASS;
+    },
+    
     // Return the viewports list
     viewports() {
         const instance = Template.instance();

Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js

@@ -21,6 +21,7 @@ export class LayoutManager {
             rows: 1,
             columns: 1
         };
+        this.layoutClassName = this.getLayoutClass();
 
         this.isZoomed = false;
 
@@ -111,6 +112,28 @@ export class LayoutManager {
         }
     }
 
+    getLayoutClass() {
+        const { rows, columns } = this.layoutProps;
+        const layoutClass = `layout-${rows}-${columns}`;
+
+        return layoutClass;
+    }
+
+    // To help other apps using ohif-viewerbase,
+    // so they can style on their own
+    updateLayoutClass() {
+        const newLayoutClass = this.getLayoutClass();
+        
+        // If layout has changed, change its class
+        if (this.layoutClassName !== newLayoutClass) {
+            this.parentNode.classList.remove(this.layoutClassName);
+        }
+
+        this.layoutClassName = newLayoutClass;
+
+        this.parentNode.classList.add(newLayoutClass);
+    }
+
     updateViewports() {
         OHIF.log.info('LayoutManager updateViewports');
 
@@ -133,8 +156,10 @@ export class LayoutManager {
         });
 
         const layoutTemplate = Template[this.layoutTemplateName];
+        const $parentNode = $(this.parentNode);
 
-        $(this.parentNode).html('');
+        $parentNode.html('');
+        this.updateLayoutClass();
         Blaze.renderWithData(layoutTemplate, data, this.parentNode);
 
         this.updateSession();