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

LT-250: Styling header and left part of toolbar

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-06-10 11:52:19 -03:00 committed by Erik Ziegler
parent 9da25ab917
commit 0f7020a39f
6 changed files with 89 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Packages/design/styles/variables.styl
View File

@ -17,8 +17,8 @@ $errorColor = #E29E4A
$menuBackgroundColor = #F2F2F2
// Sizes
$topBarHeight = 30px
$toolbarHeight = 50px
$topBarHeight = 40px
$toolbarHeight = 78px
// Thicknesses
$uiBorderThickness = 1px

28
Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html
View File

@ -1,18 +1,20 @@
<template name="lesionTracker">
<div class="topBar {{#if onStudyList}}studyList{{/if}}">
<a class="brandSection pull-left" href="http://ohif.org">
<img class="logoImage" src="/images/logo.png">
<div class="logoText">
Open Health Imaging Foundation
<div class="clearfix p-x-1 p-t-1">
<a class="brandSection pull-left" href="http://ohif.org">
<img class="logoImage" src="/images/logo.png">
<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>
</a>
{{ #if studyListToggleText }}
<div class="studyListLinkSection pull-left js-toggle-studyList">
{{studyListToggleText}}
</div>
{{ /if }}
<div class="userAccountSection pull-right">
{{>userAccountMenu}}
</div>
</div>
{{ >timeoutCountdownDialog }}
@ -32,4 +34,4 @@
{{ >lastLoginModal }}
{{ >studyContextMenu }}
{{ >progressDialog}}
</template>
</template>

14
Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
View File

@ -9,7 +9,7 @@ $expandedHeight = 160px
transition(all 0.5s ease)
.brandSection
height: 100%
height: 30px
display: inline-block
img.logoImage
@ -25,14 +25,13 @@ $expandedHeight = 160px
color: $textPrimaryColor
.studyListLinkSection
color: $textSecondaryColor
border-left: $uiBorderThickness solid $uiBorderColor;
font-weight: 400
font-size: 13px
line-height: 30px
padding: 0 10px
margin: 0 10px
color: $textSecondaryColor
cursor: pointer
font-size: 13px
font-weight: 500
line-height: 26px
margin-top: 3px
&:hover
color: $hoverColor
@ -48,6 +47,7 @@ $expandedHeight = 160px
height: $expandedHeight
.brandSection
height: 100%
width: 80%
padding-left: 50px
line-height: $expandedHeight

116
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.html
View File

@ -1,75 +1,77 @@
<template name="toolbarSection">
<div class="toolbarSection">
<div class="pull-left">
{{>roundedButtonGroup leftSidebarToggleButtonData}}
</div>
<div class="pull-left">
{{ #each toolbarButtons }}
{{ >toolbarSectionButton }}
{{ /each }}
<div class="toolbarSection p-x-2">
<div class="clearfix m-t-1">
<div class="pull-left">
{{>roundedButtonGroup leftSidebarToggleButtonData}}
</div>
<div class="toolbarSectionTools pull-left">
{{ #each toolbarButtons }}
{{ >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">
<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>
</div>
<div class="buttonLabel">
More <i class="fa fa-caret-down" aria-hidden="true"></i>
HUD
</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">
<div class="pull-right toolbarSectionButton" data-toggle="modal" data-target="#optionsModal">
<div class="svgContainer">
<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>
</div>
<div class="buttonLabel">
Lesions
Trial
</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>
</template>

2
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
View File

@ -68,7 +68,7 @@ Template.toolbarSection.helpers({
buttonData.push({
id: 'bidirectional',
title: 'Target',
classes: 'imageViewerTool',
classes: 'imageViewerTool m-l-3',
svgLink: '/packages/lesiontracker/assets/icons.svg#icon-tools-measure-target'
});

7
Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
View File

@ -2,16 +2,19 @@
.toolbarSection
height: $toolbarHeight
padding-top: 6px
width: 100%
border-bottom: $uiBorderColor $uiBorderThickness solid
.toolbarSectionTools
margin-left: 41px
.toolbarSectionButton
display: inline-block
color: $defaultColor
fill: $defaultColor
stroke: $defaultColor
padding: 0 10px
height: $toolbarHeight
padding: 0 7px
min-width: 30px
cursor: pointer
text-align: center