LT-247: Creating active state for studies in the left sidebar
This commit is contained in:
Bruno Alves de Faria
Erik Ziegler
parent
5b930f8db2
commit
bca32d88e0
@ -8,17 +8,11 @@
|
||||
width: 100%
|
||||
|
||||
.sidebarMenu
|
||||
position: absolute
|
||||
height: 100%
|
||||
background: $primaryBackgroundColor
|
||||
-webkit-transition: $sidebarTransition
|
||||
-ms-transition: $sidebarTransition
|
||||
-o-transition: $sidebarTransition
|
||||
-moz-transition: $sidebarTransition
|
||||
transition: $sidebarTransition
|
||||
|
||||
.timepointButtonContainer
|
||||
height: 55px
|
||||
height: 100%
|
||||
position: absolute
|
||||
transition($sidebarTransition)
|
||||
z-index: 1
|
||||
|
||||
.sidebar-left
|
||||
width: $studiesSidebarMenuWidth
|
||||
|
||||
@ -153,6 +153,7 @@ $seriesSpacing = 2px
|
||||
margin-right: -20px
|
||||
min-height: 200px
|
||||
max-height: 500px
|
||||
overflow-x: hidden
|
||||
overflow-y: scroll
|
||||
width: calc(100% + 20px)
|
||||
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
<template name="studyTimepointBrowser">
|
||||
{{#let timepointList=timepoints}}
|
||||
<div class="studyTimepointBrowser noselect">
|
||||
{{#if shallShowViewType timepointList}}
|
||||
<div class="timepointButtonContainer p-t-2">
|
||||
{{>roundedButtonGroup viewTypeButtonGroupData}}
|
||||
</div>
|
||||
<hr class="m-y-0">
|
||||
{{/if}}
|
||||
<div class="studyTimepointBrowser noselect {{#if shallShowViewType timepointList}}viewTypeVisible{{/if}}">
|
||||
<div class="timepointButtonContainer p-t-2">
|
||||
{{>roundedButtonGroup viewTypeButtonGroupData}}
|
||||
</div>
|
||||
<div class="studyTimepointScrollArea">
|
||||
<div class="p-x-1">
|
||||
<div class="p-l-1">
|
||||
{{#if timepointList.length}}
|
||||
{{#each timepoint in timepointList}}
|
||||
{{#if shallShowTimepoint timepoint @index}}
|
||||
@ -27,7 +24,7 @@
|
||||
</div>
|
||||
{{>studyTimepoint studies=(studies timepoint) index=@index viewportIndex=this.viewportIndex currentStudy=this.currentStudy}}
|
||||
</div>
|
||||
<hr class="m-y-1">
|
||||
<hr>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{#if and this.currentStudy (not showAdditionalTimepoints)}}
|
||||
|
||||
@ -1,12 +1,33 @@
|
||||
@import "{design}/app"
|
||||
|
||||
$timepointButtonHeight = 55px
|
||||
|
||||
.studyTimepointBrowser
|
||||
background-color: $primaryBackgroundColor
|
||||
float: left
|
||||
height: calc(100% - 55px - 50px - 30px)
|
||||
overflow: hidden
|
||||
position: relative
|
||||
width: 100%
|
||||
|
||||
.timepointButtonContainer
|
||||
background-color: $primaryBackgroundColor
|
||||
border-bottom: 1px solid $uiBorderColor
|
||||
display: none
|
||||
height: $timepointButtonHeight
|
||||
left: 10px
|
||||
position: absolute
|
||||
right: 10px
|
||||
top: 0
|
||||
z-index: 1
|
||||
|
||||
&.viewTypeVisible
|
||||
|
||||
.timepointButtonContainer
|
||||
display: block
|
||||
|
||||
.studyTimepointScrollArea
|
||||
padding-top: $timepointButtonHeight
|
||||
|
||||
.timepointEntry
|
||||
&.active
|
||||
.timepointModalities
|
||||
@ -60,9 +81,25 @@
|
||||
height: 100%
|
||||
overflow-x: hidden
|
||||
overflow-y: auto
|
||||
margin-right: -16px
|
||||
margin-right: -22px
|
||||
padding-bottom: 20px
|
||||
padding-right: 16px
|
||||
|
||||
&::-webkit-scrollbar
|
||||
display: none
|
||||
|
||||
hr, .timepointHeader, .studyItem, .studyModality.additional
|
||||
margin-right: 16px
|
||||
|
||||
.studySidebarTimepoint .thumbnailEntry.active:before
|
||||
background-color: $activeColor
|
||||
border-top-right-radius: 7px
|
||||
border-bottom-right-radius: 7px
|
||||
content: ''
|
||||
display: block
|
||||
height: 91px
|
||||
pointer-events: none
|
||||
position: fixed
|
||||
right: 0
|
||||
top: 0
|
||||
width: 5px
|
||||
|
||||
@ -1,18 +1,20 @@
|
||||
<template name="studyTimepointStudy">
|
||||
{{#let isSidebar=(not (isDefined viewportIndex))}}
|
||||
<div class="studyTimepointStudy {{#if isSidebar}}studySidebarTimepoint{{else}}studyQuickSwitchTimepoint{{/if}} {{#if this.active}}active{{/if}}">
|
||||
{{>loadingText}}
|
||||
<div class="studyModality">
|
||||
<div class="studyModalityBox">
|
||||
{{#if this.study.modalities}}
|
||||
{{this.study.modalities}}
|
||||
{{else}}
|
||||
UN
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="studyModalityText">
|
||||
<div class="studyModalityDate">{{formatDA this.study.studyDate 'D-MMM-YYYY'}}</div>
|
||||
<div class="studyModalityDescription">{{this.study.studyDescription}}</div>
|
||||
<div class="studyItem">
|
||||
{{>loadingText}}
|
||||
<div class="studyModality">
|
||||
<div class="studyModalityBox">
|
||||
{{#if this.study.modalities}}
|
||||
{{this.study.modalities}}
|
||||
{{else}}
|
||||
UN
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="studyModalityText">
|
||||
<div class="studyModalityDate">{{formatDA this.study.studyDate 'D-MMM-YYYY'}}</div>
|
||||
<div class="studyModalityDescription">{{this.study.studyDescription}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{#if isSidebar}}
|
||||
|
||||
@ -15,6 +15,8 @@ $spacerY = 12px
|
||||
|
||||
.studyTimepointStudy
|
||||
position: relative
|
||||
// required transformation to make inner fixed elements relative to this one
|
||||
transform(scale(1))
|
||||
|
||||
.loadingTextDiv
|
||||
padding: 25px
|
||||
@ -28,9 +30,10 @@ $spacerY = 12px
|
||||
|
||||
&.loading
|
||||
.loadingTextDiv
|
||||
width: 100%
|
||||
height: 100%
|
||||
left: 0
|
||||
opacity: 0.75
|
||||
right: 16px
|
||||
|
||||
.studyModality
|
||||
opacity: 0.2
|
||||
|
||||
Loading…
Reference in New Issue
Block a user