LT-250: Styling header and left part of toolbar
This commit is contained in:
Bruno Alves de Faria
Erik Ziegler
parent
9da25ab917
commit
0f7020a39f
@ -17,8 +17,8 @@ $errorColor = #E29E4A
|
|||||||
$menuBackgroundColor = #F2F2F2
|
$menuBackgroundColor = #F2F2F2
|
||||||
|
|
||||||
// Sizes
|
// Sizes
|
||||||
$topBarHeight = 30px
|
$topBarHeight = 40px
|
||||||
$toolbarHeight = 50px
|
$toolbarHeight = 78px
|
||||||
|
|
||||||
// Thicknesses
|
// Thicknesses
|
||||||
$uiBorderThickness = 1px
|
$uiBorderThickness = 1px
|
||||||
|
|||||||
@ -1,18 +1,20 @@
|
|||||||
<template name="lesionTracker">
|
<template name="lesionTracker">
|
||||||
<div class="topBar {{#if onStudyList}}studyList{{/if}}">
|
<div class="topBar {{#if onStudyList}}studyList{{/if}}">
|
||||||
<a class="brandSection pull-left" href="http://ohif.org">
|
<div class="clearfix p-x-1 p-t-1">
|
||||||
<img class="logoImage" src="/images/logo.png">
|
<a class="brandSection pull-left" href="http://ohif.org">
|
||||||
<div class="logoText">
|
<img class="logoImage" src="/images/logo.png">
|
||||||
Open Health Imaging Foundation
|
<div class="logoText">
|
||||||
|
Open Health Imaging Foundation
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{{ #if studyListToggleText }}
|
||||||
|
<div class="studyListLinkSection pull-left m-x-1 p-x-2 js-toggle-studyList">
|
||||||
|
{{studyListToggleText}}
|
||||||
|
</div>
|
||||||
|
{{ /if }}
|
||||||
|
<div class="userAccountSection pull-right">
|
||||||
|
{{>userAccountMenu}}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
|
||||||
{{ #if studyListToggleText }}
|
|
||||||
<div class="studyListLinkSection pull-left js-toggle-studyList">
|
|
||||||
{{studyListToggleText}}
|
|
||||||
</div>
|
|
||||||
{{ /if }}
|
|
||||||
<div class="userAccountSection pull-right">
|
|
||||||
{{>userAccountMenu}}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ >timeoutCountdownDialog }}
|
{{ >timeoutCountdownDialog }}
|
||||||
@ -32,4 +34,4 @@
|
|||||||
{{ >lastLoginModal }}
|
{{ >lastLoginModal }}
|
||||||
{{ >studyContextMenu }}
|
{{ >studyContextMenu }}
|
||||||
{{ >progressDialog}}
|
{{ >progressDialog}}
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -9,7 +9,7 @@ $expandedHeight = 160px
|
|||||||
transition(all 0.5s ease)
|
transition(all 0.5s ease)
|
||||||
|
|
||||||
.brandSection
|
.brandSection
|
||||||
height: 100%
|
height: 30px
|
||||||
display: inline-block
|
display: inline-block
|
||||||
|
|
||||||
img.logoImage
|
img.logoImage
|
||||||
@ -25,14 +25,13 @@ $expandedHeight = 160px
|
|||||||
color: $textPrimaryColor
|
color: $textPrimaryColor
|
||||||
|
|
||||||
.studyListLinkSection
|
.studyListLinkSection
|
||||||
color: $textSecondaryColor
|
|
||||||
border-left: $uiBorderThickness solid $uiBorderColor;
|
border-left: $uiBorderThickness solid $uiBorderColor;
|
||||||
font-weight: 400
|
color: $textSecondaryColor
|
||||||
font-size: 13px
|
|
||||||
line-height: 30px
|
|
||||||
padding: 0 10px
|
|
||||||
margin: 0 10px
|
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
font-size: 13px
|
||||||
|
font-weight: 500
|
||||||
|
line-height: 26px
|
||||||
|
margin-top: 3px
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
color: $hoverColor
|
color: $hoverColor
|
||||||
@ -48,6 +47,7 @@ $expandedHeight = 160px
|
|||||||
height: $expandedHeight
|
height: $expandedHeight
|
||||||
|
|
||||||
.brandSection
|
.brandSection
|
||||||
|
height: 100%
|
||||||
width: 80%
|
width: 80%
|
||||||
padding-left: 50px
|
padding-left: 50px
|
||||||
line-height: $expandedHeight
|
line-height: $expandedHeight
|
||||||
|
|||||||
@ -1,75 +1,77 @@
|
|||||||
<template name="toolbarSection">
|
<template name="toolbarSection">
|
||||||
<div class="toolbarSection">
|
<div class="toolbarSection p-x-2">
|
||||||
<div class="pull-left">
|
<div class="clearfix m-t-1">
|
||||||
{{>roundedButtonGroup leftSidebarToggleButtonData}}
|
<div class="pull-left">
|
||||||
</div>
|
{{>roundedButtonGroup leftSidebarToggleButtonData}}
|
||||||
<div class="pull-left">
|
</div>
|
||||||
{{ #each toolbarButtons }}
|
<div class="toolbarSectionTools pull-left">
|
||||||
{{ >toolbarSectionButton }}
|
{{ #each toolbarButtons }}
|
||||||
{{ /each }}
|
{{ >toolbarSectionButton }}
|
||||||
|
{{ /each }}
|
||||||
|
|
||||||
<div id="moreTools" class="toolbarSectionButton">
|
<div id="moreTools" class="toolbarSectionButton m-l-3">
|
||||||
|
<div class="svgContainer">
|
||||||
|
<svg>
|
||||||
|
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-tools-more"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="buttonLabel">
|
||||||
|
More <i class="fa fa-caret-down" aria-hidden="true"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ >studySeriesQuickSwitch side="left"}}
|
||||||
|
{{ >studySeriesQuickSwitch side="right"}}
|
||||||
|
|
||||||
|
<div class="pull-right toolbarSectionEntry">
|
||||||
|
{{ >caseProgress }}
|
||||||
|
</div>
|
||||||
|
<div class="pull-right">
|
||||||
|
{{>roundedButtonGroup rightSidebarToggleButtonData}}
|
||||||
|
</div>
|
||||||
|
<!-- <div class="capsule-group pull-right">
|
||||||
|
<div id="lesionSidebarToggle" class="capsule-entry">
|
||||||
|
<div class="svgContainer capsule">
|
||||||
|
<svg>
|
||||||
|
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-measurements-lesions"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="buttonLabel">
|
||||||
|
Lesions
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="additionalMeasurementsSidebarToggle" class="capsule-entry">
|
||||||
|
<div class="svgContainer capsule">
|
||||||
|
<svg>
|
||||||
|
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-measurements-additional"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="buttonLabel">
|
||||||
|
Additional
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div id="toggleHUD" class="pull-right toolbarSectionButton">
|
||||||
<div class="svgContainer">
|
<div class="svgContainer">
|
||||||
<svg>
|
<svg>
|
||||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-tools-more"></use>
|
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonLabel">
|
<div class="buttonLabel">
|
||||||
More <i class="fa fa-caret-down" aria-hidden="true"></i>
|
HUD
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="pull-right toolbarSectionButton" data-toggle="modal" data-target="#optionsModal">
|
||||||
|
<div class="svgContainer">
|
||||||
{{ >studySeriesQuickSwitch side="left"}}
|
|
||||||
{{ >studySeriesQuickSwitch side="right"}}
|
|
||||||
|
|
||||||
<div class="pull-right toolbarSectionEntry">
|
|
||||||
{{ >caseProgress }}
|
|
||||||
</div>
|
|
||||||
<div class="pull-right">
|
|
||||||
{{>roundedButtonGroup rightSidebarToggleButtonData}}
|
|
||||||
</div>
|
|
||||||
<!-- <div class="capsule-group pull-right">
|
|
||||||
<div id="lesionSidebarToggle" class="capsule-entry">
|
|
||||||
<div class="svgContainer capsule">
|
|
||||||
<svg>
|
<svg>
|
||||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-measurements-lesions"></use>
|
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-trial-info"></use>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="buttonLabel">
|
<div class="buttonLabel">
|
||||||
Lesions
|
Trial
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="additionalMeasurementsSidebarToggle" class="capsule-entry">
|
|
||||||
<div class="svgContainer capsule">
|
|
||||||
<svg>
|
|
||||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-measurements-additional"></use>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="buttonLabel">
|
|
||||||
Additional
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div id="toggleHUD" class="pull-right toolbarSectionButton">
|
|
||||||
<div class="svgContainer">
|
|
||||||
<svg>
|
|
||||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-hud"></use>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="buttonLabel">
|
|
||||||
HUD
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="pull-right toolbarSectionButton" data-toggle="modal" data-target="#optionsModal">
|
|
||||||
<div class="svgContainer">
|
|
||||||
<svg>
|
|
||||||
<use xlink:href="/packages/lesiontracker/assets/icons.svg#icon-trial-info"></use>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="buttonLabel">
|
|
||||||
Trial
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -68,7 +68,7 @@ Template.toolbarSection.helpers({
|
|||||||
buttonData.push({
|
buttonData.push({
|
||||||
id: 'bidirectional',
|
id: 'bidirectional',
|
||||||
title: 'Target',
|
title: 'Target',
|
||||||
classes: 'imageViewerTool',
|
classes: 'imageViewerTool m-l-3',
|
||||||
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-target'
|
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-target'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -2,16 +2,19 @@
|
|||||||
|
|
||||||
.toolbarSection
|
.toolbarSection
|
||||||
height: $toolbarHeight
|
height: $toolbarHeight
|
||||||
|
padding-top: 6px
|
||||||
width: 100%
|
width: 100%
|
||||||
border-bottom: $uiBorderColor $uiBorderThickness solid
|
border-bottom: $uiBorderColor $uiBorderThickness solid
|
||||||
|
|
||||||
|
.toolbarSectionTools
|
||||||
|
margin-left: 41px
|
||||||
|
|
||||||
.toolbarSectionButton
|
.toolbarSectionButton
|
||||||
display: inline-block
|
display: inline-block
|
||||||
color: $defaultColor
|
color: $defaultColor
|
||||||
fill: $defaultColor
|
fill: $defaultColor
|
||||||
stroke: $defaultColor
|
stroke: $defaultColor
|
||||||
padding: 0 10px
|
padding: 0 7px
|
||||||
height: $toolbarHeight
|
|
||||||
min-width: 30px
|
min-width: 30px
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user