From 471a25a625563c1325695679761f61b5a86fe242 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 6 Oct 2015 14:34:53 -0700 Subject: [PATCH 01/10] [Frontend] Progress bar/ message banner markup and styling open #170 Major work on progress bar; --- platform/commonUI/general/res/sass/_main.scss | 1 - .../commonUI/general/res/sass/_messages.scss | 33 -- .../commonUI/general/res/sass/_mixins.scss | 19 +- .../general/res/sass/controls/_controls.scss | 107 +++- .../general/res/sass/controls/_messages.scss | 100 ++++ .../general/res/templates/indicator.html | 1 + .../general/res/templates/message-banner.html | 14 +- .../espresso/res/css/theme-espresso.css | 534 ++++++++++++------ .../themes/espresso/res/sass/_constants.scss | 14 +- .../themes/snow/res/css/theme-snow.css | 524 +++++++++++------ .../themes/snow/res/sass/_constants.scss | 14 +- 11 files changed, 941 insertions(+), 420 deletions(-) delete mode 100644 platform/commonUI/general/res/sass/_messages.scss diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 8241078c50..05d814f3be 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -29,7 +29,6 @@ @import "helpers/bubbles"; @import "helpers/splitter"; @import "helpers/wait-spinner"; -@import "messages"; @import "properties"; /********************************* CONTROLS */ diff --git a/platform/commonUI/general/res/sass/_messages.scss b/platform/commonUI/general/res/sass/_messages.scss deleted file mode 100644 index 80c9b21d97..0000000000 --- a/platform/commonUI/general/res/sass/_messages.scss +++ /dev/null @@ -1,33 +0,0 @@ -/* Styles for messages and message banners */ - -.message { - &.block { - @include border-radius($basicCr); - padding: $interiorMarginLg; - } - &.error { - background-color: rgba($colorAlert,0.3); - color: lighten($colorAlert, 20%); - } -} - -.l-message-banner { - @include ellipsize(); - display: block; - position: absolute; - top: $interiorMargin; right: auto; bottom: $interiorMargin; left: 50%; - height: auto; width: auto; - //line-height: $ueFooterH; - max-width: 300px; - padding: 0 $interiorMarginLg; - @include transform(translateX(-50%)); - .s-btn { - height: auto !important; - } -} - -.s-message-banner { - @include border-radius($basicCr); - background-color: #999; - color: black; -} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index d0b08491b7..14c56edfb7 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -94,7 +94,6 @@ } @mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) { - //$size: $size*2; width: 0; height: 0; $slopedB: $size/$ratio solid transparent; @@ -129,6 +128,24 @@ background-size: $d $d; } +@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) { + @include background-image(linear-gradient(-90deg, + rgba($c, $a) 0%, rgba($c, $a) 50%, + transparent 50%, transparent 100% + )); + background-repeat: repeat; + background-size: $d $d; +} + +@mixin bgVertFuzzyStripes($c: yellow, $a: 0.1, $d: 40px) { + @include background-image(linear-gradient(-90deg, + rgba($c, $a) 0%, transparent 50%, + transparent 50%, rgba($c, $a) 100% + )); + background-repeat: repeat; + background-size: $d $d; +} + @mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') { $deg: 90deg; @if ($repeatDir != 'x') { diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index af967d6ef3..edb8994566 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -19,34 +19,6 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/*.control { - // UNUSED? - &.view-control { - .icon { - display: inline-block; - margin: -1px 5px 1px 2px; - vertical-align: middle; - &.triangle-down { - margin: 2px 2px -2px 0px; - } - } - - .label { - display: inline-block; - font-size: 11px; - vertical-align: middle; - } - - .toggle { - @include border-radius(3px); - display: inline-block; - padding: 1px 6px 4px 4px; - &:hover { - background: rgba(white, 0.1); - } - } - } -}*/ .accordion { $accordionHeadH: 18px; @@ -291,6 +263,85 @@ label.checkbox.custom { } } +/******************************************************** PROGRESS BAR */ +@include keyframes(progress) { + 100% { background-position: $progressBarStripeW center; } +} + +@mixin bgProgressAnim($c: yellow, $a: 0.1, $d: 20px) { + @include background-image(linear-gradient(-90deg, + rgba($c, $a) 0%, transparent 50%, + transparent 50%, rgba($c, $a) 100% + )); + background-position: 0 center; + background-repeat: repeat-x; + background-size: $d 40%; +} + +.l-progress-bar { + // Assume will be determinate by default + display: inline-block; + overflow: hidden; + position: relative; + + .progress-amt-holder { + @include absPosDefault(1px); + } + .progress-amt, + .progress-amt:before, + .progress-amt:after { + @include absPosDefault(); + display: block; + content: ''; + } + + .progress-amt { + right: auto; // Allow inline width to control } + } + + &.indeterminate { + .progress-amt { + width: 100% !important; + } + } +} + +.s-progress-bar { + @include border-radius($basicCr); + @include boxIncised(0.3, 4px); + background: $colorProgressBarOuter; + //border:1px solid $colorProgressBarOuter; + .progress-amt { + @include border-radius($basicCr); + @include boxShdw(); + @include border-radius($basicCr - 1); + @include trans-prop-nice(width); + &:before { + background-color: $colorProgressBarAmt; + } + &:after { + // Sheen + @include background-image(linear-gradient( + transparent 5%, rgba(#fff,0.25) 30%, transparent 100% + )); + } + } + + &:not(.indeterminate) { + .progress-amt:before { + // Slower, more subtle anim for determinate progress + @include animation(progress .3s linear infinite); + @include bgProgressAnim(#fff, 0.2, $progressBarStripeW); + } + } + + &.indeterminate .progress-amt:before { + // Faster, more visible anim for indeterminate progress + @include animation(progress .6s linear infinite); + @include bgProgressAnim(#fff, 0.4, $progressBarStripeW); + } +} + /******************************************************** SLIDERS */ .slider { diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index a6aa243535..b8c98ec2d7 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -20,6 +20,22 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ +@mixin statusBannerColors($bg, $fg: $colorStatusFg) { + $bgPb: 30%; + $bgPbD: 10%; + background-color: darken($bg, $bgPb); + color: $fg; + &:hover { + background-color: darken($bg, $bgPb - $bgPbD); + } + .s-action { + background-color: darken($bg, $bgPb + $bgPbD); + &:hover { + background-color: darken($bg, $bgPb); + } + } +} + .status.block { color: $colorStatusDefault; cursor: default; @@ -61,4 +77,88 @@ opacity: 0; } } +} + +/* Styles for messages and message banners */ +.message { + &.block { + @include border-radius($basicCr); + padding: $interiorMarginLg; + } + &.error { + background-color: rgba($colorAlert,0.3); + color: lighten($colorAlert, 20%); + } +} + +.l-message-banner { + $m: $interiorMarginSm; + $lh: $ueFooterH - ($m*2) - 1; + @include box-sizing(border-box); + @include ellipsize(); + @include display-flex; + @include flex-direction(row); + @include align-items(center); + position: absolute; + top: $m; right: auto; bottom: $m; left: 50%; + height: auto; width: auto; + line-height: $lh; + max-width: 300px; + padding: 0 $interiorMargin 0 $interiorMarginLg; + @include transform(translateX(-50%)); + + a, span { + @include flex(0 1 auto); + margin-left: $interiorMargin; + &:first-child { + margin-left: 0; + } + } + a { + display: inline-block; + } + .l-action { + line-height: $lh - 3; + padding: 0 $interiorMargin; + } + .close { + //@include test(red, 0.7); + cursor: pointer; + font-size: 7px; + width: 8px; + } + .l-progress-bar { + $h: $lh - 10; + height: $h; + line-height: $h; + width: 100px; + } + z-index: 2; +} + +.s-message-banner, +.s-message-banner .s-action { + @include trans-prop-nice(background-color, .25s); +} + +.s-message-banner { + @include border-radius($controlCr); + @include statusBannerColors($colorStatusDefault, $colorStatusFg); + cursor: pointer; + a { color: inherit; } + .s-action { + @include border-radius($basicCr); + } + .close { + opacity: 0.5; + &:hover { + opacity: 1; + } + } + &.ok { + @include statusBannerColors($colorStatusOk); + } + &.caution { + @include statusBannerColors($colorStatusCaution); + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html index 40733d875a..ce2adb421c 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -20,6 +20,7 @@ at runtime from the About dialog for additional information. --> +
Objects not saved - - x - + + + + Try Again + + x +
\ No newline at end of file diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 3fc212468c..cb5a9be609 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -919,7 +919,7 @@ mct-container { right: 0; width: auto; height: 5px; } - /* line 159, ../../../../general/res/sass/_mixins.scss */ + /* line 176, ../../../../general/res/sass/_mixins.scss */ .split-layout.horizontal > .splitter:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -943,7 +943,7 @@ mct-container { top: 2px; left: 5px; right: 5px; } - /* line 181, ../../../../general/res/sass/_mixins.scss */ + /* line 198, ../../../../general/res/sass/_mixins.scss */ .split-layout.horizontal > .splitter:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -973,7 +973,7 @@ mct-container { bottom: 0; cursor: col-resize; width: 5px; } - /* line 159, ../../../../general/res/sass/_mixins.scss */ + /* line 176, ../../../../general/res/sass/_mixins.scss */ .split-layout.vertical > .splitter:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -997,7 +997,7 @@ mct-container { left: 2px; bottom: 5px; top: 5px; } - /* line 181, ../../../../general/res/sass/_mixins.scss */ + /* line 198, ../../../../general/res/sass/_mixins.scss */ .split-layout.vertical > .splitter:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -1153,49 +1153,6 @@ mct-container { top: 0; left: 0; } -/* Styles for messages and message banners */ -/* line 4, ../../../../general/res/sass/_messages.scss */ -.message.block { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - padding: 10px; } -/* line 8, ../../../../general/res/sass/_messages.scss */ -.message.error { - background-color: rgba(255, 60, 0, 0.3); - color: #ff8a66; } - -/* line 14, ../../../../general/res/sass/_messages.scss */ -.l-message-banner { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: block; - position: absolute; - top: 5px; - right: auto; - bottom: 5px; - left: 50%; - height: auto; - width: auto; - max-width: 300px; - padding: 0 10px; - -moz-transform: translateX(-50%); - -ms-transform: translateX(-50%); - -webkit-transform: translateX(-50%); - transform: translateX(-50%); } - /* line 24, ../../../../general/res/sass/_messages.scss */ - .l-message-banner .s-btn, .l-message-banner .s-menu { - height: auto !important; } - -/* line 29, ../../../../general/res/sass/_messages.scss */ -.s-message-banner { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - background-color: #999; - color: black; } - /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -1344,14 +1301,14 @@ mct-container { -webkit-transition: background, 0.25s; transition: background, 0.25s; text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .s-btn.major .icon, .major.s-menu .icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover { background: linear-gradient(#1ac6ff, #00bfff); } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon { color: white; } } /* line 62, ../../../../general/res/sass/controls/_buttons.scss */ @@ -1383,14 +1340,14 @@ mct-container { -webkit-transition: background, 0.25s; transition: background, 0.25s; text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major) .icon, .s-menu:not(.major) .icon { color: #0099cc; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover { background: linear-gradient(#6b6b6b, #5e5e5e); } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon { color: #33ccff; } } /* line 71, ../../../../general/res/sass/controls/_buttons.scss */ @@ -1425,14 +1382,14 @@ mct-container { -webkit-transition: background, 0.25s; transition: background, 0.25s; text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover { background: linear-gradient(#fe9815, #f88c01); } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon { color: white; } } /* line 76, ../../../../general/res/sass/controls/_buttons.scss */ @@ -1591,41 +1548,13 @@ mct-container { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/*.control { - // UNUSED? - &.view-control { - .icon { - display: inline-block; - margin: -1px 5px 1px 2px; - vertical-align: middle; - &.triangle-down { - margin: 2px 2px -2px 0px; - } - } - - .label { - display: inline-block; - font-size: 11px; - vertical-align: middle; - } - - .toggle { - @include border-radius(3px); - display: inline-block; - padding: 1px 6px 4px 4px; - &:hover { - background: rgba(white, 0.1); - } - } - } -}*/ -/* line 51, ../../../../general/res/sass/controls/_controls.scss */ +/* line 23, ../../../../general/res/sass/controls/_controls.scss */ .accordion { margin-top: 5px; } - /* line 54, ../../../../general/res/sass/controls/_controls.scss */ + /* line 26, ../../../../general/res/sass/controls/_controls.scss */ .accordion:first-child { margin-top: 0; } - /* line 57, ../../../../general/res/sass/controls/_controls.scss */ + /* line 29, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-head { -moz-border-radius: 1.5px; -webkit-border-radius: 1.5px; @@ -1647,10 +1576,10 @@ mct-container { width: auto; height: 18px; text-transform: uppercase; } - /* line 75, ../../../../general/res/sass/controls/_controls.scss */ + /* line 47, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-head:hover { background: rgba(153, 153, 153, 0.4); } - /* line 78, ../../../../general/res/sass/controls/_controls.scss */ + /* line 50, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-head:after { content: "^"; display: block; @@ -1660,10 +1589,10 @@ mct-container { right: 5px; text-transform: none; top: 0; } - /* line 88, ../../../../general/res/sass/controls/_controls.scss */ + /* line 60, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-head:not(.expanded):after { content: "v"; } - /* line 92, ../../../../general/res/sass/controls/_controls.scss */ + /* line 64, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-contents { position: absolute; top: 23px; @@ -1673,14 +1602,14 @@ mct-container { overflow-y: auto; overflow-x: hidden; } -/* line 103, ../../../../general/res/sass/controls/_controls.scss */ +/* line 75, ../../../../general/res/sass/controls/_controls.scss */ .l-composite-control { vertical-align: middle; } - /* line 106, ../../../../general/res/sass/controls/_controls.scss */ + /* line 78, ../../../../general/res/sass/controls/_controls.scss */ .l-composite-control.l-checkbox .composite-control-label { line-height: 18px; } -/* line 112, ../../../../general/res/sass/controls/_controls.scss */ +/* line 84, ../../../../general/res/sass/controls/_controls.scss */ .l-control-group { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -1689,23 +1618,23 @@ mct-container { display: inline-block; padding: 0 5px; position: relative; } - /* line 120, ../../../../general/res/sass/controls/_controls.scss */ + /* line 92, ../../../../general/res/sass/controls/_controls.scss */ .l-control-group:first-child { border-left: none; padding-left: 0; } -/* line 126, ../../../../general/res/sass/controls/_controls.scss */ +/* line 98, ../../../../general/res/sass/controls/_controls.scss */ .l-local-controls { position: absolute; top: 5px; right: 5px; z-index: 5; } -/* line 136, ../../../../general/res/sass/controls/_controls.scss */ +/* line 108, ../../../../general/res/sass/controls/_controls.scss */ .s-local-controls { font-size: 0.7rem; } -/* line 140, ../../../../general/res/sass/controls/_controls.scss */ +/* line 112, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom { cursor: pointer; display: inline-block; @@ -1714,13 +1643,13 @@ label.checkbox.custom { padding-left: 19px; position: relative; vertical-align: middle; } - /* line 150, ../../../../general/res/sass/controls/_controls.scss */ + /* line 122, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom em { color: #999; display: inline-block; height: 14px; min-width: 14px; } - /* line 155, ../../../../general/res/sass/controls/_controls.scss */ + /* line 127, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom em:before { -moz-border-radius: 1.5px; -webkit-border-radius: 1.5px; @@ -1741,58 +1670,58 @@ label.checkbox.custom { top: 0; position: absolute; text-align: center; } - /* line 174, ../../../../general/res/sass/controls/_controls.scss */ + /* line 146, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom.no-text { overflow: hidden; margin-right: 0; padding-left: 0; height: 14px; width: 14px; } - /* line 180, ../../../../general/res/sass/controls/_controls.scss */ + /* line 152, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom.no-text em { overflow: hidden; } - /* line 184, ../../../../general/res/sass/controls/_controls.scss */ + /* line 156, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom input { display: none; } - /* line 186, ../../../../general/res/sass/controls/_controls.scss */ + /* line 158, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom input:checked ~ em:before { background: #0099cc; color: #ccf2ff; content: "2"; } -/* line 194, ../../../../general/res/sass/controls/_controls.scss */ +/* line 166, ../../../../general/res/sass/controls/_controls.scss */ .input-labeled { margin-left: 5px; } - /* line 196, ../../../../general/res/sass/controls/_controls.scss */ + /* line 168, ../../../../general/res/sass/controls/_controls.scss */ .input-labeled label { display: inline-block; margin-right: 3px; } - /* line 200, ../../../../general/res/sass/controls/_controls.scss */ + /* line 172, ../../../../general/res/sass/controls/_controls.scss */ .input-labeled.inline { display: inline-block; } - /* line 203, ../../../../general/res/sass/controls/_controls.scss */ + /* line 175, ../../../../general/res/sass/controls/_controls.scss */ .input-labeled:first-child { margin-left: 0; } -/* line 208, ../../../../general/res/sass/controls/_controls.scss */ +/* line 180, ../../../../general/res/sass/controls/_controls.scss */ .s-menu label.checkbox.custom { margin-left: 5px; } -/* line 213, ../../../../general/res/sass/controls/_controls.scss */ +/* line 185, ../../../../general/res/sass/controls/_controls.scss */ .item .checkbox.checked label { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-bottom: none; } -/* line 219, ../../../../general/res/sass/controls/_controls.scss */ +/* line 191, ../../../../general/res/sass/controls/_controls.scss */ .context-available { color: #0099cc; } - /* line 222, ../../../../general/res/sass/controls/_controls.scss */ + /* line 194, ../../../../general/res/sass/controls/_controls.scss */ .context-available:hover { color: deepskyblue; } -/* line 227, ../../../../general/res/sass/controls/_controls.scss */ +/* line 199, ../../../../general/res/sass/controls/_controls.scss */ .view-switcher { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -1808,26 +1737,26 @@ label.checkbox.custom { transition-timing-function: ease-in-out; } /******************************************************** OBJECT-HEADER */ -/* line 232, ../../../../general/res/sass/controls/_controls.scss */ +/* line 204, ../../../../general/res/sass/controls/_controls.scss */ .object-header { font-size: 1em; } - /* line 243, ../../../../general/res/sass/controls/_controls.scss */ + /* line 215, ../../../../general/res/sass/controls/_controls.scss */ .object-header > .type-icon { color: #cccccc; font-size: 120%; float: left; margin-right: 5px; } - /* line 250, ../../../../general/res/sass/controls/_controls.scss */ + /* line 222, ../../../../general/res/sass/controls/_controls.scss */ .object-header .l-elem-wrapper { justify-content: flex-start; -webkit-justify-content: flex-start; } - /* line 253, ../../../../general/res/sass/controls/_controls.scss */ + /* line 225, ../../../../general/res/sass/controls/_controls.scss */ .object-header .l-elem-wrapper mct-representation { min-width: 0.7em; } - /* line 261, ../../../../general/res/sass/controls/_controls.scss */ + /* line 233, ../../../../general/res/sass/controls/_controls.scss */ .object-header .action { margin-right: 5px; } - /* line 265, ../../../../general/res/sass/controls/_controls.scss */ + /* line 237, ../../../../general/res/sass/controls/_controls.scss */ .object-header .title-label { color: #999; overflow: hidden; @@ -1836,13 +1765,13 @@ label.checkbox.custom { flex: 0 1 auto; -webkit-flex: 0 1 auto; padding-right: 0.35em; } - /* line 275, ../../../../general/res/sass/controls/_controls.scss */ + /* line 247, ../../../../general/res/sass/controls/_controls.scss */ .object-header .context-available { font-size: 0.7em; flex: 0 0 1; -webkit-flex: 0 0 1; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 282, ../../../../general/res/sass/controls/_controls.scss */ + /* line 254, ../../../../general/res/sass/controls/_controls.scss */ .object-header .context-available { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -1857,12 +1786,128 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 0; } - /* line 287, ../../../../general/res/sass/controls/_controls.scss */ + /* line 259, ../../../../general/res/sass/controls/_controls.scss */ .object-header:hover .context-available { opacity: 1; } } +/******************************************************** PROGRESS BAR */ +@-moz-keyframes progress { + 100% { + background-position: 20px center; } } +@-webkit-keyframes progress { + 100% { + background-position: 20px center; } } +@keyframes progress { + 100% { + background-position: 20px center; } } +/* line 281, ../../../../general/res/sass/controls/_controls.scss */ +.l-progress-bar { + display: inline-block; + overflow: hidden; + position: relative; } + /* line 287, ../../../../general/res/sass/controls/_controls.scss */ + .l-progress-bar .progress-amt-holder { + overflow: hidden; + position: absolute; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; + width: auto; + height: auto; } + /* line 290, ../../../../general/res/sass/controls/_controls.scss */ + .l-progress-bar .progress-amt, + .l-progress-bar .progress-amt:before, + .l-progress-bar .progress-amt:after { + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; + display: block; + content: ''; } + /* line 298, ../../../../general/res/sass/controls/_controls.scss */ + .l-progress-bar .progress-amt { + right: auto; } + /* line 303, ../../../../general/res/sass/controls/_controls.scss */ + .l-progress-bar.indeterminate .progress-amt { + width: 100% !important; } + +/* line 309, ../../../../general/res/sass/controls/_controls.scss */ +.s-progress-bar { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + -moz-box-shadow: inset rgba(0, 0, 0, 0.3) 0 1px 4px; + -webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0 1px 4px; + box-shadow: inset rgba(0, 0, 0, 0.3) 0 1px 4px; + background: rgba(0, 0, 0, 0.1); } + /* line 314, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar .progress-amt { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; + -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; + box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; + -moz-border-radius: 1px; + -webkit-border-radius: 1px; + border-radius: 1px; + -moz-transition-property: width; + -o-transition-property: width; + -webkit-transition-property: width; + transition-property: width; + -moz-transition-duration: 500ms; + -o-transition-duration: 500ms; + -webkit-transition-duration: 500ms; + transition-duration: 500ms; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; } + /* line 319, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar .progress-amt:before { + background-color: #0099cc; } + /* line 322, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar .progress-amt:after { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, rgba(0, 0, 0, 0)), color-stop(30%, rgba(255, 255, 255, 0.25)), color-stop(100%, rgba(0, 0, 0, 0))); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, 0.25) 30%, rgba(0, 0, 0, 0) 100%); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, 0.25) 30%, rgba(0, 0, 0, 0) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, 0.25) 30%, rgba(0, 0, 0, 0) 100%); } + /* line 331, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar:not(.indeterminate) .progress-amt:before { + -moz-animation: progress 0.3s linear infinite; + -webkit-animation: progress 0.3s linear infinite; + animation: progress 0.3s linear infinite; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background-size: 100%; + background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); + background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); + background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); + background-position: 0 center; + background-repeat: repeat-x; + background-size: 20px 40%; } + /* line 338, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar.indeterminate .progress-amt:before { + -moz-animation: progress 0.6s linear infinite; + -webkit-animation: progress 0.6s linear infinite; + animation: progress 0.6s linear infinite; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC40Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background-size: 100%; + background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); + background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); + background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); + background-position: 0 center; + background-repeat: repeat-x; + background-size: 20px 40%; } + /******************************************************** SLIDERS */ -/* line 300, ../../../../general/res/sass/controls/_controls.scss */ +/* line 351, ../../../../general/res/sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -1881,7 +1926,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 311, ../../../../general/res/sass/controls/_controls.scss */ +/* line 362, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob { background-color: #333; -moz-border-radius: 3px; @@ -1918,17 +1963,17 @@ label.checkbox.custom { auto: 0; bottom: auto; left: auto; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .slider .knob .icon { color: #0099cc; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .slider .knob:not(.disabled):hover { background: linear-gradient(#595959, #4d4d4d); } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .slider .knob:not(.disabled):hover > .icon { color: #33ccff; } } - /* line 159, ../../../../general/res/sass/_mixins.scss */ + /* line 176, ../../../../general/res/sass/_mixins.scss */ .slider .knob:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -1952,7 +1997,7 @@ label.checkbox.custom { left: 2px; bottom: 5px; top: 5px; } - /* line 181, ../../../../general/res/sass/_mixins.scss */ + /* line 198, ../../../../general/res/sass/_mixins.scss */ .slider .knob:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -1967,12 +2012,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } - /* line 322, ../../../../general/res/sass/controls/_controls.scss */ + /* line 373, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 329, ../../../../general/res/sass/controls/_controls.scss */ +/* line 380, ../../../../general/res/sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -1983,13 +2028,13 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 339, ../../../../general/res/sass/controls/_controls.scss */ + /* line 390, ../../../../general/res/sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 348, ../../../../general/res/sass/controls/_controls.scss */ + /* line 399, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2004,7 +2049,7 @@ label.checkbox.custom { height: 10px; width: 10px; } - /* line 357, ../../../../general/res/sass/controls/_controls.scss */ + /* line 408, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2018,7 +2063,7 @@ label.checkbox.custom { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - /* line 366, ../../../../general/res/sass/controls/_controls.scss */ + /* line 417, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2027,7 +2072,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px); background-image: linear-gradient(#5e5e5e, #525252 20px); } - /* line 371, ../../../../general/res/sass/controls/_controls.scss */ + /* line 422, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } } /***************************************************************************** @@ -2148,7 +2193,7 @@ label.checkbox.custom { .menu-element .menu ul { margin: 0; padding: 0; } - /* line 329, ../../../../general/res/sass/_mixins.scss */ + /* line 346, ../../../../general/res/sass/_mixins.scss */ .menu-element .menu ul li { list-style-type: none; margin: 0; @@ -2335,28 +2380,28 @@ label.checkbox.custom { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 23, ../../../../general/res/sass/controls/_messages.scss */ +/* line 39, ../../../../general/res/sass/controls/_messages.scss */ .status.block { color: #ccc; cursor: default; display: inline-block; margin-right: 5px; } - /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + /* line 44, ../../../../general/res/sass/controls/_messages.scss */ .status.block .status-indicator, .status.block .label, .status.block .count { display: inline-block; vertical-align: top; } - /* line 35, ../../../../general/res/sass/controls/_messages.scss */ + /* line 51, ../../../../general/res/sass/controls/_messages.scss */ .status.block .status-indicator { margin-right: 3px; } - /* line 38, ../../../../general/res/sass/controls/_messages.scss */ + /* line 54, ../../../../general/res/sass/controls/_messages.scss */ .status.block.ok .status-indicator { - color: #6cb773; } - /* line 41, ../../../../general/res/sass/controls/_messages.scss */ + color: #60e68e; } + /* line 57, ../../../../general/res/sass/controls/_messages.scss */ .status.block.caution .status-indicator { color: #ffa864; } - /* line 44, ../../../../general/res/sass/controls/_messages.scss */ + /* line 60, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; -o-transition-property: max-width; @@ -2372,7 +2417,7 @@ label.checkbox.custom { transition-timing-function: ease-in-out; overflow: hidden; max-width: 0px; } - /* line 50, ../../../../general/res/sass/controls/_messages.scss */ + /* line 66, ../../../../general/res/sass/controls/_messages.scss */ .status.block .count { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -2388,14 +2433,155 @@ label.checkbox.custom { transition-timing-function: ease-in-out; font-weight: bold; opacity: 1; } - /* line 56, ../../../../general/res/sass/controls/_messages.scss */ + /* line 72, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { max-width: 150px; width: auto; } - /* line 60, ../../../../general/res/sass/controls/_messages.scss */ + /* line 76, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .count { opacity: 0; } +/* Styles for messages and message banners */ +/* line 84, ../../../../general/res/sass/controls/_messages.scss */ +.message.block { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + padding: 10px; } +/* line 88, ../../../../general/res/sass/controls/_messages.scss */ +.message.error { + background-color: rgba(255, 60, 0, 0.3); + color: #ff8a66; } + +/* line 94, ../../../../general/res/sass/controls/_messages.scss */ +.l-message-banner { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + align-items: center; + position: absolute; + top: 3px; + right: auto; + bottom: 3px; + left: 50%; + height: auto; + width: auto; + line-height: 18px; + max-width: 300px; + padding: 0 5px 0 10px; + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + z-index: 2; } + /* line 110, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner a, .l-message-banner span { + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + margin-left: 5px; } + /* line 113, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner a:first-child, .l-message-banner span:first-child { + margin-left: 0; } + /* line 117, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner a { + display: inline-block; } + /* line 120, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner .l-action { + line-height: 15px; + padding: 0 5px; } + /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner .close { + cursor: pointer; + font-size: 7px; + width: 8px; } + /* line 130, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner .l-progress-bar { + height: 8px; + line-height: 8px; + width: 100px; } + +/* line 139, ../../../../general/res/sass/controls/_messages.scss */ +.s-message-banner, +.s-message-banner .s-action { + -moz-transition-property: background-color; + -o-transition-property: background-color; + -webkit-transition-property: background-color; + transition-property: background-color; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; } + +/* line 144, ../../../../general/res/sass/controls/_messages.scss */ +.s-message-banner { + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + background-color: gray; + color: #ccc; + cursor: pointer; } + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner:hover { + background-color: #999999; } + /* line 31, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .s-action { + background-color: #666666; } + /* line 33, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .s-action:hover { + background-color: gray; } + /* line 148, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner a { + color: inherit; } + /* line 149, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .s-action { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; } + /* line 152, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .close { + opacity: 0.5; } + /* line 154, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .close:hover { + opacity: 1; } + /* line 158, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok { + background-color: #189543; + color: #ccc; } + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok:hover { + background-color: #1ec256; } + /* line 31, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok .s-action { + background-color: #11692f; } + /* line 33, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok .s-action:hover { + background-color: #189543; } + /* line 161, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution { + background-color: #ca5900; + color: #ccc; } + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution:hover { + background-color: #fd6f00; } + /* line 31, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution .s-action { + background-color: #974200; } + /* line 33, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution .s-action:hover { + background-color: #ca5900; } + /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { position: relative; @@ -2647,7 +2833,7 @@ label.checkbox.custom { padding: 0 3px; position: relative; height: 150px; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ .form .form-row .selector-list.error { background: rgba(255, 0, 0, 0.5); } /* line 124, ../../../../general/res/sass/forms/_elems.scss */ @@ -2704,7 +2890,7 @@ input[type="text"] { color: #cccccc; outline: none; padding: 0 3px; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ input[type="text"].error { background: rgba(255, 0, 0, 0.5); } /* line 172, ../../../../general/res/sass/forms/_elems.scss */ @@ -2732,7 +2918,7 @@ textarea { position: absolute; height: 100%; width: 100%; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ textarea.error { background: rgba(255, 0, 0, 0.5); } @@ -2790,14 +2976,14 @@ textarea { padding: 0 5px; overflow: hidden; position: relative; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .select .icon { color: #0099cc; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .select:not(.disabled):hover { background: linear-gradient(#6b6b6b, #5e5e5e); } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .select:not(.disabled):hover > .icon { color: #33ccff; } } /* line 28, ../../../../general/res/sass/forms/_selects.scss */ @@ -2878,7 +3064,7 @@ textarea { max-height: 400px; overflow: auto; padding: 5px; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ .channel-selector .treeview.error { background: rgba(255, 0, 0, 0.5); } /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */ @@ -3026,7 +3212,7 @@ span.req { padding: 0 3px; background: #3b3b3b; border-bottom: 1px solid #4d4d4d; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ .filter input.filter.error, .filter input.t-filter-input.error, .t-filter input.filter.error, @@ -4112,14 +4298,14 @@ span.req { -webkit-transition: background, 0.25s; transition: background, 0.25s; text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover { background: linear-gradient(#a6a6a6, #999999); } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } /* line 85, ../../../../general/res/sass/overlay/_overlay.scss */ @@ -4204,7 +4390,7 @@ ul.tree { -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 329, ../../../../general/res/sass/_mixins.scss */ + /* line 346, ../../../../general/res/sass/_mixins.scss */ ul.tree li { list-style-type: none; margin: 0; @@ -5404,14 +5590,14 @@ table { margin-bottom: 3px; margin-right: 3px; position: relative; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item .icon { color: #0099cc; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover { background: linear-gradient(#666666, #595959); } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover > .icon { color: #33ccff; } } /* line 45, ../../../../general/res/sass/items/_item.scss */ @@ -5546,14 +5732,14 @@ table { transition: background, 0.25s; text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; color: #80dfff; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item.selected .icon { color: #0099cc; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item.selected:not(.disabled):hover { background: linear-gradient(#1ac6ff, #00bfff); } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item.selected:not(.disabled):hover > .icon { color: #33ccff; } } /* line 137, ../../../../general/res/sass/items/_item.scss */ diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index b80dbb21dd..e76c2ca68c 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -29,8 +29,6 @@ $colorPausedBg: #c56f01; $colorPausedFg: #fff; $colorCreateBtn: $colorKey; $colorGridLines: rgba(#fff, 0.05); -$colorFormLines: rgba(#fff, 0.1); -$colorFormSectionHeader: rgba(#000, 0.2); $colorInvokeMenu: #fff; $colorObjHdrTxt: $colorBodyFg; $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%); @@ -42,10 +40,10 @@ $colorMenuIc: pullForward($colorKey, 17%); $colorMenuHovBg: pullForward($colorMenuBg, 10%); $colorMenuHovFg: #fff; $colorMenuHovIc: $colorMenuHovFg; -$shdwMenu: none; -$shdwMenuText: rgba(black, 0.1) 0 1px 2px; $colorCreateMenuLgIcon: $colorMenuFg; $colorCreateMenuText: $colorMenuFg; +$shdwMenu: none; +$shdwMenuText: rgba(black, 0.1) 0 1px 2px; // Form colors $colorCheck: $colorKey; @@ -53,16 +51,22 @@ $colorFormRequired: $colorAlt1; $colorFormValid: #33cc33; $colorFormError: #cc0000; $colorFormInvalid: #ff3300; +$colorFormLines: rgba(#fff, 0.1); +$colorFormSectionHeader: rgba(#000, 0.2); $colorInputBg: rgba(#fff, 0.1); $colorInputFg: pullForward($colorBodyFg, 20%); $colorFormText: rgba(#fff, 0.5); $colorInputIcon: pushBack($colorBodyFg, 15%); // Status colors, mainly used for messaging and item ancillary symbols +$colorStatusFg: #ccc; $colorStatusDefault: #ccc; -$colorStatusOk: #6cb773; +$colorStatusOk: #60e68e; $colorStatusCaution: #ffa864; $colorStatusAlert: $colorAlert; +$colorProgressBarOuter: rgba(#000, 0.1); +$colorProgressBarAmt: $colorKey; +$progressBarStripeW: 20px; // Selects $colorSelectBg: $colorBtnBg; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index be2972e22e..3aca678c0a 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -916,7 +916,7 @@ mct-container { right: 0; width: auto; height: 5px; } - /* line 159, ../../../../general/res/sass/_mixins.scss */ + /* line 176, ../../../../general/res/sass/_mixins.scss */ .split-layout.horizontal > .splitter:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -940,7 +940,7 @@ mct-container { top: 2px; left: 5px; right: 5px; } - /* line 181, ../../../../general/res/sass/_mixins.scss */ + /* line 198, ../../../../general/res/sass/_mixins.scss */ .split-layout.horizontal > .splitter:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -970,7 +970,7 @@ mct-container { bottom: 0; cursor: col-resize; width: 5px; } - /* line 159, ../../../../general/res/sass/_mixins.scss */ + /* line 176, ../../../../general/res/sass/_mixins.scss */ .split-layout.vertical > .splitter:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -994,7 +994,7 @@ mct-container { left: 2px; bottom: 5px; top: 5px; } - /* line 181, ../../../../general/res/sass/_mixins.scss */ + /* line 198, ../../../../general/res/sass/_mixins.scss */ .split-layout.vertical > .splitter:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -1150,49 +1150,6 @@ mct-container { top: 0; left: 0; } -/* Styles for messages and message banners */ -/* line 4, ../../../../general/res/sass/_messages.scss */ -.message.block { - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; - padding: 10px; } -/* line 8, ../../../../general/res/sass/_messages.scss */ -.message.error { - background-color: rgba(255, 60, 0, 0.3); - color: #ff8a66; } - -/* line 14, ../../../../general/res/sass/_messages.scss */ -.l-message-banner { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: block; - position: absolute; - top: 5px; - right: auto; - bottom: 5px; - left: 50%; - height: auto; - width: auto; - max-width: 300px; - padding: 0 10px; - -moz-transform: translateX(-50%); - -ms-transform: translateX(-50%); - -webkit-transform: translateX(-50%); - transform: translateX(-50%); } - /* line 24, ../../../../general/res/sass/_messages.scss */ - .l-message-banner .s-btn, .l-message-banner .s-menu { - height: auto !important; } - -/* line 29, ../../../../general/res/sass/_messages.scss */ -.s-message-banner { - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; - background-color: #999; - color: black; } - /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -1332,14 +1289,14 @@ mct-container { -webkit-transition: background, 0.25s; transition: background, 0.25s; text-shadow: none; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .s-btn.major .icon, .major.s-menu .icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover { background: deepskyblue; } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon { color: white; } } /* line 62, ../../../../general/res/sass/controls/_buttons.scss */ @@ -1362,14 +1319,14 @@ mct-container { -webkit-transition: background, 0.25s; transition: background, 0.25s; text-shadow: none; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major) .icon, .s-menu:not(.major) .icon { color: #eee; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover { background: #0099cc; } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } /* line 71, ../../../../general/res/sass/controls/_buttons.scss */ @@ -1395,14 +1352,14 @@ mct-container { -webkit-transition: background, 0.25s; transition: background, 0.25s; text-shadow: none; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover { background: #ffad33; } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon { color: white; } } /* line 76, ../../../../general/res/sass/controls/_buttons.scss */ @@ -1561,41 +1518,13 @@ mct-container { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/*.control { - // UNUSED? - &.view-control { - .icon { - display: inline-block; - margin: -1px 5px 1px 2px; - vertical-align: middle; - &.triangle-down { - margin: 2px 2px -2px 0px; - } - } - - .label { - display: inline-block; - font-size: 11px; - vertical-align: middle; - } - - .toggle { - @include border-radius(3px); - display: inline-block; - padding: 1px 6px 4px 4px; - &:hover { - background: rgba(white, 0.1); - } - } - } -}*/ -/* line 51, ../../../../general/res/sass/controls/_controls.scss */ +/* line 23, ../../../../general/res/sass/controls/_controls.scss */ .accordion { margin-top: 5px; } - /* line 54, ../../../../general/res/sass/controls/_controls.scss */ + /* line 26, ../../../../general/res/sass/controls/_controls.scss */ .accordion:first-child { margin-top: 0; } - /* line 57, ../../../../general/res/sass/controls/_controls.scss */ + /* line 29, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-head { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -1617,10 +1546,10 @@ mct-container { width: auto; height: 18px; text-transform: uppercase; } - /* line 75, ../../../../general/res/sass/controls/_controls.scss */ + /* line 47, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-head:hover { background: rgba(102, 102, 102, 0.4); } - /* line 78, ../../../../general/res/sass/controls/_controls.scss */ + /* line 50, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-head:after { content: "^"; display: block; @@ -1630,10 +1559,10 @@ mct-container { right: 5px; text-transform: none; top: 0; } - /* line 88, ../../../../general/res/sass/controls/_controls.scss */ + /* line 60, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-head:not(.expanded):after { content: "v"; } - /* line 92, ../../../../general/res/sass/controls/_controls.scss */ + /* line 64, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-contents { position: absolute; top: 23px; @@ -1643,14 +1572,14 @@ mct-container { overflow-y: auto; overflow-x: hidden; } -/* line 103, ../../../../general/res/sass/controls/_controls.scss */ +/* line 75, ../../../../general/res/sass/controls/_controls.scss */ .l-composite-control { vertical-align: middle; } - /* line 106, ../../../../general/res/sass/controls/_controls.scss */ + /* line 78, ../../../../general/res/sass/controls/_controls.scss */ .l-composite-control.l-checkbox .composite-control-label { line-height: 18px; } -/* line 112, ../../../../general/res/sass/controls/_controls.scss */ +/* line 84, ../../../../general/res/sass/controls/_controls.scss */ .l-control-group { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -1659,23 +1588,23 @@ mct-container { display: inline-block; padding: 0 5px; position: relative; } - /* line 120, ../../../../general/res/sass/controls/_controls.scss */ + /* line 92, ../../../../general/res/sass/controls/_controls.scss */ .l-control-group:first-child { border-left: none; padding-left: 0; } -/* line 126, ../../../../general/res/sass/controls/_controls.scss */ +/* line 98, ../../../../general/res/sass/controls/_controls.scss */ .l-local-controls { position: absolute; top: 5px; right: 5px; z-index: 5; } -/* line 136, ../../../../general/res/sass/controls/_controls.scss */ +/* line 108, ../../../../general/res/sass/controls/_controls.scss */ .s-local-controls { font-size: 0.7rem; } -/* line 140, ../../../../general/res/sass/controls/_controls.scss */ +/* line 112, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom { cursor: pointer; display: inline-block; @@ -1684,13 +1613,13 @@ label.checkbox.custom { padding-left: 19px; position: relative; vertical-align: middle; } - /* line 150, ../../../../general/res/sass/controls/_controls.scss */ + /* line 122, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom em { color: #666; display: inline-block; height: 14px; min-width: 14px; } - /* line 155, ../../../../general/res/sass/controls/_controls.scss */ + /* line 127, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom em:before { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -1711,58 +1640,58 @@ label.checkbox.custom { top: 0; position: absolute; text-align: center; } - /* line 174, ../../../../general/res/sass/controls/_controls.scss */ + /* line 146, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom.no-text { overflow: hidden; margin-right: 0; padding-left: 0; height: 14px; width: 14px; } - /* line 180, ../../../../general/res/sass/controls/_controls.scss */ + /* line 152, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom.no-text em { overflow: hidden; } - /* line 184, ../../../../general/res/sass/controls/_controls.scss */ + /* line 156, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom input { display: none; } - /* line 186, ../../../../general/res/sass/controls/_controls.scss */ + /* line 158, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom input:checked ~ em:before { background: #0099cc; color: #ccf2ff; content: "2"; } -/* line 194, ../../../../general/res/sass/controls/_controls.scss */ +/* line 166, ../../../../general/res/sass/controls/_controls.scss */ .input-labeled { margin-left: 5px; } - /* line 196, ../../../../general/res/sass/controls/_controls.scss */ + /* line 168, ../../../../general/res/sass/controls/_controls.scss */ .input-labeled label { display: inline-block; margin-right: 3px; } - /* line 200, ../../../../general/res/sass/controls/_controls.scss */ + /* line 172, ../../../../general/res/sass/controls/_controls.scss */ .input-labeled.inline { display: inline-block; } - /* line 203, ../../../../general/res/sass/controls/_controls.scss */ + /* line 175, ../../../../general/res/sass/controls/_controls.scss */ .input-labeled:first-child { margin-left: 0; } -/* line 208, ../../../../general/res/sass/controls/_controls.scss */ +/* line 180, ../../../../general/res/sass/controls/_controls.scss */ .s-menu label.checkbox.custom { margin-left: 5px; } -/* line 213, ../../../../general/res/sass/controls/_controls.scss */ +/* line 185, ../../../../general/res/sass/controls/_controls.scss */ .item .checkbox.checked label { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-bottom: none; } -/* line 219, ../../../../general/res/sass/controls/_controls.scss */ +/* line 191, ../../../../general/res/sass/controls/_controls.scss */ .context-available { color: #0099cc; } - /* line 222, ../../../../general/res/sass/controls/_controls.scss */ + /* line 194, ../../../../general/res/sass/controls/_controls.scss */ .context-available:hover { color: deepskyblue; } -/* line 227, ../../../../general/res/sass/controls/_controls.scss */ +/* line 199, ../../../../general/res/sass/controls/_controls.scss */ .view-switcher { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -1778,26 +1707,26 @@ label.checkbox.custom { transition-timing-function: ease-in-out; } /******************************************************** OBJECT-HEADER */ -/* line 232, ../../../../general/res/sass/controls/_controls.scss */ +/* line 204, ../../../../general/res/sass/controls/_controls.scss */ .object-header { font-size: 1em; } - /* line 243, ../../../../general/res/sass/controls/_controls.scss */ + /* line 215, ../../../../general/res/sass/controls/_controls.scss */ .object-header > .type-icon { color: #b3b3b3; font-size: 120%; float: left; margin-right: 5px; } - /* line 250, ../../../../general/res/sass/controls/_controls.scss */ + /* line 222, ../../../../general/res/sass/controls/_controls.scss */ .object-header .l-elem-wrapper { justify-content: flex-start; -webkit-justify-content: flex-start; } - /* line 253, ../../../../general/res/sass/controls/_controls.scss */ + /* line 225, ../../../../general/res/sass/controls/_controls.scss */ .object-header .l-elem-wrapper mct-representation { min-width: 0.7em; } - /* line 261, ../../../../general/res/sass/controls/_controls.scss */ + /* line 233, ../../../../general/res/sass/controls/_controls.scss */ .object-header .action { margin-right: 5px; } - /* line 265, ../../../../general/res/sass/controls/_controls.scss */ + /* line 237, ../../../../general/res/sass/controls/_controls.scss */ .object-header .title-label { color: #666; overflow: hidden; @@ -1806,13 +1735,13 @@ label.checkbox.custom { flex: 0 1 auto; -webkit-flex: 0 1 auto; padding-right: 0.35em; } - /* line 275, ../../../../general/res/sass/controls/_controls.scss */ + /* line 247, ../../../../general/res/sass/controls/_controls.scss */ .object-header .context-available { font-size: 0.7em; flex: 0 0 1; -webkit-flex: 0 0 1; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 282, ../../../../general/res/sass/controls/_controls.scss */ + /* line 254, ../../../../general/res/sass/controls/_controls.scss */ .object-header .context-available { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -1827,12 +1756,128 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 0; } - /* line 287, ../../../../general/res/sass/controls/_controls.scss */ + /* line 259, ../../../../general/res/sass/controls/_controls.scss */ .object-header:hover .context-available { opacity: 1; } } +/******************************************************** PROGRESS BAR */ +@-moz-keyframes progress { + 100% { + background-position: 20px center; } } +@-webkit-keyframes progress { + 100% { + background-position: 20px center; } } +@keyframes progress { + 100% { + background-position: 20px center; } } +/* line 281, ../../../../general/res/sass/controls/_controls.scss */ +.l-progress-bar { + display: inline-block; + overflow: hidden; + position: relative; } + /* line 287, ../../../../general/res/sass/controls/_controls.scss */ + .l-progress-bar .progress-amt-holder { + overflow: hidden; + position: absolute; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; + width: auto; + height: auto; } + /* line 290, ../../../../general/res/sass/controls/_controls.scss */ + .l-progress-bar .progress-amt, + .l-progress-bar .progress-amt:before, + .l-progress-bar .progress-amt:after { + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; + display: block; + content: ''; } + /* line 298, ../../../../general/res/sass/controls/_controls.scss */ + .l-progress-bar .progress-amt { + right: auto; } + /* line 303, ../../../../general/res/sass/controls/_controls.scss */ + .l-progress-bar.indeterminate .progress-amt { + width: 100% !important; } + +/* line 309, ../../../../general/res/sass/controls/_controls.scss */ +.s-progress-bar { + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + -moz-box-shadow: inset rgba(0, 0, 0, 0.3) 0 1px 4px; + -webkit-box-shadow: inset rgba(0, 0, 0, 0.3) 0 1px 4px; + box-shadow: inset rgba(0, 0, 0, 0.3) 0 1px 4px; + background: rgba(0, 0, 0, 0.1); } + /* line 314, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar .progress-amt { + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; + -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; + box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -moz-transition-property: width; + -o-transition-property: width; + -webkit-transition-property: width; + transition-property: width; + -moz-transition-duration: 500ms; + -o-transition-duration: 500ms; + -webkit-transition-duration: 500ms; + transition-duration: 500ms; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; } + /* line 319, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar .progress-amt:before { + background-color: #0a0; } + /* line 322, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar .progress-amt:after { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, rgba(0, 0, 0, 0)), color-stop(30%, rgba(255, 255, 255, 0.25)), color-stop(100%, rgba(0, 0, 0, 0))); + background-image: -moz-linear-gradient(rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, 0.25) 30%, rgba(0, 0, 0, 0) 100%); + background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, 0.25) 30%, rgba(0, 0, 0, 0) 100%); + background-image: linear-gradient(rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, 0.25) 30%, rgba(0, 0, 0, 0) 100%); } + /* line 331, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar:not(.indeterminate) .progress-amt:before { + -moz-animation: progress 0.3s linear infinite; + -webkit-animation: progress 0.3s linear infinite; + animation: progress 0.3s linear infinite; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background-size: 100%; + background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); + background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); + background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); + background-position: 0 center; + background-repeat: repeat-x; + background-size: 20px 40%; } + /* line 338, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar.indeterminate .progress-amt:before { + -moz-animation: progress 0.6s linear infinite; + -webkit-animation: progress 0.6s linear infinite; + animation: progress 0.6s linear infinite; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC40Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background-size: 100%; + background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); + background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); + background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); + background-position: 0 center; + background-repeat: repeat-x; + background-size: 20px 40%; } + /******************************************************** SLIDERS */ -/* line 300, ../../../../general/res/sass/controls/_controls.scss */ +/* line 351, ../../../../general/res/sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -1851,7 +1896,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 311, ../../../../general/res/sass/controls/_controls.scss */ +/* line 362, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob { background-color: #969696; -moz-border-radius: 4px; @@ -1879,10 +1924,10 @@ label.checkbox.custom { auto: 0; bottom: auto; left: auto; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .slider .knob .icon { color: #eee; } - /* line 159, ../../../../general/res/sass/_mixins.scss */ + /* line 176, ../../../../general/res/sass/_mixins.scss */ .slider .knob:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -1906,7 +1951,7 @@ label.checkbox.custom { left: 2px; bottom: 5px; top: 5px; } - /* line 181, ../../../../general/res/sass/_mixins.scss */ + /* line 198, ../../../../general/res/sass/_mixins.scss */ .slider .knob:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -1921,12 +1966,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #fcfcfc; } - /* line 322, ../../../../general/res/sass/controls/_controls.scss */ + /* line 373, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 329, ../../../../general/res/sass/controls/_controls.scss */ +/* line 380, ../../../../general/res/sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -1937,13 +1982,13 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 339, ../../../../general/res/sass/controls/_controls.scss */ + /* line 390, ../../../../general/res/sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 348, ../../../../general/res/sass/controls/_controls.scss */ + /* line 399, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -1958,7 +2003,7 @@ label.checkbox.custom { height: 10px; width: 10px; } - /* line 357, ../../../../general/res/sass/controls/_controls.scss */ + /* line 408, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -1972,7 +2017,7 @@ label.checkbox.custom { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - /* line 366, ../../../../general/res/sass/controls/_controls.scss */ + /* line 417, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -1981,7 +2026,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px); background-image: linear-gradient(#00ace6, #0099cc 20px); } - /* line 371, ../../../../general/res/sass/controls/_controls.scss */ + /* line 422, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.1); } } /***************************************************************************** @@ -2096,7 +2141,7 @@ label.checkbox.custom { .menu-element .menu ul { margin: 0; padding: 0; } - /* line 329, ../../../../general/res/sass/_mixins.scss */ + /* line 346, ../../../../general/res/sass/_mixins.scss */ .menu-element .menu ul li { list-style-type: none; margin: 0; @@ -2283,28 +2328,28 @@ label.checkbox.custom { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 23, ../../../../general/res/sass/controls/_messages.scss */ +/* line 39, ../../../../general/res/sass/controls/_messages.scss */ .status.block { color: #ccc; cursor: default; display: inline-block; margin-right: 5px; } - /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + /* line 44, ../../../../general/res/sass/controls/_messages.scss */ .status.block .status-indicator, .status.block .label, .status.block .count { display: inline-block; vertical-align: top; } - /* line 35, ../../../../general/res/sass/controls/_messages.scss */ + /* line 51, ../../../../general/res/sass/controls/_messages.scss */ .status.block .status-indicator { margin-right: 3px; } - /* line 38, ../../../../general/res/sass/controls/_messages.scss */ + /* line 54, ../../../../general/res/sass/controls/_messages.scss */ .status.block.ok .status-indicator { - color: #090; } - /* line 41, ../../../../general/res/sass/controls/_messages.scss */ + color: #60e68e; } + /* line 57, ../../../../general/res/sass/controls/_messages.scss */ .status.block.caution .status-indicator { - color: #fa0; } - /* line 44, ../../../../general/res/sass/controls/_messages.scss */ + color: #ffa864; } + /* line 60, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; -o-transition-property: max-width; @@ -2320,7 +2365,7 @@ label.checkbox.custom { transition-timing-function: ease-in-out; overflow: hidden; max-width: 0px; } - /* line 50, ../../../../general/res/sass/controls/_messages.scss */ + /* line 66, ../../../../general/res/sass/controls/_messages.scss */ .status.block .count { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -2336,14 +2381,155 @@ label.checkbox.custom { transition-timing-function: ease-in-out; font-weight: bold; opacity: 1; } - /* line 56, ../../../../general/res/sass/controls/_messages.scss */ + /* line 72, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { max-width: 150px; width: auto; } - /* line 60, ../../../../general/res/sass/controls/_messages.scss */ + /* line 76, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .count { opacity: 0; } +/* Styles for messages and message banners */ +/* line 84, ../../../../general/res/sass/controls/_messages.scss */ +.message.block { + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + padding: 10px; } +/* line 88, ../../../../general/res/sass/controls/_messages.scss */ +.message.error { + background-color: rgba(255, 60, 0, 0.3); + color: #ff8a66; } + +/* line 94, ../../../../general/res/sass/controls/_messages.scss */ +.l-message-banner { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-align-items: center; + align-items: center; + position: absolute; + top: 3px; + right: auto; + bottom: 3px; + left: 50%; + height: auto; + width: auto; + line-height: 18px; + max-width: 300px; + padding: 0 5px 0 10px; + -moz-transform: translateX(-50%); + -ms-transform: translateX(-50%); + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + z-index: 2; } + /* line 110, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner a, .l-message-banner span { + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + margin-left: 5px; } + /* line 113, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner a:first-child, .l-message-banner span:first-child { + margin-left: 0; } + /* line 117, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner a { + display: inline-block; } + /* line 120, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner .l-action { + line-height: 15px; + padding: 0 5px; } + /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner .close { + cursor: pointer; + font-size: 7px; + width: 8px; } + /* line 130, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner .l-progress-bar { + height: 8px; + line-height: 8px; + width: 100px; } + +/* line 139, ../../../../general/res/sass/controls/_messages.scss */ +.s-message-banner, +.s-message-banner .s-action { + -moz-transition-property: background-color; + -o-transition-property: background-color; + -webkit-transition-property: background-color; + transition-property: background-color; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; } + +/* line 144, ../../../../general/res/sass/controls/_messages.scss */ +.s-message-banner { + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + background-color: gray; + color: #fff; + cursor: pointer; } + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner:hover { + background-color: #999999; } + /* line 31, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .s-action { + background-color: #666666; } + /* line 33, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .s-action:hover { + background-color: gray; } + /* line 148, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner a { + color: inherit; } + /* line 149, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .s-action { + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; } + /* line 152, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .close { + opacity: 0.5; } + /* line 154, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner .close:hover { + opacity: 1; } + /* line 158, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok { + background-color: #189543; + color: #fff; } + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok:hover { + background-color: #1ec256; } + /* line 31, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok .s-action { + background-color: #11692f; } + /* line 33, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok .s-action:hover { + background-color: #189543; } + /* line 161, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution { + background-color: #ca5900; + color: #fff; } + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution:hover { + background-color: #fd6f00; } + /* line 31, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution .s-action { + background-color: #974200; } + /* line 33, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution .s-action:hover { + background-color: #ca5900; } + /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { position: relative; @@ -2595,7 +2781,7 @@ label.checkbox.custom { padding: 0 3px; position: relative; height: 150px; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ .form .form-row .selector-list.error { background: rgba(255, 0, 0, 0.5); } /* line 124, ../../../../general/res/sass/forms/_elems.scss */ @@ -2652,7 +2838,7 @@ input[type="text"] { color: #666; outline: none; padding: 0 3px; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ input[type="text"].error { background: rgba(255, 0, 0, 0.5); } /* line 172, ../../../../general/res/sass/forms/_elems.scss */ @@ -2680,7 +2866,7 @@ textarea { position: absolute; height: 100%; width: 100%; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ textarea.error { background: rgba(255, 0, 0, 0.5); } @@ -2729,7 +2915,7 @@ textarea { padding: 0 5px; overflow: hidden; position: relative; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .select .icon { color: #eee; } /* line 28, ../../../../general/res/sass/forms/_selects.scss */ @@ -2810,7 +2996,7 @@ textarea { max-height: 400px; overflow: auto; padding: 5px; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ .channel-selector .treeview.error { background: rgba(255, 0, 0, 0.5); } /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */ @@ -2958,7 +3144,7 @@ span.req { padding: 0 3px; background: white; border-bottom: 1px solid white; } - /* line 296, ../../../../general/res/sass/_mixins.scss */ + /* line 313, ../../../../general/res/sass/_mixins.scss */ .filter input.filter.error, .filter input.t-filter-input.error, .t-filter input.filter.error, @@ -4026,14 +4212,14 @@ span.req { -webkit-transition: background, 0.25s; transition: background, 0.25s; text-shadow: none; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover { background: #7d7d7d; } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } /* line 85, ../../../../general/res/sass/overlay/_overlay.scss */ @@ -4118,7 +4304,7 @@ ul.tree { -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 329, ../../../../general/res/sass/_mixins.scss */ + /* line 346, ../../../../general/res/sass/_mixins.scss */ ul.tree li { list-style-type: none; margin: 0; @@ -5308,14 +5494,14 @@ table { margin-bottom: 3px; margin-right: 3px; position: relative; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item .icon { color: #0099cc; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 277, ../../../../general/res/sass/_mixins.scss */ + /* line 294, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover { background: #d0d0d0; } - /* line 279, ../../../../general/res/sass/_mixins.scss */ + /* line 296, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover > .icon { color: #33ccff; } } /* line 45, ../../../../general/res/sass/items/_item.scss */ @@ -5441,7 +5627,7 @@ table { transition: background, 0.25s; text-shadow: none; color: #80dfff; } - /* line 272, ../../../../general/res/sass/_mixins.scss */ + /* line 289, ../../../../general/res/sass/_mixins.scss */ .items-holder .item.grid-item.selected .icon { color: #eee; } /* line 137, ../../../../general/res/sass/items/_item.scss */ diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 94113c25a8..02897ef236 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -57,14 +57,20 @@ $colorInputBg: $colorGenBg; $colorInputFg: $colorBodyFg; $colorFormText: pushBack($colorBodyFg, 10%); $colorInputIcon: pushBack($colorBodyFg, 25%); -$colorSelectBg: #ddd; -$colorSelectFg: $colorBodyFg; // Status colors, mainly used for messaging and item ancillary symbols +$colorStatusFg: #fff; $colorStatusDefault: #ccc; -$colorStatusOk: #090; -$colorStatusCaution: #fa0; +$colorStatusOk: #60e68e; +$colorStatusCaution: #ffa864; $colorStatusAlert: $colorAlert; +$colorProgressBarOuter: rgba(#000, 0.1); +$colorProgressBarAmt: #0a0; +$progressBarStripeW: 20px; + +// Selects +$colorSelectBg: #ddd; +$colorSelectFg: $colorBodyFg; // Limits and staleness colors// $colorTelemFresh: pullForward($colorBodyFg, 20%); From 2aeebff652b2098193d348ae8162260f9a67e955 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 6 Oct 2015 14:41:58 -0700 Subject: [PATCH 02/10] Merging in Andrew's work so far on progress and blocking dialogs open #163 open #170 Squashed commit of the following: commit ec7edb58ca75b409d330b5434999c67a0ec14e33 Author: Henry Date: Mon Oct 5 10:39:06 2015 -0700 Rename dialogSeverity to messageServity for reuse with notifications commit d20abe01dda50f7508444ed65b207cb6210e5fff Author: Henry Date: Fri Oct 2 16:40:29 2015 -0700 Fixed docs commit 227da1849826af54c66932dba55f692e085194b5 Author: Henry Date: Fri Oct 2 16:27:41 2015 -0700 Added semicolon commit 22d424f96e74e44230f100cde2108aff4ef10944 Author: Henry Date: Fri Oct 2 16:26:29 2015 -0700 Fixed code errors commit 2c77c3647c326f91fdbe2d63a8e3f1c3040d7397 Author: Henry Date: Fri Oct 2 16:24:01 2015 -0700 Initial commit of blocking dialog service with test code to demonstrate usage --- bundles.json | 4 +- platform/commonUI/dialog/bundle.json | 14 +++ .../res/templates/blocking-message.html | 30 +++++ platform/commonUI/dialog/src/DialogService.js | 112 ++++++++++++++++-- testing/dialogTest/bundle.json | 28 +++++ testing/dialogTest/res/dialog-launch.html | 1 + .../dialogTest/src/DialogLaunchController.js | 94 +++++++++++++++ .../dialogTest/src/DialogLaunchIndicator.js | 50 ++++++++ 8 files changed, 321 insertions(+), 12 deletions(-) create mode 100644 platform/commonUI/dialog/res/templates/blocking-message.html create mode 100644 testing/dialogTest/bundle.json create mode 100644 testing/dialogTest/res/dialog-launch.html create mode 100644 testing/dialogTest/src/DialogLaunchController.js create mode 100644 testing/dialogTest/src/DialogLaunchIndicator.js diff --git a/bundles.json b/bundles.json index a0f7edd7a8..498718fa58 100644 --- a/bundles.json +++ b/bundles.json @@ -29,5 +29,7 @@ "example/imagery", "example/eventGenerator", - "example/generator" + "example/generator", + + "testing/dialogTest" ] diff --git a/platform/commonUI/dialog/bundle.json b/platform/commonUI/dialog/bundle.json index 9a2d541419..eab8fb000a 100644 --- a/platform/commonUI/dialog/bundle.json +++ b/platform/commonUI/dialog/bundle.json @@ -1,5 +1,15 @@ { "extensions": { + "constants": [ + { + "key": "messageSeverity", + "value": { + "ERROR": "error", + "INFO": "info", + "SUCCESS": "success" + } + } + ], "services": [ { "key": "dialogService", @@ -24,6 +34,10 @@ { "key": "form-dialog", "templateUrl": "templates/dialog.html" + }, + { + "key": "blocking-message", + "templateUrl": "templates/blocking-message.html" } ], "containers": [ diff --git a/platform/commonUI/dialog/res/templates/blocking-message.html b/platform/commonUI/dialog/res/templates/blocking-message.html new file mode 100644 index 0000000000..81a183eb13 --- /dev/null +++ b/platform/commonUI/dialog/res/templates/blocking-message.html @@ -0,0 +1,30 @@ + + +
+
{{ngModel.dialog.title}}
+
+
+
+
{{ngModel.dialog.hint}}
+
+
{{ngModel.dialog.progress}} %
+
{{ngModel.dialog.progressText}}
+
+
+
+ +
+ \ No newline at end of file diff --git a/platform/commonUI/dialog/src/DialogService.js b/platform/commonUI/dialog/src/DialogService.js index 25e8943c06..94c8e24844 100644 --- a/platform/commonUI/dialog/src/DialogService.js +++ b/platform/commonUI/dialog/src/DialogService.js @@ -84,17 +84,7 @@ define( model.confirm = confirm; model.cancel = cancel; - if (this.dialogVisible) { - // Only one dialog should be shown at a time. - // The application design should be such that - // we never even try to do this. - this.$log.warn([ - "Dialog already showing; ", - "unable to show ", - model.name - ].join("")); - deferred.reject(); - } else { + if (this.canShowDialog(model)) { // Add the overlay using the OverlayService, which // will handle actual insertion into the DOM this.overlay = this.overlayService.createOverlay( @@ -105,6 +95,8 @@ define( // Track that a dialog is already visible, to // avoid spawning multiple dialogs at once. this.dialogVisible = true; + } else { + deferred.reject(); } return deferred.promise; @@ -157,6 +149,104 @@ define( ); }; + /** + * Tests if a dialog can be displayed. A modal dialog may only be + * displayed if one is not already visible. + * Will log a warning message if it can't display a dialog. + * @returns {boolean} true if dialog is currently visible, false + * otherwise + */ + DialogService.prototype.canShowDialog = function(dialogModel){ + if (this.dialogVisible){ + // Only one dialog should be shown at a time. + // The application design should be such that + // we never even try to do this. + this.$log.warn([ + "Dialog already showing; ", + "unable to show ", + dialogModel.title + ].join("")); + + return false; + } else { + return true; + } + }; + + /** + * dialogModel: { + * severity: string "error" | "info", + * title: string, + * hint: string, + * progress: int, + * progressText: string, + * unknownProgress: boolean, + * actions: [{ + * label: String, + * action: function + * }] + */ + + /** + * A user action that can be performed from a blocking dialog. These + * actions will be rendered as buttons within a blocking dialog. + * + * @typedef DialogAction + * @property {string} label a label to be displayed as the button + * text for this action + * @property {function} action a function to be called when the + * button is clicked + */ + + /** + * A description of the model options that may be passed to the + * showBlockingMessage method + * + * @typedef DialogModel + * @property {string} severity the severity level of this message. + * These are defined in a bundle constant with key 'dialogSeverity' + * @property {string} title the title to use for the dialog + * @property {string} hint the 'hint' message to show below the title + * @property {number} progress a percentage value (1-100) + * indicating the completion of the blocking task + * @property {string} progressText the message to show below a + * progress bar to indicate progress. For example, this might be + * used to indicate time remaining, or items still to process. + * @property {boolean} unknownProgress some tasks may be + * impossible to provide an estimate for. Providing a true value for + * this attribute will indicate to the user that the progress and + * duration cannot be estimated. + * @property {DialogAction[]} actions a list of actions that will + * be added to the dialog as buttons. These buttons are + */ + + /** + * Displays a blocking (modal) dialog. This dialog can be used for + * displaying messages that require the user's + * immediate attention. The message may include an indication of + * progress, as well as a series of actions that + * the user can take if necessary + * @param {DialogModel} dialogModel defines options for the dialog + * @returns {boolean} + */ + DialogService.prototype.showBlockingMessage = function(dialogModel) { + if (this.canShowDialog(dialogModel)) { + // Add the overlay using the OverlayService, which + // will handle actual insertion into the DOM + this.overlay = this.overlayService.createOverlay( + "blocking-message", + {dialog: dialogModel} + ); + this.dialogVisible = true; + return true; + } else { + //Could not show a dialog, so return indication of this to + //client code. + return false; + } + + }; + return DialogService; } diff --git a/testing/dialogTest/bundle.json b/testing/dialogTest/bundle.json new file mode 100644 index 0000000000..36ec16e048 --- /dev/null +++ b/testing/dialogTest/bundle.json @@ -0,0 +1,28 @@ +{ + "extensions": { + "templates": [ + { + "key": "dialogLaunchTemplate", + "templateUrl": "dialog-launch.html" + } + ], + "controllers": [ + { + "key": "DialogLaunchController", + "implementation": "DialogLaunchController.js", + "depends": [ + "$scope", + "dialogService", + "$timeout", + "$log", + "messageSeverity" + ] + } + ], + "indicators": [ + { + "implementation": "DialogLaunchIndicator.js" + } + ] + } +} diff --git a/testing/dialogTest/res/dialog-launch.html b/testing/dialogTest/res/dialog-launch.html new file mode 100644 index 0000000000..b9d0d525ea --- /dev/null +++ b/testing/dialogTest/res/dialog-launch.html @@ -0,0 +1 @@ +   \ No newline at end of file diff --git a/testing/dialogTest/src/DialogLaunchController.js b/testing/dialogTest/src/DialogLaunchController.js new file mode 100644 index 0000000000..bc088274e9 --- /dev/null +++ b/testing/dialogTest/src/DialogLaunchController.js @@ -0,0 +1,94 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define*/ + +define( + [], + function () { + "use strict"; + + function DialogLaunchController($scope, dialogService, $timeout, $log, messageSeverity) { + $scope.launchProgress = function () { + var model = { + title: "Progress dialog example", + progress: 0, + hint: "Calculating...", + unknownDuration: false, + severity: messageSeverity.INFO, + actions: [ + { + label: "Cancel Operation", + action: function () { + $log.debug("Operation cancelled"); + dialogService.dismiss(); + } + }, + { + label: "Do something else...", + action: function () { + $log.debug("Something else pressed"); + } + } + ] + }; + + function incrementProgress() { + model.progress = Math.min(100, Math.floor(model.progress + Math.random() * 30)); + model.progressText = ["Estimated time remaining: about ", 60 - Math.floor((model.progress / 100) * 60), " seconds"].join(" "); + if (model.progress < 100) { + $timeout(incrementProgress, 1000); + } + } + + if (dialogService.showBlockingMessage(model)) { + //Do processing here + model.hint = "Processing 100 objects..."; + $timeout(incrementProgress, 1000); + } else { + $log.error("Could not display modal dialog"); + } + }; + + $scope.launchError = function () { + var model = { + title: "Error Message Title", + hint: "Something happened. It was not so good.", + severity: messageSeverity.ERROR, + actions: [ + { + label: "OK", + action: function () { + $log.debug("OK Pressed"); + dialogService.dismiss(); + } + } + ] + }; + + if (!dialogService.showBlockingMessage(model)) { + $log.error("Could not display modal dialog"); + } + }; + } + return DialogLaunchController; + } +); diff --git a/testing/dialogTest/src/DialogLaunchIndicator.js b/testing/dialogTest/src/DialogLaunchIndicator.js new file mode 100644 index 0000000000..47c516fc70 --- /dev/null +++ b/testing/dialogTest/src/DialogLaunchIndicator.js @@ -0,0 +1,50 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define,window*/ + +define( + [], + function () { + "use strict"; + + function DialogLaunchIndicator() { + + } + + DialogLaunchIndicator.template = 'dialogLaunchTemplate'; + + DialogLaunchIndicator.prototype.getGlyph = function () { + return "i"; + }; + DialogLaunchIndicator.prototype.getGlyphClass = function () { + return 'caution'; + }; + DialogLaunchIndicator.prototype.getText = function () { + return "Launch test dialog"; + }; + DialogLaunchIndicator.prototype.getDescription = function () { + return "Launch test dialog"; + }; + + return DialogLaunchIndicator; + } +); From 30fd8c451e20826629600f0bf8b0b2e6a446e28e Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 6 Oct 2015 16:10:27 -0700 Subject: [PATCH 03/10] [Frontend] Progress bar as include; progress dialog open #163 open #170 Progress bar now mct-include; Progress dialog sanded; Dialog launcher modded; --- .../res/templates/blocking-message.html | 38 +++++++++---------- platform/commonUI/general/bundle.json | 4 ++ .../general/res/sass/controls/_messages.scss | 4 +- .../general/res/sass/overlay/_overlay.scss | 10 +++++ .../general/res/templates/indicator.html | 2 +- .../general/res/templates/message-banner.html | 8 ++-- .../espresso/res/css/theme-espresso.css | 27 +++++++------ .../themes/espresso/res/sass/_constants.scss | 1 + .../themes/snow/res/css/theme-snow.css | 27 +++++++------ .../themes/snow/res/sass/_constants.scss | 1 + testing/dialogTest/res/dialog-launch.html | 6 ++- .../dialogTest/src/DialogLaunchController.js | 7 +++- 12 files changed, 81 insertions(+), 54 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/blocking-message.html b/platform/commonUI/dialog/res/templates/blocking-message.html index 81a183eb13..bf2ff3d674 100644 --- a/platform/commonUI/dialog/res/templates/blocking-message.html +++ b/platform/commonUI/dialog/res/templates/blocking-message.html @@ -1,30 +1,26 @@ - - -
+ +
{{ngModel.dialog.title}}
+
Do not navigate away from this page or close this browser tab while this operation is in progress.
-
-
+
+
{{ngModel.dialog.hint}}
-
-
{{ngModel.dialog.progress}} %
+ + + +
{{ngModel.dialog.progressText}}
+
- + + {{dialogAction.label}} +
\ No newline at end of file diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index d71bb3a393..b1e95a36df 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -43,6 +43,10 @@ "key": "message-banner", "templateUrl": "templates/message-banner.html" }, + { + "key": "progress-bar", + "templateUrl": "templates/progress-bar.html" + }, { "key": "time-controller", "templateUrl": "templates/controls/time-controller.html" diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index b8c98ec2d7..4037f31323 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -104,14 +104,14 @@ height: auto; width: auto; line-height: $lh; max-width: 300px; - padding: 0 $interiorMargin 0 $interiorMarginLg; + padding: 0 $interiorMargin 0 $interiorMargin; @include transform(translateX(-50%)); a, span { @include flex(0 1 auto); margin-left: $interiorMargin; &:first-child { - margin-left: 0; + //margin-left: 0; } } a { diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 2dce492563..a391609821 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -45,6 +45,7 @@ .title { @include ellipsize(); font-size: 1.2em; + line-height: 120%; margin-bottom: $interiorMargin; } @@ -57,6 +58,15 @@ bottom: $ovrFooterH + $interiorMargin * 2; left: 0; right: 0; } + + .l-progress-bar { + $h: $progressBarHOverlay; + display: block; + height: $h; + line-height: $h; + margin: .5em 0; + width: 100%; + } .bottom-bar { top: auto; right: 0; bottom: 0; left: 0; diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html index ce2adb421c..20bf22668b 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -31,7 +31,7 @@ {{ngModel.getText()}} - + 5 Objects not saved - - - + Try Again x diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index cb5a9be609..c1d844a3bc 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -2476,7 +2476,7 @@ label.checkbox.custom { width: auto; line-height: 18px; max-width: 300px; - padding: 0 5px 0 10px; + padding: 0 5px 0 5px; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); @@ -2487,9 +2487,6 @@ label.checkbox.custom { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 113, ../../../../general/res/sass/controls/_messages.scss */ - .l-message-banner a:first-child, .l-message-banner span:first-child { - margin-left: 0; } /* line 117, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } @@ -4243,17 +4240,25 @@ span.req { text-overflow: ellipsis; white-space: nowrap; font-size: 1.2em; + line-height: 120%; margin-bottom: 5px; } -/* line 51, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 52, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 55, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; right: 0; } -/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ +.overlay .l-progress-bar { + display: block; + height: 15px; + line-height: 15px; + margin: .5em 0; + width: 100%; } +/* line 71, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4262,14 +4267,14 @@ span.req { overflow: visible; height: 30px; text-align: right; } - /* line 67, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; padding: 0 15px; } - /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 79, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { background-color: gray; -moz-border-radius: 3px; @@ -4308,14 +4313,14 @@ span.req { /* line 296, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } -/* line 85, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 95, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .contents.l-dialog { top: 5px; right: 5px; bottom: 5px; left: 5px; overflow: auto; } - /* line 93, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 103, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .contents.l-dialog .field.l-med input[type='text'] { width: 100%; } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index e76c2ca68c..c5a8e30456 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -66,6 +66,7 @@ $colorStatusCaution: #ffa864; $colorStatusAlert: $colorAlert; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: $colorKey; +$progressBarHOverlay: 15px; $progressBarStripeW: 20px; // Selects diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 3aca678c0a..59c1b2887e 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -2424,7 +2424,7 @@ label.checkbox.custom { width: auto; line-height: 18px; max-width: 300px; - padding: 0 5px 0 10px; + padding: 0 5px 0 5px; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); @@ -2435,9 +2435,6 @@ label.checkbox.custom { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 113, ../../../../general/res/sass/controls/_messages.scss */ - .l-message-banner a:first-child, .l-message-banner span:first-child { - margin-left: 0; } /* line 117, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } @@ -4166,17 +4163,25 @@ span.req { text-overflow: ellipsis; white-space: nowrap; font-size: 1.2em; + line-height: 120%; margin-bottom: 5px; } -/* line 51, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 52, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 55, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; right: 0; } -/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ +.overlay .l-progress-bar { + display: block; + height: 15px; + line-height: 15px; + margin: .5em 0; + width: 100%; } +/* line 71, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4185,14 +4190,14 @@ span.req { overflow: visible; height: 30px; text-align: right; } - /* line 67, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; padding: 0 15px; } - /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 79, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { background-color: #969696; -moz-border-radius: 4px; @@ -4222,14 +4227,14 @@ span.req { /* line 296, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } -/* line 85, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 95, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .contents.l-dialog { top: 5px; right: 5px; bottom: 5px; left: 5px; overflow: auto; } - /* line 93, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 103, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .contents.l-dialog .field.l-med input[type='text'] { width: 100%; } diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 02897ef236..cd13385d6b 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -66,6 +66,7 @@ $colorStatusCaution: #ffa864; $colorStatusAlert: $colorAlert; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: #0a0; +$progressBarHOverlay: 15px; $progressBarStripeW: 20px; // Selects diff --git a/testing/dialogTest/res/dialog-launch.html b/testing/dialogTest/res/dialog-launch.html index b9d0d525ea..59d3437c10 100644 --- a/testing/dialogTest/res/dialog-launch.html +++ b/testing/dialogTest/res/dialog-launch.html @@ -1 +1,5 @@ -   \ No newline at end of file + +    +    + + \ No newline at end of file diff --git a/testing/dialogTest/src/DialogLaunchController.js b/testing/dialogTest/src/DialogLaunchController.js index bc088274e9..4d7bb4c258 100644 --- a/testing/dialogTest/src/DialogLaunchController.js +++ b/testing/dialogTest/src/DialogLaunchController.js @@ -27,11 +27,12 @@ define( "use strict"; function DialogLaunchController($scope, dialogService, $timeout, $log, messageSeverity) { - $scope.launchProgress = function () { + $scope.launchProgress = function (knownProgress) { var model = { title: "Progress dialog example", progress: 0, hint: "Calculating...", + unknownProgress: !knownProgress, unknownDuration: false, severity: messageSeverity.INFO, actions: [ @@ -62,7 +63,9 @@ define( if (dialogService.showBlockingMessage(model)) { //Do processing here model.hint = "Processing 100 objects..."; - $timeout(incrementProgress, 1000); + if (knownProgress) { + $timeout(incrementProgress, 1000); + } } else { $log.error("Could not display modal dialog"); } From 6840e596a5ddaf3cd0364fbf03151e8fe89dd969 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 7 Oct 2015 10:25:47 -0700 Subject: [PATCH 04/10] [Frontend] Adding progress-bar.html template open #159 open #170 --- platform/commonUI/general/res/templates/progress-bar.html | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 platform/commonUI/general/res/templates/progress-bar.html diff --git a/platform/commonUI/general/res/templates/progress-bar.html b/platform/commonUI/general/res/templates/progress-bar.html new file mode 100644 index 0000000000..8f39196341 --- /dev/null +++ b/platform/commonUI/general/res/templates/progress-bar.html @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file From ad4292f1e969f50ddbf390889de13b91c295cd6f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 7 Oct 2015 11:45:08 -0700 Subject: [PATCH 05/10] [Frontend] Mods to DialogService model and dialogs open #159 open #170 Properly re-cast model.hint and added model.actionText; Moved progressText into progress-bar.html; Tweaks to dialog styles; Tweaked styles for progress bar; Normalized various dialog templates markup; --- .../res/templates/blocking-message.html | 20 ++- .../commonUI/dialog/res/templates/dialog.html | 16 +-- .../dialog/res/templates/overlay-options.html | 12 +- platform/commonUI/dialog/src/DialogService.js | 3 + .../general/res/sass/controls/_controls.scss | 17 +-- .../general/res/sass/controls/_messages.scss | 6 +- .../general/res/sass/overlay/_overlay.scss | 4 + .../general/res/templates/message-banner.html | 7 +- .../general/res/templates/progress-bar.html | 10 +- .../espresso/res/css/theme-espresso.css | 114 ++++++++++-------- .../themes/snow/res/css/theme-snow.css | 114 ++++++++++-------- .../dialogTest/src/DialogLaunchController.js | 22 ++-- 12 files changed, 186 insertions(+), 159 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/blocking-message.html b/platform/commonUI/dialog/res/templates/blocking-message.html index bf2ff3d674..8db939cfdc 100644 --- a/platform/commonUI/dialog/res/templates/blocking-message.html +++ b/platform/commonUI/dialog/res/templates/blocking-message.html @@ -1,19 +1,17 @@
{{ngModel.dialog.title}}
-
Do not navigate away from this page or close this browser tab while this operation is in progress.
+
{{ngModel.dialog.hint}}
-
-
-
{{ngModel.dialog.hint}}
- - - - -
{{ngModel.dialog.progressText}}
+
+
+ {{ngModel.dialog.actionText}}
+ + +
diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html index e3379b034e..4c7c02e3f2 100644 --- a/platform/commonUI/dialog/res/templates/dialog.html +++ b/platform/commonUI/dialog/res/templates/dialog.html @@ -21,17 +21,13 @@ -->
{{ngModel.title}}
-
- All fields marked * are required. -
+
All fields marked * are required.
-
-
- - -
+
+ +
{{ngModel.dialog.title}}
{{ngModel.dialog.hint}}
-
-
- - -
+
+ +
- + + ng-hide-x="ngModel.dialog.progress === undefined"> +
\ No newline at end of file diff --git a/platform/commonUI/general/res/templates/progress-bar.html b/platform/commonUI/general/res/templates/progress-bar.html index 8f39196341..337494164c 100644 --- a/platform/commonUI/general/res/templates/progress-bar.html +++ b/platform/commonUI/general/res/templates/progress-bar.html @@ -1,7 +1,9 @@ - + - \ No newline at end of file + +
+ {{ngModel.dialog.progressText}} +
\ No newline at end of file diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index c1d844a3bc..5caef16706 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -1881,33 +1881,35 @@ label.checkbox.custom { background-image: linear-gradient(rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, 0.25) 30%, rgba(0, 0, 0, 0) 100%); } /* line 331, ../../../../general/res/sass/controls/_controls.scss */ .s-progress-bar:not(.indeterminate) .progress-amt:before { - -moz-animation: progress 0.3s linear infinite; - -webkit-animation: progress 0.3s linear infinite; - animation: progress 0.3s linear infinite; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + -moz-animation: progress 0.4s linear infinite; + -webkit-animation: progress 0.4s linear infinite; + animation: progress 0.4s linear infinite; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; - background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); - background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); - background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); + background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 100%); + background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 100%); background-position: 0 center; background-repeat: repeat-x; background-size: 20px 40%; } - /* line 338, ../../../../general/res/sass/controls/_controls.scss */ + /* line 339, ../../../../general/res/sass/controls/_controls.scss */ .s-progress-bar.indeterminate .progress-amt:before { -moz-animation: progress 0.6s linear infinite; -webkit-animation: progress 0.6s linear infinite; animation: progress 0.6s linear infinite; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC40Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; - background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); - background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); - background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); - background-position: 0 center; - background-repeat: repeat-x; - background-size: 20px 40%; } + background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%); + background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%); + background-repeat: repeat; + background-size: 20px 20px; } + /* line 344, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar.indeterminate .progress-amt:after { + display: none; } /******************************************************** SLIDERS */ -/* line 351, ../../../../general/res/sass/controls/_controls.scss */ +/* line 354, ../../../../general/res/sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -1926,7 +1928,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 362, ../../../../general/res/sass/controls/_controls.scss */ +/* line 365, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob { background-color: #333; -moz-border-radius: 3px; @@ -2012,12 +2014,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } - /* line 373, ../../../../general/res/sass/controls/_controls.scss */ + /* line 376, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 380, ../../../../general/res/sass/controls/_controls.scss */ +/* line 383, ../../../../general/res/sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -2028,13 +2030,13 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 390, ../../../../general/res/sass/controls/_controls.scss */ + /* line 393, ../../../../general/res/sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 399, ../../../../general/res/sass/controls/_controls.scss */ + /* line 402, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2049,7 +2051,7 @@ label.checkbox.custom { height: 10px; width: 10px; } - /* line 408, ../../../../general/res/sass/controls/_controls.scss */ + /* line 411, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2063,7 +2065,7 @@ label.checkbox.custom { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - /* line 417, ../../../../general/res/sass/controls/_controls.scss */ + /* line 420, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2072,7 +2074,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px); background-image: linear-gradient(#5e5e5e, #525252 20px); } - /* line 422, ../../../../general/res/sass/controls/_controls.scss */ + /* line 425, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } } /***************************************************************************** @@ -2483,29 +2485,32 @@ label.checkbox.custom { transform: translateX(-50%); z-index: 2; } /* line 110, ../../../../general/res/sass/controls/_messages.scss */ - .l-message-banner a, .l-message-banner span { + .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 117, ../../../../general/res/sass/controls/_messages.scss */ + /* line 114, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } - /* line 120, ../../../../general/res/sass/controls/_messages.scss */ + /* line 117, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-action { line-height: 15px; padding: 0 5px; } - /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + /* line 121, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .close { cursor: pointer; font-size: 7px; width: 8px; } - /* line 130, ../../../../general/res/sass/controls/_messages.scss */ + /* line 127, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-progress-bar { height: 8px; line-height: 8px; width: 100px; } + /* line 133, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner .progress-info.progress-estimate { + display: none; } -/* line 139, ../../../../general/res/sass/controls/_messages.scss */ +/* line 137, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner, .s-message-banner .s-action { -moz-transition-property: background-color; @@ -2521,7 +2526,7 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } -/* line 144, ../../../../general/res/sass/controls/_messages.scss */ +/* line 142, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -2538,21 +2543,21 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action:hover { background-color: gray; } - /* line 148, ../../../../general/res/sass/controls/_messages.scss */ + /* line 146, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner a { color: inherit; } - /* line 149, ../../../../general/res/sass/controls/_messages.scss */ + /* line 147, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } - /* line 152, ../../../../general/res/sass/controls/_messages.scss */ + /* line 150, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close { opacity: 0.5; } - /* line 154, ../../../../general/res/sass/controls/_messages.scss */ + /* line 152, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close:hover { opacity: 1; } - /* line 158, ../../../../general/res/sass/controls/_messages.scss */ + /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok { background-color: #189543; color: #ccc; } @@ -2565,7 +2570,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover { background-color: #189543; } - /* line 161, ../../../../general/res/sass/controls/_messages.scss */ + /* line 159, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution { background-color: #ca5900; color: #ccc; } @@ -4243,22 +4248,25 @@ span.req { line-height: 120%; margin-bottom: 5px; } /* line 52, ../../../../general/res/sass/overlay/_overlay.scss */ +.overlay .hint { + color: #b3b3b3; } +/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; right: 0; } -/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 66, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .l-progress-bar { display: block; height: 15px; line-height: 15px; margin: .5em 0; width: 100%; } -/* line 71, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 75, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4267,14 +4275,14 @@ span.req { overflow: visible; height: 30px; text-align: right; } - /* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 81, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; padding: 0 15px; } - /* line 79, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { background-color: gray; -moz-border-radius: 3px; @@ -4313,14 +4321,14 @@ span.req { /* line 296, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } -/* line 95, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .contents.l-dialog { top: 5px; right: 5px; bottom: 5px; left: 5px; overflow: auto; } - /* line 103, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .contents.l-dialog .field.l-med input[type='text'] { width: 100%; } diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 59c1b2887e..5c94d22297 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -20,7 +20,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -41,38 +41,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -1851,33 +1851,35 @@ label.checkbox.custom { background-image: linear-gradient(rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, 0.25) 30%, rgba(0, 0, 0, 0) 100%); } /* line 331, ../../../../general/res/sass/controls/_controls.scss */ .s-progress-bar:not(.indeterminate) .progress-amt:before { - -moz-animation: progress 0.3s linear infinite; - -webkit-animation: progress 0.3s linear infinite; - animation: progress 0.3s linear infinite; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjIiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + -moz-animation: progress 0.4s linear infinite; + -webkit-animation: progress 0.4s linear infinite; + animation: progress 0.4s linear infinite; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; - background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); - background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); - background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 100%); + background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 100%); + background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 100%); + background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 100%); background-position: 0 center; background-repeat: repeat-x; background-size: 20px 40%; } - /* line 338, ../../../../general/res/sass/controls/_controls.scss */ + /* line 339, ../../../../general/res/sass/controls/_controls.scss */ .s-progress-bar.indeterminate .progress-amt:before { -moz-animation: progress 0.6s linear infinite; -webkit-animation: progress 0.6s linear infinite; animation: progress 0.6s linear infinite; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC40Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; - background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); - background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); - background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.4) 100%); - background-position: 0 center; - background-repeat: repeat-x; - background-size: 20px 40%; } + background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%); + background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%); + background-repeat: repeat; + background-size: 20px 20px; } + /* line 344, ../../../../general/res/sass/controls/_controls.scss */ + .s-progress-bar.indeterminate .progress-amt:after { + display: none; } /******************************************************** SLIDERS */ -/* line 351, ../../../../general/res/sass/controls/_controls.scss */ +/* line 354, ../../../../general/res/sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -1896,7 +1898,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 362, ../../../../general/res/sass/controls/_controls.scss */ +/* line 365, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob { background-color: #969696; -moz-border-radius: 4px; @@ -1966,12 +1968,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #fcfcfc; } - /* line 373, ../../../../general/res/sass/controls/_controls.scss */ + /* line 376, ../../../../general/res/sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 380, ../../../../general/res/sass/controls/_controls.scss */ +/* line 383, ../../../../general/res/sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -1982,13 +1984,13 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 390, ../../../../general/res/sass/controls/_controls.scss */ + /* line 393, ../../../../general/res/sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 399, ../../../../general/res/sass/controls/_controls.scss */ + /* line 402, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2003,7 +2005,7 @@ label.checkbox.custom { height: 10px; width: 10px; } - /* line 408, ../../../../general/res/sass/controls/_controls.scss */ + /* line 411, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2017,7 +2019,7 @@ label.checkbox.custom { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - /* line 417, ../../../../general/res/sass/controls/_controls.scss */ + /* line 420, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2026,7 +2028,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px); background-image: linear-gradient(#00ace6, #0099cc 20px); } - /* line 422, ../../../../general/res/sass/controls/_controls.scss */ + /* line 425, ../../../../general/res/sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.1); } } /***************************************************************************** @@ -2431,29 +2433,32 @@ label.checkbox.custom { transform: translateX(-50%); z-index: 2; } /* line 110, ../../../../general/res/sass/controls/_messages.scss */ - .l-message-banner a, .l-message-banner span { + .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 117, ../../../../general/res/sass/controls/_messages.scss */ + /* line 114, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } - /* line 120, ../../../../general/res/sass/controls/_messages.scss */ + /* line 117, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-action { line-height: 15px; padding: 0 5px; } - /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + /* line 121, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .close { cursor: pointer; font-size: 7px; width: 8px; } - /* line 130, ../../../../general/res/sass/controls/_messages.scss */ + /* line 127, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-progress-bar { height: 8px; line-height: 8px; width: 100px; } + /* line 133, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner .progress-info.progress-estimate { + display: none; } -/* line 139, ../../../../general/res/sass/controls/_messages.scss */ +/* line 137, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner, .s-message-banner .s-action { -moz-transition-property: background-color; @@ -2469,7 +2474,7 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } -/* line 144, ../../../../general/res/sass/controls/_messages.scss */ +/* line 142, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -2486,21 +2491,21 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action:hover { background-color: gray; } - /* line 148, ../../../../general/res/sass/controls/_messages.scss */ + /* line 146, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner a { color: inherit; } - /* line 149, ../../../../general/res/sass/controls/_messages.scss */ + /* line 147, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } - /* line 152, ../../../../general/res/sass/controls/_messages.scss */ + /* line 150, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close { opacity: 0.5; } - /* line 154, ../../../../general/res/sass/controls/_messages.scss */ + /* line 152, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close:hover { opacity: 1; } - /* line 158, ../../../../general/res/sass/controls/_messages.scss */ + /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok { background-color: #189543; color: #fff; } @@ -2513,7 +2518,7 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover { background-color: #189543; } - /* line 161, ../../../../general/res/sass/controls/_messages.scss */ + /* line 159, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution { background-color: #ca5900; color: #fff; } @@ -4166,22 +4171,25 @@ span.req { line-height: 120%; margin-bottom: 5px; } /* line 52, ../../../../general/res/sass/overlay/_overlay.scss */ +.overlay .hint { + color: #999999; } +/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; right: 0; } -/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 66, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .l-progress-bar { display: block; height: 15px; line-height: 15px; margin: .5em 0; width: 100%; } -/* line 71, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 75, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4190,14 +4198,14 @@ span.req { overflow: visible; height: 30px; text-align: right; } - /* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 81, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; padding: 0 15px; } - /* line 79, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { background-color: #969696; -moz-border-radius: 4px; @@ -4227,14 +4235,14 @@ span.req { /* line 296, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } -/* line 95, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .contents.l-dialog { top: 5px; right: 5px; bottom: 5px; left: 5px; overflow: auto; } - /* line 103, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .contents.l-dialog .field.l-med input[type='text'] { width: 100%; } diff --git a/testing/dialogTest/src/DialogLaunchController.js b/testing/dialogTest/src/DialogLaunchController.js index 4d7bb4c258..374e43a150 100644 --- a/testing/dialogTest/src/DialogLaunchController.js +++ b/testing/dialogTest/src/DialogLaunchController.js @@ -29,9 +29,10 @@ define( function DialogLaunchController($scope, dialogService, $timeout, $log, messageSeverity) { $scope.launchProgress = function (knownProgress) { var model = { - title: "Progress dialog example", + title: "Progress Dialog Example", progress: 0, - hint: "Calculating...", + hint: "Do not navigate away from this page or close this browser tab while this operation is in progress.", + actionText: "Calculating...", unknownProgress: !knownProgress, unknownDuration: false, severity: messageSeverity.INFO, @@ -62,7 +63,7 @@ define( if (dialogService.showBlockingMessage(model)) { //Do processing here - model.hint = "Processing 100 objects..."; + model.actionText = "Processing 100 objects..."; if (knownProgress) { $timeout(incrementProgress, 1000); } @@ -73,14 +74,21 @@ define( $scope.launchError = function () { var model = { - title: "Error Message Title", - hint: "Something happened. It was not so good.", + title: "Error Dialog Example", + actionText: "Something happened, and it was not good.", severity: messageSeverity.ERROR, actions: [ { - label: "OK", + label: "Try Again", action: function () { - $log.debug("OK Pressed"); + $log.debug("Try Again Pressed"); + dialogService.dismiss(); + } + }, + { + label: "Cancel", + action: function () { + $log.debug("Cancel Pressed"); dialogService.dismiss(); } } From 7f529eec685a0ef3cf4b225271434306d5892b30 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 7 Oct 2015 12:11:30 -0700 Subject: [PATCH 06/10] [Frontend] Mods to OverlayService open #159 open #170 OverlayService can now be passed typeClass, which is added to the CSS class of the overlay's mct-include tag - intent is to allow the overlay to size itself based on the type of content to be displayed; --- platform/commonUI/dialog/src/DialogService.js | 7 +++++-- platform/commonUI/dialog/src/OverlayService.js | 8 ++++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/platform/commonUI/dialog/src/DialogService.js b/platform/commonUI/dialog/src/DialogService.js index f598f0da58..99d361cf81 100644 --- a/platform/commonUI/dialog/src/DialogService.js +++ b/platform/commonUI/dialog/src/DialogService.js @@ -89,7 +89,8 @@ define( // will handle actual insertion into the DOM this.overlay = this.overlayService.createOverlay( key, - model + model, + "t-dialog" ); // Track that a dialog is already visible, to @@ -230,6 +231,7 @@ define( * progress, as well as a series of actions that * the user can take if necessary * @param {DialogModel} dialogModel defines options for the dialog + * @param {typeClass} string tells overlayService that this overlay should use appropriate CSS class * @returns {boolean} */ DialogService.prototype.showBlockingMessage = function(dialogModel) { @@ -238,7 +240,8 @@ define( // will handle actual insertion into the DOM this.overlay = this.overlayService.createOverlay( "blocking-message", - {dialog: dialogModel} + {dialog: dialogModel}, + "t-dialog-sm" ); this.dialogVisible = true; return true; diff --git a/platform/commonUI/dialog/src/OverlayService.js b/platform/commonUI/dialog/src/OverlayService.js index 5faba5dcf6..1874adb271 100644 --- a/platform/commonUI/dialog/src/OverlayService.js +++ b/platform/commonUI/dialog/src/OverlayService.js @@ -28,7 +28,7 @@ define( // Template to inject into the DOM to show the dialog; really just points to // the a specific template that can be included via mct-include - var TEMPLATE = ''; + var TEMPLATE = ''; /** @@ -72,7 +72,7 @@ define( * included overlay template (this will be passed * in via ng-model) */ - OverlayService.prototype.createOverlay = function (key, overlayModel) { + OverlayService.prototype.createOverlay = function (key, overlayModel, typeClass) { // Create a new scope for this overlay var scope = this.newScope(), element; @@ -87,9 +87,13 @@ define( // If no model is supplied, just fill in a default "cancel" overlayModel = overlayModel || { cancel: dismiss }; + // If no typeClass is specified, set to default "t-dialog" + typeClass = typeClass || 't-dialog'; + // Populate the scope; will be passed directly to the template scope.overlay = overlayModel; scope.key = key; + scope.typeClass = typeClass; // Create the overlay element and add it to the document's body element = this.$compile(TEMPLATE)(scope); From 182eff977c21dfadc44130cb30106e84d6a234c4 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 7 Oct 2015 16:36:55 -0700 Subject: [PATCH 07/10] [Frontend] Dialog and overlay layout/positioning mods open #159 open #170 Restructured overlay size and positioning approach for better flexibility; Getting new dialogs and the overlay to play nicely in mobile context; --- .../res/templates/blocking-message.html | 2 +- .../commonUI/dialog/res/templates/dialog.html | 2 +- .../dialog/res/templates/overlay-options.html | 2 +- .../dialog/res/templates/overlay.html | 8 +- .../general/res/sass/controls/_messages.scss | 2 +- .../general/res/sass/mobile/_constants.scss | 2 +- .../res/sass/mobile/overlay/_overlay.scss | 80 +++++---- .../general/res/sass/overlay/_overlay.scss | 134 ++++++++------- .../res/sass/user-environ/_layout.scss | 6 +- .../espresso/res/css/theme-espresso.css | 161 +++++++++++------- .../themes/snow/res/css/theme-snow.css | 161 +++++++++++------- 11 files changed, 330 insertions(+), 230 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/blocking-message.html b/platform/commonUI/dialog/res/templates/blocking-message.html index 8db939cfdc..fc2b5c1df3 100644 --- a/platform/commonUI/dialog/res/templates/blocking-message.html +++ b/platform/commonUI/dialog/res/templates/blocking-message.html @@ -3,7 +3,7 @@
{{ngModel.dialog.title}}
{{ngModel.dialog.hint}}
-
+
{{ngModel.dialog.actionText}}
diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html index 4c7c02e3f2..2fe2411875 100644 --- a/platform/commonUI/dialog/res/templates/dialog.html +++ b/platform/commonUI/dialog/res/templates/dialog.html @@ -23,7 +23,7 @@
{{ngModel.title}}
All fields marked * are required.
-
+
diff --git a/platform/commonUI/dialog/res/templates/overlay-options.html b/platform/commonUI/dialog/res/templates/overlay-options.html index 155ad0beab..7de75df31c 100644 --- a/platform/commonUI/dialog/res/templates/overlay-options.html +++ b/platform/commonUI/dialog/res/templates/overlay-options.html @@ -24,7 +24,7 @@
{{ngModel.dialog.title}}
{{ngModel.dialog.hint}}
-
+
diff --git a/platform/commonUI/dialog/res/templates/overlay.html b/platform/commonUI/dialog/res/templates/overlay.html index df8bd9c160..f2b7c0d9ee 100644 --- a/platform/commonUI/dialog/res/templates/overlay.html +++ b/platform/commonUI/dialog/res/templates/overlay.html @@ -25,11 +25,7 @@ - x - -
- -
+ class="clk-icon icon ui-symbol close">x +
\ No newline at end of file diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 697e841a5f..91dce92a09 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -131,7 +131,7 @@ width: 100px; } .progress-info.progress-estimate { display: none; } - z-index: 2; + z-index: 10; } .s-message-banner, diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index bd9443cc50..067bbef6ca 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -23,7 +23,7 @@ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ $mobileListIconSize: 30px; $mobileTitleDescH: 35px; -$mobileOverlayMargin: 10px; +$mobileOverlayMargin: 20px; $phoneItemH: floor($ueBrowseGridItemLg/4); $tabletItemH: floor($ueBrowseGridItemLg/3); diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss index caa6df0967..af0380a12b 100644 --- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss @@ -1,16 +1,12 @@ @include phoneandtablet { .overlay { - $m: 0; .clk-icon.close { top: $mobileOverlayMargin; right: $mobileOverlayMargin; } > .holder { - @include border-radius($m); - top: $m; - right: $m; - bottom: $m; - left: $m; + height: 90%; width: 90%; + > .contents { top: $mobileOverlayMargin; right: $mobileOverlayMargin; @@ -22,35 +18,61 @@ margin-right: 1.2em; } } - - .form.editor { - border: none; - - .contents { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - } } } } } @include phone { - .overlay > .holder > .contents .form.editor .contents .form-row { - > .label, - > .controls { - //@include test(blue); - display: block; - float: none; - width: 100%; + .overlay > .holder { + //@include test(orange); // This works! + $m: 0; + @include border-radius($m); + top: $m; + right: $m; + bottom: $m; + left: $m; + height: auto; width: auto; + min-width: 200px; min-height: 200px; + max-height: 100%; max-width: 100%; + overflow: auto; + @include transform(none); + + .editor .form .form-row { + > .label, + > .controls { + //@include test(blue); + display: block; + float: none; + width: 100%; + } + > .label { + &:after { + float: none; + } + } + } + + .contents .top-bar, + .contents .editor, + .contents .bottom-bar { + //@include test(orange); + top: auto; right: auto; bottom: auto; left: auto; + height: auto; width: auto; + margin-bottom: $interiorMarginLg * 2; + position: relative; + } + } + .t-dialog-sm .overlay > .holder { + //@include test(blue); + height: auto; max-height: 100%; + } +} + +@include phonePortrait { + .overlay > .holder { + .contents .bottom-bar { + text-align: center; } - > .label { - &:after { - float: none; - } - } } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 9724d6f463..327c41856d 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -20,93 +20,113 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .overlay { - .blocker { - background: $colorOvrBlocker; - z-index: 100; - } + .blocker { + background: $colorOvrBlocker; + z-index: 100; + } .clk-icon.close { font-size: 0.8rem; position: absolute; - top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto; - z-index: 100; + top: $interiorMarginLg; + right: $interiorMarginLg; + bottom: auto; + left: auto; + z-index: 100; } - >.holder { - $i: 15%; - @include containerSubtle($colorOvrBg, $colorOvrFg); - @include border-radius($basicCr * 3); - color: $colorOvrFg; - top: $i; right: $i; bottom: $i; left: $i; - z-index: 101; - >.contents { + > .holder { + //$i: 15%; + @include containerSubtle($colorOvrBg, $colorOvrFg); + @include border-radius($basicCr * 3); + color: $colorOvrFg; + top: 50%; + right: auto; + bottom: auto; + left: 50%; + @include transform(translateX(-50%) translateY(-50%)); + height: 70%; + width: 50%; + min-height: 300px; + max-height: 800px; + min-width: 450px; + max-width: 1000px; + z-index: 101; + > .contents { $m: $overlayMargin; - top: $m; right: $m; bottom: $m; left: $m; + top: $m; + right: $m; + bottom: $m; + left: $m; } - } + } .title { - @include ellipsize(); + @include ellipsize(); font-size: 1.2em; line-height: 120%; - margin-bottom: $interiorMargin; + margin-bottom: $interiorMargin; } .hint { color: pushBack($colorOvrFg, 20%); } - + .top-bar { height: $ovrTopBarH; } - + .editor { top: $ovrTopBarH + ($interiorMargin * 2); bottom: $ovrFooterH + $interiorMargin * 2; - left: 0; right: 0; + left: 0; + right: 0; + overflow: auto; + .field.l-med { + input[type='text'] { + width: 100%; + } + } } - .l-progress-bar { - $h: $progressBarHOverlay; + .l-progress-bar { + $h: $progressBarHOverlay; display: block; - height: $h; - line-height: $h; + height: $h; + line-height: $h; margin: .5em 0; - width: 100%; - } - + width: 100%; + } + .bottom-bar { - top: auto; right: 0; bottom: 0; left: 0; - overflow: visible; + top: auto; + right: 0; + bottom: 0; + left: 0; + overflow: visible; //font-size: 1em; height: $ovrFooterH; text-align: right; .s-btn { - $bg: $colorOvrBtnBg; - &:not(.major) { - @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg); - } - font-size: 95%; - height: $ovrFooterH; - line-height: $ovrFooterH; + $bg: $colorOvrBtnBg; + &:not(.major) { + @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg); + } + font-size: 95%; + height: $ovrFooterH; + line-height: $ovrFooterH; margin-left: $interiorMargin; - padding: 0 $interiorMargin * 3; - //&.major { - // @extend .s-btn.major; - // &:hover { - // @extend .s-btn.major:hover; - // } - //} + padding: 0 $interiorMargin * 3; + //&.major { + // @extend .s-btn.major; + // &:hover { + // @extend .s-btn.major:hover; + // } + //} } } - .contents.l-dialog { - $myM: $interiorMargin; - top: $myM; - right: $myM; - bottom: $myM; - left: $myM; - overflow: auto; - .field.l-med { - input[type='text'] { - width: 100%; - } - } - } +} + +.t-dialog-sm .overlay > .holder { + // Used for blocker and in-progress dialogs, modal alerts, etc. + //@include test(red); + min-height: 225px; + height: 225px; } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 6a11e22eb0..84083dc08d 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -43,9 +43,9 @@ position: absolute; } -.editor { - @include border-radius($basicCr * 1.5); -} +//.editor { +// @include border-radius($basicCr * 1.5); +//} .contents { $myM: 0; //$interiorMargin; diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 5caef16706..70c42472c7 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -2483,7 +2483,7 @@ label.checkbox.custom { -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); - z-index: 2; } + z-index: 10; } /* line 110, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; @@ -3330,12 +3330,6 @@ span.req { .editor { position: absolute; } -/* line 46, ../../../../general/res/sass/user-environ/_layout.scss */ -.editor { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; } - /* line 50, ../../../../general/res/sass/user-environ/_layout.scss */ .contents { box-sizing: border-box; @@ -4204,7 +4198,7 @@ span.req { bottom: auto; left: auto; z-index: 100; } -/* line 33, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 36, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay > .holder { background-color: #4d4d4d; -moz-border-radius: 3px; @@ -4228,18 +4222,28 @@ span.req { -webkit-border-radius: 6px; border-radius: 6px; color: #e6e6e6; - top: 15%; - right: 15%; - bottom: 15%; - left: 15%; + top: 50%; + right: auto; + bottom: auto; + left: 50%; + -moz-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + height: 70%; + width: 50%; + min-height: 300px; + max-height: 800px; + min-width: 450px; + max-width: 1000px; z-index: 101; } - /* line 40, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay > .holder > .contents { top: 25px; right: 25px; bottom: 25px; left: 25px; } -/* line 45, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .title { overflow: hidden; text-overflow: ellipsis; @@ -4247,26 +4251,30 @@ span.req { font-size: 1.2em; line-height: 120%; margin-bottom: 5px; } -/* line 52, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .hint { color: #b3b3b3; } -/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; - right: 0; } -/* line 66, ../../../../general/res/sass/overlay/_overlay.scss */ + right: 0; + overflow: auto; } + /* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .editor .field.l-med input[type='text'] { + width: 100%; } +/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .l-progress-bar { display: block; height: 15px; line-height: 15px; margin: .5em 0; width: 100%; } -/* line 75, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4275,14 +4283,14 @@ span.req { overflow: visible; height: 30px; text-align: right; } - /* line 81, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; padding: 0 15px; } - /* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 109, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { background-color: gray; -moz-border-radius: 3px; @@ -4321,23 +4329,32 @@ span.req { /* line 296, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } -/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .contents.l-dialog { - top: 5px; - right: 5px; - bottom: 5px; - left: 5px; - overflow: auto; } - /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */ - .overlay .contents.l-dialog .field.l-med input[type='text'] { - width: 100%; } + +/* line 127, ../../../../general/res/sass/overlay/_overlay.scss */ +.t-dialog-sm .overlay > .holder { + min-height: 225px; + height: 225px; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 4, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay .clk-icon.close { - top: 10px; - right: 10px; } - /* line 8, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + top: 20px; + right: 20px; } + /* line 7, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder { + height: 90%; + width: 90%; } + /* line 10, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder > .contents { + top: 20px; + right: 20px; + bottom: 20px; + left: 20px; } + /* line 17, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder > .contents .top-bar > .title { + margin-right: 1.2em; } } +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 27, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder { -moz-border-radius: 0; -webkit-border-radius: 0; @@ -4345,35 +4362,49 @@ span.req { top: 0; right: 0; bottom: 0; - left: 0; } - /* line 14, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents { - top: 10px; - right: 10px; - bottom: 10px; - left: 10px; } - /* line 21, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .top-bar > .title { - margin-right: 1.2em; } - /* line 26, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .form.editor { - border: none; } - /* line 29, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .form.editor .contents { - top: 0; - right: 0; - bottom: 0; - left: 0; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 43, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .form.editor .contents .form-row > .label, - .overlay > .holder > .contents .form.editor .contents .form-row > .controls { - display: block; - float: none; - width: 100%; } - /* line 51, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .form.editor .contents .form-row > .label:after { - float: none; } } + left: 0; + height: auto; + width: auto; + min-width: 200px; + min-height: 200px; + max-height: 100%; + max-width: 100%; + overflow: auto; + -moz-transform: none; + -ms-transform: none; + -webkit-transform: none; + transform: none; } + /* line 42, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder .editor .form .form-row > .label, + .overlay > .holder .editor .form .form-row > .controls { + display: block; + float: none; + width: 100%; } + /* line 50, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder .editor .form .form-row > .label:after { + float: none; } + /* line 56, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder .contents .top-bar, + .overlay > .holder .contents .editor, + .overlay > .holder .contents .bottom-bar { + background-color: rgba(255, 165, 0, 0.2); + top: auto; + right: auto; + bottom: auto; + left: auto; + height: auto; + width: auto; + margin-bottom: 20px; + position: relative; } + + /* line 66, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .t-dialog-sm .overlay > .holder { + height: auto; + max-height: 100%; } } +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { + /* line 74, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder .contents .bottom-bar { + text-align: center; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 5c94d22297..0789136f68 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -2431,7 +2431,7 @@ label.checkbox.custom { -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); - z-index: 2; } + z-index: 10; } /* line 110, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; @@ -3262,12 +3262,6 @@ span.req { .editor { position: absolute; } -/* line 46, ../../../../general/res/sass/user-environ/_layout.scss */ -.editor { - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - border-radius: 6px; } - /* line 50, ../../../../general/res/sass/user-environ/_layout.scss */ .contents { box-sizing: border-box; @@ -4136,7 +4130,7 @@ span.req { bottom: auto; left: auto; z-index: 100; } -/* line 33, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 36, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay > .holder { background-color: #fcfcfc; -moz-border-radius: 4px; @@ -4151,18 +4145,28 @@ span.req { -webkit-border-radius: 12px; border-radius: 12px; color: #666; - top: 15%; - right: 15%; - bottom: 15%; - left: 15%; + top: 50%; + right: auto; + bottom: auto; + left: 50%; + -moz-transform: translateX(-50%) translateY(-50%); + -ms-transform: translateX(-50%) translateY(-50%); + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); + height: 70%; + width: 50%; + min-height: 300px; + max-height: 800px; + min-width: 450px; + max-width: 1000px; z-index: 101; } - /* line 40, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay > .holder > .contents { top: 25px; right: 25px; bottom: 25px; left: 25px; } -/* line 45, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .title { overflow: hidden; text-overflow: ellipsis; @@ -4170,26 +4174,30 @@ span.req { font-size: 1.2em; line-height: 120%; margin-bottom: 5px; } -/* line 52, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .hint { color: #999999; } -/* line 56, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; - right: 0; } -/* line 66, ../../../../general/res/sass/overlay/_overlay.scss */ + right: 0; + overflow: auto; } + /* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .editor .field.l-med input[type='text'] { + width: 100%; } +/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .l-progress-bar { display: block; height: 15px; line-height: 15px; margin: .5em 0; width: 100%; } -/* line 75, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4198,14 +4206,14 @@ span.req { overflow: visible; height: 30px; text-align: right; } - /* line 81, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; padding: 0 15px; } - /* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 109, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { background-color: #969696; -moz-border-radius: 4px; @@ -4235,23 +4243,32 @@ span.req { /* line 296, ../../../../general/res/sass/_mixins.scss */ .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } -/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .contents.l-dialog { - top: 5px; - right: 5px; - bottom: 5px; - left: 5px; - overflow: auto; } - /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */ - .overlay .contents.l-dialog .field.l-med input[type='text'] { - width: 100%; } + +/* line 127, ../../../../general/res/sass/overlay/_overlay.scss */ +.t-dialog-sm .overlay > .holder { + min-height: 225px; + height: 225px; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 4, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay .clk-icon.close { - top: 10px; - right: 10px; } - /* line 8, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + top: 20px; + right: 20px; } + /* line 7, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder { + height: 90%; + width: 90%; } + /* line 10, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder > .contents { + top: 20px; + right: 20px; + bottom: 20px; + left: 20px; } + /* line 17, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder > .contents .top-bar > .title { + margin-right: 1.2em; } } +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 27, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder { -moz-border-radius: 0; -webkit-border-radius: 0; @@ -4259,35 +4276,49 @@ span.req { top: 0; right: 0; bottom: 0; - left: 0; } - /* line 14, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents { - top: 10px; - right: 10px; - bottom: 10px; - left: 10px; } - /* line 21, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .top-bar > .title { - margin-right: 1.2em; } - /* line 26, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .form.editor { - border: none; } - /* line 29, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .form.editor .contents { - top: 0; - right: 0; - bottom: 0; - left: 0; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 43, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .form.editor .contents .form-row > .label, - .overlay > .holder > .contents .form.editor .contents .form-row > .controls { - display: block; - float: none; - width: 100%; } - /* line 51, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder > .contents .form.editor .contents .form-row > .label:after { - float: none; } } + left: 0; + height: auto; + width: auto; + min-width: 200px; + min-height: 200px; + max-height: 100%; + max-width: 100%; + overflow: auto; + -moz-transform: none; + -ms-transform: none; + -webkit-transform: none; + transform: none; } + /* line 42, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder .editor .form .form-row > .label, + .overlay > .holder .editor .form .form-row > .controls { + display: block; + float: none; + width: 100%; } + /* line 50, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder .editor .form .form-row > .label:after { + float: none; } + /* line 56, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder .contents .top-bar, + .overlay > .holder .contents .editor, + .overlay > .holder .contents .bottom-bar { + background-color: rgba(255, 165, 0, 0.2); + top: auto; + right: auto; + bottom: auto; + left: auto; + height: auto; + width: auto; + margin-bottom: 20px; + position: relative; } + + /* line 66, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .t-dialog-sm .overlay > .holder { + height: auto; + max-height: 100%; } } +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { + /* line 74, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + .overlay > .holder .contents .bottom-bar { + text-align: center; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space From ac59df9595ae212b5825b4d48b069f342864beea Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 7 Oct 2015 17:56:25 -0700 Subject: [PATCH 08/10] [Frontend] Added type-icon to message dialogs open #159 open #170 Percent complete added to progress-bar.html; Refined overlay height; --- .../res/templates/blocking-message.html | 12 +++--- .../general/res/sass/controls/_messages.scss | 18 ++++++++- .../general/res/sass/overlay/_overlay.scss | 7 ++-- .../general/res/templates/indicator.html | 4 +- .../general/res/templates/progress-bar.html | 3 +- .../espresso/res/css/theme-espresso.css | 39 ++++++++++++------- .../themes/snow/res/css/theme-snow.css | 39 ++++++++++++------- testing/dialogTest/res/dialog-launch.html | 7 ++-- 8 files changed, 83 insertions(+), 46 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/blocking-message.html b/platform/commonUI/dialog/res/templates/blocking-message.html index fc2b5c1df3..4f2caf3df5 100644 --- a/platform/commonUI/dialog/res/templates/blocking-message.html +++ b/platform/commonUI/dialog/res/templates/blocking-message.html @@ -1,24 +1,24 @@ - + +
!
+
{{ngModel.dialog.title}}
{{ngModel.dialog.hint}}
-
+
{{ngModel.dialog.actionText}}
- -
-
{{dialogAction.label}}
+
\ No newline at end of file diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 91dce92a09..f3e1c82702 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -130,7 +130,7 @@ line-height: $h; width: 100px; } - .progress-info.progress-estimate { display: none; } + .progress-info { display: none; } z-index: 10; } @@ -159,4 +159,20 @@ &.caution { @include statusBannerColors($colorStatusCaution); } +} + +// Messages in overlays, as singleton or in list +.t-message .overlay { + // Singleton message overlay context + $iconW: 80px; + .type-icon.message-type.abs { + //color: pushBack($colorOvrFg, 40%); + font-size: $iconW; + opacity: 0.5; + right: auto; + width: $iconW; + } + .message-contents.abs { + left: $iconW + $overlayMargin; + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 327c41856d..4790d59768 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -47,7 +47,7 @@ width: 50%; min-height: 300px; max-height: 800px; - min-width: 450px; + min-width: 600px; max-width: 1000px; z-index: 101; > .contents { @@ -58,6 +58,7 @@ left: $m; } } + .title { @include ellipsize(); font-size: 1.2em; @@ -127,6 +128,6 @@ .t-dialog-sm .overlay > .holder { // Used for blocker and in-progress dialogs, modal alerts, etc. //@include test(red); - min-height: 225px; - height: 225px; + min-height: 275px; + height: 275px; } \ No newline at end of file diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html index 20bf22668b..e9be598b18 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -31,8 +31,8 @@ {{ngModel.getText()}} - 5 - + + diff --git a/platform/commonUI/general/res/templates/progress-bar.html b/platform/commonUI/general/res/templates/progress-bar.html index 337494164c..8337553765 100644 --- a/platform/commonUI/general/res/templates/progress-bar.html +++ b/platform/commonUI/general/res/templates/progress-bar.html @@ -4,6 +4,7 @@ -
+
+ {{ngModel.dialog.progress}}% complete. {{ngModel.dialog.progressText}}
\ No newline at end of file diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 70c42472c7..3f7cc363b9 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -2507,7 +2507,7 @@ label.checkbox.custom { line-height: 8px; width: 100px; } /* line 133, ../../../../general/res/sass/controls/_messages.scss */ - .l-message-banner .progress-info.progress-estimate { + .l-message-banner .progress-info { display: none; } /* line 137, ../../../../general/res/sass/controls/_messages.scss */ @@ -2584,6 +2584,16 @@ label.checkbox.custom { .s-message-banner.caution .s-action:hover { background-color: #ca5900; } +/* line 168, ../../../../general/res/sass/controls/_messages.scss */ +.t-message .overlay .type-icon.message-type.abs, .t-message .overlay .s-menu span.type-icon.message-type.l-click-area, .s-menu .t-message .overlay span.type-icon.message-type.l-click-area { + font-size: 80px; + opacity: 0.5; + right: auto; + width: 80px; } +/* line 175, ../../../../general/res/sass/controls/_messages.scss */ +.t-message .overlay .message-contents.abs, .t-message .overlay .s-menu span.message-contents.l-click-area, .s-menu .t-message .overlay span.message-contents.l-click-area { + left: 105px; } + /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { position: relative; @@ -4234,7 +4244,7 @@ span.req { width: 50%; min-height: 300px; max-height: 800px; - min-width: 450px; + min-width: 600px; max-width: 1000px; z-index: 101; } /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ @@ -4243,7 +4253,7 @@ span.req { right: 25px; bottom: 25px; left: 25px; } -/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .title { overflow: hidden; text-overflow: ellipsis; @@ -4251,30 +4261,30 @@ span.req { font-size: 1.2em; line-height: 120%; margin-bottom: 5px; } -/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .hint { color: #b3b3b3; } -/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 73, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; right: 0; overflow: auto; } - /* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor .field.l-med input[type='text'] { width: 100%; } -/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 90, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .l-progress-bar { display: block; height: 15px; line-height: 15px; margin: .5em 0; width: 100%; } -/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4283,14 +4293,14 @@ span.req { overflow: visible; height: 30px; text-align: right; } - /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 108, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; padding: 0 15px; } - /* line 109, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 110, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { background-color: gray; -moz-border-radius: 3px; @@ -4330,10 +4340,10 @@ span.req { .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } -/* line 127, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 128, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { - min-height: 225px; - height: 225px; } + min-height: 300px; + height: 300px; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ @@ -4387,7 +4397,6 @@ span.req { .overlay > .holder .contents .top-bar, .overlay > .holder .contents .editor, .overlay > .holder .contents .bottom-bar { - background-color: rgba(255, 165, 0, 0.2); top: auto; right: auto; bottom: auto; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 0789136f68..3ad64bc37f 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -2455,7 +2455,7 @@ label.checkbox.custom { line-height: 8px; width: 100px; } /* line 133, ../../../../general/res/sass/controls/_messages.scss */ - .l-message-banner .progress-info.progress-estimate { + .l-message-banner .progress-info { display: none; } /* line 137, ../../../../general/res/sass/controls/_messages.scss */ @@ -2532,6 +2532,16 @@ label.checkbox.custom { .s-message-banner.caution .s-action:hover { background-color: #ca5900; } +/* line 168, ../../../../general/res/sass/controls/_messages.scss */ +.t-message .overlay .type-icon.message-type.abs, .t-message .overlay .s-menu span.type-icon.message-type.l-click-area, .s-menu .t-message .overlay span.type-icon.message-type.l-click-area { + font-size: 80px; + opacity: 0.5; + right: auto; + width: 80px; } +/* line 175, ../../../../general/res/sass/controls/_messages.scss */ +.t-message .overlay .message-contents.abs, .t-message .overlay .s-menu span.message-contents.l-click-area, .s-menu .t-message .overlay span.message-contents.l-click-area { + left: 105px; } + /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { position: relative; @@ -4157,7 +4167,7 @@ span.req { width: 50%; min-height: 300px; max-height: 800px; - min-width: 450px; + min-width: 600px; max-width: 1000px; z-index: 101; } /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ @@ -4166,7 +4176,7 @@ span.req { right: 25px; bottom: 25px; left: 25px; } -/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .title { overflow: hidden; text-overflow: ellipsis; @@ -4174,30 +4184,30 @@ span.req { font-size: 1.2em; line-height: 120%; margin-bottom: 5px; } -/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .hint { color: #999999; } -/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 73, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; right: 0; overflow: auto; } - /* line 83, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor .field.l-med input[type='text'] { width: 100%; } -/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 90, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .l-progress-bar { display: block; height: 15px; line-height: 15px; margin: .5em 0; width: 100%; } -/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4206,14 +4216,14 @@ span.req { overflow: visible; height: 30px; text-align: right; } - /* line 107, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 108, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; padding: 0 15px; } - /* line 109, ../../../../general/res/sass/overlay/_overlay.scss */ + /* line 110, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) { background-color: #969696; -moz-border-radius: 4px; @@ -4244,10 +4254,10 @@ span.req { .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon { color: white; } } -/* line 127, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 128, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { - min-height: 225px; - height: 225px; } + min-height: 300px; + height: 300px; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ @@ -4301,7 +4311,6 @@ span.req { .overlay > .holder .contents .top-bar, .overlay > .holder .contents .editor, .overlay > .holder .contents .bottom-bar { - background-color: rgba(255, 165, 0, 0.2); top: auto; right: auto; bottom: auto; diff --git a/testing/dialogTest/res/dialog-launch.html b/testing/dialogTest/res/dialog-launch.html index 59d3437c10..7c91fd8f1f 100644 --- a/testing/dialogTest/res/dialog-launch.html +++ b/testing/dialogTest/res/dialog-launch.html @@ -1,5 +1,6 @@ -    -    - + Dialogs: + Known | + Unknown | + Error \ No newline at end of file From 8ee93d9603e3b841ee461b6abcbf614569ee1b6d Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 7 Oct 2015 18:26:11 -0700 Subject: [PATCH 09/10] [Frontend] Tweaks to dialog-launch; added ui-symbols open #159 open #170 --- .../icomoon.io-WTD-symbols-project.json | 300 +++++++++++------- .../general/res/fonts/symbols/wtdsymbols.eot | Bin 11216 -> 11492 bytes .../general/res/fonts/symbols/wtdsymbols.svg | 4 +- .../general/res/fonts/symbols/wtdsymbols.ttf | Bin 11040 -> 11316 bytes .../general/res/fonts/symbols/wtdsymbols.woff | Bin 11116 -> 11392 bytes .../general/res/sass/controls/_messages.scss | 2 +- .../espresso/res/css/theme-espresso.css | 6 +- .../themes/snow/res/css/theme-snow.css | 6 +- testing/dialogTest/res/dialog-launch.html | 13 +- 9 files changed, 211 insertions(+), 120 deletions(-) diff --git a/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json b/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json index 7982d57200..a742a1c8eb 100644 --- a/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json +++ b/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json @@ -1,14 +1,30 @@ { "metadata": { - "name": "WTD Symbols v24", - "lastOpened": 1441992412958, - "created": 1441992410384 + "name": "WTD Symbols v2.3", + "lastOpened": 1444267493342, + "created": 1444266013303 }, "iconSets": [ { "selection": [ { - "order": 86, + "order": 90, + "id": 87, + "prevSize": 32, + "code": 58896, + "name": "icon-bell", + "tempChar": "" + }, + { + "order": 91, + "id": 86, + "prevSize": 32, + "code": 58889, + "name": "icon-hourglass", + "tempChar": "" + }, + { + "order": 92, "id": 85, "prevSize": 32, "code": 58888, @@ -18,119 +34,119 @@ 58890 ], "name": "icon-info-v15", - "tempChar": "" + "tempChar": "" }, { - "order": 82, + "order": 93, "id": 84, "prevSize": 32, "code": 58887, "name": "icon-x-in-circle", - "tempChar": "" + "tempChar": "" }, { - "order": 77, + "order": 94, "id": 83, "prevSize": 32, "code": 58881, "name": "icon-datatable", - "tempChar": "" + "tempChar": "" }, { - "order": 78, + "order": 95, "id": 82, "prevSize": 32, "code": 58882, "name": "icon-tabular-scrolling", - "tempChar": "" + "tempChar": "" }, { - "order": 79, + "order": 96, "id": 81, "prevSize": 32, "code": 58884, "name": "icon-tabular", - "tempChar": "" + "tempChar": "" }, { - "order": 80, + "order": 97, "id": 80, "prevSize": 32, "code": 58885, "name": "icon-calendar", - "tempChar": "" + "tempChar": "" }, { - "order": 83, + "order": 98, "id": 78, "prevSize": 32, "code": 58886, "name": "icon-paint-bucket", - "tempChar": "" + "tempChar": "" }, { - "order": 1, + "order": 99, "id": 75, "prevSize": 32, "code": 123, "name": "icon-pointer-left", - "tempChar": "" + "tempChar": "" }, { - "order": 3, + "order": 100, "id": 74, "prevSize": 32, "code": 125, "name": "icon-pointer-right", - "tempChar": "" + "tempChar": "" }, { - "order": 4, + "order": 101, "id": 73, "prevSize": 32, "code": 80, "name": "icon-person", - "tempChar": "" + "tempChar": "" }, { - "order": 5, + "order": 102, "id": 72, "prevSize": 32, "code": 232, "name": "icon-chain-links", - "tempChar": "" + "tempChar": "" }, { - "order": 6, + "order": 103, "id": 71, "prevSize": 32, "code": 115, "name": "icon-database-in-brackets", - "tempChar": "" + "tempChar": "" }, { - "order": 7, + "order": 104, "id": 70, "prevSize": 32, "code": 114, "name": "icon-refresh", - "tempChar": "" + "tempChar": "" }, { - "order": 8, + "order": 105, "id": 69, "prevSize": 32, "code": 108, "name": "icon-lock", - "tempChar": "" + "tempChar": "" }, { - "order": 9, + "order": 106, "id": 68, "prevSize": 32, "code": 51, "name": "icon-box-with-dashed-lines", - "tempChar": "" + "tempChar": "" }, { "order": 10, @@ -138,7 +154,7 @@ "prevSize": 32, "code": 58880, "name": "icon-box-with-arrow-cursor", - "tempChar": "" + "tempChar": "" }, { "order": 11, @@ -146,7 +162,7 @@ "prevSize": 32, "code": 65, "name": "icon-activity-mode", - "tempChar": "" + "tempChar": "" }, { "order": 12, @@ -154,15 +170,15 @@ "prevSize": 32, "code": 97, "name": "icon-activity", - "tempChar": "" + "tempChar": "" }, { - "order": 13, + "order": 87, "id": 64, "prevSize": 32, "code": 33, "name": "icon-alert-rect", - "tempChar": "" + "tempChar": "" }, { "order": 14, @@ -170,7 +186,7 @@ "prevSize": 32, "code": 58883, "name": "icon-alert-triangle", - "tempChar": "" + "tempChar": "" }, { "order": 15, @@ -178,7 +194,7 @@ "prevSize": 32, "code": 238, "name": "icon-arrow-double-down", - "tempChar": "" + "tempChar": "" }, { "order": 16, @@ -186,7 +202,7 @@ "prevSize": 32, "code": 235, "name": "icon-arrow-double-up", - "tempChar": "" + "tempChar": "" }, { "order": 2, @@ -194,7 +210,7 @@ "prevSize": 32, "code": 118, "name": "icon-arrow-down", - "tempChar": "" + "tempChar": "" }, { "order": 19, @@ -202,7 +218,7 @@ "prevSize": 32, "code": 60, "name": "icon-arrow-left", - "tempChar": "" + "tempChar": "" }, { "order": 20, @@ -210,7 +226,7 @@ "prevSize": 32, "code": 62, "name": "icon-arrow-right", - "tempChar": "" + "tempChar": "" }, { "order": 21, @@ -218,7 +234,7 @@ "prevSize": 32, "code": 236, "name": "icon-arrow-tall-down", - "tempChar": "" + "tempChar": "" }, { "order": 22, @@ -226,7 +242,7 @@ "prevSize": 32, "code": 237, "name": "icon-arrow-tall-up", - "tempChar": "" + "tempChar": "" }, { "order": 23, @@ -234,7 +250,7 @@ "prevSize": 32, "code": 94, "name": "icon-arrow-up", - "tempChar": "" + "tempChar": "" }, { "order": 24, @@ -242,7 +258,7 @@ "prevSize": 32, "code": 73, "name": "icon-arrows-out", - "tempChar": "" + "tempChar": "" }, { "order": 25, @@ -250,7 +266,7 @@ "prevSize": 32, "code": 58893, "name": "icon-arrows-right-left", - "tempChar": "" + "tempChar": "" }, { "order": 33, @@ -258,7 +274,7 @@ "prevSize": 32, "code": 53, "name": "icon-arrows-up-down", - "tempChar": "" + "tempChar": "" }, { "order": 26, @@ -266,7 +282,7 @@ "prevSize": 32, "code": 42, "name": "icon-asterisk", - "tempChar": "" + "tempChar": "" }, { "order": 27, @@ -274,7 +290,7 @@ "prevSize": 32, "code": 72, "name": "icon-autoflow-tabular", - "tempChar": "" + "tempChar": "" }, { "order": 28, @@ -282,7 +298,7 @@ "prevSize": 32, "code": 224, "name": "icon-box", - "tempChar": "" + "tempChar": "" }, { "order": 29, @@ -290,7 +306,7 @@ "prevSize": 32, "code": 50, "name": "icon-check", - "tempChar": "" + "tempChar": "" }, { "order": 30, @@ -298,7 +314,7 @@ "prevSize": 32, "code": 67, "name": "icon-clock", - "tempChar": "" + "tempChar": "" }, { "order": 31, @@ -306,7 +322,7 @@ "prevSize": 32, "code": 46, "name": "icon-connectivity", - "tempChar": "" + "tempChar": "" }, { "order": 32, @@ -314,7 +330,7 @@ "prevSize": 32, "code": 100, "name": "icon-database-query", - "tempChar": "" + "tempChar": "" }, { "order": 17, @@ -322,7 +338,7 @@ "prevSize": 32, "code": 68, "name": "icon-database", - "tempChar": "" + "tempChar": "" }, { "order": 35, @@ -330,7 +346,7 @@ "prevSize": 32, "code": 81, "name": "icon-dictionary", - "tempChar": "" + "tempChar": "" }, { "order": 36, @@ -338,7 +354,7 @@ "prevSize": 32, "code": 242, "name": "icon-duplicate", - "tempChar": "" + "tempChar": "" }, { "order": 37, @@ -346,7 +362,7 @@ "prevSize": 32, "code": 102, "name": "icon-folder-new", - "tempChar": "" + "tempChar": "" }, { "order": 38, @@ -354,7 +370,7 @@ "prevSize": 32, "code": 70, "name": "icon-folder", - "tempChar": "" + "tempChar": "" }, { "order": 39, @@ -362,7 +378,7 @@ "prevSize": 32, "code": 95, "name": "icon-fullscreen-collapse", - "tempChar": "" + "tempChar": "" }, { "order": 40, @@ -370,7 +386,7 @@ "prevSize": 32, "code": 122, "name": "icon-fullscreen-expand", - "tempChar": "" + "tempChar": "" }, { "order": 41, @@ -378,7 +394,7 @@ "prevSize": 32, "code": 71, "name": "icon-gear", - "tempChar": "" + "tempChar": "" }, { "order": 49, @@ -386,7 +402,7 @@ "prevSize": 32, "code": 227, "name": "icon-image", - "tempChar": "" + "tempChar": "" }, { "order": 42, @@ -394,7 +410,7 @@ "prevSize": 32, "code": 225, "name": "icon-layers", - "tempChar": "" + "tempChar": "" }, { "order": 43, @@ -402,7 +418,7 @@ "prevSize": 32, "code": 76, "name": "icon-layout", - "tempChar": "" + "tempChar": "" }, { "order": 44, @@ -410,7 +426,7 @@ "prevSize": 32, "code": 226, "name": "icon-line-horz", - "tempChar": "" + "tempChar": "" }, { "order": 75, @@ -418,7 +434,7 @@ "prevSize": 32, "code": 244, "name": "icon-link", - "tempChar": "" + "tempChar": "" }, { "order": 46, @@ -426,7 +442,7 @@ "prevSize": 32, "code": 88, "name": "icon-magnify-in", - "tempChar": "" + "tempChar": "" }, { "order": 47, @@ -434,7 +450,7 @@ "prevSize": 32, "code": 89, "name": "icon-magnify-out", - "tempChar": "" + "tempChar": "" }, { "order": 48, @@ -442,7 +458,7 @@ "prevSize": 32, "code": 77, "name": "icon-magnify", - "tempChar": "" + "tempChar": "" }, { "order": 34, @@ -450,7 +466,7 @@ "prevSize": 32, "code": 109, "name": "icon-menu", - "tempChar": "" + "tempChar": "" }, { "order": 50, @@ -458,7 +474,7 @@ "prevSize": 32, "code": 243, "name": "icon-move", - "tempChar": "" + "tempChar": "" }, { "order": 51, @@ -466,7 +482,7 @@ "prevSize": 32, "code": 121, "name": "icon-new-window", - "tempChar": "" + "tempChar": "" }, { "order": 52, @@ -474,7 +490,7 @@ "prevSize": 32, "code": 111, "name": "icon-object", - "tempChar": "" + "tempChar": "" }, { "order": 73, @@ -482,7 +498,7 @@ "prevSize": 32, "code": 63, "name": "icon-object-unknown", - "tempChar": "" + "tempChar": "" }, { "order": 53, @@ -490,7 +506,7 @@ "prevSize": 32, "code": 86, "name": "icon-packet", - "tempChar": "" + "tempChar": "" }, { "order": 54, @@ -498,7 +514,7 @@ "prevSize": 32, "code": 234, "name": "icon-page", - "tempChar": "" + "tempChar": "" }, { "order": 55, @@ -506,7 +522,7 @@ "prevSize": 32, "code": 241, "name": "icon-pause", - "tempChar": "" + "tempChar": "" }, { "order": 56, @@ -514,7 +530,7 @@ "prevSize": 32, "code": 112, "name": "icon-pencil", - "tempChar": "" + "tempChar": "" }, { "order": 65, @@ -522,7 +538,7 @@ "prevSize": 32, "code": 79, "name": "icon-people", - "tempChar": "" + "tempChar": "" }, { "order": 57, @@ -530,7 +546,7 @@ "prevSize": 32, "code": 239, "name": "icon-play", - "tempChar": "" + "tempChar": "" }, { "order": 58, @@ -538,7 +554,7 @@ "prevSize": 32, "code": 233, "name": "icon-plot-resource", - "tempChar": "" + "tempChar": "" }, { "order": 59, @@ -546,7 +562,7 @@ "prevSize": 32, "code": 43, "name": "icon-plus", - "tempChar": "" + "tempChar": "" }, { "order": 60, @@ -554,7 +570,7 @@ "prevSize": 32, "code": 45, "name": "icon-minus", - "tempChar": "" + "tempChar": "" }, { "order": 61, @@ -562,7 +578,7 @@ "prevSize": 32, "code": 54, "name": "icon-sine", - "tempChar": "" + "tempChar": "" }, { "order": 62, @@ -570,7 +586,7 @@ "prevSize": 32, "code": 228, "name": "icon-T", - "tempChar": "" + "tempChar": "" }, { "order": 63, @@ -578,7 +594,7 @@ "prevSize": 32, "code": 116, "name": "icon-telemetry-panel", - "tempChar": "" + "tempChar": "" }, { "order": 64, @@ -586,7 +602,7 @@ "prevSize": 32, "code": 84, "name": "icon-telemetry", - "tempChar": "" + "tempChar": "" }, { "order": 18, @@ -594,7 +610,7 @@ "prevSize": 32, "code": 246, "name": "icon-thumbs-strip", - "tempChar": "" + "tempChar": "" }, { "order": 67, @@ -602,7 +618,7 @@ "prevSize": 32, "code": 83, "name": "icon-timeline", - "tempChar": "" + "tempChar": "" }, { "order": 68, @@ -610,7 +626,7 @@ "prevSize": 32, "code": 245, "name": "icon-timer", - "tempChar": "" + "tempChar": "" }, { "order": 69, @@ -618,7 +634,7 @@ "prevSize": 32, "code": 90, "name": "icon-trash", - "tempChar": "" + "tempChar": "" }, { "order": 70, @@ -626,7 +642,7 @@ "prevSize": 32, "code": 229, "name": "icon-two-parts-both", - "tempChar": "" + "tempChar": "" }, { "order": 71, @@ -634,7 +650,7 @@ "prevSize": 32, "code": 231, "name": "icon-two-parts-one-only", - "tempChar": "" + "tempChar": "" }, { "order": 72, @@ -642,7 +658,7 @@ "prevSize": 32, "code": 120, "name": "icon-x-heavy", - "tempChar": "" + "tempChar": "" }, { "order": 66, @@ -650,7 +666,7 @@ "prevSize": 32, "code": 58946, "name": "icon-x", - "tempChar": "" + "tempChar": "" } ], "id": 2, @@ -665,6 +681,58 @@ "height": 1024, "prevSize": 32, "icons": [ + { + "id": 87, + "paths": [ + "M512 1024c106 0 192-86 192-192h-384c0 106 86 192 192 192z", + "M896 448v-64c0-212-172-384-384-384s-384 172-384 384v64c0 70.6-57.4 128-128 128v128h1024v-128c-70.6 0-128-57.4-128-128z" + ], + "attrs": [ + { + "fill": "rgb(6, 161, 75)" + }, + { + "fill": "rgb(6, 161, 75)" + } + ], + "isMulticolor": false, + "grid": 0, + "tags": [ + "icon-bell" + ], + "colorPermutations": { + "125525525516161751": [ + 1, + 1 + ] + } + }, + { + "id": 86, + "paths": [ + "M1024 0h-1024c0 282.8 229.2 512 512 512s512-229.2 512-512zM512 384c-102.6 0-199-40-271.6-112.4-41.2-41.2-72-90.2-90.8-143.6h724.6c-18.8 53.4-49.6 102.4-90.8 143.6-72.4 72.4-168.8 112.4-271.4 112.4z", + "M512 512c-282.8 0-512 229.2-512 512h1024c0-282.8-229.2-512-512-512z" + ], + "attrs": [ + { + "fill": "rgb(6, 161, 75)" + }, + { + "fill": "rgb(6, 161, 75)" + } + ], + "isMulticolor": false, + "grid": 0, + "tags": [ + "icon-hourglass" + ], + "colorPermutations": { + "125525525516161751": [ + 1, + 1 + ] + } + }, { "id": 85, "paths": [ @@ -698,7 +766,8 @@ "icon-x-in-circle" ], "colorPermutations": { - "16161751": [] + "16161751": [], + "125525525516161751": [] } }, { @@ -899,6 +968,11 @@ 1, 1, 1 + ], + "125525525516161751": [ + 1, + 1, + 1 ] } }, @@ -1051,18 +1125,28 @@ { "id": 67, "paths": [ - "M832 512.4c0-0.2 0-0.2 0-0.4v-320c0-105.6-86.4-192-192-192h-448c-105.6 0-192 86.4-192 192v320c0 105.6 86.4 192 192 192h263.6l-197.2-445.6 573.6 254z", - "M766.8 659.8l193.8-20.4-576.6-255.4 255.4 576.6 20.4-193.8 257 257.2 107.2-107.2z" + "M894-2h-768c-70.4 0-128 57.6-128 128v768c0 70.4 57.6 128 128 128h400c-2.2-3.8-4-7.6-5.8-11.4l-255.2-576.8c-21.4-48.4-10.8-105 26.6-142.4 24.4-24.4 57.2-37.4 90.4-37.4 17.4 0 35.2 3.6 51.8 11l576.6 255.4c4 1.8 7.8 3.8 11.4 5.8v-400.2c0.2-70.4-57.4-128-127.8-128z", + "M958.6 637.4l-576.6-255.4 255.4 576.6 64.6-128.6 192 192 128-128-192-192z" ], "attrs": [ - {}, - {} + { + "fill": "rgb(0, 0, 0)" + }, + { + "fill": "rgb(0, 0, 0)" + } ], "isMulticolor": false, "grid": 0, "tags": [ "icon-box-with-arrow-cursor" - ] + ], + "colorPermutations": { + "125525525516161751": [ + 0, + 0 + ] + } }, { "id": 66, @@ -1338,6 +1422,9 @@ "colorPermutations": { "16161751": [ 0 + ], + "125525525516161751": [ + 0 ] } }, @@ -14853,6 +14940,5 @@ "gridSize": 16, "showLiga": false }, - "uid": -1, - "time": 1441993324496 + "uid": -1 } \ No newline at end of file diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot index 95887455fe74465bcec2c835663ff125999ddb60..a721dd33847aae41a6a485ab0485f1fe65040ab4 100755 GIT binary patch delta 682 zcmXw0&rcIk5T5sTyTxGJ-Tt6LO6#_;+nT1D(zi{3kgXE1Zb*B=9|yG&q#%_d1ko5- zVxk8)KsFi^;?au-V(gJbHk^znV~F7oAdQ%)Cq0Pm`WE%@GBe*dGvCa-4;S|@bNfkv zOmdx5*p0n|+`78Hbo|pV02HEcaH2F<1ppoZU#GTZV*1`q_lv_}8kYgOAC$*SW6q~% zo&d=Elvm0WaGGooAWrL{t6Z61ywJi5G*)T9OVcwqN^7piqX3ELl;5nB7OOA@cL7eF zr}4?#rONn;$nMvx6rcj=Rdr@=9vDhN(r=W}qt-Zehd>1faK=y6=Qvh()p;X>hY@ew z$LAbF9fKV{!^HWTleraMvYOTo(`0ra4BfP!807+jzpY11A(@es>;URXw*?(x6cjR2 z%-8M92D38rumMEV2wKA!Tf8UaJ>Bl=aAB3<7>(o_+g8rhO=d?Ub{@lFoa-utygmnK zVFsZ!qBWMS#`ZEzLQs1z9YCMYV&bQ;l(oNg2gMBO+b zW>PrD!fz<9Y)wsVtrVLuvYHL2+<4cWiYTiiHpU*YjA{FJUQ_Q?BKdecA5nVs|AqG9 zFo5w+N?f7#-waOZ1aPDkBGOYJVyjWvPUPoe0g*%{f}t?m)T>3L_fM`A3#*g;8e!?K zYPDFH#j0u}Hlq?v*EM2%mtKZ)2YVaWJpDhQm9Gv4sEt delta 423 zcmaD7c_Ezbf;Iz#g7!oyz`(#Dz`(#10i-$7 zb1Kswf4kQSsNsMKVnCZ@3aALnIYP`d+^H_HGDupeL%WnfSj0rFKca!V?l*ja>u zd<&p?0Xg}}i8arQqZk-8I)L)4auX{G7?K#u85lH8fP96##N1Q~`73YZfC3>v4XX_G43je$o4FN$Ocw?R237`^$=?{QnK_>EPBvq5pIp!6#O^932vo~B`683U z$7{Rbg{Rb7qG^ z|9=ktg@yi%9LJdK91s27|6i1mF`MxKBUtp`0slhAegCG2{{OrG(7*rLn|~?(W|>^5 zt}{7QVvaH+&{<3j3}{1t`G4a7p5z8;qX3L&KagWb+3NHAbMy$r4)X qlijtZ$;R - + @@ -85,6 +85,8 @@ + + \ No newline at end of file diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf index 8f0f1d96108c2bb7c738154e5049a7a1c1e23b29..5bc0ca5290beac172e9234d7a030846d4b13f7c1 100755 GIT binary patch delta 664 zcmXw0&rcIk5T5sT`@>+%Zhuf{O6#_Cw>6}i!fQ<-xK#qy4QWr6cn}&vN~N+0K}?KY zqLBj}svC`oG4bNX0|)EDghU#S9t|=60j7xuy?GJa^)2e*WoEu_X1q711 z=U)IQK;QU6X;lRP4gk+mYhPHpd&BwiXp+WdfatyQd}+@1^z0UZ^p*0dG6if+)&~%y z^)OJbu5DblvpkJu+HZPk`Fg4DcvJ+4Kd1a|wX~ta9NYmoeTl}WZk4L@y`jVJ*C;>* z&>MAmbqyFw!Jy~y`v+Yy>P>(Q7O?6QXvA`&6bHMIoq; zF*dmFfa^@3!|%W{V`UVQZSNb|rq*N*6k_HvR*bU)`GCu9u^N~`s7{pjrqSNtq)7-G ze&L9%(FKeq3rrKbpzrS_o**7dj$wkrqC}?=oXF-x5pURuy~1z;M_Bj`h3&mcWpBIC zfvKHzFyX|9&O|7+Gi74zG0QYf-^}Z1nN%nji{(P8jP}3Kyc-74d&T%wYX8k(gMI)@ zGDQS>3PembD%+1d)`(XiVUb|SuXHrEfV9!Y?LvNMaa18J-Bnf#`4ue7CSo!&Q8Y~< z`g!qnAp7mhi<$1xpU}mcs_RU2v(c53~cKuh_`MTj&oDz^F6; delta 406 zcmdlIu^?=MV*RQ2#~BzHWq{ZwJ+Ziefq_AQfq^LkNOPp;RHi-tcCQo2PhenBsmVx9 zOkwvw&db1{b_XbLmH`xCKfof&z@RPyouKs_3g@O41 zgAjux&_D}DLqQWYWkn@6Q9%(gV?}0Gc5_u>b4GJ!heH2<4*rFO{)`;QnCu)6{oVgx zl#wx;@c<)O^xpyhLdJdnrilLkyZ_L?|Jj?p6o0c!KB%TMd8zmuWk#U0m>3w&%y{@Q zp5Nvx12+p$fPvwX#6dS0J()wpoH1mxgN7O-Q03$dP4&ssHK)nO@m~@U5(pERCnzA8 YBsfd(mf!~=JD?tri6NW)w4N~n04y+TfdBvi diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff index d5bc74071ceb1fb9c17b2bc85141299efb8aa372..68386425cca8521ea1d4c29b671055f69ab4db51 100755 GIT binary patch delta 737 zcmXw1&rcIU6n-$8{%zt-^crvx_Upl`#JmhD!~+I5T$(b=}`lv&FD(k37oG z=2p=7%u^&z*D(gmw{x@O$e}TL%i!Ptb-ggRu!ud}+&C&Wg;1D+I9R}HJRyUY#sm9- zV0g%a9#lcqG?lDVN=>1;-FdFn-e#w9&dOX!P$G|0mdWQyC<)7!;N4Ms~bU)VwS9btd8G|D)>zROkEoat)%K-7OR z6uRh-4(R_6;)MYPFvjHWYZy;zut5iaB@$I7yb7W+H?-{_E!Lo0QUkI|Aw6Hy3mKvh zO%*fg($tWq^4M#*e$$@#@$JQp=Al2(#4}g;GPs0YA4lV| z5+m92Lq#UktQngj#dxPQ7<-}TXYVv02(mCOycavgC2>pq?d)-$cNUx<@hJPgS-1;! OmZ$!CUFFx^pU6Kk)V8t! delta 460 zcmZpOd=n;C?(gQtz{mgu+Bpo|U|NBJX>uWx*hC%qdK(4?Mw`p0-XBj-EG}SRU|IrH zzyZYq={c2YK(RFp3@SAs{P^3w&WzN=6b1%$4WJq`5N7v3&YJ-g1d1g9`6?jHet<g@{@t;G_C;EtODVh=SIa*xrr4(i!~d70t#T9#894>n41a| zTL9DuRLHnW{>t09g8bqVpdWlD{^{lhDRg0QU|?lnnLLTnnwjGn@8nC2?vtgNoY-BZ z1R0na7=a$NncTp{xp^&9rd$LA!~X*;49o`@gcu}&23jy03Yw@XD=M*x3W|ssD>AdP zo2v?&Gnz9y6#D;j@GmU%XXH4>WaoJ3@BaUyjEvcg2N=Pk{|@*UGVc2~MfCsQ{fGYj z&)z&u@i)t4UUi+xAI0Y=gF=~!f#J-IhacnlZN4&avj7Dc7%oX1bc4~8Lp018LpJwl ys4)UnPTr!aKKZfcG}$=*O9DayVFL361q71>X9?aC{2*ip)B`dxWb-VoXN&;NRChH1 diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index f3e1c82702..3bea644daa 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -70,7 +70,7 @@ } &:hover { .label { - max-width: 150px; + max-width: 450px; width: auto; } .count { diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 3f7cc363b9..389cdf1490 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -2437,7 +2437,7 @@ label.checkbox.custom { opacity: 1; } /* line 72, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { - max-width: 150px; + max-width: 450px; width: auto; } /* line 76, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .count { @@ -4342,8 +4342,8 @@ span.req { /* line 128, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { - min-height: 300px; - height: 300px; } + min-height: 275px; + height: 275px; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 3ad64bc37f..54a9973a4e 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -2385,7 +2385,7 @@ label.checkbox.custom { opacity: 1; } /* line 72, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { - max-width: 150px; + max-width: 450px; width: auto; } /* line 76, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .count { @@ -4256,8 +4256,8 @@ span.req { /* line 128, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { - min-height: 300px; - height: 300px; } + min-height: 275px; + height: 275px; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ diff --git a/testing/dialogTest/res/dialog-launch.html b/testing/dialogTest/res/dialog-launch.html index 7c91fd8f1f..e3ad984087 100644 --- a/testing/dialogTest/res/dialog-launch.html +++ b/testing/dialogTest/res/dialog-launch.html @@ -1,6 +1,9 @@ - - Dialogs: - Known | - Unknown | - Error + + + + Dialogs: + Known | + Unknown | + Error + \ No newline at end of file From dbcad51325504479ae9f29c3b4b9db6a7bd7c6f3 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 7 Oct 2015 21:32:34 -0700 Subject: [PATCH 10/10] [Frontend] Tiny mod to dialog-launch.html open #159 open #170 --- testing/dialogTest/res/dialog-launch.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/testing/dialogTest/res/dialog-launch.html b/testing/dialogTest/res/dialog-launch.html index e3ad984087..1b117c2ebf 100644 --- a/testing/dialogTest/res/dialog-launch.html +++ b/testing/dialogTest/res/dialog-launch.html @@ -1,9 +1,9 @@ - Dialogs: Known | Unknown | Error + Dialogs \ No newline at end of file