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

AWV-3: Merging changes from upstream

Browse Source
This commit is contained in:
Bruno Alves de Faria committed 2016-09-03 14:47:39 -03:00
2 parents e8930230e7 1603450da8
commit 176b503c5a
153 files changed
+2377 -1125
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
+15 -15
View File
@@ -1,7 +1,7 @@
@import "{design}/app"
$height = 25px
$textColorActive = #2D2D2D
$textColorButtonActive = #2D2D2D
.roundedButtonGroup
@@ -15,9 +15,9 @@ $textColorActive = #2D2D2D
.roundedButton
align-items: center
background-color: $uiGrayDark
border: 2px $uiBorderColorDark solid
color: $textSecondaryColor
theme('background-color', '$uiGrayDark')
theme('border', '2px solid $uiBorderColorDark')
theme('color', '$textSecondaryColor')
display: flex
font-size: 11px
font-weight: 500
@@ -29,19 +29,19 @@ $textColorActive = #2D2D2D
transition: transition($sidebarTransition)
svg
fill: $defaultColor
stroke: $defaultColor
theme('fill', '$defaultColor')
theme('stroke', '$defaultColor')
svg
span
margin: 0 2px
i
line-height: 15px
font-size: 15px
.bottomLabel
color: $textSecondaryColor
theme('color', '$textSecondaryColor')
font-size: 12px
font-weight: 500
line-height: 12px
@@ -58,16 +58,16 @@ $textColorActive = #2D2D2D
border-top-right-radius: $height
&:hover .roundedButton
background-color: $boxBackgroundColor
color: $uiGrayDark
theme('color', '$uiGrayDark')
theme('background-color', '$boxBackgroundColor')
&.active .roundedButton
background-color: $activeColor
border-color: $uiBorderColorActive
color: $textColorActive
theme('background-color', '$activeColor')
theme('border-color', '$uiBorderColorActive')
color: $textColorButtonActive
&:hover .roundedButton
&.active .roundedButton
svg
fill: $uiGrayDark
stroke: $uiGrayDark
theme('fill', '$uiGrayDark')
theme('stroke', '$uiGrayDark')
Packages/design/package.js
+4 -1
View File
@@ -18,7 +18,9 @@ Package.onUse(function(api) {
'styles/imports/mixins.styl',
'styles/imports/spacings.styl',
'styles/imports/variables.styl',
'styles/imports/theming.styl',
'styles/imports/theme-tide.styl',
'styles/imports/theme-tigerlilly.styl'
], 'client', {
isImport: true
});
@@ -35,7 +37,8 @@ Package.onUse(function(api) {
api.addFiles([
'styles/components/radio.styl',
'styles/components/select2.styl',
'styles/components/selectTree.styl'
'styles/components/selectTree.styl',
'styles/components/states.styl'
], 'client');
// Rounded Button Group
Packages/design/styles/common/global.styl
+22 -7
View File
@@ -2,11 +2,26 @@
html body
font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
// Try to fix LT-273, need a monitor to test on though.
//text-rendering: optimizeLegibility
html hr
border-top: 1px solid $uiBorderColor
theme('border-top', '1px solid $uiBorderColor')
label.form-group
width: 100%
&>span.select2
display: block
width: 100% !important
span.select2-selection
min-height: 34px
span.select2-selection__rendered
height: 34px
line-height: 34px
span.select2-selection__arrow
height: 34px
.center-table
display: table
@@ -32,9 +47,9 @@ html hr
.modal-dialog
.modal-content
background: $primaryBackgroundColor
border-color: $uiBorderColor
color: $textSecondaryColor
theme('background', '$primaryBackgroundColor')
theme('border-color', '$uiBorderColor')
theme('color', '$textSecondaryColor')
.modal-header, .modal-footer
border-color: $uiBorderColor
theme('border-color', '$uiBorderColor')
Packages/design/styles/components/radio.styl
+6 -6
View File
@@ -3,12 +3,12 @@
.group-radio
label
cursor: pointer
input
height: 0
width: 0
visibility: hidden
span
padding-left: 23px
position: relative
@@ -23,14 +23,14 @@
top: 50%
transform(translateY(-50%))
width: 16px
input:focus + span:before
// TODO: [design] define a outline for the design
theme('box-shadow', '0 0 2px 2px $textSecondaryColor')
outline: none
box-shadow: 0 0 2px 2px $textSecondaryColor
input:checked + span:after
background: $uiBorderColorDark
theme('background', '$uiBorderColorDark')
border-radius: 5px
content: ''
height: 10px
Packages/design/styles/components/select2.styl
+2 -2
View File
@@ -22,8 +22,8 @@ span.select2.select2-container
padding-left: 11px
span.select2-selection__arrow
theme('border-left', '1px solid $primaryBackgroundColor')
background-color: $gray1
border-left: 1px solid $primaryBackgroundColor
border-top-right-radius: $borderRadius
border-bottom-right-radius: $borderRadius
right: 0
@@ -42,8 +42,8 @@ span.select2.select2-container
placeholder-color($gray4)
li.select2-selection__choice
theme('border-color', '$uiGray')
background-color: #FFF
border-color: $uiGray
border-radius: $borderRadius
color: $gray4
font-size: 12px
Packages/design/styles/components/selectTree.styl
+21 -5
View File
@@ -76,6 +76,7 @@ $gray6 = #303030
display: block
margin: 0
padding: 5px
position: relative
text-align: center
span
@@ -85,6 +86,14 @@ $gray6 = #303030
input
border-color: $gray5
font-weight: normal
padding-left: 34px
& ~ i
color: $gray1
font-size: 18px
left: 16px
position: absolute
top: 37px
.tree-breadcrumb
line-height: 32px
@@ -146,7 +155,6 @@ $gray6 = #303030
&.active
box-shadow: 0 0 0 200px white, inset 0 0 0 200px white
position: fixed
transition(box-shadow 0.3s ease)
z-index: 0
@@ -172,7 +180,7 @@ $gray6 = #303030
border-radius: 5px
color: white
opacity: 0.9
padding: 5px 12px 12px
padding: 0 15px 12px
position: absolute
top: 50%
transform(translateY(-50%))
@@ -180,13 +188,21 @@ $gray6 = #303030
h5.title
color: $gray5
font-size: 12px
font-weight: normal
line-height: 20px
margin: 0
margin: 12px 0 16px
label
cursor: pointer
display: block
font-weight: 300
line-height: 26px
margin: 0
padding-left: 3px
transition(padding 0.3s ease)
&:hover
padding-left: 0
.select-tree-root
@@ -218,7 +234,7 @@ $gray6 = #303030
.content
margin-left: 0
&.interacted
&.interacted, &.selected
.select-tree-common
z-index: 1
Packages/design/styles/components/states.styl
+29
View File
@@ -0,0 +1,29 @@
@import "{design}/app"
.state-error
&+.tooltip
.tooltip-inner
color: white
theme('background-color', '$uiStateErrorBorder')
&.top .tooltip-arrow
theme('border-top-color', '$uiStateErrorBorder')
&.right .tooltip-arrow
theme('border-right-color', '$uiStateErrorBorder')
&.bottom .tooltip-arrow
theme('border-bottom-color', '$uiStateErrorBorder')
&.left .tooltip-arrow
theme('border-left-color', '$uiStateErrorBorder')
&:not(.component-group)
&.form-control, .form-control
theme('background-color', '$uiStateError')
theme('border-color', '$uiStateErrorBorder')
theme('color', '$uiStateErrorText')
.select2-selection
theme('background-color', '$uiStateError')
theme('border-color', '$uiStateErrorBorder')
theme('color', '$uiStateErrorText')
Packages/design/styles/imports/theme-tide.styl
+29 -49
View File
@@ -1,54 +1,34 @@
// Common pallete
$uiYellow = #E29E4A
$uiSkyBlue = #6FBDE2
$themes['tide'] = {
// Common pallete
$uiYellow: #E29E4A
$uiSkyBlue: #6FBDE2
$uiLightGray = #516873
$uiGray = #263340
$uiGrayDark = #16202B
$uiGrayDarker = #151A1F
$uiGrayDarkest = #14191E
// State pallete
$uiStateError: #FFCCCC
$uiStateErrorBorder: #993333
$uiStateErrorText: #661111
// Interface UI Colors
$defaultColor = #9cd0fe
$hoverColor = #ffffff
$activeColor = #00a4d9
$uiBorderColor = #436270
$uiBorderColorDark = #3C5D80
$uiBorderColorActive = #00a4d9
$primaryBackgroundColor = #000000
$boxBackgroundColor = #344a61
$boxBackgroundColorDark = #22374D
$uiLightGray: #516873
$uiGray: #263340
$uiGrayDark: #16202B
$uiGrayDarker: #151A1F
$uiGrayDarkest: #14191E
// Text Colors
$textColorActive = black //#89bae5
$textPrimaryColor = #ffffff
$textSecondaryColor = #6a8fb1
// Interface UI Colors
$defaultColor: #9cd0fe
$hoverColor: #ffffff
$activeColor: #00a4d9
$uiBorderColor: #436270
$uiBorderColorDark: #3C5D80
$uiBorderColorActive: #00a4d9
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
// Other Colors
$menuBackgroundColor = #F2F2F2
$imageSliderColor = #163239
// Text Colors
$textColorActive: black //#89bae5
$textPrimaryColor: #ffffff
$textSecondaryColor: #6a8fb1
// Viewport Settings
$viewportBorderThickness = 1px
$viewportBorderColor = $uiBorderColorDark
$viewportBorderColorHover = $uiBorderColor
$viewportBorderColorActive = $uiBorderColorActive
// Sizes
$topBarHeight = 40px
$toolbarHeight = 78px
$toolbarDrawerHeight = 62px
// Thicknesses
$uiBorderThickness = 1px
// Fonts
$logoFontFamily = "Sanchez"
$logoFontWeight = 300
// Transitions
$transitionDuration = 0.3s
$transitionEffect = ease
$sidebarTransition = all $transitionDuration $transitionEffect
$studiesSidebarMenuWidth = 307px
$lesionsSidebarMenuWidth = 323px
// Other Colors
$imageSliderColor: #163239
}
Packages/design/styles/imports/theme-tigerlilly.styl
+29 -49
View File
@@ -1,54 +1,34 @@
// Common pallete
$uiYellow = #E29E4A
$uiSkyBlue = #6FBDE2
$themes['tigerlilly'] = {
// Common pallete
$uiYellow: #E29E4A
$uiSkyBlue: #6FBDE2
$uiLightGray = #516873
$uiGray = #263340
$uiGrayDark = #16202B
$uiGrayDarker = #151A1F
$uiGrayDarkest = #14191E
// State pallete
$uiStateError: #FFCCCC
$uiStateErrorBorder: #CC6666
$uiStateErrorText: #661111
// Interface UI Colors
$defaultColor = #98ceff
$hoverColor = #ffffff
$activeColor = #ff8a3d
$uiBorderColor = #744b71
$uiBorderColorDark = #744b71
$uiBorderColorActive = #ff8a3d
$primaryBackgroundColor = #000000
$boxBackgroundColor = #5b3a59
$boxBackgroundColorDark = #4b2f40
$uiLightGray: #516873
$uiGray: #263340
$uiGrayDark: #16202B
$uiGrayDarker: #151A1F
$uiGrayDarkest: #14191E
// Text Colors
$textColorActive = #ff8a3d
$textPrimaryColor = #ffffff
$textSecondaryColor = #6a8fb1
// Interface UI Colors
$defaultColor: #98ceff
$hoverColor: #ffffff
$activeColor: #ff8a3d
$uiBorderColor: #744b71
$uiBorderColorDark: #744b71
$uiBorderColorActive: #ff8a3d
$primaryBackgroundColor: #000000
$boxBackgroundColor: #5b3a59
// Other Colors
$menuBackgroundColor = #F2F2F2
$imageSliderColor = #4b2c3c //#163239
// Text Colors
$textColorActive: black
$textPrimaryColor: #ffffff
$textSecondaryColor: #6a8fb1
// Viewport Settings
$viewportBorderThickness = 1px
$viewportBorderColor = $uiBorderColorDark
$viewportBorderColorHover = $uiBorderColor
$viewportBorderColorActive = $uiBorderColorActive
// Sizes
$topBarHeight = 40px
$toolbarHeight = 78px
$toolbarDrawerHeight = 62px
// Thicknesses
$uiBorderThickness = 1px
// Fonts
$logoFontFamily = "Sanchez"
$logoFontWeight = 300
// Transitions
$transitionDuration = 0.3s
$transitionEffect = ease
$sidebarTransition = all $transitionDuration $transitionEffect
$studiesSidebarMenuWidth = 307px
$lesionsSidebarMenuWidth = 323px
// Other Colors
$imageSliderColor: #4b2c3c //#163239
}
Packages/design/styles/imports/theming.styl
+32
View File
@@ -0,0 +1,32 @@
$themes = {}
$defaultTheme = 'tide'
@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)
parseCommaVars($theme, $value)
$valueSplit = split(',', $value)
$list = ''
pop($list)
for $sentence in $valueSplit
push($list, parseSpaceVars($theme, $sentence))
unquote(join(',', $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)
Packages/design/styles/imports/variables.styl
+22 -2
View File
@@ -1,2 +1,22 @@
//@import "./theme-tigerlilly.styl"
@import "./theme-tide.styl"
@import "./theming.styl"
// Sizes
$topBarHeight = 40px
$toolbarHeight = 78px
$toolbarDrawerHeight = 62px
$studiesSidebarMenuWidth = 307px
$lesionsSidebarMenuWidth = 323px
// Fonts
$logoFontFamily = "Sanchez"
$logoFontWeight = 300
// Transitions
$transitionDuration = 0.3s
$transitionEffect = ease
$sidebarTransition = all $transitionDuration $transitionEffect
// Thicknesses
$viewportBorderThickness = 1px
$uiBorderThickness = 1px