diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html index 4899fed77..76030fa0f 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html +++ b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html @@ -5,7 +5,6 @@
-
{{#let svg=svgLink icon=iconClasses}} {{#if svg}} diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js index 00c4f68cf..f8de09736 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.js +++ b/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) { diff --git a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl b/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl index 1a5e4c570..5f30a68c6 100644 --- a/Packages/ohif-viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl +++ b/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