TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New minimalist prototype for viewer layout

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-11-23 18:59:37 -02:00
parent 5aaadcb7c4
commit 3abde998a0
7 changed files with 160 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
Packages/ohif-core/client/components/playground/playground.html
View File

@ -1,5 +1,28 @@
<template name="componentPlayground">
<div class="component-playground">
{{>measureFlow threeColumns=true hideCommon=true}}
<div class="layout-container">
<div class="layout-header">
<div class="logo">LOGO</div>
<div class="toolbar">
<div class="toolbar-main">
<button class="js-toggle-left">Toggle left</button>
<button>Tool 1</button>
<button>Tool 2</button>
<button>Tool 3</button>
<button class="js-tool-more">More...</button>
<button class="js-toggle-right pull-right">Toggle right</button>
</div>
<div class="toolbar-drawer">
<button>Tool 4</button>
<button>Tool 5</button>
<button>Tool 6</button>
<button>Tool 7</button>
</div>
</div>
</div>
<div class="layout-body">
<div class="layout-sidebar layout-sidebar-left">LEFT|LEFT|LEFT</div>
<div class="layout-main">MAIN CONTENT</div>
<div class="layout-sidebar layout-sidebar-right">RIGHT|RIGHT|RIGHT|RIGHT</div>
</div>
</div>
</template>

44
Packages/ohif-core/client/components/playground/playground.js
View File

@ -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);
}
});

39
Packages/ohif-core/client/components/playground/playground.styl
View File

@ -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

45
Packages/ohif-core/client/ui/dimensional/dimensional.js Normal file
View File

@ -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);
});
};

8
Packages/ohif-core/client/ui/dimensional/dimensional.styl Normal file
View File

@ -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

1
Packages/ohif-core/client/ui/index.js
View File

@ -1,4 +1,5 @@
import './bounded/bounded.js';
import './dimensional/dimensional.js';
import './dialog/form.js';
import './dialog/spatial.js';
import './dialog/unsavedChangesDialog.js';

1
Packages/ohif-core/package.js
View File

@ -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'