Adapting header to the new structure
This commit is contained in:
Bruno Alves de Faria committed
1 parent
2d52c9ef0a
commit
e83b5348ff
34 files changed
+395
-154
No files matched your search
@@ -1,24 +1,26 @@
|
||||
<template name="app">
|
||||
<div class="topBar noselect {{#if onStudyList}}studyList{{/if}}">
|
||||
<div class="clearfix">
|
||||
<a target='_blank'
|
||||
class="brandSection pull-left"
|
||||
href="http://ohif.org">
|
||||
<svg class="logoImage">
|
||||
<use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
|
||||
</svg>
|
||||
<div class="logoText">Open Health Imaging Foundation</div>
|
||||
</a>
|
||||
{{#header brandHref='http://ohif.org' headerClasses=instance.headerClasses}}
|
||||
{{#section 'brand'}}
|
||||
<svg class="logo-image">
|
||||
<use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
|
||||
</svg>
|
||||
<div class="logo-text">Open Health Imaging Foundation</div>
|
||||
{{/section}}
|
||||
{{#section 'headerAfterBrand'}}
|
||||
{{#if studyListToggleText}}
|
||||
<a class="btn studyListLinkSection pull-left js-toggle-studyList" id="{{dasherize studyListToggleText}}-btn">
|
||||
{{studyListToggleText}}
|
||||
</a>
|
||||
{{/if}}
|
||||
<div class="userAccountSection pull-right">
|
||||
{{>userAccountMenu}}
|
||||
{{/section}}
|
||||
{{#section 'headerMenu'}}
|
||||
<span class="user-name pull-left m-r-1">{{userName}}</span>
|
||||
<div class="menu-toggle pull-right">
|
||||
<i class="fa fa-cog"></i>
|
||||
<span class="caret-down"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/section}}
|
||||
{{/header}}
|
||||
<div id="studylistTabs" class="tab-content">
|
||||
<div class="tab-pane active" id="studylistTab">
|
||||
<div class="studylistContainer">
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
import { Template } from 'meteor/templating';
|
||||
import { Session } from 'meteor/session';
|
||||
import { ReactiveVar } from 'meteor/reactive-var';
|
||||
import { OHIF } from 'meteor/ohif:core';
|
||||
|
||||
const studylistContentId = 'studylistTab';
|
||||
@@ -7,12 +10,50 @@ const viewerContentId = 'viewerTab';
|
||||
// If there is currently any Session data for this object,
|
||||
// use this to repopulate the variable
|
||||
Template.app.onCreated(() => {
|
||||
const instance = Template.instance();
|
||||
instance.headerClasses = new ReactiveVar('');
|
||||
|
||||
ViewerData = Session.get('ViewerData') || {};
|
||||
|
||||
OHIF.header.setDropdownItems([{
|
||||
action: OHIF.user.audit,
|
||||
text: 'View Audit Log',
|
||||
iconClasses: 'log',
|
||||
iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#log',
|
||||
separatorAfter: true
|
||||
}, {
|
||||
action: () => OHIF.ui.showDialog('themeSelectorModal'),
|
||||
text: 'Themes',
|
||||
iconClasses: 'theme',
|
||||
iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#theme',
|
||||
separatorAfter: true
|
||||
}, {
|
||||
action: () => OHIF.ui.showDialog('serverInformationModal'),
|
||||
text: 'Server Information',
|
||||
iconClasses: 'server',
|
||||
iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#server',
|
||||
separatorAfter: true
|
||||
}, {
|
||||
action: OHIF.user.changePassword,
|
||||
text: 'Change Password',
|
||||
iconClasses: 'password',
|
||||
iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#password'
|
||||
}, {
|
||||
action: OHIF.user.logout,
|
||||
text: 'Logout',
|
||||
iconClasses: 'logout',
|
||||
iconSvgUse: 'packages/ohif_user-management/assets/user-menu-icons.svg#logout'
|
||||
}]);
|
||||
|
||||
instance.autorun(() => {
|
||||
const contentId = Session.get('activeContentId');
|
||||
instance.headerClasses.set(contentId === viewerContentId ? '' : 'header-big');
|
||||
});
|
||||
});
|
||||
|
||||
Template.app.onRendered(() => {
|
||||
const contentId = Session.get('activeContentId');
|
||||
if(contentId === viewerContentId) {
|
||||
if (contentId === viewerContentId) {
|
||||
switchToTab(contentId);
|
||||
}
|
||||
});
|
||||
@@ -56,9 +97,11 @@ Template.app.events({
|
||||
});
|
||||
|
||||
Template.app.helpers({
|
||||
userName: OHIF.user.getName,
|
||||
|
||||
studyListToggleText() {
|
||||
const contentId = Session.get('activeContentId');
|
||||
|
||||
|
||||
// If the Viewer has not been opened yet, 'Back to viewer' should
|
||||
// not be displayed
|
||||
const viewerContentExists = !!Object.keys(ViewerData).length;
|
||||
@@ -82,4 +125,4 @@ Template.app.helpers({
|
||||
}
|
||||
});
|
||||
|
||||
Session.set('defaultSignInMessage', 'Tumor tracking in your browser.');
|
||||
Session.set('defaultSignInMessage', 'Tumor tracking in your browser.');
|
||||
@@ -1,45 +1,46 @@
|
||||
@import "{ohif:design}/app"
|
||||
|
||||
$expandedHeight = 160px
|
||||
body>.header
|
||||
|
||||
.logoImage
|
||||
display: inline-block
|
||||
height: 100%
|
||||
float: left
|
||||
|
||||
.topBar
|
||||
height: $topBarHeight
|
||||
padding: 10px 10px 0
|
||||
theme('color', '$textPrimaryColor')
|
||||
theme('background-color', '$primaryBackgroundColor')
|
||||
transition(all 0.5s ease)
|
||||
|
||||
&>.clearfix
|
||||
position: relative
|
||||
|
||||
.brandSection
|
||||
.brand
|
||||
height: 30px
|
||||
display: inline-block
|
||||
text-decoration: none
|
||||
|
||||
.logoImage
|
||||
.logo-image
|
||||
display: inline-block
|
||||
fill: transparent
|
||||
float: left
|
||||
height: 100%
|
||||
margin: 0 8px 0 0
|
||||
width: 30px
|
||||
|
||||
.logoText
|
||||
.logo-text
|
||||
display: inline-block
|
||||
font-family: $logoFontFamily
|
||||
font-size: 14px
|
||||
font-weight: $logoFontWeight
|
||||
theme('color', '$textPrimaryColor')
|
||||
line-height: 30px
|
||||
|
||||
.studyListLinkSection
|
||||
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
|
||||
margin: 3px 0 0 10px
|
||||
padding: 0 0 0 10px
|
||||
|
||||
&#back-to-viewer-btn
|
||||
border-left: 0
|
||||
.header-menu
|
||||
.user-name
|
||||
font-size: 13px
|
||||
|
||||
.menu-toggle
|
||||
theme('border-left', 'solid 1px $defaultColor')
|
||||
display: inline-block
|
||||
height: 18px
|
||||
padding: 0 8px
|
||||
|
||||
.fa
|
||||
theme('color', '$defaultColor')
|
||||
font-size: 17px
|
||||
line-height: 18px
|
||||
|
||||
.caret-down
|
||||
theme('color', '$uiGrayLight')
|
||||
margin: 0 4px 4px 2px
|
||||
|
||||
.btn
|
||||
theme('color', '$textSecondaryColor')
|
||||
@@ -54,23 +55,29 @@ $expandedHeight = 160px
|
||||
&:active
|
||||
theme('color', '$activeColor')
|
||||
|
||||
&.studyList
|
||||
background-color: rgba(21, 25, 30, 0.7)
|
||||
height: $expandedHeight
|
||||
.studyListLinkSection
|
||||
theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
|
||||
margin: 3px 0 0 10px
|
||||
padding: 0 0 0 10px
|
||||
|
||||
&#back-to-viewer-btn
|
||||
border-left: 0
|
||||
|
||||
&.header-big
|
||||
padding-left: $studyListPadding
|
||||
padding-right: $studyListPadding
|
||||
|
||||
.brandSection
|
||||
height: 100%
|
||||
width: 80%
|
||||
line-height: $expandedHeight - 10px
|
||||
.brand
|
||||
height: 100%
|
||||
width: 80%
|
||||
line-height: $topBarExpandedHeight - 10px
|
||||
|
||||
.logoImage
|
||||
width: 50px
|
||||
margin: 0 20px 0 0
|
||||
.logo-image
|
||||
margin: 0 20px 0 0
|
||||
width: 50px
|
||||
|
||||
.logoText
|
||||
font-size: 30px
|
||||
.logo-text
|
||||
font-size: 30px
|
||||
|
||||
.studyListLinkSection
|
||||
border: none
|
||||
|
||||
Reference in new issue
Block a user