From 3abde998a04d207a1cb7a0dc478693309ce9837b Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Wed, 23 Nov 2016 18:59:37 -0200 Subject: [PATCH] New minimalist prototype for viewer layout --- .../components/playground/playground.html | 27 ++++++++++- .../components/playground/playground.js | 44 +++++++++++++++++- .../components/playground/playground.styl | 39 +++++++++++++++- .../client/ui/dimensional/dimensional.js | 45 +++++++++++++++++++ .../client/ui/dimensional/dimensional.styl | 8 ++++ Packages/ohif-core/client/ui/index.js | 1 + Packages/ohif-core/package.js | 1 + 7 files changed, 160 insertions(+), 5 deletions(-) create mode 100644 Packages/ohif-core/client/ui/dimensional/dimensional.js create mode 100644 Packages/ohif-core/client/ui/dimensional/dimensional.styl diff --git a/Packages/ohif-core/client/components/playground/playground.html b/Packages/ohif-core/client/components/playground/playground.html index 234920111..59749e0ba 100644 --- a/Packages/ohif-core/client/components/playground/playground.html +++ b/Packages/ohif-core/client/components/playground/playground.html @@ -1,5 +1,28 @@ diff --git a/Packages/ohif-core/client/components/playground/playground.js b/Packages/ohif-core/client/components/playground/playground.js index 71ac813de..44dc4ef25 100644 --- a/Packages/ohif-core/client/components/playground/playground.js +++ b/Packages/ohif-core/client/components/playground/playground.js @@ -1,4 +1,46 @@ +import { Template } from 'meteor/templating'; +import { ReactiveVar } from 'meteor/reactive-var'; +import { OHIF } from 'meteor/ohif:core'; + +OHIF.ui.layoutState = { + leftSidebar: new ReactiveVar(false), + rightSidebar: new ReactiveVar(false), + toolsDrawer: new ReactiveVar(false) +}; + Template.componentPlayground.onRendered(() => { const instance = Template.instance(); - instance.$('.measure-flow').draggable(); + + instance.$('.toolbar-drawer').adjustMax('height'); + instance.autorun(() => { + const state = OHIF.ui.layoutState.toolsDrawer.get(); + instance.$('.toolbar-drawer').toggleClass('open', state); + }); + + instance.$('.layout-sidebar-left').adjustMax('width'); + instance.autorun(() => { + const state = OHIF.ui.layoutState.leftSidebar.get(); + instance.$('.layout-sidebar-left').toggleClass('open', state); + }); + + instance.$('.layout-sidebar-right').adjustMax('width'); + instance.autorun(() => { + const state = OHIF.ui.layoutState.rightSidebar.get(); + instance.$('.layout-sidebar-right').toggleClass('open', state); + }); +}); + +Template.componentPlayground.events({ + 'click .js-tool-more'(event, instance) { + const currentState = OHIF.ui.layoutState.toolsDrawer.get(); + OHIF.ui.layoutState.toolsDrawer.set(!currentState); + }, + 'click .js-toggle-left'(event, instance) { + const currentState = OHIF.ui.layoutState.leftSidebar.get(); + OHIF.ui.layoutState.leftSidebar.set(!currentState); + }, + 'click .js-toggle-right'(event, instance) { + const currentState = OHIF.ui.layoutState.rightSidebar.get(); + OHIF.ui.layoutState.rightSidebar.set(!currentState); + } }); diff --git a/Packages/ohif-core/client/components/playground/playground.styl b/Packages/ohif-core/client/components/playground/playground.styl index 7709175d5..9510ba4bc 100644 --- a/Packages/ohif-core/client/components/playground/playground.styl +++ b/Packages/ohif-core/client/components/playground/playground.styl @@ -1,2 +1,37 @@ -.component-playground - height: 100vh +.layout-container + align-items: stretch + display: flex + flex-flow: column nowrap + height: 100vh + + .layout-header + background-color: cyan + flex-grow: 0 + + .layout-body + align-items: stretch + display: flex + flex-grow: 1 + +.layout-sidebar + background-color: lime + flex-grow: 0 + +.layout-main + background-color: white + flex-grow: 1 + +.toolbar-drawer + overflow: hidden + transition: max-height 0.3s ease + + &:not(.open) + max-height: 0 !important + +.layout-sidebar-left +.layout-sidebar-right + overflow: hidden + transition: max-width 0.3s ease + + &:not(.open) + max-width: 0 !important diff --git a/Packages/ohif-core/client/ui/dimensional/dimensional.js b/Packages/ohif-core/client/ui/dimensional/dimensional.js new file mode 100644 index 000000000..c684ed288 --- /dev/null +++ b/Packages/ohif-core/client/ui/dimensional/dimensional.js @@ -0,0 +1,45 @@ +import { $ } from 'meteor/jquery'; + +// Temporarily show and hide the element to enable dimension calculations +$.fn.tempShow = function(callback) { + const elementsToHide = []; + let current = this; + + // Temporarily show all parent invisible elements until body + while (this.is(':hidden') && current !== document.body) { + const $element = this.parentsUntil(':visible').last(); + if (!$element.length) { + break; + } + + $element.addClass('visible'); + current = $element[0]; + elementsToHide.push(current); + } + + if (typeof callback === 'function') { + callback(this); + } + + $(elementsToHide).removeClass('visible'); + + return this; +}; + +// Adjust the max width/height to enable CSS3 transitions +$.fn.adjustMax = function(dimension) { + const $element = $(this); + $element.tempShow(() => { + // Add a class to remove the max restriction + const maxClass = `no-max-${dimension}`; + $element.addClass(maxClass); + + // Get the dimension function to obtain the outer dimension + const dimensionFn = 'outer' + dimension.charAt(0).toUpperCase() + dimension.slice(1); + const value = $element[dimensionFn](); + + // Remove the max restriction class and set the new max + const maxProperty = `max-${dimension}`; + $element.removeClass(maxClass).css(maxProperty, value); + }); +}; diff --git a/Packages/ohif-core/client/ui/dimensional/dimensional.styl b/Packages/ohif-core/client/ui/dimensional/dimensional.styl new file mode 100644 index 000000000..90385bba3 --- /dev/null +++ b/Packages/ohif-core/client/ui/dimensional/dimensional.styl @@ -0,0 +1,8 @@ +body *.visible + display: block !important + +body *.no-max-height:not(.bypassNot) + max-height: none !important + +body *.no-max-width:not(.bypassNot) + max-width: none !important diff --git a/Packages/ohif-core/client/ui/index.js b/Packages/ohif-core/client/ui/index.js index 95817613d..d21d570a2 100644 --- a/Packages/ohif-core/client/ui/index.js +++ b/Packages/ohif-core/client/ui/index.js @@ -1,4 +1,5 @@ import './bounded/bounded.js'; +import './dimensional/dimensional.js'; import './dialog/form.js'; import './dialog/spatial.js'; import './dialog/unsavedChangesDialog.js'; diff --git a/Packages/ohif-core/package.js b/Packages/ohif-core/package.js index 419e195fe..6de7d1c90 100644 --- a/Packages/ohif-core/package.js +++ b/Packages/ohif-core/package.js @@ -24,6 +24,7 @@ Package.onUse(function(api) { // UI Styles api.addFiles([ + 'client/ui/dimensional/dimensional.styl', 'client/ui/resizable/resizable.styl', 'client/components/bootstrap/dialog/unsavedChangesDialog.styl', 'client/components/bootstrap/dropdown/dropdown.styl'