LT-115: Fixing toolbar box window overflowing

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

@@ -5,7 +5,6 @@
         <div id="{{this.id}}" tabindex="1"
             class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if or this.disabled (disableButton)}}disabled{{/if}} {{#if this.subTools}}expandable{{/if}}"
             title="{{this.tooltipTitle}}">
-            <div class="focus-holder" tabindex="1"></div>
             <div class="svgContainer">
                 {{#let svg=svgLink icon=iconClasses}}
                     {{#if svg}}

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

@@ -6,6 +6,41 @@ Template.toolbarSectionTools.events({
         const $target = $(event.currentTarget);
         const isExpanded = $target.hasClass('expanded');
         $target.toggleClass('expanded', !isExpanded);
+
+        // Remove the previously set repositioning css attribute
+        const $box = $target.find('.toolbarSectionDrawerContainer:first');
+        $box.css('left', '');
+
+        // Stop here if the tool group is not expanded
+        if (isExpanded) {
+            return;
+        }
+
+        // Move the box left or right if it is overflowing the window
+        const transitionendHandler = event => {
+            const originalEvent = event.originalEvent;
+            const propertyName = originalEvent && originalEvent.propertyName;
+            if (propertyName && propertyName === 'transform') {
+                $target.off('transitionend', transitionendHandler);
+            } else {
+                return;
+            }
+
+            const boxWidth = $box.outerWidth();
+            const start = $box.offset().left;
+            const bodyWidth = $(document.body).outerWidth();
+            const end = start + boxWidth;
+
+            if (start < 0) {
+                $box.css('left', `calc(50% - ${start}px)`);
+            } else if (end > bodyWidth) {
+                const diff = end - bodyWidth;
+                $box.css('left', `calc(50% - ${diff}px)`);
+            }
+        };
+
+        // Attach the handler to deal with position fixing
+        $target.on('transitionend', transitionendHandler);
     },
 
     'focusout .expandable'(event, instance) {

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

@@ -26,7 +26,7 @@ $distance = 10px
     opacity: 0
     padding-top: $distance
     position: absolute
-    transition(opacity 0.3s ease\, transform 0.3s ease)
+    transition(opacity 0.3s ease\, transform 0.3s ease\, left 0.3s ease)
     transform(translateX(-50%) translateY( - ($toolbarDrawerHeight + $distance)) scale(0))
     white-space: nowrap
     z-index: 1