TrizTech/ohif-viewer
15
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 $menuBackgroundColor = #F2F2F2
// Sizes // Sizes
$topBarHeight = 30px $topBarHeight = 40px
$toolbarHeight = 50px $toolbarHeight = 78px
// Thicknesses // Thicknesses
$uiBorderThickness = 1px $uiBorderThickness = 1px

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

@ -1,5 +1,6 @@
<template name="lesionTracker"> <template name="lesionTracker">
<div class="topBar {{#if onStudyList}}studyList{{/if}}"> <div class="topBar {{#if onStudyList}}studyList{{/if}}">
<div class="clearfix p-x-1 p-t-1">
<a class="brandSection pull-left" href="http://ohif.org"> <a class="brandSection pull-left" href="http://ohif.org">
<img class="logoImage" src="/images/logo.png"> <img class="logoImage" src="/images/logo.png">
<div class="logoText"> <div class="logoText">
@ -7,7 +8,7 @@
</div> </div>
</a> </a>
{{ #if studyListToggleText }} {{ #if studyListToggleText }}
<div class="studyListLinkSection pull-left js-toggle-studyList"> <div class="studyListLinkSection pull-left m-x-1 p-x-2 js-toggle-studyList">
{{studyListToggleText}} {{studyListToggleText}}
</div> </div>
{{ /if }} {{ /if }}
@ -15,6 +16,7 @@
{{>userAccountMenu}} {{>userAccountMenu}}
</div> </div>
</div> </div>
</div>
{{ >timeoutCountdownDialog }} {{ >timeoutCountdownDialog }}
<div id="worklistTabs" class="tab-content"> <div id="worklistTabs" class="tab-content">
<div class="tab-pane active" id="worklistTab"> <div class="tab-pane active" id="worklistTab">

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

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

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

@ -1,14 +1,15 @@
<template name="toolbarSection"> <template name="toolbarSection">
<div class="toolbarSection"> <div class="toolbarSection p-x-2">
<div class="clearfix m-t-1">
<div class="pull-left"> <div class="pull-left">
{{>roundedButtonGroup leftSidebarToggleButtonData}} {{>roundedButtonGroup leftSidebarToggleButtonData}}
</div> </div>
<div class="pull-left"> <div class="toolbarSectionTools pull-left">
{{ #each toolbarButtons }} {{ #each toolbarButtons }}
{{ >toolbarSectionButton }} {{ >toolbarSectionButton }}
{{ /each }} {{ /each }}
<div id="moreTools" class="toolbarSectionButton"> <div id="moreTools" class="toolbarSectionButton m-l-3">
<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-tools-more"></use>
@ -72,4 +73,5 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>

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

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

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

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