AWV-3: Adding CSS3 animations to the CINE dialog
This commit is contained in:
Bruno Alves de Faria
parent
b1a786071e
commit
6b86b8d2dc
@ -35,6 +35,7 @@ Package.onUse(function(api) {
|
||||
|
||||
// Component styles
|
||||
api.addFiles([
|
||||
'styles/components/dialog.styl',
|
||||
'styles/components/radio.styl',
|
||||
'styles/components/select2.styl',
|
||||
'styles/components/selectTree.styl',
|
||||
|
||||
@ -1,19 +1,41 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
@keyframes zoomIn
|
||||
from
|
||||
transform(scale(0))
|
||||
to
|
||||
transform(scale(1))
|
||||
0%
|
||||
transform(scale(0))
|
||||
100%
|
||||
transform(scale(1))
|
||||
|
||||
@keyframes zoomOut
|
||||
0%
|
||||
transform(scale(1))
|
||||
100%
|
||||
transform(scale(0))
|
||||
|
||||
@keyframes slideInDown
|
||||
0%
|
||||
opacity: 0
|
||||
transform(translateY(-100%) scale(0))
|
||||
100%
|
||||
opacity: 1
|
||||
transform(translateY(0) scale(1))
|
||||
|
||||
@keyframes slideOutUp
|
||||
0%
|
||||
opacity: 1
|
||||
transform(translateY(0) scale(1))
|
||||
100%
|
||||
opacity: 0
|
||||
transform(translateY(-100%) scale(0))
|
||||
|
||||
@keyframes fadeIn
|
||||
from
|
||||
opacity: 0
|
||||
to
|
||||
opacity: 1
|
||||
from
|
||||
opacity: 0
|
||||
to
|
||||
opacity: 1
|
||||
|
||||
@keyframes fadeOut
|
||||
from
|
||||
opacity: 1
|
||||
to
|
||||
opacity: 0
|
||||
from
|
||||
opacity: 1
|
||||
to
|
||||
opacity: 0
|
||||
|
||||
12
Packages/design/styles/components/dialog.styl
Normal file
12
Packages/design/styles/components/dialog.styl
Normal file
@ -0,0 +1,12 @@
|
||||
@import "{design}/app"
|
||||
|
||||
.viewerDialogs>*
|
||||
|
||||
&:not(.dialog-closed):not(.dialog-open)
|
||||
display: none
|
||||
|
||||
&.dialog-closed
|
||||
animateSlideOutUp()
|
||||
|
||||
&.dialog-open
|
||||
animateSlideInDown()
|
||||
@ -1,17 +1,29 @@
|
||||
animationDefaults()
|
||||
animation-duration: 0.3s
|
||||
animation-direction: alternate
|
||||
animation-timing-function: ease-out
|
||||
animation-fill-mode: forwards
|
||||
animation-duration: 0.3s
|
||||
animation-direction: alternate
|
||||
animation-timing-function: ease-out
|
||||
animation-fill-mode: forwards
|
||||
|
||||
animateZoomIn()
|
||||
animationDefaults()
|
||||
animation-name: zoomIn
|
||||
animationDefaults()
|
||||
animation-name: zoomIn
|
||||
|
||||
animateZoomOut()
|
||||
animationDefaults()
|
||||
animation-name: zoomOut
|
||||
|
||||
animateSlideInDown()
|
||||
animationDefaults()
|
||||
animation-name: slideInDown
|
||||
|
||||
animateSlideOutUp()
|
||||
animationDefaults()
|
||||
animation-name: slideOutUp
|
||||
|
||||
animateFadeIn()
|
||||
animationDefaults()
|
||||
animation-name: fadeIn
|
||||
animationDefaults()
|
||||
animation-name: fadeIn
|
||||
|
||||
animateFadeOut()
|
||||
animationDefaults()
|
||||
animation-name: fadeOut
|
||||
animationDefaults()
|
||||
animation-name: fadeOut
|
||||
|
||||
@ -1,32 +1,69 @@
|
||||
$themes = {}
|
||||
$defaultTheme = 'tide'
|
||||
|
||||
// Import the theme variables
|
||||
@import "./theme-tide.styl"
|
||||
@import "./theme-tigerlilly.styl"
|
||||
|
||||
parseSpaceVars($theme, $value)
|
||||
$valueSplit = split(' ', $value)
|
||||
$list = ''
|
||||
pop($list)
|
||||
for $property in $valueSplit
|
||||
if ($theme[$property])
|
||||
push($list, $theme[$property])
|
||||
else
|
||||
push($list, $property)
|
||||
join(' ', $list)
|
||||
/*
|
||||
* Process each theme variable in the given value, splitting it by space
|
||||
*/
|
||||
parseSpaceVars($theme, $value, $alpha)
|
||||
// Split values by space
|
||||
$valueSplit = split(' ', $value)
|
||||
|
||||
parseCommaVars($theme, $value)
|
||||
$valueSplit = split(',', $value)
|
||||
$list = ''
|
||||
pop($list)
|
||||
for $sentence in $valueSplit
|
||||
push($list, parseSpaceVars($theme, $sentence))
|
||||
unquote(join(',', $list))
|
||||
// Create an empty list
|
||||
$list = ''
|
||||
pop($list)
|
||||
|
||||
theme($property, $value)
|
||||
/ {selector()}
|
||||
{$property}: parseCommaVars($themes[$defaultTheme], $value)
|
||||
for $themeName, $theme in $themes
|
||||
for $selectorPiece in split(',', selector())
|
||||
/ body.theme-{$themeName} {$selectorPiece}
|
||||
{$property}: parseCommaVars($theme, $value)
|
||||
// Iterate over split values
|
||||
for $property in $valueSplit
|
||||
// Try to get the theme with current property key
|
||||
$val = $theme[$property]
|
||||
if ($val)
|
||||
if($val is a 'color')
|
||||
// Apply given alpha if it's a color
|
||||
$val = alpha($val, $alpha)
|
||||
// Push the processed theme variable to the list
|
||||
push($list, $val)
|
||||
else
|
||||
// Push the property itself if not found in theme variables
|
||||
push($list, $property)
|
||||
|
||||
// Merge the resulting processed list by joining values back with space
|
||||
join(' ', $list)
|
||||
|
||||
/*
|
||||
* Process each theme variable in the given value, splitting it by comma
|
||||
*/
|
||||
parseCommaVars($theme, $value, $alpha)
|
||||
// Split values by comma
|
||||
$valueSplit = split(',', $value)
|
||||
|
||||
// Create an empty list
|
||||
$list = ''
|
||||
pop($list)
|
||||
|
||||
// Iterate over split values
|
||||
for $sentence in $valueSplit
|
||||
// Procces the values splitting by space
|
||||
push($list, parseSpaceVars($theme, $sentence, $alpha))
|
||||
|
||||
// Merge the resulting processed list by joining values back with comma
|
||||
unquote(join(',', $list))
|
||||
|
||||
/*
|
||||
* Return a processed theme variable or color with alpha
|
||||
*/
|
||||
theme($property, $value, $alpha=1)
|
||||
|
||||
// Crete the selector for default theme
|
||||
/ {selector()}
|
||||
{$property}: parseCommaVars($themes[$defaultTheme], $value, $alpha)
|
||||
|
||||
// Create the selector for each registered theme
|
||||
for $themeName, $theme in $themes
|
||||
for $selectorPiece in split(',', selector())
|
||||
// prefix the selector with the body.theme-{themeName} selector
|
||||
/ body.theme-{$themeName} {$selectorPiece}
|
||||
{$property}: parseCommaVars($theme, $value, $alpha)
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
.ruleEntryDialog
|
||||
theme('background', '$uiGrayDarkest')
|
||||
theme('border', '1px solid $uiBorderColor')
|
||||
theme('background', '$uiGrayDarkest', 0.95)
|
||||
theme('border', '1px solid $uiBorderColor', 0.95)
|
||||
theme('color', '$textSecondaryColor')
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
@ -17,7 +16,6 @@
|
||||
padding: 10px
|
||||
background-color: rgba(255,255,255,1)
|
||||
outline: none
|
||||
opacity: 0.95
|
||||
border-radius: 8px
|
||||
|
||||
.dialogContent
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
.settingEntryDialog
|
||||
theme('border', '1px solid $uiBorderColor')
|
||||
theme('background', '$uiGrayDarkest')
|
||||
theme('border', '1px solid $uiBorderColor', 0.95)
|
||||
theme('background', '$uiGrayDarkest', 0.95)
|
||||
theme('color', '$textSecondaryColor')
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
@ -16,7 +15,6 @@
|
||||
margin: auto
|
||||
padding: 10px
|
||||
outline: none
|
||||
opacity: 0.95
|
||||
border-radius: 8px
|
||||
|
||||
.dialogContent
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
.textEntryDialog
|
||||
theme('border', '1px solid $uiBorderColor')
|
||||
theme('background', '$uiGrayDarkest')
|
||||
theme('border', '1px solid $uiBorderColor', 0.95)
|
||||
theme('background', '$uiGrayDarkest', 0.95)
|
||||
theme('color', '$textSecondaryColor')
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
@ -16,7 +15,6 @@
|
||||
margin: auto
|
||||
padding: 10px
|
||||
outline: none
|
||||
opacity: 0.95
|
||||
border-radius: 8px
|
||||
|
||||
.dialogContent
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template name="confirmDeleteDialog">
|
||||
<div id="confirmDeleteDialog" tabindex="0">
|
||||
{{ #if title }}
|
||||
<h5>{{title}}</h5>
|
||||
{{ else }}
|
||||
<h5>Remove data from Timepoint?</h5>
|
||||
{{#if title}}
|
||||
<h5>{{title}}</h5>
|
||||
{{else}}
|
||||
<h5>Remove data from Timepoint?</h5>
|
||||
{{/if}}
|
||||
{{ #if text }}
|
||||
<p>{{text}}</p>
|
||||
{{ else }}
|
||||
<p>Are you sure you would like to remove the measurement data at this timepoint?</p>
|
||||
{{#if text}}
|
||||
<p>{{text}}</p>
|
||||
{{else}}
|
||||
<p>Are you sure you would like to remove the measurement data at this timepoint?</p>
|
||||
{{/if}}
|
||||
<button id="cancel" class="btn btn-link" tabindex="1">Cancel</button>
|
||||
<button id="confirm" class="btn btn-primary" tabindex="0">OK</button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
#confirmDeleteDialog
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
@ -23,4 +22,4 @@
|
||||
float: left
|
||||
|
||||
#confirm
|
||||
float: right
|
||||
float: right
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
#lesionLocationDialog, #lesionLocationRelabelDialog
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
@ -32,4 +31,4 @@
|
||||
height: 110px
|
||||
|
||||
#lesionLocationRelabelDialog
|
||||
height: 125px
|
||||
height: 125px
|
||||
|
||||
@ -3,13 +3,12 @@
|
||||
$borderColor = rgba(77, 99, 110, 0.81)
|
||||
|
||||
#lesionTableHUD
|
||||
background: black
|
||||
background: rgba(0, 0, 0, 0.95)
|
||||
border-radius: 8px
|
||||
border: solid 1px $borderColor;
|
||||
bottom: 3px
|
||||
height: 326px
|
||||
left: auto
|
||||
opacity: 0.95
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
right: 3px
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
#nonTargetLesionLocationDialog, #nonTargetLesionRelabelDialog
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
@ -10,7 +9,7 @@
|
||||
height: 230px
|
||||
border-radius: 5px
|
||||
padding: 10px 20px 10px 20px
|
||||
background-color: rgba(255,255,255,1)
|
||||
background-color: white
|
||||
outline: none
|
||||
|
||||
#selectNonTargetLesionLocation, #selectNonTargetLesionLocationResponse
|
||||
@ -24,4 +23,4 @@
|
||||
|
||||
/* dialogMobile is added to #nonTargetLesionLocationDialog when touchDevices is detected */
|
||||
.dialogMobile
|
||||
margin: auto
|
||||
margin: auto
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
#nonTargetResponseDialog
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
@ -21,4 +20,3 @@
|
||||
|
||||
.locationOK
|
||||
text-align: center
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
.annotationDialog
|
||||
theme('border', '1px solid $uiBorderColor')
|
||||
theme('background', '$uiGrayDarkest')
|
||||
theme('border', '1px solid $uiBorderColor', 0.95)
|
||||
theme('background', '$uiGrayDarkest', 0.95)
|
||||
theme('color', '$textSecondaryColor')
|
||||
display: none
|
||||
z-index: 1000
|
||||
position: absolute
|
||||
top: 0
|
||||
@ -16,7 +15,6 @@
|
||||
padding: 10px
|
||||
width: 300px
|
||||
height: 140px
|
||||
opacity: 0.95
|
||||
border-radius: 8px
|
||||
|
||||
h5, label
|
||||
|
||||
@ -1,23 +1,22 @@
|
||||
@import "{design}/app.styl"
|
||||
|
||||
#cineDialog
|
||||
theme('border', '1px solid $uiBorderColor')
|
||||
theme('background', '$uiGrayDarkest')
|
||||
theme('border', '1px solid $uiBorderColor', 0.95)
|
||||
theme('background', '$uiGrayDarkest', 0.95)
|
||||
theme('color', '$textSecondaryColor')
|
||||
border-radius: 8px
|
||||
bottom: 3px
|
||||
box-sizing: border-box
|
||||
display: none
|
||||
height: 150px
|
||||
left: auto
|
||||
opacity: 0.95
|
||||
left: 50%
|
||||
overflow: hidden
|
||||
padding: 10px
|
||||
position: absolute
|
||||
right: 3px
|
||||
top: auto
|
||||
top: 50%
|
||||
width: 300px
|
||||
z-index: 1000
|
||||
transform(translateX(-50%) translateY(-50%))
|
||||
|
||||
h5
|
||||
font-size: 20px
|
||||
@ -28,8 +27,8 @@
|
||||
font-weight: 400
|
||||
|
||||
.btn
|
||||
theme('background', '$uiGrayDarkest')
|
||||
theme('color', '$textSecondaryColor')
|
||||
background-color: transparent
|
||||
|
||||
&:hover
|
||||
theme('color', '$hoverColor')
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template name="layoutButton">
|
||||
<div id="{{this.id}}"
|
||||
class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} js-dropdown-toggle"
|
||||
title="{{this.title}}"
|
||||
data-target="#layoutChooser"
|
||||
>
|
||||
class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} js-dropdown-toggle"
|
||||
title="{{this.title}}"
|
||||
data-target="#layoutChooser"
|
||||
>
|
||||
<div class="svgContainer">
|
||||
{{ #if this.svgLink }}
|
||||
<svg>
|
||||
<use xlink:href={{this.svgLink}}></use>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<i class={{iconClasses}}></i>
|
||||
{{ /if }}
|
||||
{{#if this.svgLink}}
|
||||
<svg>
|
||||
<use xlink:href={{this.svgLink}}></use>
|
||||
</svg>
|
||||
{{else}}
|
||||
<i class={{iconClasses}}></i>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="buttonLabel">
|
||||
{{this.title}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template name="layoutChooser">
|
||||
<div id="layoutChooser" class="layoutChooser pull-left dropdown-menu" role="menu">
|
||||
<div id="layoutChooser" class="layoutChooser">
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
@ -27,4 +27,4 @@
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -3,18 +3,16 @@
|
||||
$borderColor = rgba(77, 99, 110, 0.81)
|
||||
|
||||
.layoutChooser
|
||||
theme('background', '$uiGrayDarkest')
|
||||
width: 92px
|
||||
height: 92px
|
||||
min-width: 92px // to override bootstrap's dropdown-menu class
|
||||
min-height: 92px
|
||||
// theme('background-color', '$primaryBackgroundColor')
|
||||
opacity: 0.95
|
||||
border-radius: 8px
|
||||
theme('background', '$uiGrayDarkest', 0.95)
|
||||
border: 1px solid $borderColor;
|
||||
|
||||
&.open
|
||||
display: block
|
||||
border-radius: 8px
|
||||
height: 92px
|
||||
min-height: 92px
|
||||
min-width: 92px // to override bootstrap's dropdown-menu class
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
width: 92px
|
||||
z-index: 5000
|
||||
|
||||
table
|
||||
margin: 0 auto
|
||||
|
||||
@ -145,10 +145,10 @@ Meteor.startup(function() {
|
||||
}
|
||||
},
|
||||
previousDisplaySet() {
|
||||
OHIF.viewer.moveDisplaySet(false);
|
||||
OHIF.viewer.moveDisplaySets(false);
|
||||
},
|
||||
nextDisplaySet() {
|
||||
OHIF.viewer.moveDisplaySet(true);
|
||||
OHIF.viewer.moveDisplaySets(true);
|
||||
},
|
||||
nextPanel: function() {
|
||||
nextActivePanel();
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
toggleDialog = function(element) {
|
||||
var elem = $(element);
|
||||
if (elem.css('display') === 'none') {
|
||||
elem.css('display', 'block');
|
||||
} else {
|
||||
elem.css('display', 'none');
|
||||
}
|
||||
};
|
||||
toggleDialog = element => {
|
||||
const $element = $(element);
|
||||
const isClosed = $element.hasClass('dialog-open');
|
||||
$element.toggleClass('dialog-closed', isClosed);
|
||||
$element.toggleClass('dialog-open', !isClosed);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user