From 7014808c1374e68999e82aa5708f3ffcd50ef751 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 2 Oct 2015 15:41:02 -0700 Subject: [PATCH 001/148] [Frontend] Style and display changes to status block open #159 open #170 Moved classes from _bottom-bar.scss into _layout.scss and new file _messages.scss; Removed _bottom-bar.scss; Revised display behavior of .status.block to show label on hover; --- platform/commonUI/general/res/sass/_main.scss | 2 +- .../_messages.scss} | 58 ++-- .../res/sass/user-environ/_layout.scss | 20 +- .../general/res/templates/indicator.html | 4 +- .../espresso/res/css/theme-espresso.css | 289 +++++++++--------- .../themes/snow/res/css/theme-snow.css | 289 +++++++++--------- 6 files changed, 338 insertions(+), 324 deletions(-) rename platform/commonUI/general/res/sass/{user-environ/_bottom-bar.scss => controls/_messages.scss} (53%) diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 80023f55ac..8241078c50 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -39,6 +39,7 @@ @import "controls/controls"; @import "controls/lists"; @import "controls/menus"; +@import "controls/messages"; @import "controls/time-controller"; @import "mobile/controls/menus"; @@ -62,7 +63,6 @@ @import "mobile/tree"; @import "user-environ/frame"; @import "user-environ/top-bar"; -@import "user-environ/bottom-bar"; @import "user-environ/tool-bar"; /********************************* VIEWS */ diff --git a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss b/platform/commonUI/general/res/sass/controls/_messages.scss similarity index 53% rename from platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss rename to platform/commonUI/general/res/sass/controls/_messages.scss index dd705b0000..ec83528fba 100644 --- a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -19,46 +19,17 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -.ue-bottom-bar { - background: $colorFooterBg; - color: lighten($colorBodyBg, 30%); - font-size: .7rem; - //line-height: $ueFooterH - 4px; - //line-height: $ueFooterH; // New status bar design - .status-holder { - //@include border-radius($basicCr * 1.75); // New status bar design - @include box-sizing(border-box); - //background: $colorFooterBg; - //border-bottom: 1px solid lighten($colorBodyBg, 10%); // New status bar design - @include absPosDefault($interiorMargin); - @include ellipsize(); - line-height: $ueFooterH - ($interiorMargin * 2); - right: 120px; - text-transform: uppercase; - } - .app-logo { - @include box-sizing(border-box); - @include absPosDefault($interiorMargin); - left: auto; - cursor: pointer; - //font-size: 0.8em; - //line-height: $ueFooterH - 10px; - //padding-top: 1px; - //text-transform: uppercase; - &.logo-openmctweb { - background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center; - } - } -} .status.block { - //display: inline-block; - display: inline; // New status bar design. Inline to support ellipsis overflow - margin-right: $interiorMarginLg; + //@include test(); + cursor: help; + display: inline-block; + margin-right: $interiorMargin; + .status-indicator, + .label { + vertical-align: top; + } .status-indicator { - //@include border-radius($controlCr * 0.9); - //@include box-shadow(inset rgba(black, 0.5) 0 0 3px); - //@include text-shadow(rgba(black, 0.3) 0 0 2px); display: inline-block; margin-right: $interiorMarginSm; color: $colorKey; @@ -69,4 +40,17 @@ color: #ffaa00; } } + .label { + // Max-width silliness is necessary for width transition + @include trans-prop-nice(max-width, .25s); + display: inline-block; + overflow: hidden; + max-width: 0px; + } + &:hover { + .label { + max-width: 150px; + width: auto; + } + } } \ 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 4661c47214..6a11e22eb0 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -125,19 +125,35 @@ } } + // from _bottom-bar.scss .ue-bottom-bar { - //@include absPosDefault($bodyMargin); @include absPosDefault(0);// New status bar design top: auto; height: $ueFooterH; + line-height: $ueFooterH - ($interiorMargin * 2); + background: $colorFooterBg; + color: lighten($colorBodyBg, 30%); + font-size: .7rem; + .status-holder { - //right: $ueAppLogoW + $bodyMargin; New status bar design + @include box-sizing(border-box); + @include absPosDefault($interiorMargin); + @include ellipsize(); + //line-height: $ueFooterH - ($interiorMargin * 2); + right: 120px; + text-transform: uppercase; z-index: 1; } .app-logo { + @include box-sizing(border-box); + @include absPosDefault($interiorMargin); + cursor: pointer; left: auto; width: $ueAppLogoW; z-index: 2; + &.logo-openmctweb { + background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center; + } } } } diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html index 34ea2fe9c8..963d35ec14 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -20,7 +20,7 @@ at runtime from the About dialog for additional information. -->
@@ -28,7 +28,7 @@ ng-class='ngModel.getGlyphClass()'> {{ngModel.getGlyph()}} - {{ngModel.getText()}} diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 6eb39c0b0a..16cf89a2ea 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; } @@ -2283,6 +2283,69 @@ label.checkbox.custom { right: 0; width: auto; } +/***************************************************************************** + * 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. + *****************************************************************************/ +/* line 23, ../../../../general/res/sass/controls/_messages.scss */ +.status.block { + cursor: help; + display: inline-block; + margin-right: 5px; } + /* line 29, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator, + .status.block .label { + vertical-align: top; } + /* line 34, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator { + display: inline-block; + margin-right: 3px; + color: #0099cc; } + /* line 38, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator.ok { + color: #009900; } + /* line 41, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator.caution { + color: #ffaa00; } + /* line 45, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .label { + -moz-transition-property: max-width; + -o-transition-property: max-width; + -webkit-transition-property: max-width; + transition-property: max-width; + -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; + display: inline-block; + overflow: hidden; + max-width: 0px; } + /* line 54, ../../../../general/res/sass/controls/_messages.scss */ + .status.block:hover .label { + max-width: 150px; + width: auto; } + /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { position: relative; @@ -3106,7 +3169,7 @@ span.req { /* line 123, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .edit-area .work-area { top: 40px; } -/* line 128, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 129, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar { overflow: hidden; position: absolute; @@ -3117,21 +3180,56 @@ span.req { width: auto; height: auto; top: auto; - height: 25px; } - /* line 133, ../../../../general/res/sass/user-environ/_layout.scss */ + height: 25px; + line-height: 15px; + background: #000; + color: gray; + font-size: .7rem; } + /* line 138, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .status-holder { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + position: absolute; + top: 5px; + right: 5px; + bottom: 5px; + left: 5px; + width: auto; + height: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + right: 120px; + text-transform: uppercase; z-index: 1; } - /* line 137, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 147, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .app-logo { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + position: absolute; + top: 5px; + right: 5px; + bottom: 5px; + left: 5px; + width: auto; + height: auto; + cursor: pointer; left: auto; width: 105px; z-index: 2; } + /* line 154, ../../../../general/res/sass/user-environ/_layout.scss */ + .user-environ .ue-bottom-bar .app-logo.logo-openmctweb { + background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; } -/* line 145, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 161, ../../../../general/res/sass/user-environ/_layout.scss */ .cols { overflow: hidden; *zoom: 1; } - /* line 147, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 163, ../../../../general/res/sass/user-environ/_layout.scss */ .cols .col { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -3142,114 +3240,114 @@ span.req { margin-left: 1.5%; padding-left: 5px; position: relative; } - /* line 155, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 171, ../../../../general/res/sass/user-environ/_layout.scss */ .cols .col:first-child { margin-left: 0; padding-left: 0; } - /* line 162, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 178, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-2 .col-1 { min-width: 250px; width: 48.5%; } - /* line 168, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 184, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-2-ff .col-100px { width: 100px; } - /* line 175, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 191, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-6 .col-1 { min-width: 83.33333px; width: 15.16667%; } - /* line 181, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 197, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-16 .col-1 { min-width: 31.25px; width: 4.75%; } - /* line 184, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 200, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-16 .col-2 { min-width: 62.5px; width: 11%; } - /* line 187, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 203, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-16 .col-7 { min-width: 218.75px; width: 42.25%; } - /* line 193, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 209, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-32 .col-2 { min-width: 31.25px; width: 4.75%; } - /* line 196, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 212, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-32 .col-15 { min-width: 234.375px; width: 45.375%; } - /* line 200, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 216, ../../../../general/res/sass/user-environ/_layout.scss */ .cols .l-row { overflow: hidden; *zoom: 1; padding: 5px 0; } -/* line 208, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 224, ../../../../general/res/sass/user-environ/_layout.scss */ .browse-mode .split-layout .split-pane-component.pane.left { min-width: 150px; max-width: 800px; width: 25%; } -/* line 218, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 234, ../../../../general/res/sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right { width: 15%; } - /* line 220, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom { min-height: 50px; height: 30%; } -/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 246, ../../../../general/res/sass/user-environ/_layout.scss */ .pane { position: absolute; } - /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 249, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder { bottom: auto; top: 0; height: 24px; } - /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 252, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder .wrapper.menu-element { position: absolute; bottom: 5px; } - /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 257, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .search-holder { top: 34px; } - /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 260, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { overflow: auto; top: 64px; } - /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 267, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area, .pane.items .object-browse-bar .right.abs, .pane.items .object-browse-bar .s-menu span.right.l-click-area, .s-menu .pane.items .object-browse-bar span.right.l-click-area { top: auto; } - /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.items .object-holder { top: 34px; } - /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 282, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .object-holder { overflow: auto; } -/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 290, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane { margin-top: 5px; } - /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 300, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 303, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 307, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 309, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 318, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .s-btn, .object-browse-bar .s-menu, .top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-menu, @@ -3261,12 +3359,12 @@ span.req { line-height: 25px; vertical-align: top; } -/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 331, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } -/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 336, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar { overflow: visible; position: absolute; @@ -3282,39 +3380,28 @@ span.req { height: 24px; line-height: 24px; white-space: nowrap; } - /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left { padding-right: 20px; } - /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 346, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left .l-back { display: inline-block; float: left; margin-right: 10px; } -/*.object-holder { - .s-btn { - //background: red !important; - $h: 16px; - height: $h; - line-height: $h; - > span { - font-size: 0.7rem; - } - } -}*/ -/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 354, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex { display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; } - /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 357, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex .left { flex: 1 1 0; -webkit-flex: 1 1 0; padding-right: 10px; } -/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 364, ../../../../general/res/sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -4411,86 +4498,6 @@ ul.tree { bottom: auto; left: auto; } -/***************************************************************************** - * 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. - *****************************************************************************/ -/* line 22, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ -.ue-bottom-bar { - background: #000; - color: gray; - font-size: .7rem; } - /* line 28, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .ue-bottom-bar .status-holder { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - overflow: hidden; - position: absolute; - top: 5px; - right: 5px; - bottom: 5px; - left: 5px; - width: auto; - height: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 15px; - right: 120px; - text-transform: uppercase; } - /* line 39, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .ue-bottom-bar .app-logo { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - overflow: hidden; - position: absolute; - top: 5px; - right: 5px; - bottom: 5px; - left: 5px; - width: auto; - height: auto; - left: auto; - cursor: pointer; } - /* line 48, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .ue-bottom-bar .app-logo.logo-openmctweb { - background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; } - -/* line 54, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ -.status.block { - display: inline; - margin-right: 10px; } - /* line 58, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .status.block .status-indicator { - display: inline-block; - margin-right: 3px; - color: #0099cc; } - /* line 65, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .status.block .status-indicator.ok { - color: #009900; } - /* line 68, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .status.block .status-indicator.caution { - color: #ffaa00; } - /***************************************************************************** * 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 3a819210eb..d9463b49ca 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; } @@ -2231,6 +2231,69 @@ label.checkbox.custom { right: 0; width: auto; } +/***************************************************************************** + * 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. + *****************************************************************************/ +/* line 23, ../../../../general/res/sass/controls/_messages.scss */ +.status.block { + cursor: help; + display: inline-block; + margin-right: 5px; } + /* line 29, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator, + .status.block .label { + vertical-align: top; } + /* line 34, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator { + display: inline-block; + margin-right: 3px; + color: #0099cc; } + /* line 38, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator.ok { + color: #009900; } + /* line 41, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator.caution { + color: #ffaa00; } + /* line 45, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .label { + -moz-transition-property: max-width; + -o-transition-property: max-width; + -webkit-transition-property: max-width; + transition-property: max-width; + -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; + display: inline-block; + overflow: hidden; + max-width: 0px; } + /* line 54, ../../../../general/res/sass/controls/_messages.scss */ + .status.block:hover .label { + max-width: 150px; + width: auto; } + /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { position: relative; @@ -3038,7 +3101,7 @@ span.req { /* line 123, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .edit-area .work-area { top: 40px; } -/* line 128, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 129, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar { overflow: hidden; position: absolute; @@ -3049,21 +3112,56 @@ span.req { width: auto; height: auto; top: auto; - height: 25px; } - /* line 133, ../../../../general/res/sass/user-environ/_layout.scss */ + height: 25px; + line-height: 15px; + background: #000; + color: white; + font-size: .7rem; } + /* line 138, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .status-holder { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + position: absolute; + top: 5px; + right: 5px; + bottom: 5px; + left: 5px; + width: auto; + height: auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + right: 120px; + text-transform: uppercase; z-index: 1; } - /* line 137, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 147, ../../../../general/res/sass/user-environ/_layout.scss */ .user-environ .ue-bottom-bar .app-logo { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + position: absolute; + top: 5px; + right: 5px; + bottom: 5px; + left: 5px; + width: auto; + height: auto; + cursor: pointer; left: auto; width: 105px; z-index: 2; } + /* line 154, ../../../../general/res/sass/user-environ/_layout.scss */ + .user-environ .ue-bottom-bar .app-logo.logo-openmctweb { + background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; } -/* line 145, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 161, ../../../../general/res/sass/user-environ/_layout.scss */ .cols { overflow: hidden; *zoom: 1; } - /* line 147, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 163, ../../../../general/res/sass/user-environ/_layout.scss */ .cols .col { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -3074,114 +3172,114 @@ span.req { margin-left: 1.5%; padding-left: 5px; position: relative; } - /* line 155, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 171, ../../../../general/res/sass/user-environ/_layout.scss */ .cols .col:first-child { margin-left: 0; padding-left: 0; } - /* line 162, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 178, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-2 .col-1 { min-width: 250px; width: 48.5%; } - /* line 168, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 184, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-2-ff .col-100px { width: 100px; } - /* line 175, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 191, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-6 .col-1 { min-width: 83.33333px; width: 15.16667%; } - /* line 181, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 197, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-16 .col-1 { min-width: 31.25px; width: 4.75%; } - /* line 184, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 200, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-16 .col-2 { min-width: 62.5px; width: 11%; } - /* line 187, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 203, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-16 .col-7 { min-width: 218.75px; width: 42.25%; } - /* line 193, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 209, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-32 .col-2 { min-width: 31.25px; width: 4.75%; } - /* line 196, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 212, ../../../../general/res/sass/user-environ/_layout.scss */ .cols.cols-32 .col-15 { min-width: 234.375px; width: 45.375%; } - /* line 200, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 216, ../../../../general/res/sass/user-environ/_layout.scss */ .cols .l-row { overflow: hidden; *zoom: 1; padding: 5px 0; } -/* line 208, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 224, ../../../../general/res/sass/user-environ/_layout.scss */ .browse-mode .split-layout .split-pane-component.pane.left { min-width: 150px; max-width: 800px; width: 25%; } -/* line 218, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 234, ../../../../general/res/sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right { width: 15%; } - /* line 220, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom { min-height: 50px; height: 30%; } -/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 246, ../../../../general/res/sass/user-environ/_layout.scss */ .pane { position: absolute; } - /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 249, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder { bottom: auto; top: 0; height: 24px; } - /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 252, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder .wrapper.menu-element { position: absolute; bottom: 5px; } - /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 257, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .search-holder { top: 34px; } - /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 260, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { overflow: auto; top: 64px; } - /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 267, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area, .pane.items .object-browse-bar .right.abs, .pane.items .object-browse-bar .s-menu span.right.l-click-area, .s-menu .pane.items .object-browse-bar span.right.l-click-area { top: auto; } - /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.items .object-holder { top: 34px; } - /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 282, ../../../../general/res/sass/user-environ/_layout.scss */ .pane .object-holder { overflow: auto; } -/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 290, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane { margin-top: 5px; } - /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 300, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 303, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 307, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 309, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 318, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .s-btn, .object-browse-bar .s-menu, .top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-menu, @@ -3193,12 +3291,12 @@ span.req { line-height: 25px; vertical-align: top; } -/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 331, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } -/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 336, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar { overflow: visible; position: absolute; @@ -3214,39 +3312,28 @@ span.req { height: 24px; line-height: 24px; white-space: nowrap; } - /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left { padding-right: 20px; } - /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 346, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left .l-back { display: inline-block; float: left; margin-right: 10px; } -/*.object-holder { - .s-btn { - //background: red !important; - $h: 16px; - height: $h; - line-height: $h; - > span { - font-size: 0.7rem; - } - } -}*/ -/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 354, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex { display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; } - /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 357, ../../../../general/res/sass/user-environ/_layout.scss */ .l-flex .left { flex: 1 1 0; -webkit-flex: 1 1 0; padding-right: 10px; } -/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 364, ../../../../general/res/sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -4324,86 +4411,6 @@ ul.tree { bottom: auto; left: auto; } -/***************************************************************************** - * 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. - *****************************************************************************/ -/* line 22, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ -.ue-bottom-bar { - background: #000; - color: white; - font-size: .7rem; } - /* line 28, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .ue-bottom-bar .status-holder { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - overflow: hidden; - position: absolute; - top: 5px; - right: 5px; - bottom: 5px; - left: 5px; - width: auto; - height: auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 15px; - right: 120px; - text-transform: uppercase; } - /* line 39, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .ue-bottom-bar .app-logo { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - overflow: hidden; - position: absolute; - top: 5px; - right: 5px; - bottom: 5px; - left: 5px; - width: auto; - height: auto; - left: auto; - cursor: pointer; } - /* line 48, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .ue-bottom-bar .app-logo.logo-openmctweb { - background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; } - -/* line 54, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ -.status.block { - display: inline; - margin-right: 10px; } - /* line 58, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .status.block .status-indicator { - display: inline-block; - margin-right: 3px; - color: #0099cc; } - /* line 65, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .status.block .status-indicator.ok { - color: #009900; } - /* line 68, ../../../../general/res/sass/user-environ/_bottom-bar.scss */ - .status.block .status-indicator.caution { - color: #ffaa00; } - /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space From 926aed72c309dad09dccd31ea1c6c189fc8b1787 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 2 Oct 2015 17:42:31 -0700 Subject: [PATCH 002/148] [Frontend] Style and display changes to status block open #159 open #170 Refined structure in status block markup and css; Added status-related color constants to theme scss files; --- .../general/res/sass/controls/_messages.scss | 32 ++++++----- .../general/res/templates/indicator.html | 26 ++++----- .../espresso/res/css/theme-espresso.css | 53 +++++++++++++------ .../themes/espresso/res/sass/_constants.scss | 6 +++ .../themes/snow/res/css/theme-snow.css | 53 +++++++++++++------ .../themes/snow/res/sass/_constants.scss | 6 +++ 6 files changed, 117 insertions(+), 59 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index ec83528fba..a6aa243535 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -21,36 +21,44 @@ *****************************************************************************/ .status.block { - //@include test(); - cursor: help; + color: $colorStatusDefault; + cursor: default; display: inline-block; margin-right: $interiorMargin; .status-indicator, - .label { + .label, + .count { + //@include test(#00ff00); + display: inline-block; vertical-align: top; } .status-indicator { - display: inline-block; margin-right: $interiorMarginSm; - color: $colorKey; - &.ok { - color: #009900; - } - &.caution { - color: #ffaa00; - } + } + &.ok .status-indicator { + color: $colorStatusOk; + } + &.caution .status-indicator { + color: $colorStatusCaution; } .label { // Max-width silliness is necessary for width transition @include trans-prop-nice(max-width, .25s); - display: inline-block; overflow: hidden; max-width: 0px; } + .count { + @include trans-prop-nice(opacity, .25s); + font-weight: bold; + opacity: 1; + } &:hover { .label { max-width: 150px; width: auto; } + .count { + opacity: 0; + } } } \ 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 963d35ec14..40733d875a 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -19,20 +19,20 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> +
- - {{ngModel.getGlyph()}} - - - {{ngModel.getText()}} - - + + {{ngModel.getGlyph()}} + + {{ngModel.getText()}} + + + G diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 16cf89a2ea..316c6a5877 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -2306,25 +2306,26 @@ label.checkbox.custom { *****************************************************************************/ /* line 23, ../../../../general/res/sass/controls/_messages.scss */ .status.block { - cursor: help; + color: #ccc; + cursor: default; display: inline-block; margin-right: 5px; } - /* line 29, ../../../../general/res/sass/controls/_messages.scss */ + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .status.block .status-indicator, - .status.block .label { - vertical-align: top; } - /* line 34, ../../../../general/res/sass/controls/_messages.scss */ - .status.block .status-indicator { + .status.block .label, + .status.block .count { display: inline-block; - margin-right: 3px; - color: #0099cc; } - /* line 38, ../../../../general/res/sass/controls/_messages.scss */ - .status.block .status-indicator.ok { - color: #009900; } - /* line 41, ../../../../general/res/sass/controls/_messages.scss */ - .status.block .status-indicator.caution { - color: #ffaa00; } - /* line 45, ../../../../general/res/sass/controls/_messages.scss */ + vertical-align: top; } + /* line 35, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator { + margin-right: 3px; } + /* line 38, ../../../../general/res/sass/controls/_messages.scss */ + .status.block.ok .status-indicator { + color: #6cb773; } + /* line 41, ../../../../general/res/sass/controls/_messages.scss */ + .status.block.caution .status-indicator { + color: #ffa864; } + /* line 44, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; -o-transition-property: max-width; @@ -2338,13 +2339,31 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - display: inline-block; overflow: hidden; max-width: 0px; } - /* line 54, ../../../../general/res/sass/controls/_messages.scss */ + /* line 50, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .count { + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -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; + font-weight: bold; + opacity: 1; } + /* line 56, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { max-width: 150px; width: auto; } + /* line 60, ../../../../general/res/sass/controls/_messages.scss */ + .status.block:hover .count { + opacity: 0; } /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index cbc9a67e0a..b80dbb21dd 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -58,6 +58,12 @@ $colorInputFg: pullForward($colorBodyFg, 20%); $colorFormText: rgba(#fff, 0.5); $colorInputIcon: pushBack($colorBodyFg, 15%); +// Status colors, mainly used for messaging and item ancillary symbols +$colorStatusDefault: #ccc; +$colorStatusOk: #6cb773; +$colorStatusCaution: #ffa864; +$colorStatusAlert: $colorAlert; + // Selects $colorSelectBg: $colorBtnBg; $colorSelectFg: $colorBtnFg; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index d9463b49ca..0107eef7e9 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -2254,25 +2254,26 @@ label.checkbox.custom { *****************************************************************************/ /* line 23, ../../../../general/res/sass/controls/_messages.scss */ .status.block { - cursor: help; + color: #ccc; + cursor: default; display: inline-block; margin-right: 5px; } - /* line 29, ../../../../general/res/sass/controls/_messages.scss */ + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .status.block .status-indicator, - .status.block .label { - vertical-align: top; } - /* line 34, ../../../../general/res/sass/controls/_messages.scss */ - .status.block .status-indicator { + .status.block .label, + .status.block .count { display: inline-block; - margin-right: 3px; - color: #0099cc; } - /* line 38, ../../../../general/res/sass/controls/_messages.scss */ - .status.block .status-indicator.ok { - color: #009900; } - /* line 41, ../../../../general/res/sass/controls/_messages.scss */ - .status.block .status-indicator.caution { - color: #ffaa00; } - /* line 45, ../../../../general/res/sass/controls/_messages.scss */ + vertical-align: top; } + /* line 35, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .status-indicator { + margin-right: 3px; } + /* line 38, ../../../../general/res/sass/controls/_messages.scss */ + .status.block.ok .status-indicator { + color: #090; } + /* line 41, ../../../../general/res/sass/controls/_messages.scss */ + .status.block.caution .status-indicator { + color: #fa0; } + /* line 44, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; -o-transition-property: max-width; @@ -2286,13 +2287,31 @@ label.checkbox.custom { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - display: inline-block; overflow: hidden; max-width: 0px; } - /* line 54, ../../../../general/res/sass/controls/_messages.scss */ + /* line 50, ../../../../general/res/sass/controls/_messages.scss */ + .status.block .count { + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -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; + font-weight: bold; + opacity: 1; } + /* line 56, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { max-width: 150px; width: auto; } + /* line 60, ../../../../general/res/sass/controls/_messages.scss */ + .status.block:hover .count { + opacity: 0; } /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 61d76cebb8..94113c25a8 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -60,6 +60,12 @@ $colorInputIcon: pushBack($colorBodyFg, 25%); $colorSelectBg: #ddd; $colorSelectFg: $colorBodyFg; +// Status colors, mainly used for messaging and item ancillary symbols +$colorStatusDefault: #ccc; +$colorStatusOk: #090; +$colorStatusCaution: #fa0; +$colorStatusAlert: $colorAlert; + // Limits and staleness colors// $colorTelemFresh: pullForward($colorBodyFg, 20%); $colorTelemStale: pushBack($colorBodyFg, 20%); From d606ee421fec04346263e1e8175d2a70e5686c97 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 2 Oct 2015 18:37:01 -0700 Subject: [PATCH 003/148] [Frontend] New template for message-banner open #159 open #170 Added markup and beginning of styling; Temporarily added mct-include elem to bottombar.html; --- platform/commonUI/general/bundle.json | 4 +++ .../commonUI/general/res/sass/_messages.scss | 23 ++++++++++++- .../general/res/templates/bottombar.html | 1 + .../general/res/templates/message-banner.html | 9 +++++ .../espresso/res/css/theme-espresso.css | 33 ++++++++++++++++++- .../themes/snow/res/css/theme-snow.css | 33 ++++++++++++++++++- 6 files changed, 100 insertions(+), 3 deletions(-) create mode 100644 platform/commonUI/general/res/templates/message-banner.html diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index b55ce03b32..d71bb3a393 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -39,6 +39,10 @@ "key": "indicator", "templateUrl": "templates/indicator.html" }, + { + "key": "message-banner", + "templateUrl": "templates/message-banner.html" + }, { "key": "time-controller", "templateUrl": "templates/controls/time-controller.html" diff --git a/platform/commonUI/general/res/sass/_messages.scss b/platform/commonUI/general/res/sass/_messages.scss index db4de4c946..80c9b21d97 100644 --- a/platform/commonUI/general/res/sass/_messages.scss +++ b/platform/commonUI/general/res/sass/_messages.scss @@ -1,4 +1,4 @@ -/* Styles for messages */ +/* Styles for messages and message banners */ .message { &.block { @@ -9,4 +9,25 @@ 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/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html index 4da2686fa1..f0d3799542 100644 --- a/platform/commonUI/general/res/templates/bottombar.html +++ b/platform/commonUI/general/res/templates/bottombar.html @@ -26,5 +26,6 @@ key="indicator.template">
+
\ No newline at end of file diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html new file mode 100644 index 0000000000..c5386311c6 --- /dev/null +++ b/platform/commonUI/general/res/templates/message-banner.html @@ -0,0 +1,9 @@ +
+ + Objects not saved + + 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 316c6a5877..3fc212468c 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -1153,7 +1153,7 @@ mct-container { top: 0; left: 0; } -/* Styles for messages */ +/* Styles for messages and message banners */ /* line 4, ../../../../general/res/sass/_messages.scss */ .message.block { -moz-border-radius: 2px; @@ -1165,6 +1165,37 @@ mct-container { 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 diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 0107eef7e9..be2972e22e 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -1150,7 +1150,7 @@ mct-container { top: 0; left: 0; } -/* Styles for messages */ +/* Styles for messages and message banners */ /* line 4, ../../../../general/res/sass/_messages.scss */ .message.block { -moz-border-radius: 4px; @@ -1162,6 +1162,37 @@ mct-container { 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 From 471a25a625563c1325695679761f61b5a86fe242 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 6 Oct 2015 14:34:53 -0700 Subject: [PATCH 004/148] [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 005/148] 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 bf0014f1b90a2cf37b6a8305ce405a1b342c9f25 Mon Sep 17 00:00:00 2001 From: Henry Date: Tue, 6 Oct 2015 14:45:10 -0700 Subject: [PATCH 006/148] Temporary commit --- platform/commonUI/dialog/bundle.json | 14 ++ platform/commonUI/general/bundle.json | 5 + .../general/res/templates/message-banner.html | 4 +- .../src/controllers/BannerController.js | 31 ++++ platform/commonUI/notification/bundle.json | 18 +++ .../notification/src/NotificationService.js | 142 ++++++++++++++++++ 6 files changed, 212 insertions(+), 2 deletions(-) create mode 100644 platform/commonUI/general/src/controllers/BannerController.js create mode 100644 platform/commonUI/notification/bundle.json create mode 100644 platform/commonUI/notification/src/NotificationService.js 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/general/bundle.json b/platform/commonUI/general/bundle.json index d71bb3a393..3a52c92d03 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -96,6 +96,11 @@ "key": "SelectorController", "implementation": "controllers/SelectorController.js", "depends": [ "objectService", "$scope" ] + }, + { + "key": "BannerController", + "implementation": "controllers/BannerController.js", + "depends": ["$scope", "notificationService"] } ], "directives": [ diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html index c5386311c6..8d3a95e0cc 100644 --- a/platform/commonUI/general/res/templates/message-banner.html +++ b/platform/commonUI/general/res/templates/message-banner.html @@ -1,9 +1,9 @@
Objects not saved - + x
\ No newline at end of file diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js new file mode 100644 index 0000000000..1c6193e061 --- /dev/null +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -0,0 +1,31 @@ +/***************************************************************************** + * 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 BannerController($scope, notificationService){ + $scope.activeNotification = notificationService.active.Notification; + } + }); \ No newline at end of file diff --git a/platform/commonUI/notification/bundle.json b/platform/commonUI/notification/bundle.json new file mode 100644 index 0000000000..56087d9094 --- /dev/null +++ b/platform/commonUI/notification/bundle.json @@ -0,0 +1,18 @@ +{ + "extensions": { + "constants": [ + { + "key": "DEFAULT_AUTO_DISMISS", + "value": 2000 + } + ], + "services": [ + { + "key": "notificationService", + "implementation": "NotificationService.js", + "depends": [ "$log", "$timeout", "messageSeverity", + "DEFAULT_AUTO_DISMISS" ] + } + ] + } +} \ No newline at end of file diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js new file mode 100644 index 0000000000..07aea14da4 --- /dev/null +++ b/platform/commonUI/notification/src/NotificationService.js @@ -0,0 +1,142 @@ +/***************************************************************************** + * 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*/ + +/** + * This bundle implements the notification service, which can be used to + * show banner notifications to the user. + * @namespace platform/commonUI/dialog + */ +define( + [], + function () { + "use strict"; + /** + * The notification service is responsible for informing the user of + * events via the use of banner notifications. + * @memberof platform/commonUI/notification + * @constructor + */ + function NotificationService($log, $timeout, messageSeverity, DEFAULT_AUTO_DISMISS) { + //maintain an array of notifications. + //expose a method for adding notifications. + //expose a method for dismissing notifications. + //expose a method for minimizing notifications. + //expose a method for getting the 'current' notification. How + //this is determined could be a little nuanced. + //Allow for auto-dismissal of success messages + // + // + // + // Questions: + // 1) What happens when a newer, but lower priority + // message arrives (eg. success). Just show it? It will + // auto-dismissed, and the existing error message will be + // exposed. + // + + this.notifications = []; + this.$log = $log; + this.$timeout = $timeout; + this.messageSeverity = messageSeverity; + this.DEFAULT_AUTO_DISMISS = DEFAULT_AUTO_DISMISS; + + /** + * Exposes the current "active" notification. This is a + * notification that is of current highest importance that has + * not been dismissed. The deinition of what is of highest + * importance might be a little nuanced and require tweaking. + * For example, if an important error message is visible and a + * success message is triggered, it may be desirable to + * temporarily show the success message and then auto-dismiss it. + * @type {{notification: undefined}} + */ + this.active = { + notification: undefined + }; + } + /** + var model = { + title: string, + progress: number, + severity: MessageSeverity, + unknownProgress: boolean, + minimized: boolean, + autoDismiss: boolean | number, + actions: { + label: string, + action: function + } + } + */ + + /** + * Possibly refactor this out to a provider? + * @constructor + */ + function Notification (model) { + this.model = model; + } + + Notification.prototype.minimize = function () { + if (typeof setValue !== undefined){ + model.minimized = setValue; + } else { + return model.minimized; + } + }; + + /** + * model = { + * + * } + * @param model + */ + NotificationService.prototype.notify = function (model) { + var notification = new Notification(model); + this.notifications.push(notification); + this.setActiveNotification(notification); + }; + + + + NotificationService.prototype.setActiveNotification = function () { + //If there is a message active, time it out, and then chain a + // new message to appear. + if (this.active.timeout){ + this.active.timeout = this.active.timeout.then(function (){ + this.active.timeout = $timeout(function(){ + this.dismiss(this.active.notification); + }); + }); + } + }; + + NotificationService.prototype.dismiss = function (notification) { + var index = this.notifications.indexOf(notification); + if (index >= 0) { + this.notifications = this.notifications.splice(index, 1); + delete this.active.notification; + } + } + return NotificationService; + }); \ No newline at end of file From 30fd8c451e20826629600f0bf8b0b2e6a446e28e Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 6 Oct 2015 16:10:27 -0700 Subject: [PATCH 007/148] [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 008/148] [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 009/148] [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 010/148] [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 3af23b7bc527a478744f572720a9efce45bc509a Mon Sep 17 00:00:00 2001 From: Henry Date: Wed, 7 Oct 2015 14:30:19 -0700 Subject: [PATCH 011/148] Added test cases for notification service --- bundles.json | 1 + .../notification/src/MessageSeverity.js | 9 + .../notification/src/NotificationService.js | 164 +++++++++++++----- .../test/NotificationServiceSpec.js | 146 ++++++++++++++++ .../commonUI/notification/test/suite.json | 3 + 5 files changed, 280 insertions(+), 43 deletions(-) create mode 100644 platform/commonUI/notification/src/MessageSeverity.js create mode 100644 platform/commonUI/notification/test/NotificationServiceSpec.js create mode 100644 platform/commonUI/notification/test/suite.json diff --git a/bundles.json b/bundles.json index a0f7edd7a8..15a05f9334 100644 --- a/bundles.json +++ b/bundles.json @@ -26,6 +26,7 @@ "platform/policy", "platform/entanglement", "platform/search", + "platform/commonUI/notification", "example/imagery", "example/eventGenerator", diff --git a/platform/commonUI/notification/src/MessageSeverity.js b/platform/commonUI/notification/src/MessageSeverity.js new file mode 100644 index 0000000000..5f17b917fe --- /dev/null +++ b/platform/commonUI/notification/src/MessageSeverity.js @@ -0,0 +1,9 @@ +/** + * Created by akhenry on 10/7/15. + */ +define(function(){ + return { + SUCCESS: 0, + ERROR: 1 + } +}) \ No newline at end of file diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 07aea14da4..30e746cc42 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -27,8 +27,8 @@ * @namespace platform/commonUI/dialog */ define( - [], - function () { + ["./MessageSeverity"], + function (MessageSeverity) { "use strict"; /** * The notification service is responsible for informing the user of @@ -36,28 +36,9 @@ define( * @memberof platform/commonUI/notification * @constructor */ - function NotificationService($log, $timeout, messageSeverity, DEFAULT_AUTO_DISMISS) { - //maintain an array of notifications. - //expose a method for adding notifications. - //expose a method for dismissing notifications. - //expose a method for minimizing notifications. - //expose a method for getting the 'current' notification. How - //this is determined could be a little nuanced. - //Allow for auto-dismissal of success messages - // - // - // - // Questions: - // 1) What happens when a newer, but lower priority - // message arrives (eg. success). Just show it? It will - // auto-dismissed, and the existing error message will be - // exposed. - // - + function NotificationService($timeout, DEFAULT_AUTO_DISMISS) { this.notifications = []; - this.$log = $log; this.$timeout = $timeout; - this.messageSeverity = messageSeverity; this.DEFAULT_AUTO_DISMISS = DEFAULT_AUTO_DISMISS; /** @@ -71,7 +52,6 @@ define( * @type {{notification: undefined}} */ this.active = { - notification: undefined }; } /** @@ -97,14 +77,18 @@ define( this.model = model; } - Notification.prototype.minimize = function () { + Notification.prototype.minimize = function (setValue) { if (typeof setValue !== undefined){ - model.minimized = setValue; + this.model.minimized = setValue; } else { - return model.minimized; + return this.model.minimized; } }; + NotificationService.prototype.getActiveNotification = function (){ + return this.active.notification; + } + /** * model = { * @@ -112,31 +96,125 @@ define( * @param model */ NotificationService.prototype.notify = function (model) { - var notification = new Notification(model); + var notification = new Notification(model), + that=this; this.notifications.push(notification); - this.setActiveNotification(notification); - }; + /* + Check if there is already an active (ie. visible) notification + */ + if (!this.active.notification){ + setActiveNotification.call(this, notification); + } else if (!this.active.timeout){ + /* + If there is already an active notification, time it out. If it's + already got a timeout in progress (either because it has had + timeout forced because of a queue of messages, or it had an + autodismiss specified), leave it to run. - - NotificationService.prototype.setActiveNotification = function () { - //If there is a message active, time it out, and then chain a - // new message to appear. - if (this.active.timeout){ - this.active.timeout = this.active.timeout.then(function (){ - this.active.timeout = $timeout(function(){ - this.dismiss(this.active.notification); - }); + This notifcation has been added to queue and will be + serviced as soon as possible. + */ + this.active.timeout = this.$timeout(function () { + that.dismissOrMinimize(that.active.notification); }); } + }; - NotificationService.prototype.dismiss = function (notification) { - var index = this.notifications.indexOf(notification); - if (index >= 0) { - this.notifications = this.notifications.splice(index, 1); - delete this.active.notification; + function setActiveNotification (notification) { + var that = this; + this.active.notification = notification; + /* + If autoDismiss has been specified, setup a timeout to + dismiss the dialog. + + If there are other notifications pending in the queue, set this + one to auto-dismiss + */ + if (notification.model.autoDismiss + || selectNextNotification.call(this)) { + var timeout = isNaN(notification.model.autoDismiss) ? + this.DEFAULT_AUTO_DISMISS : notification.model.autoDismiss; + + this.active.timeout = this.$timeout(function () { + that.dismissOrMinimize(notification); + }, timeout); } } + + function selectNextNotification () { + /* + Loop through the notifications queue and find the first one that + has not already been minimized (manually or otherwise). + */ + for (var i=0; i< this.notifications.length; i++) { + var notification = this.notifications[i]; + + if (!notification.model.minimized + && notification!= this.activeNotification) { + + return notification; + } + } + }; + + /** + * Minimize a notification. The notification will still be available + * from the notification list. Typically notifications with a + * severity of SUCCESS should not be minimized, but rather + * dismissed. + * @see dismiss + * @see dismissOrMinimize + * @param notification + */ + NotificationService.prototype.minimize = function (notification) { + //Check this is a known notification + var index = this.notifications.indexOf(notification); + if (index >= 0) { + notification.minimize(true); + delete this.active.notification; + delete this.active.timeout; + setActiveNotification.call(this, selectNextNotification.call(this)); + } + } + + /** + * Completely remove a notification. This will dismiss it from the + * message banner and remove it from the list of notifications. + * Typically only notifications with a severity of SUCCESS should be + * dismissed. If you're not sure whether to dismiss or minimize a + * notification, use the dismissOrMinimize method. + * dismiss + * @see dismissOrMinimize + * @param notification The notification to dismiss + */ + NotificationService.prototype.dismiss = function (notification) { + //Check this is a known notification + var index = this.notifications.indexOf(notification); + if (index >= 0) { + this.notifications.splice(index, 1); + + delete this.active.notification; + delete this.active.timeout; + + setActiveNotification.call(this, selectNextNotification.call(this)); + } + } + + /** + * Depending on the severity of the notification will selectively + * dismiss or minimize where appropriate. + * @see dismiss + * @see minimize + * @param notification + */ + NotificationService.prototype.dismissOrMinimize = function (notification){ + if (notification.model.severity > MessageSeverity.SUCCESS){ + this.minimize(notification); + } else { + this.dismiss(notification); + } + }; return NotificationService; }); \ No newline at end of file diff --git a/platform/commonUI/notification/test/NotificationServiceSpec.js b/platform/commonUI/notification/test/NotificationServiceSpec.js new file mode 100644 index 0000000000..c7a5fee234 --- /dev/null +++ b/platform/commonUI/notification/test/NotificationServiceSpec.js @@ -0,0 +1,146 @@ +/***************************************************************************** + * 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,describe,it,expect,beforeEach,waitsFor,jasmine */ + +define( + ['../src/NotificationService','../src/MessageSeverity'], + function (NotificationService, MessageSeverity) { + "use strict"; + + describe("The notification service ", function () { + var notificationService, + mockTimeout, + mockAutoDismiss, + successModel = { + title: "Mock Success Notification", + severity: MessageSeverity.SUCCESS + }, + errorModel = { + title: "Mock Error Notification", + severity: MessageSeverity.ERROR + }; + + /** + * 1) Calling .notify results in a new notification being created + * with the provided model and set to the active notification + * + * 2) Calling .notify with autoDismiss results in a SUCCESS notification + * becoming dismissed after timeout has elapsed + * + * 3) Calling .notify with autoDismiss results in an ERROR notification + * being MINIMIZED after a timeout has elapsed + * + * 4) Calling .notify with an active success notification results in that + * notification being auto-dismissed, and the new notification becoming + * active. DONE + * + * 5) Calling .notify with an active error notification results in that + * notification being auto-minimized and the new notification becoming + * active. DONE + * + * 6) Calling .notify with an active error notification, AND a + * queued error notification results in the active notification + * being auto-dismissed, the next message in the queue becoming + * active, then auto-dismissed, and then the provided notification + * becoming active. + */ + + /** + var model = { + title: string, + progress: number, + severity: MessageSeverity, + unknownProgress: boolean, + minimized: boolean, + autoDismiss: boolean | number, + actions: { + label: string, + action: function + } + } + */ + + beforeEach(function(){ + mockTimeout = jasmine.createSpy("$timeout"); + mockAutoDismiss = 0; + notificationService = new NotificationService( + mockTimeout, mockAutoDismiss); + }); + + it("Calls the notification service with a new notification, making" + + " the notification active", function() { + var activeNotification; + notificationService.notify(successModel); + activeNotification = notificationService.getActiveNotification(); + expect(activeNotification.model).toBe(successModel); + }); + + describe(" called with multiple notifications", function(){ + it("auto-dismisses the previously active notification, making" + + " the new notification active", function() { + var activeNotification; + //First pre-load with a success message + notificationService.notify(successModel); + activeNotification = + notificationService.getActiveNotification(); + //Initially expect the active notification to be success + expect(activeNotification.model).toBe(successModel); + //Then notify of an error + notificationService.notify(errorModel); + //But it should be auto-dismissed and replaced with the + // error notification + mockTimeout.mostRecentCall.args[0](); + activeNotification = notificationService.getActiveNotification(); + expect(activeNotification.model).toBe(errorModel); + }); + it("auto-dismisses an active success notification, removing" + + " it completely", function() { + //First pre-load with a success message + notificationService.notify(successModel); + //Then notify of an error + notificationService.notify(errorModel); + expect(notificationService.notifications.length).toEqual(2); + mockTimeout.mostRecentCall.args[0](); + //Previous success message should be completely dismissed + expect(notificationService.notifications.length).toEqual(1); + }); + it("auto-minimizes an active error notification", function() { + var activeNotification; + //First pre-load with a success message + notificationService.notify(errorModel); + //Then notify of an error + notificationService.notify(successModel); + expect(notificationService.notifications.length).toEqual(2); + //Mock the auto-minimize + mockTimeout.mostRecentCall.args[0](); + //Previous error message should be minimized, not + // dismissed + expect(notificationService.notifications.length).toEqual(2); + activeNotification = + notificationService.getActiveNotification(); + expect(activeNotification.model).toBe(successModel); + expect(errorModel.minimized).toEqual(true); + + }); + }); + }); + }); \ No newline at end of file diff --git a/platform/commonUI/notification/test/suite.json b/platform/commonUI/notification/test/suite.json new file mode 100644 index 0000000000..08238b16c0 --- /dev/null +++ b/platform/commonUI/notification/test/suite.json @@ -0,0 +1,3 @@ +[ + "NotificationService" +] \ No newline at end of file From 182eff977c21dfadc44130cb30106e84d6a234c4 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 7 Oct 2015 16:36:55 -0700 Subject: [PATCH 012/148] [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 013/148] [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 014/148] [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 015/148] [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 From 0ca9e5c95203b64281a6be977abe6d050feb4d95 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 8 Oct 2015 09:37:43 -0700 Subject: [PATCH 016/148] [Frontend] Message list initially working open #159 open #170 Thank you @akhenry; launchMessages function added to DialogLaunchController.js; New message-list.html template; message.html is now its own include; blocking-message.html renamed to overlay-blocking-message.html; --- platform/commonUI/dialog/bundle.json | 12 ++++- ...locking-message.html => message-list.html} | 14 +++--- .../dialog/res/templates/message.html | 22 +++++++++ .../templates/overlay-blocking-message.html | 25 ++++++++++ platform/commonUI/dialog/src/DialogService.js | 20 +++++++- testing/dialogTest/res/dialog-launch.html | 3 +- .../dialogTest/src/DialogLaunchController.js | 47 +++++++++++++++++++ 7 files changed, 132 insertions(+), 11 deletions(-) rename platform/commonUI/dialog/res/templates/{blocking-message.html => message-list.html} (64%) create mode 100644 platform/commonUI/dialog/res/templates/message.html create mode 100644 platform/commonUI/dialog/res/templates/overlay-blocking-message.html diff --git a/platform/commonUI/dialog/bundle.json b/platform/commonUI/dialog/bundle.json index eab8fb000a..87ef06f764 100644 --- a/platform/commonUI/dialog/bundle.json +++ b/platform/commonUI/dialog/bundle.json @@ -36,8 +36,16 @@ "templateUrl": "templates/dialog.html" }, { - "key": "blocking-message", - "templateUrl": "templates/blocking-message.html" + "key": "overlay-blocking-message", + "templateUrl": "templates/overlay-blocking-message.html" + }, + { + "key": "message", + "templateUrl": "templates/message.html" + }, + { + "key": "message-list", + "templateUrl": "templates/message-list.html" } ], "containers": [ diff --git a/platform/commonUI/dialog/res/templates/blocking-message.html b/platform/commonUI/dialog/res/templates/message-list.html similarity index 64% rename from platform/commonUI/dialog/res/templates/blocking-message.html rename to platform/commonUI/dialog/res/templates/message-list.html index 4f2caf3df5..67fbdb28d0 100644 --- a/platform/commonUI/dialog/res/templates/blocking-message.html +++ b/platform/commonUI/dialog/res/templates/message-list.html @@ -1,17 +1,17 @@ -
!
+
{{ngModel.dialog.title}}
{{ngModel.dialog.hint}}
-
- {{ngModel.dialog.actionText}} -
- +
    +
  • + Message: {{msg.title}} + +
    • +
!
+
+
+
Title: {{ngModel.dialog.title}}
+
{{ngModel.dialog.hint}}
+
+
+
+ {{ngModel.dialog.actionText}} +
+ +
+
+ + {{dialogAction.label}} + +
+
\ No newline at end of file diff --git a/platform/commonUI/dialog/res/templates/overlay-blocking-message.html b/platform/commonUI/dialog/res/templates/overlay-blocking-message.html new file mode 100644 index 0000000000..a4d4dc7276 --- /dev/null +++ b/platform/commonUI/dialog/res/templates/overlay-blocking-message.html @@ -0,0 +1,25 @@ + + + + + \ No newline at end of file diff --git a/platform/commonUI/dialog/src/DialogService.js b/platform/commonUI/dialog/src/DialogService.js index 99d361cf81..836805304e 100644 --- a/platform/commonUI/dialog/src/DialogService.js +++ b/platform/commonUI/dialog/src/DialogService.js @@ -239,7 +239,7 @@ define( // Add the overlay using the OverlayService, which // will handle actual insertion into the DOM this.overlay = this.overlayService.createOverlay( - "blocking-message", + "overlay-blocking-message", {dialog: dialogModel}, "t-dialog-sm" ); @@ -253,6 +253,24 @@ define( }; + DialogService.prototype.showMessageList = 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( + "message-list", + {dialog: dialogModel}, + "t-dialog t-message-list" + ); + 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/res/dialog-launch.html b/testing/dialogTest/res/dialog-launch.html index 1b117c2ebf..2b01ca60bb 100644 --- a/testing/dialogTest/res/dialog-launch.html +++ b/testing/dialogTest/res/dialog-launch.html @@ -3,7 +3,8 @@ Known | Unknown | - Error + Error | + Messages Dialogs \ No newline at end of file diff --git a/testing/dialogTest/src/DialogLaunchController.js b/testing/dialogTest/src/DialogLaunchController.js index 374e43a150..7f51a91329 100644 --- a/testing/dialogTest/src/DialogLaunchController.js +++ b/testing/dialogTest/src/DialogLaunchController.js @@ -99,6 +99,53 @@ define( $log.error("Could not display modal dialog"); } }; + + $scope.launchMessages = function () { + var model = { + title: "Messages", + severity: messageSeverity.MESSAGES, + actions: [ + { + label: "Done", + action: function () { + $log.debug("Done pressed"); + dialogService.dismiss(); + } + } + ], + messages: [] + }; + + function createMessage (messageNumber) { + var messageModel = { + ngModel: { + dialog: { + title: "Message " + messageNumber, + severity: messageSeverity.INFO, + actions: [ + { + label: "Cancel Duplication", + action: function () { + $log.debug("Cancel Duplication pressed"); + $log.debug("Message should be dismissed"); + } + } + ] + } + } + }; + return messageModel; + } + + if (dialogService.showMessageList(model)) { + //Do processing here + for (var i = 0; i < 4; i++) { + model.messages.push(createMessage(i)); + } + } else { + $log.error("Could not display modal dialog"); + } + }; } return DialogLaunchController; } From 5ff90f7254ffc7a2fe75816cb5d8a64fe01e7178 Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 11:03:48 -0700 Subject: [PATCH 017/148] Added more tests, some refactoring --- .../notification/src/NotificationService.js | 203 +++++++++++------- .../test/NotificationServiceSpec.js | 98 +++++++-- 2 files changed, 200 insertions(+), 101 deletions(-) diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 30e746cc42..46950440da 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -23,13 +23,61 @@ /** * This bundle implements the notification service, which can be used to - * show banner notifications to the user. + * show banner notifications to the user. Banner notifications + * are used to inform users of events in a non-intrusive way. As + * much as possible, notifications share a model with blocking + * dialogs so that the same information can be provided in a dialog + * and then minimized to a banner notification if needed. + * * @namespace platform/commonUI/dialog */ define( ["./MessageSeverity"], function (MessageSeverity) { "use strict"; + + /** + * A representation of a user action. Actions are provided to + * dialogs and notifications and are shown as buttons. + * + * @typedef {object} NotificationAction + * @property {string} label the label to appear on the button for + * this action + * @property {function} action a callback function to be invoked + * when the button is clicked + */ + + /** + * A representation of a banner notification. Banner notifications + * are used to inform users of events in a non-intrusive way. As + * much as possible, notifications share a model with blocking + * dialogs so that the same information can be provided in a dialog + * and then minimized to a banner notification if needed. + * + * @typedef {object} Notification + * @property {string} title The title of the message + * @property {number} progress The completion status of a task + * represented numerically + * @property {MessageSeverity} messageSeverity The importance of the + * message (eg. error, success) + * @property {boolean} unknownProgress a boolean indicating that the + * progress of the underlying task is unknown. This will result in a + * visually distinct progress bar. + * @property {boolean | number} autoDismiss If truthy, dialog will + * be automatically minimized or dismissed (depending on severity). + * Additionally, if the provided value is a number, it will be used + * as the delay period before being dismissed. + * @property {NotificationAction} primaryAction the default user + * response to + * this message. Will be represented as a button with the provided + * label and action. May be used by banner notifications to display + * only the most important option to users. + * @property {NotificationAction[]} additionalActions any additional + * actions + * that the user can take. Will be represented as additional buttons + * that may or may not be available from a banner. + */ + /** * The notification service is responsible for informing the user of * events via the use of banner notifications. @@ -41,69 +89,51 @@ define( this.$timeout = $timeout; this.DEFAULT_AUTO_DISMISS = DEFAULT_AUTO_DISMISS; - /** - * Exposes the current "active" notification. This is a - * notification that is of current highest importance that has - * not been dismissed. The deinition of what is of highest - * importance might be a little nuanced and require tweaking. - * For example, if an important error message is visible and a - * success message is triggered, it may be desirable to - * temporarily show the success message and then auto-dismiss it. - * @type {{notification: undefined}} + /* + * A context in which to hold the active notification and a + * handle to its timeout. */ this.active = { }; } - /** - var model = { - title: string, - progress: number, - severity: MessageSeverity, - unknownProgress: boolean, - minimized: boolean, - autoDismiss: boolean | number, - actions: { - label: string, - action: function - } - } - */ /** - * Possibly refactor this out to a provider? - * @constructor + * Returns the notification that is currently visible in the banner area + * @returns {Notification} */ - function Notification (model) { - this.model = model; - } - - Notification.prototype.minimize = function (setValue) { - if (typeof setValue !== undefined){ - this.model.minimized = setValue; - } else { - return this.model.minimized; - } - }; - NotificationService.prototype.getActiveNotification = function (){ return this.active.notification; } /** - * model = { - * - * } - * @param model + * A convenience method for success notifications. Notifications + * created via this method will be auto-dismissed after a default + * wait period + * @param {Notification} notification The notification to display */ - NotificationService.prototype.notify = function (model) { - var notification = new Notification(model), - that=this; + NotificationService.prototype.success = function (notification) { + notification.autoDismiss = notification.autoDismiss || true; + NotificationService.prototype.notify(notification); + } + + /** + * Notifies the user of an event. If there is a banner notification + * already active, then it will be dismissed or minimized automatically, + * and the provided notification displayed in its place. + * + * @param {Notification} notification The notification to display + */ + NotificationService.prototype.notify = function (notification) { + /*var notification = new Notification(model), + that=this; */ + var that = this; + this.notifications.push(notification); /* Check if there is already an active (ie. visible) notification */ if (!this.active.notification){ - setActiveNotification.call(this, notification); + this.setActiveNotification(notification); } else if (!this.active.timeout){ /* @@ -122,28 +152,42 @@ define( }; - function setActiveNotification (notification) { - var that = this; - this.active.notification = notification; - /* - If autoDismiss has been specified, setup a timeout to - dismiss the dialog. + /** + * Used internally by the NotificationService + * @private + */ + NotificationService.prototype.setActiveNotification = + function (notification) { - If there are other notifications pending in the queue, set this - one to auto-dismiss - */ - if (notification.model.autoDismiss - || selectNextNotification.call(this)) { - var timeout = isNaN(notification.model.autoDismiss) ? - this.DEFAULT_AUTO_DISMISS : notification.model.autoDismiss; + var that = this; + this.active.notification = notification; + /* + If autoDismiss has been specified, setup a timeout to + dismiss the dialog. - this.active.timeout = this.$timeout(function () { - that.dismissOrMinimize(notification); - }, timeout); - } - } + If there are other notifications pending in the queue, set this + one to auto-dismiss + */ + if (notification && (notification.autoDismiss + || this.selectNextNotification())) { + var timeout = isNaN(notification.autoDismiss) ? + this.DEFAULT_AUTO_DISMISS : + notification.autoDismiss; - function selectNextNotification () { + this.active.timeout = this.$timeout(function () { + that.dismissOrMinimize(notification); + }, timeout); + } else { + delete this.active.timeout; + } + }; + + /** + * Used internally by the NotificationService + * + * @private + */ + NotificationService.prototype.selectNextNotification = function () { /* Loop through the notifications queue and find the first one that has not already been minimized (manually or otherwise). @@ -151,7 +195,7 @@ define( for (var i=0; i< this.notifications.length; i++) { var notification = this.notifications[i]; - if (!notification.model.minimized + if (!notification.minimized && notification!= this.activeNotification) { return notification; @@ -162,8 +206,9 @@ define( /** * Minimize a notification. The notification will still be available * from the notification list. Typically notifications with a - * severity of SUCCESS should not be minimized, but rather - * dismissed. + * severity of 'success' should not be minimized, but rather + * dismissed. If you're not sure which is appropriate, + * use {@link NotificationService#dismissOrMinimize} * @see dismiss * @see dismissOrMinimize * @param notification @@ -172,19 +217,17 @@ define( //Check this is a known notification var index = this.notifications.indexOf(notification); if (index >= 0) { - notification.minimize(true); - delete this.active.notification; - delete this.active.timeout; - setActiveNotification.call(this, selectNextNotification.call(this)); + notification.minimized=true; + this.setActiveNotification(this.selectNextNotification()); } - } + }; /** - * Completely remove a notification. This will dismiss it from the + * Completely removes a notification. This will dismiss it from the * message banner and remove it from the list of notifications. - * Typically only notifications with a severity of SUCCESS should be + * Typically only notifications with a severity of success should be * dismissed. If you're not sure whether to dismiss or minimize a - * notification, use the dismissOrMinimize method. + * notification, use {@link NotificationService#dismissOrMinimize}. * dismiss * @see dismissOrMinimize * @param notification The notification to dismiss @@ -194,11 +237,7 @@ define( var index = this.notifications.indexOf(notification); if (index >= 0) { this.notifications.splice(index, 1); - - delete this.active.notification; - delete this.active.timeout; - - setActiveNotification.call(this, selectNextNotification.call(this)); + this.setActiveNotification(this.selectNextNotification()); } } @@ -210,7 +249,7 @@ define( * @param notification */ NotificationService.prototype.dismissOrMinimize = function (notification){ - if (notification.model.severity > MessageSeverity.SUCCESS){ + if (notification.severity > MessageSeverity.SUCCESS){ this.minimize(notification); } else { this.dismiss(notification); diff --git a/platform/commonUI/notification/test/NotificationServiceSpec.js b/platform/commonUI/notification/test/NotificationServiceSpec.js index c7a5fee234..c54ba08e38 100644 --- a/platform/commonUI/notification/test/NotificationServiceSpec.js +++ b/platform/commonUI/notification/test/NotificationServiceSpec.js @@ -30,24 +30,18 @@ define( var notificationService, mockTimeout, mockAutoDismiss, - successModel = { - title: "Mock Success Notification", - severity: MessageSeverity.SUCCESS - }, - errorModel = { - title: "Mock Error Notification", - severity: MessageSeverity.ERROR - }; + successModel, + errorModel; /** * 1) Calling .notify results in a new notification being created - * with the provided model and set to the active notification + * with the provided model and set to the active notification. DONE * * 2) Calling .notify with autoDismiss results in a SUCCESS notification - * becoming dismissed after timeout has elapsed + * becoming dismissed after timeout has elapsed DONE * * 3) Calling .notify with autoDismiss results in an ERROR notification - * being MINIMIZED after a timeout has elapsed + * being MINIMIZED after a timeout has elapsed DONE * * 4) Calling .notify with an active success notification results in that * notification being auto-dismissed, and the new notification becoming @@ -84,17 +78,49 @@ define( mockAutoDismiss = 0; notificationService = new NotificationService( mockTimeout, mockAutoDismiss); + successModel = { + title: "Mock Success Notification", + severity: MessageSeverity.SUCCESS + }; + errorModel = { + title: "Mock Error Notification", + severity: MessageSeverity.ERROR + }; }); - it("Calls the notification service with a new notification, making" + + it("gets a new success notification, making" + " the notification active", function() { var activeNotification; notificationService.notify(successModel); activeNotification = notificationService.getActiveNotification(); - expect(activeNotification.model).toBe(successModel); + expect(activeNotification).toBe(successModel); }); - describe(" called with multiple notifications", function(){ + it("gets a new success notification with" + + " numerical auto-dismiss specified. ", function() { + var activeNotification; + successModel.autoDismiss = 1000; + notificationService.notify(successModel); + activeNotification = notificationService.getActiveNotification(); + expect(activeNotification).toBe(successModel); + mockTimeout.mostRecentCall.args[0](); + activeNotification = notificationService.getActiveNotification(); + expect(activeNotification).toBeUndefined(); + }); + + it("gets a new notification with" + + " boolean auto-dismiss specified. ", function() { + var activeNotification; + successModel.autoDismiss = true; + notificationService.notify(successModel); + activeNotification = notificationService.getActiveNotification(); + expect(activeNotification).toBe(successModel); + mockTimeout.mostRecentCall.args[0](); + activeNotification = notificationService.getActiveNotification(); + expect(activeNotification).toBeUndefined(); + }); + + describe(" gets called with multiple notifications", function(){ it("auto-dismisses the previously active notification, making" + " the new notification active", function() { var activeNotification; @@ -103,14 +129,14 @@ define( activeNotification = notificationService.getActiveNotification(); //Initially expect the active notification to be success - expect(activeNotification.model).toBe(successModel); + expect(activeNotification).toBe(successModel); //Then notify of an error notificationService.notify(errorModel); //But it should be auto-dismissed and replaced with the // error notification mockTimeout.mostRecentCall.args[0](); activeNotification = notificationService.getActiveNotification(); - expect(activeNotification.model).toBe(errorModel); + expect(activeNotification).toBe(errorModel); }); it("auto-dismisses an active success notification, removing" + " it completely", function() { @@ -125,9 +151,9 @@ define( }); it("auto-minimizes an active error notification", function() { var activeNotification; - //First pre-load with a success message + //First pre-load with an error message notificationService.notify(errorModel); - //Then notify of an error + //Then notify of success notificationService.notify(successModel); expect(notificationService.notifications.length).toEqual(2); //Mock the auto-minimize @@ -137,8 +163,42 @@ define( expect(notificationService.notifications.length).toEqual(2); activeNotification = notificationService.getActiveNotification(); - expect(activeNotification.model).toBe(successModel); + expect(activeNotification).toBe(successModel); expect(errorModel.minimized).toEqual(true); + }); + it("auto-minimizes errors when a number of them arrive in" + + " short succession ", function() { + var activeNotification; + var error2 = { + title: "Second Mock Error Notification", + severity: MessageSeverity.ERROR + } + var error3 = { + title: "Third Mock Error Notification", + severity: MessageSeverity.ERROR + } + //First pre-load with a success message + notificationService.notify(errorModel); + //Then notify of a third error + notificationService.notify(error2); + notificationService.notify(error3); + expect(notificationService.notifications.length).toEqual(3); + //Mock the auto-minimize + mockTimeout.mostRecentCall.args[0](); + //Previous error message should be minimized, not + // dismissed + expect(notificationService.notifications.length).toEqual(3); + activeNotification = + notificationService.getActiveNotification(); + expect(activeNotification).toBe(error2); + expect(errorModel.minimized).toEqual(true); + + //Mock the second auto-minimize + mockTimeout.mostRecentCall.args[0](); + activeNotification = + notificationService.getActiveNotification(); + expect(activeNotification).toBe(error3); + expect(error2.minimized).toEqual(true); }); }); From af1fa6e77aec37277e5cb6601b1e2b1155d7c47e Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 11:13:32 -0700 Subject: [PATCH 018/148] added semicolons to test spec --- .../commonUI/notification/test/NotificationServiceSpec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/platform/commonUI/notification/test/NotificationServiceSpec.js b/platform/commonUI/notification/test/NotificationServiceSpec.js index c54ba08e38..96994f26d2 100644 --- a/platform/commonUI/notification/test/NotificationServiceSpec.js +++ b/platform/commonUI/notification/test/NotificationServiceSpec.js @@ -172,11 +172,11 @@ define( var error2 = { title: "Second Mock Error Notification", severity: MessageSeverity.ERROR - } + }; var error3 = { title: "Third Mock Error Notification", severity: MessageSeverity.ERROR - } + }; //First pre-load with a success message notificationService.notify(errorModel); //Then notify of a third error From e1e5919f686da2c28ee1413f73ccc4ea197ca404 Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 13:08:43 -0700 Subject: [PATCH 019/148] Added some semicolons --- platform/commonUI/notification/src/MessageSeverity.js | 5 +++-- platform/commonUI/notification/src/NotificationService.js | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/platform/commonUI/notification/src/MessageSeverity.js b/platform/commonUI/notification/src/MessageSeverity.js index 5f17b917fe..39e8e6d8d0 100644 --- a/platform/commonUI/notification/src/MessageSeverity.js +++ b/platform/commonUI/notification/src/MessageSeverity.js @@ -1,9 +1,10 @@ /** * Created by akhenry on 10/7/15. */ +/*global define*/ define(function(){ return { SUCCESS: 0, ERROR: 1 - } -}) \ No newline at end of file + }; +}); \ No newline at end of file diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 46950440da..ecdb8d6ddd 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -103,7 +103,7 @@ define( */ NotificationService.prototype.getActiveNotification = function (){ return this.active.notification; - } + }; /** * A convenience method for success notifications. Notifications @@ -114,7 +114,7 @@ define( NotificationService.prototype.success = function (notification) { notification.autoDismiss = notification.autoDismiss || true; NotificationService.prototype.notify(notification); - } + }; /** * Notifies the user of an event. If there is a banner notification @@ -239,7 +239,7 @@ define( this.notifications.splice(index, 1); this.setActiveNotification(this.selectNextNotification()); } - } + }; /** * Depending on the severity of the notification will selectively From 0e840ae003dc2e52e8a7740c0e43dbb97b95a131 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 8 Oct 2015 13:09:41 -0700 Subject: [PATCH 020/148] [Frontend] Messages major work open #159 open #170 CSS, markup and JS test files initially complete; Templates renamed for consistency; message-type icons styled; Added severity constant "alert"; TO-DO: check refactored CSS against mobile, see what's broken; --- platform/commonUI/dialog/bundle.json | 5 +- .../dialog/res/templates/message-list.html | 24 - .../dialog/res/templates/message.html | 40 +- .../templates/overlay-blocking-message.html | 2 +- .../res/templates/overlay-message-list.html | 25 + platform/commonUI/dialog/src/DialogService.js | 6 +- .../commonUI/general/res/sass/_constants.scss | 2 +- .../general/res/sass/controls/_messages.scss | 94 ++- .../res/sass/mobile/overlay/_overlay.scss | 20 +- .../general/res/sass/overlay/_overlay.scss | 57 +- .../espresso/res/css/theme-espresso.css | 541 +++++++++++------- .../themes/espresso/res/sass/_constants.scss | 9 +- .../themes/snow/res/css/theme-snow.css | 421 +++++++++----- .../themes/snow/res/sass/_constants.scss | 7 +- .../dialogTest/src/DialogLaunchController.js | 70 ++- 15 files changed, 846 insertions(+), 477 deletions(-) delete mode 100644 platform/commonUI/dialog/res/templates/message-list.html create mode 100644 platform/commonUI/dialog/res/templates/overlay-message-list.html diff --git a/platform/commonUI/dialog/bundle.json b/platform/commonUI/dialog/bundle.json index 87ef06f764..8b53971d4a 100644 --- a/platform/commonUI/dialog/bundle.json +++ b/platform/commonUI/dialog/bundle.json @@ -4,6 +4,7 @@ { "key": "messageSeverity", "value": { + "ALERT": "alert", "ERROR": "error", "INFO": "info", "SUCCESS": "success" @@ -44,8 +45,8 @@ "templateUrl": "templates/message.html" }, { - "key": "message-list", - "templateUrl": "templates/message-list.html" + "key": "overlay-message-list", + "templateUrl": "templates/overlay-message-list.html" } ], "containers": [ diff --git a/platform/commonUI/dialog/res/templates/message-list.html b/platform/commonUI/dialog/res/templates/message-list.html deleted file mode 100644 index 67fbdb28d0..0000000000 --- a/platform/commonUI/dialog/res/templates/message-list.html +++ /dev/null @@ -1,24 +0,0 @@ - -
-
-
-
{{ngModel.dialog.title}}
-
{{ngModel.dialog.hint}}
-
-
-
    -
  • - Message: {{msg.title}} - -
    • -
-
-
- - {{dialogAction.label}} - -
-
- \ No newline at end of file diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html index 709a71adbb..d9fe79edfe 100644 --- a/platform/commonUI/dialog/res/templates/message.html +++ b/platform/commonUI/dialog/res/templates/message.html @@ -1,22 +1,24 @@ -
!
-
-
-
Title: {{ngModel.dialog.title}}
-
{{ngModel.dialog.hint}}
-
-
-
- {{ngModel.dialog.actionText}} +
+
+
+
+
{{ngModel.dialog.title}}
+
{{ngModel.dialog.hint}}
+
+
+
+ {{ngModel.dialog.actionText}} message-severity-{{ngModel.dialog.severity}} +
+ +
+
+ + {{dialogAction.label}} +
- -
-
- - {{dialogAction.label}} -
\ No newline at end of file diff --git a/platform/commonUI/dialog/res/templates/overlay-blocking-message.html b/platform/commonUI/dialog/res/templates/overlay-blocking-message.html index a4d4dc7276..17fdcf152c 100644 --- a/platform/commonUI/dialog/res/templates/overlay-blocking-message.html +++ b/platform/commonUI/dialog/res/templates/overlay-blocking-message.html @@ -19,7 +19,7 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> - + \ No newline at end of file diff --git a/platform/commonUI/dialog/res/templates/overlay-message-list.html b/platform/commonUI/dialog/res/templates/overlay-message-list.html new file mode 100644 index 0000000000..550c0bcda2 --- /dev/null +++ b/platform/commonUI/dialog/res/templates/overlay-message-list.html @@ -0,0 +1,25 @@ + +
+
+
{{ngModel.dialog.title}}
+
Displaying {{ngModel.dialog.messages.length}} messages +
+
+
+ + +
+
+ + {{dialogAction.label}} + +
+
+ \ No newline at end of file diff --git a/platform/commonUI/dialog/src/DialogService.js b/platform/commonUI/dialog/src/DialogService.js index 836805304e..2fc6f41a60 100644 --- a/platform/commonUI/dialog/src/DialogService.js +++ b/platform/commonUI/dialog/src/DialogService.js @@ -176,7 +176,7 @@ define( /** * dialogModel: { - * severity: string "error" | "info", + * severity: string "error" | "info" | "alert", * title: string, * hint: string, * actionText: string, @@ -258,9 +258,9 @@ define( // Add the overlay using the OverlayService, which // will handle actual insertion into the DOM this.overlay = this.overlayService.createOverlay( - "message-list", + "overlay-message-list", {dialog: dialogModel}, - "t-dialog t-message-list" + "t-dialog" ); this.dialogVisible = true; return true; diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 78c7c916dd..2c425493ea 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -47,7 +47,7 @@ $ueEditLeftPaneW: 75%; $treeSearchInputBarH: 25px; // Overlay $ovrTopBarH: 60px; -$ovrFooterH: 30px; +$ovrFooterH: 24px; $overlayMargin: 25px; // Items $ueBrowseGridItemLg: 200px; diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 3bea644daa..d537ee8ff1 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -161,18 +161,92 @@ } } -// 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%); +@mixin messageBlock($iconW: 32px) { + .type-icon.message-type { + @include txtShdw($shdwStatusIc); + &:before { content:"\e608"; } + color: $colorStatusDefault; font-size: $iconW; - opacity: 0.5; - right: auto; + padding-left: 1px; width: $iconW; } - .message-contents.abs { - left: $iconW + $overlayMargin; + + .message-severity-info .type-icon.message-type { + &:before { content:"\e608"; } + color: $colorStatusOk; + } + .message-severity-alert .type-icon.message-type { + &:before { content:"\e610"; } + color: $colorStatusCaution; + } + .message-severity-error .type-icon.message-type { + &:before { content:"\21"; } + color: $colorStatusAlert; + } +} +/* Paths: + t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message > + message-type > (icon) + message-contents > + top-bar > + title + hint + editor > + (if displaying list of messages) + ul > li > l-message > + ... same as above + bottom-bar +*/ + +.l-message { + @include display-flex; + @include flex-direction(row); + .type-icon.message-type { + //@include test(red); + @include flex(0 1 auto); + position: relative; + } + .message-contents { + //@include test(blue); + @include flex(1 1 auto); + margin-left: $overlayMargin; + position: relative; + + .top-bar, + .message-body { + margin-bottom: $interiorMarginLg * 2; + } + } +} + + +// Message as singleton +.t-message-single { + @include messageBlock(80px); +} + +// Messages in list +.t-message-list { + @include messageBlock(32px); + .message-contents { + .l-message { + //border-bottom: 1px solid pullForward($colorOvrBg, 20%); + @include border-radius($controlCr); + background: rgba($colorOvrFg, 0.1); + margin-bottom: $interiorMargin; + margin-right: $interiorMarginLg; + padding: $interiorMarginLg; + + .message-contents { + font-size: 0.9em; + .message-action { color: pushBack($colorOvrFg, 20%); } + .bottom-bar { text-align: left; } + } + + .top-bar, + .message-body { + margin-bottom: $interiorMarginLg; + } + } } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss index af0380a12b..9fe624b2fd 100644 --- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss @@ -52,15 +52,17 @@ } } } - - .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; + + .contents { + .top-bar, + .editor, + .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 { diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 4790d59768..305534c0d0 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -20,6 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .overlay { + font-size: 90%; .blocker { background: $colorOvrBlocker; z-index: 100; @@ -56,6 +57,12 @@ right: $m; bottom: $m; left: $m; + + //.top-bar, + //.editor, + //.bottom-bar { + // @include absPosDefault(); + //} } } @@ -70,11 +77,12 @@ color: pushBack($colorOvrFg, 20%); } - .top-bar { + .abs.top-bar { height: $ovrTopBarH; } - .editor { + .abs.editor, + .abs.message-body { top: $ovrTopBarH + ($interiorMargin * 2); bottom: $ovrFooterH + $interiorMargin * 2; left: 0; @@ -87,23 +95,7 @@ } } - .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; - overflow: visible; - //font-size: 1em; - height: $ovrFooterH; text-align: right; .s-btn { $bg: $colorOvrBtnBg; @@ -115,13 +107,30 @@ line-height: $ovrFooterH; margin-left: $interiorMargin; padding: 0 $interiorMargin * 3; - //&.major { - // @extend .s-btn.major; - // &:hover { - // @extend .s-btn.major:hover; - // } - //} + &:first-child { + margin-left: 0; + } } + + } + + .abs.bottom-bar { + top: auto; + right: 0; + bottom: 0; + left: 0; + overflow: visible; + //font-size: 1em; + height: $ovrFooterH; + } + + .l-progress-bar { + $h: $progressBarHOverlay; + display: block; + height: $h; + line-height: $h; + margin: .5em 0; + width: 100%; } } diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 389cdf1490..1d4d0e0e79 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -600,10 +600,10 @@ mct-container { color: #0099cc; } /* line 34, ../../../../general/res/sass/_icons.scss */ .ui-symbol.icon.alert { - color: #ff3c00; } + color: #ff533a; } /* line 36, ../../../../general/res/sass/_icons.scss */ .ui-symbol.icon.alert:hover { - color: #ff8a66; } + color: #ffaca0; } /* line 40, ../../../../general/res/sass/_icons.scss */ .ui-symbol.icon.major { font-size: 1.65em; } @@ -637,7 +637,7 @@ mct-container { display: none !important; } /* line 76, ../../../../general/res/sass/_icons.scss */ .l-icon-alert:before { - color: #ff3c00; + color: #ff533a; content: "!"; } /* line 13, ../../../../general/res/sass/_limits.scss */ @@ -827,9 +827,9 @@ mct-container { /* line 150, ../../../../general/res/sass/helpers/_bubbles.scss */ .s-infobubble { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px; @@ -1198,9 +1198,9 @@ mct-container { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; - -moz-border-radius: 1.5px; - -webkit-border-radius: 1.5px; - border-radius: 1.5px; + -moz-border-radius: 2.25px; + -webkit-border-radius: 2.25px; + border-radius: 2.25px; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; -webkit-transition: background-color 0.25s; @@ -1556,9 +1556,9 @@ mct-container { margin-top: 0; } /* line 29, ../../../../general/res/sass/controls/_controls.scss */ .accordion .accordion-head { - -moz-border-radius: 1.5px; - -webkit-border-radius: 1.5px; - border-radius: 1.5px; + -moz-border-radius: 2.25px; + -webkit-border-radius: 2.25px; + border-radius: 2.25px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -1651,9 +1651,9 @@ label.checkbox.custom { min-width: 14px; } /* line 127, ../../../../general/res/sass/controls/_controls.scss */ label.checkbox.custom em:before { - -moz-border-radius: 1.5px; - -webkit-border-radius: 1.5px; - border-radius: 1.5px; + -moz-border-radius: 2.25px; + -webkit-border-radius: 2.25px; + border-radius: 2.25px; background: #4d4d4d; -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px; -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px; @@ -1838,24 +1838,24 @@ label.checkbox.custom { /* line 309, ../../../../general/res/sass/controls/_controls.scss */ .s-progress-bar { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; -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-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; -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-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; -moz-transition-property: width; -o-transition-property: width; -webkit-transition-property: width; @@ -2165,9 +2165,9 @@ label.checkbox.custom { position: relative; } /* line 70, ../../../../general/res/sass/controls/_menus.scss */ .menu-element .menu { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; background-color: #6e6e6e; -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -2399,10 +2399,10 @@ label.checkbox.custom { margin-right: 3px; } /* line 54, ../../../../general/res/sass/controls/_messages.scss */ .status.block.ok .status-indicator { - color: #60e68e; } + color: #44ba53; } /* line 57, ../../../../general/res/sass/controls/_messages.scss */ .status.block.caution .status-indicator { - color: #ffa864; } + color: #ff8545; } /* line 60, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; @@ -2446,14 +2446,14 @@ label.checkbox.custom { /* 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; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; padding: 10px; } /* line 88, ../../../../general/res/sass/controls/_messages.scss */ .message.error { - background-color: rgba(255, 60, 0, 0.3); - color: #ff8a66; } + background-color: rgba(255, 83, 58, 0.3); + color: #ffaca0; } /* line 94, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner { @@ -2548,9 +2548,9 @@ label.checkbox.custom { color: inherit; } /* line 147, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; } + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; } /* line 150, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close { opacity: 0.5; } @@ -2559,40 +2559,145 @@ label.checkbox.custom { opacity: 1; } /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok { - background-color: #189543; + background-color: #1b4a21; color: #ccc; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok:hover { - background-color: #1ec256; } + background-color: #296f32; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action { - background-color: #11692f; } + background-color: #0d2510; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover { - background-color: #189543; } + background-color: #1b4a21; } /* line 159, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution { - background-color: #ca5900; + background-color: #ab3b00; color: #ccc; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution:hover { - background-color: #fd6f00; } + background-color: #de4c00; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action { - background-color: #974200; } + background-color: #782900; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action:hover { - background-color: #ca5900; } + background-color: #ab3b00; } -/* 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 { +/* Paths: + t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message > + message-type > (icon) + message-contents > + top-bar > + title + hint + editor > + (if displaying list of messages) + ul > li > l-message > + ... same as above + bottom-bar +*/ +/* line 201, ../../../../general/res/sass/controls/_messages.scss */ +.l-message { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; } + /* line 204, ../../../../general/res/sass/controls/_messages.scss */ + .l-message .type-icon.message-type { + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + position: relative; } + /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + .l-message .message-contents { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + position: relative; } + /* line 215, ../../../../general/res/sass/controls/_messages.scss */ + .l-message .message-contents .top-bar, + .l-message .message-contents .message-body { + margin-bottom: 20px; } + +/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-single .type-icon.message-type { + text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; + color: #ccc; font-size: 80px; - opacity: 0.5; - right: auto; + padding-left: 1px; 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 167, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .type-icon.message-type:before { + content: "\e608"; } +/* line 174, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-single .message-severity-info .type-icon.message-type { + color: #44ba53; } + /* line 175, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .message-severity-info .type-icon.message-type:before { + content: "\e608"; } +/* line 178, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-single .message-severity-alert .type-icon.message-type { + color: #ff8545; } + /* line 179, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .message-severity-alert .type-icon.message-type:before { + content: "\e610"; } +/* line 182, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-single .message-severity-error .type-icon.message-type { + color: #ff533a; } + /* line 183, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .message-severity-error .type-icon.message-type:before { + content: "\21"; } + +/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .type-icon.message-type { + text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; + color: #ccc; + font-size: 32px; + padding-left: 1px; + width: 32px; } + /* line 167, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .type-icon.message-type:before { + content: "\e608"; } +/* line 174, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .message-severity-info .type-icon.message-type { + color: #44ba53; } + /* line 175, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-severity-info .type-icon.message-type:before { + content: "\e608"; } +/* line 178, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .message-severity-alert .type-icon.message-type { + color: #ff8545; } + /* line 179, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-severity-alert .type-icon.message-type:before { + content: "\e610"; } +/* line 182, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .message-severity-error .type-icon.message-type { + color: #ff533a; } + /* line 183, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-severity-error .type-icon.message-type:before { + content: "\21"; } +/* line 232, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .message-contents .l-message { + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + background: rgba(230, 230, 230, 0.1); + margin-bottom: 5px; + margin-right: 10px; + padding: 10px; } + /* line 240, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .message-contents { + font-size: 0.9em; } + /* line 242, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .message-contents .message-action { + color: #b3b3b3; } + /* line 243, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .message-contents .bottom-bar { + text-align: left; } + /* line 246, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .top-bar, + .t-message-list .message-contents .l-message .message-body { + margin-bottom: 10px; } /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { @@ -2749,9 +2854,9 @@ label.checkbox.custom { *****************************************************************************/ /* line 22, ../../../../general/res/sass/forms/_elems.scss */ .section-header { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; background: rgba(0, 0, 0, 0.2); color: #cccccc; font-size: 0.8em; @@ -2876,9 +2981,9 @@ label.form-control.checkbox input { vertical-align: top; } /* line 156, ../../../../general/res/sass/forms/_elems.scss */ .l-result div.s-hint { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; background: rgba(255, 51, 0, 0.8); display: block; color: #ffad99; @@ -4100,9 +4205,9 @@ span.req { visibility: visible; } /* line 178, ../../../../general/res/sass/search/_search.scss */ .search .active-filter-display { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -4195,152 +4300,166 @@ span.req { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 23, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .blocker { - background: rgba(0, 0, 0, 0.7); - z-index: 100; } -/* line 27, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .clk-icon.close { - font-size: 0.8rem; - position: absolute; - top: 10px; - right: 10px; - bottom: auto; - left: auto; - z-index: 100; } -/* line 36, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay > .holder { - background-color: #4d4d4d; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: #e6e6e6; - display: inline-block; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #595959), color-stop(100%, #4d4d4d)); - background-image: -moz-linear-gradient(#595959, #4d4d4d); - background-image: -webkit-linear-gradient(#595959, #4d4d4d); - background-image: linear-gradient(#595959, #4d4d4d); - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - -moz-border-radius: 6px; - -webkit-border-radius: 6px; - border-radius: 6px; - color: #e6e6e6; - 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: 600px; - max-width: 1000px; - z-index: 101; } - /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ - .overlay > .holder > .contents { - top: 25px; - right: 25px; - bottom: 25px; - left: 25px; } -/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 1.2em; - line-height: 120%; - margin-bottom: 5px; } -/* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .hint { - color: #b3b3b3; } -/* line 73, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .top-bar { - height: 60px; } -/* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .editor { - top: 70px; - bottom: 40px; - left: 0; - right: 0; - overflow: auto; } +/* line 22, ../../../../general/res/sass/overlay/_overlay.scss */ +.overlay { + font-size: 90%; } + /* line 24, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .blocker { + background: rgba(0, 0, 0, 0.7); + z-index: 100; } + /* line 28, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .clk-icon.close { + font-size: 0.8rem; + position: absolute; + top: 10px; + right: 10px; + bottom: auto; + left: auto; + z-index: 100; } + /* line 37, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay > .holder { + background-color: #4d4d4d; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #e6e6e6; + display: inline-block; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #595959), color-stop(100%, #4d4d4d)); + background-image: -moz-linear-gradient(#595959, #4d4d4d); + background-image: -webkit-linear-gradient(#595959, #4d4d4d); + background-image: linear-gradient(#595959, #4d4d4d); + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; + -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; + box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; + -moz-border-radius: 9px; + -webkit-border-radius: 9px; + border-radius: 9px; + color: #e6e6e6; + 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: 600px; + max-width: 1000px; + z-index: 101; } + /* line 54, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay > .holder > .contents { + top: 25px; + right: 25px; + bottom: 25px; + left: 25px; } + /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 1.2em; + line-height: 120%; + margin-bottom: 5px; } + /* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .hint { + color: #b3b3b3; } + /* line 80, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .abs.top-bar, .overlay .s-menu span.top-bar.l-click-area, .s-menu .overlay span.top-bar.l-click-area { + height: 60px; } /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */ - .overlay .editor .field.l-med input[type='text'] { + .overlay .abs.editor, .overlay .s-menu span.editor.l-click-area, .s-menu .overlay span.editor.l-click-area, + .overlay .abs.message-body, + .overlay .s-menu span.message-body.l-click-area, + .s-menu .overlay span.message-body.l-click-area { + top: 70px; + bottom: 34px; + left: 0; + right: 0; + overflow: auto; } + /* line 92, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .abs.editor .field.l-med input[type='text'], .overlay .s-menu span.editor.l-click-area .field.l-med input[type='text'], .s-menu .overlay span.editor.l-click-area .field.l-med input[type='text'], + .overlay .abs.message-body .field.l-med input[type='text'], + .overlay .s-menu span.message-body.l-click-area .field.l-med input[type='text'], + .s-menu .overlay span.message-body.l-click-area .field.l-med input[type='text'] { + width: 100%; } + /* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .bottom-bar { + text-align: right; } + /* line 100, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { + font-size: 95%; + height: 24px; + line-height: 24px; + margin-left: 5px; + padding: 0 15px; } + /* line 102, ../../../../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; + -webkit-border-radius: 3px; + border-radius: 3px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #fff; + display: inline-block; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c8c8c), color-stop(100%, #808080)); + background-image: -moz-linear-gradient(#8c8c8c, #808080); + background-image: -webkit-linear-gradient(#8c8c8c, #808080); + background-image: linear-gradient(#8c8c8c, #808080); + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; + -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; + box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; + -moz-user-select: -moz-none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + -moz-transition: background, 0.25s; + -o-transition: background, 0.25s; + -webkit-transition: background, 0.25s; + transition: background, 0.25s; + text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } + /* 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 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 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 110, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .bottom-bar .s-btn:first-child, .overlay .bottom-bar .s-menu:first-child { + margin-left: 0; } + /* line 117, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .abs.bottom-bar, .overlay .s-menu span.bottom-bar.l-click-area, .s-menu .overlay span.bottom-bar.l-click-area { + top: auto; + right: 0; + bottom: 0; + left: 0; + overflow: visible; + height: 24px; } + /* line 127, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .l-progress-bar { + display: block; + height: 15px; + line-height: 15px; + margin: .5em 0; width: 100%; } -/* 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 99, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .bottom-bar { - top: auto; - right: 0; - bottom: 0; - left: 0; - overflow: visible; - height: 30px; - text-align: right; } - /* 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 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; - -webkit-border-radius: 3px; - border-radius: 3px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: #fff; - display: inline-block; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c8c8c), color-stop(100%, #808080)); - background-image: -moz-linear-gradient(#8c8c8c, #808080); - background-image: -webkit-linear-gradient(#8c8c8c, #808080); - background-image: linear-gradient(#8c8c8c, #808080); - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - -moz-user-select: -moz-none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; - -moz-transition: background, 0.25s; - -o-transition: background, 0.25s; - -webkit-transition: background, 0.25s; - transition: background, 0.25s; - text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; } - /* 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 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 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 128, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 137, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { min-height: 275px; height: 275px; } @@ -4393,7 +4512,7 @@ span.req { /* 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 */ + /* line 57, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder .contents .top-bar, .overlay > .holder .contents .editor, .overlay > .holder .contents .bottom-bar { @@ -4406,12 +4525,12 @@ span.req { margin-bottom: 20px; position: relative; } - /* line 66, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + /* line 68, ../../../../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 */ + /* line 76, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder .contents .bottom-bar { text-align: center; } } /***************************************************************************** @@ -4462,9 +4581,9 @@ ul.tree { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; -moz-transition: background-color 0.25s; -o-transition: background-color 0.25s; -webkit-transition: background-color 0.25s; @@ -4524,7 +4643,7 @@ ul.tree { /* line 90, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon .icon.l-icon-alert, .search-result-item .label .type-icon .icon.l-icon-alert { - color: #ff3c00; + color: #ff533a; font-size: 8px; line-height: 8px; height: 8px; diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index c5a8e30456..1a9f5b4ed0 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -8,7 +8,7 @@ $colorKeySelectedBg: #005177; $colorKeyFg: #fff; $colorInteriorBorder: rgba($colorBodyFg, 0.1); $contrastRatioPercent: 7%; -$basicCr: 2px; +$basicCr: 3px; $controlCr: 3px; $smallCr: 2px; @@ -23,7 +23,7 @@ $contrastInvokeMenuPercent: 20%; // General Colors $colorAlt1: #ffc700; -$colorAlert: #ff3c00; +$colorAlert: #ff533a; $colorIconLink: #49dedb; $colorPausedBg: #c56f01; $colorPausedFg: #fff; @@ -61,13 +61,14 @@ $colorInputIcon: pushBack($colorBodyFg, 15%); // Status colors, mainly used for messaging and item ancillary symbols $colorStatusFg: #ccc; $colorStatusDefault: #ccc; -$colorStatusOk: #60e68e; -$colorStatusCaution: #ffa864; +$colorStatusOk: #44ba53; +$colorStatusCaution: #ff8545; $colorStatusAlert: $colorAlert; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: $colorKey; $progressBarHOverlay: 15px; $progressBarStripeW: 20px; +$shdwStatusIc: rgba(black, 0.4) 0 1px 2px; // 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 54a9973a4e..5db2792f52 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -600,10 +600,10 @@ mct-container { color: #0099cc; } /* line 34, ../../../../general/res/sass/_icons.scss */ .ui-symbol.icon.alert { - color: #ff3c00; } + color: #ff533a; } /* line 36, ../../../../general/res/sass/_icons.scss */ .ui-symbol.icon.alert:hover { - color: #ff8a66; } + color: #ffaca0; } /* line 40, ../../../../general/res/sass/_icons.scss */ .ui-symbol.icon.major { font-size: 1.65em; } @@ -637,7 +637,7 @@ mct-container { display: none !important; } /* line 76, ../../../../general/res/sass/_icons.scss */ .l-icon-alert:before { - color: #ff3c00; + color: #ff533a; content: "!"; } /* line 13, ../../../../general/res/sass/_limits.scss */ @@ -2347,10 +2347,10 @@ label.checkbox.custom { margin-right: 3px; } /* line 54, ../../../../general/res/sass/controls/_messages.scss */ .status.block.ok .status-indicator { - color: #60e68e; } + color: #44ba53; } /* line 57, ../../../../general/res/sass/controls/_messages.scss */ .status.block.caution .status-indicator { - color: #ffa864; } + color: #ff8545; } /* line 60, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; @@ -2400,8 +2400,8 @@ label.checkbox.custom { padding: 10px; } /* line 88, ../../../../general/res/sass/controls/_messages.scss */ .message.error { - background-color: rgba(255, 60, 0, 0.3); - color: #ff8a66; } + background-color: rgba(255, 83, 58, 0.3); + color: #ffaca0; } /* line 94, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner { @@ -2507,40 +2507,145 @@ label.checkbox.custom { opacity: 1; } /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok { - background-color: #189543; + background-color: #1b4a21; color: #fff; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok:hover { - background-color: #1ec256; } + background-color: #296f32; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action { - background-color: #11692f; } + background-color: #0d2510; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover { - background-color: #189543; } + background-color: #1b4a21; } /* line 159, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution { - background-color: #ca5900; + background-color: #ab3b00; color: #fff; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution:hover { - background-color: #fd6f00; } + background-color: #de4c00; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action { - background-color: #974200; } + background-color: #782900; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action:hover { - background-color: #ca5900; } + background-color: #ab3b00; } -/* 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 { +/* Paths: + t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message > + message-type > (icon) + message-contents > + top-bar > + title + hint + editor > + (if displaying list of messages) + ul > li > l-message > + ... same as above + bottom-bar +*/ +/* line 201, ../../../../general/res/sass/controls/_messages.scss */ +.l-message { + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; } + /* line 204, ../../../../general/res/sass/controls/_messages.scss */ + .l-message .type-icon.message-type { + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + position: relative; } + /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + .l-message .message-contents { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + margin-left: 25px; + position: relative; } + /* line 215, ../../../../general/res/sass/controls/_messages.scss */ + .l-message .message-contents .top-bar, + .l-message .message-contents .message-body { + margin-bottom: 20px; } + +/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-single .type-icon.message-type { + text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; + color: #ccc; font-size: 80px; - opacity: 0.5; - right: auto; + padding-left: 1px; 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 167, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .type-icon.message-type:before { + content: "\e608"; } +/* line 174, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-single .message-severity-info .type-icon.message-type { + color: #44ba53; } + /* line 175, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .message-severity-info .type-icon.message-type:before { + content: "\e608"; } +/* line 178, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-single .message-severity-alert .type-icon.message-type { + color: #ff8545; } + /* line 179, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .message-severity-alert .type-icon.message-type:before { + content: "\e610"; } +/* line 182, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-single .message-severity-error .type-icon.message-type { + color: #ff533a; } + /* line 183, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .message-severity-error .type-icon.message-type:before { + content: "\21"; } + +/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .type-icon.message-type { + text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; + color: #ccc; + font-size: 32px; + padding-left: 1px; + width: 32px; } + /* line 167, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .type-icon.message-type:before { + content: "\e608"; } +/* line 174, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .message-severity-info .type-icon.message-type { + color: #44ba53; } + /* line 175, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-severity-info .type-icon.message-type:before { + content: "\e608"; } +/* line 178, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .message-severity-alert .type-icon.message-type { + color: #ff8545; } + /* line 179, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-severity-alert .type-icon.message-type:before { + content: "\e610"; } +/* line 182, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .message-severity-error .type-icon.message-type { + color: #ff533a; } + /* line 183, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-severity-error .type-icon.message-type:before { + content: "\21"; } +/* line 232, ../../../../general/res/sass/controls/_messages.scss */ +.t-message-list .message-contents .l-message { + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + background: rgba(102, 102, 102, 0.1); + margin-bottom: 5px; + margin-right: 10px; + padding: 10px; } + /* line 240, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .message-contents { + font-size: 0.9em; } + /* line 242, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .message-contents .message-action { + color: #999999; } + /* line 243, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .message-contents .bottom-bar { + text-align: left; } + /* line 246, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .top-bar, + .t-message-list .message-contents .l-message .message-body { + margin-bottom: 10px; } /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { @@ -4127,134 +4232,148 @@ span.req { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 23, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .blocker { - background: rgba(0, 0, 0, 0.7); - z-index: 100; } -/* line 27, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .clk-icon.close { - font-size: 0.8rem; - position: absolute; - top: 10px; - right: 10px; - bottom: auto; - left: auto; - z-index: 100; } -/* line 36, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay > .holder { - background-color: #fcfcfc; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: #666; - display: inline-block; - -moz-border-radius: 12px; - -webkit-border-radius: 12px; - border-radius: 12px; - color: #666; - 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: 600px; - max-width: 1000px; - z-index: 101; } - /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ - .overlay > .holder > .contents { - top: 25px; - right: 25px; - bottom: 25px; - left: 25px; } -/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 1.2em; - line-height: 120%; - margin-bottom: 5px; } -/* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .hint { - color: #999999; } -/* line 73, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .top-bar { - height: 60px; } -/* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .editor { - top: 70px; - bottom: 40px; - left: 0; - right: 0; - overflow: auto; } +/* line 22, ../../../../general/res/sass/overlay/_overlay.scss */ +.overlay { + font-size: 90%; } + /* line 24, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .blocker { + background: rgba(0, 0, 0, 0.7); + z-index: 100; } + /* line 28, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .clk-icon.close { + font-size: 0.8rem; + position: absolute; + top: 10px; + right: 10px; + bottom: auto; + left: auto; + z-index: 100; } + /* line 37, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay > .holder { + background-color: #fcfcfc; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #666; + display: inline-block; + -moz-border-radius: 12px; + -webkit-border-radius: 12px; + border-radius: 12px; + color: #666; + 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: 600px; + max-width: 1000px; + z-index: 101; } + /* line 54, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay > .holder > .contents { + top: 25px; + right: 25px; + bottom: 25px; + left: 25px; } + /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 1.2em; + line-height: 120%; + margin-bottom: 5px; } + /* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .hint { + color: #999999; } + /* line 80, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .abs.top-bar, .overlay .s-menu span.top-bar.l-click-area, .s-menu .overlay span.top-bar.l-click-area { + height: 60px; } /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */ - .overlay .editor .field.l-med input[type='text'] { + .overlay .abs.editor, .overlay .s-menu span.editor.l-click-area, .s-menu .overlay span.editor.l-click-area, + .overlay .abs.message-body, + .overlay .s-menu span.message-body.l-click-area, + .s-menu .overlay span.message-body.l-click-area { + top: 70px; + bottom: 34px; + left: 0; + right: 0; + overflow: auto; } + /* line 92, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .abs.editor .field.l-med input[type='text'], .overlay .s-menu span.editor.l-click-area .field.l-med input[type='text'], .s-menu .overlay span.editor.l-click-area .field.l-med input[type='text'], + .overlay .abs.message-body .field.l-med input[type='text'], + .overlay .s-menu span.message-body.l-click-area .field.l-med input[type='text'], + .s-menu .overlay span.message-body.l-click-area .field.l-med input[type='text'] { + width: 100%; } + /* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .bottom-bar { + text-align: right; } + /* line 100, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu { + font-size: 95%; + height: 24px; + line-height: 24px; + margin-left: 5px; + padding: 0 15px; } + /* line 102, ../../../../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; + -webkit-border-radius: 4px; + border-radius: 4px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #fff; + display: inline-block; + -moz-user-select: -moz-none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + -moz-transition: background, 0.25s; + -o-transition: background, 0.25s; + -webkit-transition: background, 0.25s; + transition: background, 0.25s; + text-shadow: none; } + /* 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 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 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 110, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .bottom-bar .s-btn:first-child, .overlay .bottom-bar .s-menu:first-child { + margin-left: 0; } + /* line 117, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .abs.bottom-bar, .overlay .s-menu span.bottom-bar.l-click-area, .s-menu .overlay span.bottom-bar.l-click-area { + top: auto; + right: 0; + bottom: 0; + left: 0; + overflow: visible; + height: 24px; } + /* line 127, ../../../../general/res/sass/overlay/_overlay.scss */ + .overlay .l-progress-bar { + display: block; + height: 15px; + line-height: 15px; + margin: .5em 0; width: 100%; } -/* 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 99, ../../../../general/res/sass/overlay/_overlay.scss */ -.overlay .bottom-bar { - top: auto; - right: 0; - bottom: 0; - left: 0; - overflow: visible; - height: 30px; - text-align: right; } - /* 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 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; - -webkit-border-radius: 4px; - border-radius: 4px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - color: #fff; - display: inline-block; - -moz-user-select: -moz-none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; - -moz-transition: background, 0.25s; - -o-transition: background, 0.25s; - -webkit-transition: background, 0.25s; - transition: background, 0.25s; - text-shadow: none; } - /* 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 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 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 128, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 137, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { min-height: 275px; height: 275px; } @@ -4307,7 +4426,7 @@ span.req { /* 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 */ + /* line 57, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder .contents .top-bar, .overlay > .holder .contents .editor, .overlay > .holder .contents .bottom-bar { @@ -4320,12 +4439,12 @@ span.req { margin-bottom: 20px; position: relative; } - /* line 66, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + /* line 68, ../../../../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 */ + /* line 76, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder .contents .bottom-bar { text-align: center; } } /***************************************************************************** @@ -4437,7 +4556,7 @@ ul.tree { /* line 90, ../../../../general/res/sass/tree/_tree.scss */ .tree-item .label .type-icon .icon.l-icon-alert, .search-result-item .label .type-icon .icon.l-icon-alert { - color: #ff3c00; + color: #ff533a; font-size: 8px; line-height: 8px; height: 8px; diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index cd13385d6b..ea9d8437f5 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -23,7 +23,7 @@ $contrastInvokeMenuPercent: 40%; // General Colors $colorAlt1: #ff6600; -$colorAlert: #ff3c00; +$colorAlert: #ff533a; $colorIconLink: #49dedb; $colorPausedBg: #ff9900; $colorPausedFg: #fff; @@ -61,13 +61,14 @@ $colorInputIcon: pushBack($colorBodyFg, 25%); // Status colors, mainly used for messaging and item ancillary symbols $colorStatusFg: #fff; $colorStatusDefault: #ccc; -$colorStatusOk: #60e68e; -$colorStatusCaution: #ffa864; +$colorStatusOk: #44ba53; +$colorStatusCaution: #ff8545; $colorStatusAlert: $colorAlert; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: #0a0; $progressBarHOverlay: 15px; $progressBarStripeW: 20px; +$shdwStatusIc: rgba(white, 0.8) 0 0px 5px; // Selects $colorSelectBg: #ddd; diff --git a/testing/dialogTest/src/DialogLaunchController.js b/testing/dialogTest/src/DialogLaunchController.js index 7f51a91329..917cb4bc4c 100644 --- a/testing/dialogTest/src/DialogLaunchController.js +++ b/testing/dialogTest/src/DialogLaunchController.js @@ -115,31 +115,71 @@ define( ], messages: [] }; + + + function getExampleActionText() { + var actionTexts = [ + "Adipiscing turpis mauris in enim elementu hac, enim aliquam etiam.", + "Eros turpis, pulvinar turpis eros eu", + "Lundium nascetur a, lectus montes ac, parturient in natoque, duis risus risus pulvinar pid rhoncus, habitasse auctor natoque!" + ]; + return actionTexts[Math.floor(Math.random()*3)]; + } + + function getExampleActions() { + var actions = [ + { + label: "Try Again", + action: function () { + $log.debug("Try Again pressed"); + } + }, + { + label: "Remove", + action: function () { + $log.debug("Remove pressed"); + } + }, + { + label: "Cancel", + action: function () { + $log.debug("Cancel pressed"); + } + } + ]; + + // Randomly remove some actions off the top; leave at least one + actions.splice(0,Math.floor(Math.random() * actions.length)); + + return actions; + } + + function getExampleSeverity() { + var severities = [ + messageSeverity.INFO, + messageSeverity.ALERT, + messageSeverity.ERROR + ]; + return severities[Math.floor(Math.random() * severities.length)]; + } function createMessage (messageNumber) { var messageModel = { - ngModel: { - dialog: { - title: "Message " + messageNumber, - severity: messageSeverity.INFO, - actions: [ - { - label: "Cancel Duplication", - action: function () { - $log.debug("Cancel Duplication pressed"); - $log.debug("Message should be dismissed"); - } - } - ] + ngModel: { + dialog: { + title: "Message Title " + messageNumber, + actionText: getExampleActionText(), + severity: getExampleSeverity(), + actions: getExampleActions() + } } - } }; return messageModel; } if (dialogService.showMessageList(model)) { //Do processing here - for (var i = 0; i < 4; i++) { + for (var i = 0; i < 10; i++) { model.messages.push(createMessage(i)); } } else { From 12a94f828a3a806be67b9d89cd9f45cf1ed9865e Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 13:14:30 -0700 Subject: [PATCH 021/148] Added some more semicolons --- platform/commonUI/notification/src/NotificationService.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index ecdb8d6ddd..7d0db198da 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -159,7 +159,8 @@ define( NotificationService.prototype.setActiveNotification = function (notification) { - var that = this; + var that = this, + timeout; this.active.notification = notification; /* If autoDismiss has been specified, setup a timeout to @@ -170,7 +171,7 @@ define( */ if (notification && (notification.autoDismiss || this.selectNextNotification())) { - var timeout = isNaN(notification.autoDismiss) ? + timeout = isNaN(notification.autoDismiss) ? this.DEFAULT_AUTO_DISMISS : notification.autoDismiss; @@ -188,12 +189,13 @@ define( * @private */ NotificationService.prototype.selectNextNotification = function () { + var notification; /* Loop through the notifications queue and find the first one that has not already been minimized (manually or otherwise). */ for (var i=0; i< this.notifications.length; i++) { - var notification = this.notifications[i]; + notification = this.notifications[i]; if (!notification.minimized && notification!= this.activeNotification) { From fc8630dbc633074211a56061a9d2850ba1e882da Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 13:15:31 -0700 Subject: [PATCH 022/148] Moved some vars --- platform/commonUI/notification/src/NotificationService.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 7d0db198da..97761cd227 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -189,12 +189,13 @@ define( * @private */ NotificationService.prototype.selectNextNotification = function () { - var notification; + var notification, + i=0; /* Loop through the notifications queue and find the first one that has not already been minimized (manually or otherwise). */ - for (var i=0; i< this.notifications.length; i++) { + for (; i< this.notifications.length; i++) { notification = this.notifications[i]; if (!notification.minimized From df590107cbd0c721fe3c5a1401c1fb20ad212d22 Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 13:17:12 -0700 Subject: [PATCH 023/148] Moved some more vars --- .../notification/src/NotificationService.js | 2 +- .../test/NotificationServiceSpec.js | 19 ++++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 97761cd227..1a521ad4da 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -199,7 +199,7 @@ define( notification = this.notifications[i]; if (!notification.minimized - && notification!= this.activeNotification) { + && notification!== this.activeNotification) { return notification; } diff --git a/platform/commonUI/notification/test/NotificationServiceSpec.js b/platform/commonUI/notification/test/NotificationServiceSpec.js index 96994f26d2..ca4d5eb2dd 100644 --- a/platform/commonUI/notification/test/NotificationServiceSpec.js +++ b/platform/commonUI/notification/test/NotificationServiceSpec.js @@ -168,15 +168,16 @@ define( }); it("auto-minimizes errors when a number of them arrive in" + " short succession ", function() { - var activeNotification; - var error2 = { - title: "Second Mock Error Notification", - severity: MessageSeverity.ERROR - }; - var error3 = { - title: "Third Mock Error Notification", - severity: MessageSeverity.ERROR - }; + var activeNotification, + error2 = { + title: "Second Mock Error Notification", + severity: MessageSeverity.ERROR + }; + error3 = { + title: "Third Mock Error Notification", + severity: MessageSeverity.ERROR + }; + //First pre-load with a success message notificationService.notify(errorModel); //Then notify of a third error From 5e713f279bebd2ddf604017e5d22c370edefc018 Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 13:18:47 -0700 Subject: [PATCH 024/148] Moved some more vars --- .../commonUI/notification/test/NotificationServiceSpec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/platform/commonUI/notification/test/NotificationServiceSpec.js b/platform/commonUI/notification/test/NotificationServiceSpec.js index ca4d5eb2dd..1992865c8e 100644 --- a/platform/commonUI/notification/test/NotificationServiceSpec.js +++ b/platform/commonUI/notification/test/NotificationServiceSpec.js @@ -172,12 +172,12 @@ define( error2 = { title: "Second Mock Error Notification", severity: MessageSeverity.ERROR - }; + }, error3 = { title: "Third Mock Error Notification", severity: MessageSeverity.ERROR }; - + //First pre-load with a success message notificationService.notify(errorModel); //Then notify of a third error From ba614fe2d6757184366cced7ccd14087f2437a4e Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 13:46:42 -0700 Subject: [PATCH 025/148] Trying to sort out error --- bundles.json | 2 +- platform/commonUI/notification/bundle.json | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/bundles.json b/bundles.json index 9d6687c4f8..56dbadc44a 100644 --- a/bundles.json +++ b/bundles.json @@ -5,6 +5,7 @@ "platform/commonUI/about", "platform/commonUI/browse", "platform/commonUI/edit", + "platform/commonUI/notification", "platform/commonUI/dialog", "platform/commonUI/general", "platform/commonUI/inspect", @@ -26,7 +27,6 @@ "platform/policy", "platform/entanglement", "platform/search", - "platform/commonUI/notification", "example/imagery", "example/eventGenerator", diff --git a/platform/commonUI/notification/bundle.json b/platform/commonUI/notification/bundle.json index 56087d9094..6c1ac21d88 100644 --- a/platform/commonUI/notification/bundle.json +++ b/platform/commonUI/notification/bundle.json @@ -10,8 +10,7 @@ { "key": "notificationService", "implementation": "NotificationService.js", - "depends": [ "$log", "$timeout", "messageSeverity", - "DEFAULT_AUTO_DISMISS" ] + "depends": [ "$timeout", "DEFAULT_AUTO_DISMISS" ] } ] } From 5ff3c71523e92bcb2e1734985013bbc1ebf1dfbd Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 13:56:59 -0700 Subject: [PATCH 026/148] Fixed the Banner Controller which was not returning reference to controller --- platform/commonUI/general/src/controllers/BannerController.js | 1 + 1 file changed, 1 insertion(+) diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index 1c6193e061..8f1128df1e 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -28,4 +28,5 @@ define( function BannerController($scope, notificationService){ $scope.activeNotification = notificationService.active.Notification; } + return BannerController; }); \ No newline at end of file From 82670584875a38f639a815abf9345a17f6222790 Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 8 Oct 2015 15:08:26 -0700 Subject: [PATCH 027/148] Begun integration of Notifications framework with Charles' code --- .../general/res/templates/message-banner.html | 28 +++++++---- .../src/controllers/BannerController.js | 2 +- platform/commonUI/notification/bundle.json | 2 +- .../notification/src/NotificationService.js | 27 ++++++---- testing/dialogTest/bundle.json | 15 ++++++ .../dialogTest/res/notification-launch.html | 9 ++++ .../src/NotificationLaunchController.js | 44 ++++++++++++++++ .../src/NotificationLaunchIndicator.js | 50 +++++++++++++++++++ 8 files changed, 155 insertions(+), 22 deletions(-) create mode 100644 testing/dialogTest/res/notification-launch.html create mode 100644 testing/dialogTest/src/NotificationLaunchController.js create mode 100644 testing/dialogTest/src/NotificationLaunchIndicator.js diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html index 5091f81548..2e53c2c94b 100644 --- a/platform/commonUI/general/res/templates/message-banner.html +++ b/platform/commonUI/general/res/templates/message-banner.html @@ -1,12 +1,18 @@ -
- +
+
+ + + +
\ No newline at end of file diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index 8f1128df1e..b1f26eddce 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -26,7 +26,7 @@ define( function () { "use strict"; function BannerController($scope, notificationService){ - $scope.activeNotification = notificationService.active.Notification; + $scope.active = notificationService.active; } return BannerController; }); \ No newline at end of file diff --git a/platform/commonUI/notification/bundle.json b/platform/commonUI/notification/bundle.json index 6c1ac21d88..6f793e7ee4 100644 --- a/platform/commonUI/notification/bundle.json +++ b/platform/commonUI/notification/bundle.json @@ -3,7 +3,7 @@ "constants": [ { "key": "DEFAULT_AUTO_DISMISS", - "value": 2000 + "value": 3000 } ], "services": [ diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 1a521ad4da..8ecf2ad0b4 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -93,8 +93,7 @@ define( * A context in which to hold the active notification and a * handle to its timeout. */ - this.active = { - }; + this.active = {}; } /** @@ -113,7 +112,7 @@ define( */ NotificationService.prototype.success = function (notification) { notification.autoDismiss = notification.autoDismiss || true; - NotificationService.prototype.notify(notification); + this.notify(notification); }; /** @@ -126,7 +125,12 @@ define( NotificationService.prototype.notify = function (notification) { /*var notification = new Notification(model), that=this; */ - var that = this; + var that = this, + timeout; + + if (notification.autoDismiss === true){ + notification.autoDismiss = this.DEFAULT_AUTO_DISMISS; + } this.notifications.push(notification); /* @@ -145,9 +149,12 @@ define( This notifcation has been added to queue and will be serviced as soon as possible. */ + timeout = notification.autoDismiss ? + notification.autoDismiss : + this.DEFAULT_AUTO_DISMISS; this.active.timeout = this.$timeout(function () { that.dismissOrMinimize(that.active.notification); - }); + }, timeout); } }; @@ -171,9 +178,9 @@ define( */ if (notification && (notification.autoDismiss || this.selectNextNotification())) { - timeout = isNaN(notification.autoDismiss) ? - this.DEFAULT_AUTO_DISMISS : - notification.autoDismiss; + timeout = notification.autoDismiss ? + notification.autoDismiss : + this.DEFAULT_AUTO_DISMISS; this.active.timeout = this.$timeout(function () { that.dismissOrMinimize(notification); @@ -258,5 +265,7 @@ define( this.dismiss(notification); } }; + return NotificationService; - }); \ No newline at end of file + } +); \ No newline at end of file diff --git a/testing/dialogTest/bundle.json b/testing/dialogTest/bundle.json index 36ec16e048..095f668c0f 100644 --- a/testing/dialogTest/bundle.json +++ b/testing/dialogTest/bundle.json @@ -4,6 +4,10 @@ { "key": "dialogLaunchTemplate", "templateUrl": "dialog-launch.html" + }, + { + "key": "notificationLaunchTemplate", + "templateUrl": "notification-launch.html" } ], "controllers": [ @@ -17,11 +21,22 @@ "$log", "messageSeverity" ] + }, + { + "key": "NotificationLaunchController", + "implementation": "NotificationLaunchController.js", + "depends": [ + "$scope", + "notificationService" + ] } ], "indicators": [ { "implementation": "DialogLaunchIndicator.js" + }, + { + "implementation": "NotificationLaunchIndicator.js" } ] } diff --git a/testing/dialogTest/res/notification-launch.html b/testing/dialogTest/res/notification-launch.html new file mode 100644 index 0000000000..73bc7c524f --- /dev/null +++ b/testing/dialogTest/res/notification-launch.html @@ -0,0 +1,9 @@ + + + + Success | + Error | + Progress + + Notifications + \ No newline at end of file diff --git a/testing/dialogTest/src/NotificationLaunchController.js b/testing/dialogTest/src/NotificationLaunchController.js new file mode 100644 index 0000000000..d475df08cb --- /dev/null +++ b/testing/dialogTest/src/NotificationLaunchController.js @@ -0,0 +1,44 @@ +/***************************************************************************** + * 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 NotificationLaunchController($scope, notificationService) { + /** + * Success | + Error | + Progress + */ + $scope.newSuccess = function(){ + + notificationService.success({ + title: "Success notification!" + }) + }; + } + return NotificationLaunchController; + } +); diff --git a/testing/dialogTest/src/NotificationLaunchIndicator.js b/testing/dialogTest/src/NotificationLaunchIndicator.js new file mode 100644 index 0000000000..174810d721 --- /dev/null +++ b/testing/dialogTest/src/NotificationLaunchIndicator.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 NotificationLaunchIndicator() { + + } + + NotificationLaunchIndicator.template = 'notificationLaunchTemplate'; + + NotificationLaunchIndicator.prototype.getGlyph = function () { + return "i"; + }; + NotificationLaunchIndicator.prototype.getGlyphClass = function () { + return 'caution'; + }; + NotificationLaunchIndicator.prototype.getText = function () { + return "Launch notification"; + }; + NotificationLaunchIndicator.prototype.getDescription = function () { + return "Launch notification"; + }; + + return NotificationLaunchIndicator; + } +); From 954fdd5906d8ce547b7e79664dbe8bfcedad6d51 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 8 Oct 2015 19:10:26 -0700 Subject: [PATCH 028/148] [Frontend] Sanding/positioning and Cancel button added to Messasges dialog open #159 open #170 Added Cancel button to Messages dialog in DialogService.js; Important tweaks to layout of messages to allow bottom-bar to align to bottom in singleton dialog view; Revised status colors in theme's constants files; --- .../dialog/res/templates/overlay.html | 3 +- platform/commonUI/dialog/src/DialogService.js | 17 ++- .../commonUI/general/res/sass/_constants.scss | 2 +- .../general/res/sass/controls/_messages.scss | 30 ++++- .../res/sass/mobile/overlay/_overlay.scss | 7 +- .../general/res/sass/overlay/_overlay.scss | 9 +- .../espresso/res/css/theme-espresso.css | 113 +++++++++++------- .../themes/espresso/res/sass/_constants.scss | 6 +- .../themes/snow/res/css/theme-snow.css | 113 +++++++++++------- .../themes/snow/res/sass/_constants.scss | 6 +- .../dialogTest/src/DialogLaunchController.js | 8 +- 11 files changed, 211 insertions(+), 103 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/overlay.html b/platform/commonUI/dialog/res/templates/overlay.html index f2b7c0d9ee..bc19a97b86 100644 --- a/platform/commonUI/dialog/res/templates/overlay.html +++ b/platform/commonUI/dialog/res/templates/overlay.html @@ -22,8 +22,7 @@
- x
diff --git a/platform/commonUI/dialog/src/DialogService.js b/platform/commonUI/dialog/src/DialogService.js index 2fc6f41a60..242f311147 100644 --- a/platform/commonUI/dialog/src/DialogService.js +++ b/platform/commonUI/dialog/src/DialogService.js @@ -240,7 +240,7 @@ define( // will handle actual insertion into the DOM this.overlay = this.overlayService.createOverlay( "overlay-blocking-message", - {dialog: dialogModel}, + { dialog: dialogModel }, "t-dialog-sm" ); this.dialogVisible = true; @@ -254,12 +254,25 @@ define( }; DialogService.prototype.showMessageList = function(dialogModel) { + var self = this; + + // Cancel function; this will be passed in to the + // overlay-dialog template and associated with a + // Cancel or X button click + function cancel() { + //deferred.reject(); // Not sure what this does + self.dismiss(); + } + if (this.canShowDialog(dialogModel)) { // Add the overlay using the OverlayService, which // will handle actual insertion into the DOM this.overlay = this.overlayService.createOverlay( "overlay-message-list", - {dialog: dialogModel}, + { + dialog: dialogModel, + cancel: cancel + }, "t-dialog" ); this.dialogVisible = true; diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index 2c425493ea..c3851a715d 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -46,7 +46,7 @@ $ueBrowseLeftPaneW: 25%; $ueEditLeftPaneW: 75%; $treeSearchInputBarH: 25px; // Overlay -$ovrTopBarH: 60px; +$ovrTopBarH: 45px; $ovrFooterH: 24px; $overlayMargin: 25px; // Items diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index d537ee8ff1..aa26760c9a 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -167,8 +167,8 @@ &:before { content:"\e608"; } color: $colorStatusDefault; font-size: $iconW; - padding-left: 1px; - width: $iconW; + padding: 1px; + width: $iconW + 2; } .message-severity-info .type-icon.message-type { @@ -201,6 +201,7 @@ .l-message { @include display-flex; @include flex-direction(row); + @include align-items(stretch); .type-icon.message-type { //@include test(red); @include flex(0 1 auto); @@ -223,22 +224,41 @@ // Message as singleton .t-message-single { @include messageBlock(80px); + + @include desktop { + .l-message, + .bottom-bar { + @include absPosDefault(); + } + + .bottom-bar { + top: auto; + height: $ovrFooterH; + } + } } // Messages in list .t-message-list { @include messageBlock(32px); + .message-contents { .l-message { //border-bottom: 1px solid pullForward($colorOvrBg, 20%); @include border-radius($controlCr); background: rgba($colorOvrFg, 0.1); margin-bottom: $interiorMargin; - margin-right: $interiorMarginLg; padding: $interiorMarginLg; + .message-contents, + .bottom-bar { + //@include test(green); + position: relative; + } + .message-contents { font-size: 0.9em; + margin-left: $interiorMarginLg; .message-action { color: pushBack($colorOvrFg, 20%); } .bottom-bar { text-align: left; } } @@ -249,4 +269,8 @@ } } } + + @include desktop { + .message-contents .l-message { margin-right: $interiorMarginLg; } + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss index 9fe624b2fd..9fd6721130 100644 --- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss @@ -54,9 +54,10 @@ } .contents { - .top-bar, - .editor, - .bottom-bar { + .abs.top-bar, + .abs.editor, + .abs.message-body, + .abs.bottom-bar { //@include test(orange); top: auto; right: auto; bottom: auto; left: auto; height: auto; width: auto; diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 305534c0d0..602af62887 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -83,8 +83,8 @@ .abs.editor, .abs.message-body { - top: $ovrTopBarH + ($interiorMargin * 2); - bottom: $ovrFooterH + $interiorMargin * 2; + top: $ovrTopBarH + $interiorMarginLg; + bottom: $ovrFooterH + $interiorMarginLg; left: 0; right: 0; overflow: auto; @@ -137,6 +137,7 @@ .t-dialog-sm .overlay > .holder { // Used for blocker and in-progress dialogs, modal alerts, etc. //@include test(red); - min-height: 275px; - height: 275px; + $h: 225px; + min-height: $h; + height: $h; } \ 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 1d4d0e0e79..229e97e44b 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -2399,10 +2399,10 @@ label.checkbox.custom { margin-right: 3px; } /* line 54, ../../../../general/res/sass/controls/_messages.scss */ .status.block.ok .status-indicator { - color: #44ba53; } + color: #62ba72; } /* line 57, ../../../../general/res/sass/controls/_messages.scss */ .status.block.caution .status-indicator { - color: #ff8545; } + color: #ffa66d; } /* line 60, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; @@ -2559,30 +2559,30 @@ label.checkbox.custom { opacity: 1; } /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok { - background-color: #1b4a21; + background-color: #285b31; color: #ccc; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok:hover { - background-color: #296f32; } + background-color: #387e44; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action { - background-color: #0d2510; } + background-color: #18381e; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover { - background-color: #1b4a21; } + background-color: #285b31; } /* line 159, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution { - background-color: #ab3b00; + background-color: #d35200; color: #ccc; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution:hover { - background-color: #de4c00; } + background-color: #ff6807; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action { - background-color: #782900; } + background-color: #a03e00; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action:hover { - background-color: #ab3b00; } + background-color: #d35200; } /* Paths: t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message > @@ -2602,19 +2602,21 @@ label.checkbox.custom { display: -webkit-flex; display: flex; -webkit-flex-direction: row; - flex-direction: row; } - /* line 204, ../../../../general/res/sass/controls/_messages.scss */ + flex-direction: row; + -webkit-align-items: stretch; + align-items: stretch; } + /* line 205, ../../../../general/res/sass/controls/_messages.scss */ .l-message .type-icon.message-type { -webkit-flex: 0 1 auto; flex: 0 1 auto; position: relative; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-left: 25px; position: relative; } - /* line 215, ../../../../general/res/sass/controls/_messages.scss */ + /* line 216, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents .top-bar, .l-message .message-contents .message-body { margin-bottom: 20px; } @@ -2624,80 +2626,104 @@ label.checkbox.custom { text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; color: #ccc; font-size: 80px; - padding-left: 1px; - width: 80px; } + padding: 1px; + width: 82px; } /* line 167, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type:before { content: "\e608"; } /* line 174, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type { - color: #44ba53; } + color: #62ba72; } /* line 175, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type:before { content: "\e608"; } /* line 178, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type { - color: #ff8545; } + color: #ffa66d; } /* line 179, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type:before { content: "\e610"; } /* line 182, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type { - color: #ff533a; } + color: #d4585c; } /* line 183, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type:before { content: "\21"; } +@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 229, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .l-message, + .t-message-single .bottom-bar { + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; } + /* line 234, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .bottom-bar { + top: auto; + height: 24px; } } /* line 165, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type { text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; color: #ccc; font-size: 32px; - padding-left: 1px; - width: 32px; } + padding: 1px; + width: 34px; } /* line 167, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type:before { content: "\e608"; } /* line 174, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type { - color: #44ba53; } + color: #62ba72; } /* line 175, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type:before { content: "\e608"; } /* line 178, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type { - color: #ff8545; } + color: #ffa66d; } /* line 179, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type:before { content: "\e610"; } /* line 182, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type { - color: #ff533a; } + color: #d4585c; } /* line 183, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type:before { content: "\21"; } -/* line 232, ../../../../general/res/sass/controls/_messages.scss */ +/* line 246, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: rgba(230, 230, 230, 0.1); margin-bottom: 5px; - margin-right: 10px; padding: 10px; } - /* line 240, ../../../../general/res/sass/controls/_messages.scss */ + /* line 253, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .message-contents, + .t-message-list .message-contents .l-message .bottom-bar { + position: relative; } + /* line 259, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents { - font-size: 0.9em; } - /* line 242, ../../../../general/res/sass/controls/_messages.scss */ + font-size: 0.9em; + margin-left: 10px; } + /* line 262, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .message-action { color: #b3b3b3; } - /* line 243, ../../../../general/res/sass/controls/_messages.scss */ + /* line 263, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .bottom-bar { text-align: left; } - /* line 246, ../../../../general/res/sass/controls/_messages.scss */ + /* line 266, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .top-bar, .t-message-list .message-contents .l-message .message-body { margin-bottom: 10px; } +@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 274, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message { + margin-right: 10px; } } /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { @@ -4374,13 +4400,13 @@ span.req { color: #b3b3b3; } /* line 80, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .abs.top-bar, .overlay .s-menu span.top-bar.l-click-area, .s-menu .overlay span.top-bar.l-click-area { - height: 60px; } + height: 45px; } /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .abs.editor, .overlay .s-menu span.editor.l-click-area, .s-menu .overlay span.editor.l-click-area, .overlay .abs.message-body, .overlay .s-menu span.message-body.l-click-area, .s-menu .overlay span.message-body.l-click-area { - top: 70px; + top: 55px; bottom: 34px; left: 0; right: 0; @@ -4461,8 +4487,8 @@ span.req { /* line 137, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { - min-height: 275px; - height: 275px; } + 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 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ @@ -4513,9 +4539,16 @@ span.req { .overlay > .holder .editor .form .form-row > .label:after { float: none; } /* line 57, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder .contents .top-bar, - .overlay > .holder .contents .editor, - .overlay > .holder .contents .bottom-bar { + .overlay > .holder .contents .abs.top-bar, .overlay > .holder .contents .s-menu span.top-bar.l-click-area, .s-menu .overlay > .holder .contents span.top-bar.l-click-area, + .overlay > .holder .contents .abs.editor, + .overlay > .holder .contents .s-menu span.editor.l-click-area, + .s-menu .overlay > .holder .contents span.editor.l-click-area, + .overlay > .holder .contents .abs.message-body, + .overlay > .holder .contents .s-menu span.message-body.l-click-area, + .s-menu .overlay > .holder .contents span.message-body.l-click-area, + .overlay > .holder .contents .abs.bottom-bar, + .overlay > .holder .contents .s-menu span.bottom-bar.l-click-area, + .s-menu .overlay > .holder .contents span.bottom-bar.l-click-area { top: auto; right: auto; bottom: auto; @@ -4525,12 +4558,12 @@ span.req { margin-bottom: 20px; position: relative; } - /* line 68, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + /* line 69, ../../../../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 76, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + /* line 77, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder .contents .bottom-bar { text-align: center; } } /***************************************************************************** diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 1a9f5b4ed0..896241de5c 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -61,9 +61,9 @@ $colorInputIcon: pushBack($colorBodyFg, 15%); // Status colors, mainly used for messaging and item ancillary symbols $colorStatusFg: #ccc; $colorStatusDefault: #ccc; -$colorStatusOk: #44ba53; -$colorStatusCaution: #ff8545; -$colorStatusAlert: $colorAlert; +$colorStatusOk: #62ba72; +$colorStatusCaution: #ffa66d; +$colorStatusAlert: #d4585c; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: $colorKey; $progressBarHOverlay: 15px; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 5db2792f52..0ae366cd0e 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -2347,10 +2347,10 @@ label.checkbox.custom { margin-right: 3px; } /* line 54, ../../../../general/res/sass/controls/_messages.scss */ .status.block.ok .status-indicator { - color: #44ba53; } + color: #60ba7b; } /* line 57, ../../../../general/res/sass/controls/_messages.scss */ .status.block.caution .status-indicator { - color: #ff8545; } + color: #ffb66c; } /* line 60, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; @@ -2507,30 +2507,30 @@ label.checkbox.custom { opacity: 1; } /* line 156, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok { - background-color: #1b4a21; + background-color: #275a36; color: #fff; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok:hover { - background-color: #296f32; } + background-color: #367e4c; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action { - background-color: #0d2510; } + background-color: #183621; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.ok .s-action:hover { - background-color: #1b4a21; } + background-color: #275a36; } /* line 159, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution { - background-color: #ab3b00; + background-color: #d26a00; color: #fff; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution:hover { - background-color: #de4c00; } + background-color: #ff8306; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action { - background-color: #782900; } + background-color: #9f5000; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner.caution .s-action:hover { - background-color: #ab3b00; } + background-color: #d26a00; } /* Paths: t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message > @@ -2550,19 +2550,21 @@ label.checkbox.custom { display: -webkit-flex; display: flex; -webkit-flex-direction: row; - flex-direction: row; } - /* line 204, ../../../../general/res/sass/controls/_messages.scss */ + flex-direction: row; + -webkit-align-items: stretch; + align-items: stretch; } + /* line 205, ../../../../general/res/sass/controls/_messages.scss */ .l-message .type-icon.message-type { -webkit-flex: 0 1 auto; flex: 0 1 auto; position: relative; } - /* line 209, ../../../../general/res/sass/controls/_messages.scss */ + /* line 210, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-left: 25px; position: relative; } - /* line 215, ../../../../general/res/sass/controls/_messages.scss */ + /* line 216, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents .top-bar, .l-message .message-contents .message-body { margin-bottom: 20px; } @@ -2572,80 +2574,104 @@ label.checkbox.custom { text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; color: #ccc; font-size: 80px; - padding-left: 1px; - width: 80px; } + padding: 1px; + width: 82px; } /* line 167, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type:before { content: "\e608"; } /* line 174, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type { - color: #44ba53; } + color: #60ba7b; } /* line 175, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type:before { content: "\e608"; } /* line 178, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type { - color: #ff8545; } + color: #ffb66c; } /* line 179, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type:before { content: "\e610"; } /* line 182, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type { - color: #ff533a; } + color: #c96b68; } /* line 183, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type:before { content: "\21"; } +@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 229, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .l-message, + .t-message-single .bottom-bar { + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; } + /* line 234, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-single .bottom-bar { + top: auto; + height: 24px; } } /* line 165, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type { text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; color: #ccc; font-size: 32px; - padding-left: 1px; - width: 32px; } + padding: 1px; + width: 34px; } /* line 167, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type:before { content: "\e608"; } /* line 174, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type { - color: #44ba53; } + color: #60ba7b; } /* line 175, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type:before { content: "\e608"; } /* line 178, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type { - color: #ff8545; } + color: #ffb66c; } /* line 179, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type:before { content: "\e610"; } /* line 182, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type { - color: #ff533a; } + color: #c96b68; } /* line 183, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type:before { content: "\21"; } -/* line 232, ../../../../general/res/sass/controls/_messages.scss */ +/* line 246, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background: rgba(102, 102, 102, 0.1); margin-bottom: 5px; - margin-right: 10px; padding: 10px; } - /* line 240, ../../../../general/res/sass/controls/_messages.scss */ + /* line 253, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message .message-contents, + .t-message-list .message-contents .l-message .bottom-bar { + position: relative; } + /* line 259, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents { - font-size: 0.9em; } - /* line 242, ../../../../general/res/sass/controls/_messages.scss */ + font-size: 0.9em; + margin-left: 10px; } + /* line 262, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .message-action { color: #999999; } - /* line 243, ../../../../general/res/sass/controls/_messages.scss */ + /* line 263, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .bottom-bar { text-align: left; } - /* line 246, ../../../../general/res/sass/controls/_messages.scss */ + /* line 266, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .top-bar, .t-message-list .message-contents .l-message .message-body { margin-bottom: 10px; } +@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 274, ../../../../general/res/sass/controls/_messages.scss */ + .t-message-list .message-contents .l-message { + margin-right: 10px; } } /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */ .l-time-controller { @@ -4297,13 +4323,13 @@ span.req { color: #999999; } /* line 80, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .abs.top-bar, .overlay .s-menu span.top-bar.l-click-area, .s-menu .overlay span.top-bar.l-click-area { - height: 60px; } + height: 45px; } /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .abs.editor, .overlay .s-menu span.editor.l-click-area, .s-menu .overlay span.editor.l-click-area, .overlay .abs.message-body, .overlay .s-menu span.message-body.l-click-area, .s-menu .overlay span.message-body.l-click-area { - top: 70px; + top: 55px; bottom: 34px; left: 0; right: 0; @@ -4375,8 +4401,8 @@ span.req { /* line 137, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { - min-height: 275px; - height: 275px; } + 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 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ @@ -4427,9 +4453,16 @@ span.req { .overlay > .holder .editor .form .form-row > .label:after { float: none; } /* line 57, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ - .overlay > .holder .contents .top-bar, - .overlay > .holder .contents .editor, - .overlay > .holder .contents .bottom-bar { + .overlay > .holder .contents .abs.top-bar, .overlay > .holder .contents .s-menu span.top-bar.l-click-area, .s-menu .overlay > .holder .contents span.top-bar.l-click-area, + .overlay > .holder .contents .abs.editor, + .overlay > .holder .contents .s-menu span.editor.l-click-area, + .s-menu .overlay > .holder .contents span.editor.l-click-area, + .overlay > .holder .contents .abs.message-body, + .overlay > .holder .contents .s-menu span.message-body.l-click-area, + .s-menu .overlay > .holder .contents span.message-body.l-click-area, + .overlay > .holder .contents .abs.bottom-bar, + .overlay > .holder .contents .s-menu span.bottom-bar.l-click-area, + .s-menu .overlay > .holder .contents span.bottom-bar.l-click-area { top: auto; right: auto; bottom: auto; @@ -4439,12 +4472,12 @@ span.req { margin-bottom: 20px; position: relative; } - /* line 68, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + /* line 69, ../../../../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 76, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ + /* line 77, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ .overlay > .holder .contents .bottom-bar { text-align: center; } } /***************************************************************************** diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index ea9d8437f5..02e0f7ab11 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -61,9 +61,9 @@ $colorInputIcon: pushBack($colorBodyFg, 25%); // Status colors, mainly used for messaging and item ancillary symbols $colorStatusFg: #fff; $colorStatusDefault: #ccc; -$colorStatusOk: #44ba53; -$colorStatusCaution: #ff8545; -$colorStatusAlert: $colorAlert; +$colorStatusOk: #60ba7b; +$colorStatusCaution: #ffb66c; +$colorStatusAlert: #c96b68; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: #0a0; $progressBarHOverlay: 15px; diff --git a/testing/dialogTest/src/DialogLaunchController.js b/testing/dialogTest/src/DialogLaunchController.js index 917cb4bc4c..7946463abe 100644 --- a/testing/dialogTest/src/DialogLaunchController.js +++ b/testing/dialogTest/src/DialogLaunchController.js @@ -115,8 +115,7 @@ define( ], messages: [] }; - - + function getExampleActionText() { var actionTexts = [ "Adipiscing turpis mauris in enim elementu hac, enim aliquam etiam.", @@ -177,6 +176,11 @@ define( return messageModel; } + function dismiss() { + scope.$destroy(); + element.remove(); + } + if (dialogService.showMessageList(model)) { //Do processing here for (var i = 0; i < 10; i++) { From 2b97d61d6cf840e2f79023e38258b03d87bf00d7 Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 9 Oct 2015 10:59:36 -0700 Subject: [PATCH 029/148] Further integration work --- .../general/res/templates/message-banner.html | 22 +++++++++------- .../src/controllers/BannerController.js | 3 +++ .../notification/src/MessageSeverity.js | 3 ++- .../notification/src/NotificationService.js | 3 ++- .../src/NotificationLaunchController.js | 26 +++++++++++++++++-- 5 files changed, 43 insertions(+), 14 deletions(-) diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html index 2e53c2c94b..a896b08702 100644 --- a/platform/commonUI/general/res/templates/message-banner.html +++ b/platform/commonUI/general/res/templates/message-banner.html @@ -3,16 +3,18 @@ class="l-message-banner s-message-banner"> - - +
\ No newline at end of file diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index b1f26eddce..214283633c 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -27,6 +27,9 @@ define( "use strict"; function BannerController($scope, notificationService){ $scope.active = notificationService.active; + $scope.dismiss = function(notification){ + notificationService.dismissOrMinimize(notification); + } } return BannerController; }); \ No newline at end of file diff --git a/platform/commonUI/notification/src/MessageSeverity.js b/platform/commonUI/notification/src/MessageSeverity.js index 39e8e6d8d0..5708dd9554 100644 --- a/platform/commonUI/notification/src/MessageSeverity.js +++ b/platform/commonUI/notification/src/MessageSeverity.js @@ -5,6 +5,7 @@ define(function(){ return { SUCCESS: 0, - ERROR: 1 + INFO: 1, + ERROR: 2 }; }); \ No newline at end of file diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 8ecf2ad0b4..078dde51d5 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -112,6 +112,7 @@ define( */ NotificationService.prototype.success = function (notification) { notification.autoDismiss = notification.autoDismiss || true; + notification.severity = MessageSeverity.SUCCESS; this.notify(notification); }; @@ -206,7 +207,7 @@ define( notification = this.notifications[i]; if (!notification.minimized - && notification!== this.activeNotification) { + && notification!== this.active.notification) { return notification; } diff --git a/testing/dialogTest/src/NotificationLaunchController.js b/testing/dialogTest/src/NotificationLaunchController.js index d475df08cb..0c1aaed657 100644 --- a/testing/dialogTest/src/NotificationLaunchController.js +++ b/testing/dialogTest/src/NotificationLaunchController.js @@ -22,8 +22,8 @@ /*global define*/ define( - [], - function () { + ['../../../platform/commonUI/notification/src/MessageSeverity'], + function (MessageSeverity) { "use strict"; function NotificationLaunchController($scope, notificationService) { @@ -38,6 +38,28 @@ define( title: "Success notification!" }) }; + + $scope.newError = function(){ + + notificationService.notify({ + title: "Error notification!", + severity: MessageSeverity.ERROR + }) + }; + + $scope.newProgress = function(){ + + var notification = { + title: "Progress notification!", + severity: MessageSeverity.INFO, + progress: 0, + progressUnknown: true + + }; + + notificationService.notify(notification) + }; + } return NotificationLaunchController; } From 85300d374369a850aa3d5e5682ab4c8cc2816ab5 Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 9 Oct 2015 11:57:47 -0700 Subject: [PATCH 030/148] Refactored DialogService a little --- .../dialog/res/templates/message.html | 12 ++--- .../res/templates/overlay-message-list.html | 2 +- platform/commonUI/dialog/src/DialogService.js | 50 ++----------------- .../general/res/templates/progress-bar.html | 10 ++-- .../notification/src/NotificationService.js | 24 ++++----- .../dialogTest/src/DialogLaunchController.js | 24 ++++++--- .../src/NotificationLaunchController.js | 5 -- 7 files changed, 44 insertions(+), 83 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html index d9fe79edfe..5d78e408d8 100644 --- a/platform/commonUI/dialog/res/templates/message.html +++ b/platform/commonUI/dialog/res/templates/message.html @@ -1,20 +1,20 @@ -
+
-
{{ngModel.dialog.title}}
-
{{ngModel.dialog.hint}}
+
{{ngModel.title}}
+
{{ngModel.hint}}
- {{ngModel.dialog.actionText}} message-severity-{{ngModel.dialog.severity}} + {{ngModel.actionText}} message-severity-{{ngModel.severity}}
+ ng-hide="ngModel.progress === undefined">
- {{dialogAction.label}} diff --git a/platform/commonUI/dialog/res/templates/overlay-message-list.html b/platform/commonUI/dialog/res/templates/overlay-message-list.html index 550c0bcda2..9ad5aa6e47 100644 --- a/platform/commonUI/dialog/res/templates/overlay-message-list.html +++ b/platform/commonUI/dialog/res/templates/overlay-message-list.html @@ -6,7 +6,7 @@
- + +
{{notifications.length}} Notifications + + {{notifications.length}} + \ No newline at end of file diff --git a/platform/commonUI/notification/src/NotificationIndicator.js b/platform/commonUI/notification/src/NotificationIndicator.js new file mode 100644 index 0000000000..b1d20e8264 --- /dev/null +++ b/platform/commonUI/notification/src/NotificationIndicator.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 NotificationIndicator() { + + } + + NotificationIndicator.template = 'notificationIndicatorTemplate'; + + NotificationIndicator.prototype.getGlyph = function () { + return "A"; + }; + NotificationIndicator.prototype.getGlyphClass = function () { + return 'caution'; + }; + NotificationIndicator.prototype.getText = function () { + return "Notifications"; + }; + NotificationIndicator.prototype.getDescription = function () { + return "Notifications"; + }; + + return NotificationIndicator; + } +); diff --git a/platform/commonUI/notification/src/NotificationIndicatorController.js b/platform/commonUI/notification/src/NotificationIndicatorController.js new file mode 100644 index 0000000000..ae417b1ba7 --- /dev/null +++ b/platform/commonUI/notification/src/NotificationIndicatorController.js @@ -0,0 +1,59 @@ +/***************************************************************************** + * 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( + ['./MessageSeverity'], + function (MessageSeverity) { + "use strict"; + + function NotificationIndicatorController($scope, notificationService, dialogService) { + $scope.notifications = notificationService.notifications; + $scope.showNotificationsList = function(){ + + var model = { + title: "Messages", + severity: MessageSeverity.INFO, + actions: [ + { + label: "Done", + action: function () { + dialogService.dismiss(); + } + } + ], + messages: [] + }; + + model.messages = notificationService.notifications; + dialogService.getDialogResponse('overlay-message-list', { + dialog: model, + cancel: function(){ + dialogService.dismiss(); + } + }); + + }; + } + return NotificationIndicatorController; + } +); diff --git a/testing/dialogTest/src/DialogLaunchController.js b/testing/dialogTest/src/DialogLaunchController.js index 11bba39da2..bc8cdcb419 100644 --- a/testing/dialogTest/src/DialogLaunchController.js +++ b/testing/dialogTest/src/DialogLaunchController.js @@ -108,7 +108,6 @@ define( { label: "Done", action: function () { - $log.debug("Done pressed"); dialogService.dismiss(); } } @@ -173,19 +172,13 @@ define( } function dismiss() { - scope.$destroy(); - element.remove(); + dialogService.dismiss(); } - - //for (var i = 0; i < 10; i++) { - // model.messages.push(createMessage(i)); - //} + model.messages = notificationService.notifications; dialogService.getDialogResponse('overlay-message-list', { dialog: model, - cancel: function(){ - dialogService.dismiss(); - } + cancel: dismiss }); }; } diff --git a/testing/dialogTest/src/NotificationLaunchController.js b/testing/dialogTest/src/NotificationLaunchController.js index 99caa8a71a..8150c2cfe5 100644 --- a/testing/dialogTest/src/NotificationLaunchController.js +++ b/testing/dialogTest/src/NotificationLaunchController.js @@ -35,17 +35,65 @@ define( }) }; + function getExampleActionText() { + var actionTexts = [ + "Adipiscing turpis mauris in enim elementu hac, enim aliquam etiam.", + "Eros turpis, pulvinar turpis eros eu", + "Lundium nascetur a, lectus montes ac, parturient in natoque, duis risus risus pulvinar pid rhoncus, habitasse auctor natoque!" + ]; + return actionTexts[Math.floor(Math.random()*3)]; + } + + function getExampleActions() { + var actions = [ + { + label: "Try Again", + action: function () { + $log.debug("Try Again pressed"); + } + }, + { + label: "Remove", + action: function () { + $log.debug("Remove pressed"); + } + }, + { + label: "Cancel", + action: function () { + $log.debug("Cancel pressed"); + } + } + ]; + + // Randomly remove some actions off the top; leave at least one + actions.splice(0,Math.floor(Math.random() * actions.length)); + + return actions; + } + + function getExampleSeverity() { + var severities = [ + MessageSeverity.INFO, + MessageSeverity.ALERT, + MessageSeverity.ERROR + ]; + return severities[Math.floor(Math.random() * severities.length)]; + } + $scope.newError = function(){ notificationService.notify({ title: "Error notification " + messageCounter++ + "!", + hint: "An error has occurred", severity: MessageSeverity.ERROR, primaryAction: { label: 'Retry', action: function() { console.log('Retry clicked'); } - }}); + }, + actions: getExampleActions}); }; $scope.newProgress = function(){ @@ -54,7 +102,7 @@ define( title: "Progress notification!", severity: MessageSeverity.INFO, progress: 0, - progressUnknown: true + unknownProgress: false }; From 11264759eccd41d177748b58f3a9b04dc382e61e Mon Sep 17 00:00:00 2001 From: Henry Date: Tue, 13 Oct 2015 11:14:28 -0700 Subject: [PATCH 034/148] Added highest severity calculation in NotifiationService --- .../commonUI/notification/res/notification-indicator.html | 3 ++- platform/commonUI/notification/src/NotificationService.js | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/platform/commonUI/notification/res/notification-indicator.html b/platform/commonUI/notification/res/notification-indicator.html index 1cf8f91881..f0c7ee48bb 100644 --- a/platform/commonUI/notification/res/notification-indicator.html +++ b/platform/commonUI/notification/res/notification-indicator.html @@ -1,4 +1,5 @@ - + ! {{notifications.length}} Notifications diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index c2386948eb..cadbea29f2 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -87,6 +87,7 @@ define( function NotificationService($timeout, DEFAULT_AUTO_DISMISS, FORCE_AUTO_DISMISS) { this.notifications = []; this.$timeout = $timeout; + this.highest ={ severity: MessageSeverity.INFO }; this.DEFAULT_AUTO_DISMISS = DEFAULT_AUTO_DISMISS; this.FORCE_AUTO_DISMISS = FORCE_AUTO_DISMISS; @@ -198,12 +199,18 @@ define( NotificationService.prototype.selectNextNotification = function () { var notification, i=0; + + this.highest.severity = MessageSeverity.INFO; + /* Loop through the notifications queue and find the first one self has not already been minimized (manually or otherwise). */ for (; i< this.notifications.length; i++) { notification = this.notifications[i]; + if (notification.severity > this.highest.severity){ + this.highest.severity = notification.severity; + } if (!notification.minimized && notification!== this.active.notification) { From b2a09599a07f3cb7a72f3e29bb2c60c9cc103f2f Mon Sep 17 00:00:00 2001 From: Henry Date: Tue, 13 Oct 2015 11:21:56 -0700 Subject: [PATCH 035/148] Modified messages dialog launcher --- platform/commonUI/dialog/res/templates/message.html | 3 +++ testing/dialogTest/res/dialog-launch.html | 3 +-- testing/dialogTest/src/NotificationLaunchController.js | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html index 78ae8be035..ee2b60c58f 100644 --- a/platform/commonUI/dialog/res/templates/message.html +++ b/platform/commonUI/dialog/res/templates/message.html @@ -11,6 +11,9 @@
{{ngModel.hint}}
+
+ {{ngModel.actionText}} +
diff --git a/testing/dialogTest/res/dialog-launch.html b/testing/dialogTest/res/dialog-launch.html index 2b01ca60bb..1b117c2ebf 100644 --- a/testing/dialogTest/res/dialog-launch.html +++ b/testing/dialogTest/res/dialog-launch.html @@ -3,8 +3,7 @@ Known | Unknown | - Error | - Messages + Error Dialogs \ No newline at end of file diff --git a/testing/dialogTest/src/NotificationLaunchController.js b/testing/dialogTest/src/NotificationLaunchController.js index 8150c2cfe5..ccd2543252 100644 --- a/testing/dialogTest/src/NotificationLaunchController.js +++ b/testing/dialogTest/src/NotificationLaunchController.js @@ -93,7 +93,7 @@ define( console.log('Retry clicked'); } }, - actions: getExampleActions}); + actions: getExampleActions()}); }; $scope.newProgress = function(){ @@ -102,6 +102,7 @@ define( title: "Progress notification!", severity: MessageSeverity.INFO, progress: 0, + actionText: getExampleActionText(), unknownProgress: false }; From 2ba6f18c59cc58d34f1df188a886380ad2d09fe7 Mon Sep 17 00:00:00 2001 From: Henry Date: Tue, 13 Oct 2015 17:13:24 -0700 Subject: [PATCH 036/148] Making changes to implement display queue --- .../commonUI/dialog/res/templates/message.html | 3 ++- .../general/res/templates/message-banner.html | 5 ++++- .../notification/res/notification-indicator.html | 10 +++++++--- .../src/NotificationIndicatorController.js | 3 +++ .../notification/src/NotificationService.js | 2 +- testing/dialogTest/res/notification-launch.html | 1 + .../src/NotificationLaunchController.js | 15 +++++++++++++++ 7 files changed, 33 insertions(+), 6 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html index ee2b60c58f..28bd09cbb1 100644 --- a/platform/commonUI/dialog/res/templates/message.html +++ b/platform/commonUI/dialog/res/templates/message.html @@ -1,7 +1,8 @@
diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html index d3d4a71ed5..5f032143b0 100644 --- a/platform/commonUI/general/res/templates/message-banner.html +++ b/platform/commonUI/general/res/templates/message-banner.html @@ -1,5 +1,8 @@
+ class="l-message-banner s-message-banner" ng-class="{ + 'error': highest.severity===MessageSeverity.ERROR, + 'alert': highest.severity===MessageSeverity.ALERT }" + ng-click="maximize(active.notification)"> diff --git a/platform/commonUI/notification/res/notification-indicator.html b/platform/commonUI/notification/res/notification-indicator.html index f0c7ee48bb..79ceb97302 100644 --- a/platform/commonUI/notification/res/notification-indicator.html +++ b/platform/commonUI/notification/res/notification-indicator.html @@ -1,8 +1,12 @@ - - ! + - {{notifications.length}} Notifications + {{notifications.length}} + Notifications {{highest.severity}} {{notifications.length}} \ No newline at end of file diff --git a/platform/commonUI/notification/src/NotificationIndicatorController.js b/platform/commonUI/notification/src/NotificationIndicatorController.js index ae417b1ba7..9571b0f6a4 100644 --- a/platform/commonUI/notification/src/NotificationIndicatorController.js +++ b/platform/commonUI/notification/src/NotificationIndicatorController.js @@ -28,6 +28,9 @@ define( function NotificationIndicatorController($scope, notificationService, dialogService) { $scope.notifications = notificationService.notifications; + $scope.highest = notificationService.highest; + $scope.MessageSeverity = MessageSeverity; + $scope.showNotificationsList = function(){ var model = { diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index cadbea29f2..00457f959d 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -254,8 +254,8 @@ define( var index = this.notifications.indexOf(notification); if (index >= 0) { this.notifications.splice(index, 1); - this.setActiveNotification(this.selectNextNotification()); } + this.setActiveNotification(this.selectNextNotification()); }; /** diff --git a/testing/dialogTest/res/notification-launch.html b/testing/dialogTest/res/notification-launch.html index 73bc7c524f..e9b7e8f84e 100644 --- a/testing/dialogTest/res/notification-launch.html +++ b/testing/dialogTest/res/notification-launch.html @@ -3,6 +3,7 @@ Success | Error | + Alert | Progress Notifications diff --git a/testing/dialogTest/src/NotificationLaunchController.js b/testing/dialogTest/src/NotificationLaunchController.js index ccd2543252..14709579b3 100644 --- a/testing/dialogTest/src/NotificationLaunchController.js +++ b/testing/dialogTest/src/NotificationLaunchController.js @@ -96,6 +96,21 @@ define( actions: getExampleActions()}); }; + $scope.newAlert = function(){ + + notificationService.notify({ + title: "Error notification " + messageCounter++ + "!", + hint: "An error has occurred", + severity: MessageSeverity.ALERT, + primaryAction: { + label: 'Retry', + action: function() { + console.log('Retry clicked'); + } + }, + actions: getExampleActions()}); + }; + $scope.newProgress = function(){ var notification = { From 34ea3ad9bbcfa3304a5f20cfd9eb0ce9e66930f6 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 13 Oct 2015 17:12:23 -0700 Subject: [PATCH 037/148] [Frontend] Banner message animations; class renaming open #163 open #170 Added transition animations to message banners; Renamed $colorStatus* class names to map more closely to severity constants; --- .../general/res/sass/controls/_messages.scss | 56 +++-- .../espresso/res/css/theme-espresso.css | 221 +++++++++++------- .../themes/espresso/res/sass/_constants.scss | 6 +- .../themes/snow/res/css/theme-snow.css | 221 +++++++++++------- .../themes/snow/res/sass/_constants.scss | 6 +- 5 files changed, 319 insertions(+), 191 deletions(-) diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index aa26760c9a..740df6ba8d 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -51,11 +51,17 @@ .status-indicator { margin-right: $interiorMarginSm; } - &.ok .status-indicator { - color: $colorStatusOk; + &.ok .status-indicator, + &.info .status-indicator { + color: $colorStatusInfo; } + &.alert .status-indicator, + &.warning .status-indicator, &.caution .status-indicator { - color: $colorStatusCaution; + color: $colorStatusAlert; + } + &.error .status-indicator { + color: $colorStatusError; } .label { // Max-width silliness is necessary for width transition @@ -107,6 +113,22 @@ padding: 0 $interiorMargin 0 $interiorMargin; @include transform(translateX(-50%)); + &.minimized { + @include transition-property(left, opacity); + @include transition-duration(0.3s); + @include transition-timing-function(ease-in-out); + left: 0; + opacity: 0; + } + + &.new { + left: 50%; + opacity: 1; + &:not(.info) { + @include pulse(100ms, 10); + } + } + .banner-elem { @include flex(0 1 auto); margin-left: $interiorMargin; @@ -134,9 +156,10 @@ z-index: 10; } -.s-message-banner, -.s-message-banner .s-action { - @include trans-prop-nice(background-color, .25s); +.s-message-banner { + //@include transition-property(left, opacity); + //@include transition-duration(0.35s); + //@include transition-timing-function(ease-in-out); } .s-message-banner { @@ -146,6 +169,7 @@ a { color: inherit; } .s-action { @include border-radius($basicCr); + @include trans-prop-nice(background-color); } .close { opacity: 0.5; @@ -153,12 +177,18 @@ opacity: 1; } } - &.ok { - @include statusBannerColors($colorStatusOk); + &.ok, + &.info { + @include statusBannerColors($colorStatusInfo); } - &.caution { - @include statusBannerColors($colorStatusCaution); + &.caution, + &.warning, + &.alert { + @include statusBannerColors($colorStatusAlert); } + &.error { + @include statusBannerColors($colorStatusError); + } } @mixin messageBlock($iconW: 32px) { @@ -173,15 +203,15 @@ .message-severity-info .type-icon.message-type { &:before { content:"\e608"; } - color: $colorStatusOk; + color: $colorStatusInfo; } .message-severity-alert .type-icon.message-type { &:before { content:"\e610"; } - color: $colorStatusCaution; + color: $colorStatusAlert; } .message-severity-error .type-icon.message-type { &:before { content:"\21"; } - color: $colorStatusAlert; + color: $colorStatusError; } } /* Paths: diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 229e97e44b..13334809a2 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; } @@ -2398,12 +2398,15 @@ label.checkbox.custom { .status.block .status-indicator { margin-right: 3px; } /* line 54, ../../../../general/res/sass/controls/_messages.scss */ - .status.block.ok .status-indicator { + .status.block.ok .status-indicator, .status.block.info .status-indicator { color: #62ba72; } - /* line 57, ../../../../general/res/sass/controls/_messages.scss */ - .status.block.caution .status-indicator { + /* line 58, ../../../../general/res/sass/controls/_messages.scss */ + .status.block.alert .status-indicator, .status.block.warning .status-indicator, .status.block.caution .status-indicator { color: #ffa66d; } - /* line 60, ../../../../general/res/sass/controls/_messages.scss */ + /* line 63, ../../../../general/res/sass/controls/_messages.scss */ + .status.block.error .status-indicator { + color: #d4585c; } + /* line 66, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; -o-transition-property: max-width; @@ -2419,7 +2422,7 @@ label.checkbox.custom { transition-timing-function: ease-in-out; overflow: hidden; max-width: 0px; } - /* line 66, ../../../../general/res/sass/controls/_messages.scss */ + /* line 72, ../../../../general/res/sass/controls/_messages.scss */ .status.block .count { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -2435,27 +2438,27 @@ label.checkbox.custom { transition-timing-function: ease-in-out; font-weight: bold; opacity: 1; } - /* line 72, ../../../../general/res/sass/controls/_messages.scss */ + /* line 78, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { max-width: 450px; width: auto; } - /* line 76, ../../../../general/res/sass/controls/_messages.scss */ + /* line 82, ../../../../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 */ +/* line 90, ../../../../general/res/sass/controls/_messages.scss */ .message.block { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 10px; } -/* line 88, ../../../../general/res/sass/controls/_messages.scss */ +/* line 94, ../../../../general/res/sass/controls/_messages.scss */ .message.error { background-color: rgba(255, 83, 58, 0.3); color: #ffaca0; } -/* line 94, ../../../../general/res/sass/controls/_messages.scss */ +/* line 100, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -2484,49 +2487,70 @@ label.checkbox.custom { -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; } - /* line 110, ../../../../general/res/sass/controls/_messages.scss */ + /* line 116, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner.minimized { + -moz-transition-property: left, opacity; + -o-transition-property: left, opacity; + -webkit-transition-property: left, opacity; + transition-property: left, opacity; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -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; + left: 0; + opacity: 0; } + /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner.new { + left: 50%; + opacity: 1; } + /* line 127, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner.new:not(.info) { + -moz-animation-name: pulse; + -webkit-animation-name: pulse; + animation-name: pulse; + -moz-animation-duration: 100ms; + -webkit-animation-duration: 100ms; + animation-duration: 100ms; + -moz-animation-direction: alternate; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -moz-animation-iteration-count: 10; + -webkit-animation-iteration-count: 10; + animation-iteration-count: 10; + -moz-animation-timing-function: ease-in-out; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } + /* line 132, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 114, ../../../../general/res/sass/controls/_messages.scss */ + /* line 136, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } - /* line 117, ../../../../general/res/sass/controls/_messages.scss */ + /* line 139, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-action { line-height: 15px; padding: 0 5px; } - /* line 121, ../../../../general/res/sass/controls/_messages.scss */ + /* line 143, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .close { cursor: pointer; font-size: 7px; width: 8px; } - /* line 127, ../../../../general/res/sass/controls/_messages.scss */ + /* line 149, ../../../../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 */ + /* line 155, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .progress-info { display: none; } -/* line 137, ../../../../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 142, ../../../../general/res/sass/controls/_messages.scss */ +/* line 165, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -2543,46 +2567,71 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action:hover { background-color: gray; } - /* line 146, ../../../../general/res/sass/controls/_messages.scss */ + /* line 169, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner a { color: inherit; } - /* line 147, ../../../../general/res/sass/controls/_messages.scss */ + /* line 170, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action { -moz-border-radius: 3px; -webkit-border-radius: 3px; - border-radius: 3px; } - /* line 150, ../../../../general/res/sass/controls/_messages.scss */ + border-radius: 3px; + -moz-transition-property: background-color; + -o-transition-property: background-color; + -webkit-transition-property: background-color; + transition-property: background-color; + -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 174, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close { opacity: 0.5; } - /* line 152, ../../../../general/res/sass/controls/_messages.scss */ + /* line 176, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close:hover { opacity: 1; } - /* line 156, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.ok { + /* line 180, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok, .s-message-banner.info { background-color: #285b31; color: #ccc; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.ok:hover { + .s-message-banner.ok:hover, .s-message-banner.info:hover { background-color: #387e44; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.ok .s-action { + .s-message-banner.ok .s-action, .s-message-banner.info .s-action { background-color: #18381e; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.ok .s-action:hover { + .s-message-banner.ok .s-action:hover, .s-message-banner.info .s-action:hover { background-color: #285b31; } - /* line 159, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.caution { + /* line 184, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution, .s-message-banner.warning, .s-message-banner.alert { background-color: #d35200; color: #ccc; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.caution:hover { + .s-message-banner.caution:hover, .s-message-banner.warning:hover, .s-message-banner.alert:hover { background-color: #ff6807; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.caution .s-action { + .s-message-banner.caution .s-action, .s-message-banner.warning .s-action, .s-message-banner.alert .s-action { background-color: #a03e00; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.caution .s-action:hover { + .s-message-banner.caution .s-action:hover, .s-message-banner.warning .s-action:hover, .s-message-banner.alert .s-action:hover { background-color: #d35200; } + /* line 189, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.error { + background-color: #751e21; + color: #ccc; } + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.error:hover { + background-color: #9d292c; } + /* line 31, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.error .s-action { + background-color: #4c1415; } + /* line 33, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.error .s-action:hover { + background-color: #751e21; } /* Paths: t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message > @@ -2597,7 +2646,7 @@ label.checkbox.custom { ... same as above bottom-bar */ -/* line 201, ../../../../general/res/sass/controls/_messages.scss */ +/* line 231, ../../../../general/res/sass/controls/_messages.scss */ .l-message { display: -webkit-flex; display: flex; @@ -2605,52 +2654,52 @@ label.checkbox.custom { flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 235, ../../../../general/res/sass/controls/_messages.scss */ .l-message .type-icon.message-type { -webkit-flex: 0 1 auto; flex: 0 1 auto; position: relative; } - /* line 210, ../../../../general/res/sass/controls/_messages.scss */ + /* line 240, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-left: 25px; position: relative; } - /* line 216, ../../../../general/res/sass/controls/_messages.scss */ + /* line 246, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents .top-bar, .l-message .message-contents .message-body { margin-bottom: 20px; } -/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +/* line 195, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type { text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; color: #ccc; font-size: 80px; padding: 1px; width: 82px; } - /* line 167, ../../../../general/res/sass/controls/_messages.scss */ + /* line 197, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type:before { content: "\e608"; } -/* line 174, ../../../../general/res/sass/controls/_messages.scss */ +/* line 204, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type { color: #62ba72; } - /* line 175, ../../../../general/res/sass/controls/_messages.scss */ + /* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 178, ../../../../general/res/sass/controls/_messages.scss */ +/* line 208, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type { color: #ffa66d; } - /* line 179, ../../../../general/res/sass/controls/_messages.scss */ + /* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 182, ../../../../general/res/sass/controls/_messages.scss */ +/* line 212, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type { color: #d4585c; } - /* line 183, ../../../../general/res/sass/controls/_messages.scss */ + /* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type:before { content: "\21"; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 229, ../../../../general/res/sass/controls/_messages.scss */ + /* line 259, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .l-message, .t-message-single .bottom-bar { overflow: hidden; @@ -2661,40 +2710,40 @@ label.checkbox.custom { left: 0px; width: auto; height: auto; } - /* line 234, ../../../../general/res/sass/controls/_messages.scss */ + /* line 264, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .bottom-bar { top: auto; height: 24px; } } -/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +/* line 195, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type { text-shadow: rgba(0, 0, 0, 0.4) 0 1px 2px; color: #ccc; font-size: 32px; padding: 1px; width: 34px; } - /* line 167, ../../../../general/res/sass/controls/_messages.scss */ + /* line 197, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type:before { content: "\e608"; } -/* line 174, ../../../../general/res/sass/controls/_messages.scss */ +/* line 204, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type { color: #62ba72; } - /* line 175, ../../../../general/res/sass/controls/_messages.scss */ + /* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 178, ../../../../general/res/sass/controls/_messages.scss */ +/* line 208, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type { color: #ffa66d; } - /* line 179, ../../../../general/res/sass/controls/_messages.scss */ + /* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 182, ../../../../general/res/sass/controls/_messages.scss */ +/* line 212, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type { color: #d4585c; } - /* line 183, ../../../../general/res/sass/controls/_messages.scss */ + /* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type:before { content: "\21"; } -/* line 246, ../../../../general/res/sass/controls/_messages.scss */ +/* line 276, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -2702,26 +2751,26 @@ label.checkbox.custom { background: rgba(230, 230, 230, 0.1); margin-bottom: 5px; padding: 10px; } - /* line 253, ../../../../general/res/sass/controls/_messages.scss */ + /* line 283, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents, .t-message-list .message-contents .l-message .bottom-bar { position: relative; } - /* line 259, ../../../../general/res/sass/controls/_messages.scss */ + /* line 289, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents { font-size: 0.9em; margin-left: 10px; } - /* line 262, ../../../../general/res/sass/controls/_messages.scss */ + /* line 292, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .message-action { color: #b3b3b3; } - /* line 263, ../../../../general/res/sass/controls/_messages.scss */ + /* line 293, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .bottom-bar { text-align: left; } - /* line 266, ../../../../general/res/sass/controls/_messages.scss */ + /* line 296, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .top-bar, .t-message-list .message-contents .l-message .message-body { margin-bottom: 10px; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 274, ../../../../general/res/sass/controls/_messages.scss */ + /* line 304, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { margin-right: 10px; } } diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 896241de5c..db68d1ab11 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -61,9 +61,9 @@ $colorInputIcon: pushBack($colorBodyFg, 15%); // Status colors, mainly used for messaging and item ancillary symbols $colorStatusFg: #ccc; $colorStatusDefault: #ccc; -$colorStatusOk: #62ba72; -$colorStatusCaution: #ffa66d; -$colorStatusAlert: #d4585c; +$colorStatusInfo: #62ba72; +$colorStatusAlert: #ffa66d; +$colorStatusError: #d4585c; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: $colorKey; $progressBarHOverlay: 15px; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 0ae366cd0e..de35232d0c 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; } @@ -2346,12 +2346,15 @@ label.checkbox.custom { .status.block .status-indicator { margin-right: 3px; } /* line 54, ../../../../general/res/sass/controls/_messages.scss */ - .status.block.ok .status-indicator { + .status.block.ok .status-indicator, .status.block.info .status-indicator { color: #60ba7b; } - /* line 57, ../../../../general/res/sass/controls/_messages.scss */ - .status.block.caution .status-indicator { + /* line 58, ../../../../general/res/sass/controls/_messages.scss */ + .status.block.alert .status-indicator, .status.block.warning .status-indicator, .status.block.caution .status-indicator { color: #ffb66c; } - /* line 60, ../../../../general/res/sass/controls/_messages.scss */ + /* line 63, ../../../../general/res/sass/controls/_messages.scss */ + .status.block.error .status-indicator { + color: #c96b68; } + /* line 66, ../../../../general/res/sass/controls/_messages.scss */ .status.block .label { -moz-transition-property: max-width; -o-transition-property: max-width; @@ -2367,7 +2370,7 @@ label.checkbox.custom { transition-timing-function: ease-in-out; overflow: hidden; max-width: 0px; } - /* line 66, ../../../../general/res/sass/controls/_messages.scss */ + /* line 72, ../../../../general/res/sass/controls/_messages.scss */ .status.block .count { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -2383,27 +2386,27 @@ label.checkbox.custom { transition-timing-function: ease-in-out; font-weight: bold; opacity: 1; } - /* line 72, ../../../../general/res/sass/controls/_messages.scss */ + /* line 78, ../../../../general/res/sass/controls/_messages.scss */ .status.block:hover .label { max-width: 450px; width: auto; } - /* line 76, ../../../../general/res/sass/controls/_messages.scss */ + /* line 82, ../../../../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 */ +/* line 90, ../../../../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 */ +/* line 94, ../../../../general/res/sass/controls/_messages.scss */ .message.error { background-color: rgba(255, 83, 58, 0.3); color: #ffaca0; } -/* line 94, ../../../../general/res/sass/controls/_messages.scss */ +/* line 100, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -2432,49 +2435,70 @@ label.checkbox.custom { -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; } - /* line 110, ../../../../general/res/sass/controls/_messages.scss */ + /* line 116, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner.minimized { + -moz-transition-property: left, opacity; + -o-transition-property: left, opacity; + -webkit-transition-property: left, opacity; + transition-property: left, opacity; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -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; + left: 0; + opacity: 0; } + /* line 124, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner.new { + left: 50%; + opacity: 1; } + /* line 127, ../../../../general/res/sass/controls/_messages.scss */ + .l-message-banner.new:not(.info) { + -moz-animation-name: pulse; + -webkit-animation-name: pulse; + animation-name: pulse; + -moz-animation-duration: 100ms; + -webkit-animation-duration: 100ms; + animation-duration: 100ms; + -moz-animation-direction: alternate; + -webkit-animation-direction: alternate; + animation-direction: alternate; + -moz-animation-iteration-count: 10; + -webkit-animation-iteration-count: 10; + animation-iteration-count: 10; + -moz-animation-timing-function: ease-in-out; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } + /* line 132, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .banner-elem { -webkit-flex: 0 1 auto; flex: 0 1 auto; margin-left: 5px; } - /* line 114, ../../../../general/res/sass/controls/_messages.scss */ + /* line 136, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner a { display: inline-block; } - /* line 117, ../../../../general/res/sass/controls/_messages.scss */ + /* line 139, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .l-action { line-height: 15px; padding: 0 5px; } - /* line 121, ../../../../general/res/sass/controls/_messages.scss */ + /* line 143, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .close { cursor: pointer; font-size: 7px; width: 8px; } - /* line 127, ../../../../general/res/sass/controls/_messages.scss */ + /* line 149, ../../../../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 */ + /* line 155, ../../../../general/res/sass/controls/_messages.scss */ .l-message-banner .progress-info { display: none; } -/* line 137, ../../../../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 142, ../../../../general/res/sass/controls/_messages.scss */ +/* line 165, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -2491,46 +2515,71 @@ label.checkbox.custom { /* line 33, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action:hover { background-color: gray; } - /* line 146, ../../../../general/res/sass/controls/_messages.scss */ + /* line 169, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner a { color: inherit; } - /* line 147, ../../../../general/res/sass/controls/_messages.scss */ + /* line 170, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .s-action { -moz-border-radius: 4px; -webkit-border-radius: 4px; - border-radius: 4px; } - /* line 150, ../../../../general/res/sass/controls/_messages.scss */ + border-radius: 4px; + -moz-transition-property: background-color; + -o-transition-property: background-color; + -webkit-transition-property: background-color; + transition-property: background-color; + -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 174, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close { opacity: 0.5; } - /* line 152, ../../../../general/res/sass/controls/_messages.scss */ + /* line 176, ../../../../general/res/sass/controls/_messages.scss */ .s-message-banner .close:hover { opacity: 1; } - /* line 156, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.ok { + /* line 180, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.ok, .s-message-banner.info { background-color: #275a36; color: #fff; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.ok:hover { + .s-message-banner.ok:hover, .s-message-banner.info:hover { background-color: #367e4c; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.ok .s-action { + .s-message-banner.ok .s-action, .s-message-banner.info .s-action { background-color: #183621; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.ok .s-action:hover { + .s-message-banner.ok .s-action:hover, .s-message-banner.info .s-action:hover { background-color: #275a36; } - /* line 159, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.caution { + /* line 184, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.caution, .s-message-banner.warning, .s-message-banner.alert { background-color: #d26a00; color: #fff; } /* line 28, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.caution:hover { + .s-message-banner.caution:hover, .s-message-banner.warning:hover, .s-message-banner.alert:hover { background-color: #ff8306; } /* line 31, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.caution .s-action { + .s-message-banner.caution .s-action, .s-message-banner.warning .s-action, .s-message-banner.alert .s-action { background-color: #9f5000; } /* line 33, ../../../../general/res/sass/controls/_messages.scss */ - .s-message-banner.caution .s-action:hover { + .s-message-banner.caution .s-action:hover, .s-message-banner.warning .s-action:hover, .s-message-banner.alert .s-action:hover { background-color: #d26a00; } + /* line 189, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.error { + background-color: #702a28; + color: #fff; } + /* line 28, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.error:hover { + background-color: #963835; } + /* line 31, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.error .s-action { + background-color: #4a1c1b; } + /* line 33, ../../../../general/res/sass/controls/_messages.scss */ + .s-message-banner.error .s-action:hover { + background-color: #702a28; } /* Paths: t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message > @@ -2545,7 +2594,7 @@ label.checkbox.custom { ... same as above bottom-bar */ -/* line 201, ../../../../general/res/sass/controls/_messages.scss */ +/* line 231, ../../../../general/res/sass/controls/_messages.scss */ .l-message { display: -webkit-flex; display: flex; @@ -2553,52 +2602,52 @@ label.checkbox.custom { flex-direction: row; -webkit-align-items: stretch; align-items: stretch; } - /* line 205, ../../../../general/res/sass/controls/_messages.scss */ + /* line 235, ../../../../general/res/sass/controls/_messages.scss */ .l-message .type-icon.message-type { -webkit-flex: 0 1 auto; flex: 0 1 auto; position: relative; } - /* line 210, ../../../../general/res/sass/controls/_messages.scss */ + /* line 240, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents { -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-left: 25px; position: relative; } - /* line 216, ../../../../general/res/sass/controls/_messages.scss */ + /* line 246, ../../../../general/res/sass/controls/_messages.scss */ .l-message .message-contents .top-bar, .l-message .message-contents .message-body { margin-bottom: 20px; } -/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +/* line 195, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type { text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; color: #ccc; font-size: 80px; padding: 1px; width: 82px; } - /* line 167, ../../../../general/res/sass/controls/_messages.scss */ + /* line 197, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .type-icon.message-type:before { content: "\e608"; } -/* line 174, ../../../../general/res/sass/controls/_messages.scss */ +/* line 204, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type { color: #60ba7b; } - /* line 175, ../../../../general/res/sass/controls/_messages.scss */ + /* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 178, ../../../../general/res/sass/controls/_messages.scss */ +/* line 208, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type { color: #ffb66c; } - /* line 179, ../../../../general/res/sass/controls/_messages.scss */ + /* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 182, ../../../../general/res/sass/controls/_messages.scss */ +/* line 212, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type { color: #c96b68; } - /* line 183, ../../../../general/res/sass/controls/_messages.scss */ + /* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .message-severity-error .type-icon.message-type:before { content: "\21"; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 229, ../../../../general/res/sass/controls/_messages.scss */ + /* line 259, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .l-message, .t-message-single .bottom-bar { overflow: hidden; @@ -2609,40 +2658,40 @@ label.checkbox.custom { left: 0px; width: auto; height: auto; } - /* line 234, ../../../../general/res/sass/controls/_messages.scss */ + /* line 264, ../../../../general/res/sass/controls/_messages.scss */ .t-message-single .bottom-bar { top: auto; height: 24px; } } -/* line 165, ../../../../general/res/sass/controls/_messages.scss */ +/* line 195, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type { text-shadow: rgba(255, 255, 255, 0.8) 0 0px 5px; color: #ccc; font-size: 32px; padding: 1px; width: 34px; } - /* line 167, ../../../../general/res/sass/controls/_messages.scss */ + /* line 197, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .type-icon.message-type:before { content: "\e608"; } -/* line 174, ../../../../general/res/sass/controls/_messages.scss */ +/* line 204, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type { color: #60ba7b; } - /* line 175, ../../../../general/res/sass/controls/_messages.scss */ + /* line 205, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-info .type-icon.message-type:before { content: "\e608"; } -/* line 178, ../../../../general/res/sass/controls/_messages.scss */ +/* line 208, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type { color: #ffb66c; } - /* line 179, ../../../../general/res/sass/controls/_messages.scss */ + /* line 209, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-alert .type-icon.message-type:before { content: "\e610"; } -/* line 182, ../../../../general/res/sass/controls/_messages.scss */ +/* line 212, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type { color: #c96b68; } - /* line 183, ../../../../general/res/sass/controls/_messages.scss */ + /* line 213, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-severity-error .type-icon.message-type:before { content: "\21"; } -/* line 246, ../../../../general/res/sass/controls/_messages.scss */ +/* line 276, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { -moz-border-radius: 4px; -webkit-border-radius: 4px; @@ -2650,26 +2699,26 @@ label.checkbox.custom { background: rgba(102, 102, 102, 0.1); margin-bottom: 5px; padding: 10px; } - /* line 253, ../../../../general/res/sass/controls/_messages.scss */ + /* line 283, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents, .t-message-list .message-contents .l-message .bottom-bar { position: relative; } - /* line 259, ../../../../general/res/sass/controls/_messages.scss */ + /* line 289, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents { font-size: 0.9em; margin-left: 10px; } - /* line 262, ../../../../general/res/sass/controls/_messages.scss */ + /* line 292, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .message-action { color: #999999; } - /* line 263, ../../../../general/res/sass/controls/_messages.scss */ + /* line 293, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .message-contents .bottom-bar { text-align: left; } - /* line 266, ../../../../general/res/sass/controls/_messages.scss */ + /* line 296, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message .top-bar, .t-message-list .message-contents .l-message .message-body { margin-bottom: 10px; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 274, ../../../../general/res/sass/controls/_messages.scss */ + /* line 304, ../../../../general/res/sass/controls/_messages.scss */ .t-message-list .message-contents .l-message { margin-right: 10px; } } diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index 02e0f7ab11..8a1d54642b 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -61,9 +61,9 @@ $colorInputIcon: pushBack($colorBodyFg, 25%); // Status colors, mainly used for messaging and item ancillary symbols $colorStatusFg: #fff; $colorStatusDefault: #ccc; -$colorStatusOk: #60ba7b; -$colorStatusCaution: #ffb66c; -$colorStatusAlert: #c96b68; +$colorStatusInfo: #60ba7b; +$colorStatusAlert: #ffb66c; +$colorStatusError: #c96b68; $colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarAmt: #0a0; $progressBarHOverlay: 15px; From ee382be38d49fbe2fe55ddba1960efcf223f5173 Mon Sep 17 00:00:00 2001 From: Henry Date: Wed, 14 Oct 2015 11:45:39 -0700 Subject: [PATCH 038/148] Added transitions and severity classes --- .../dialog/res/templates/message.html | 1 - platform/commonUI/dialog/src/DialogService.js | 17 +---- .../general/res/templates/message-banner.html | 7 +- .../src/controllers/BannerController.js | 5 +- platform/commonUI/notification/bundle.json | 6 +- .../res/notification-indicator.html | 3 +- .../notification/src/NotificationService.js | 66 +++++++++++-------- .../src/NotificationLaunchController.js | 4 +- 8 files changed, 56 insertions(+), 53 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html index 28bd09cbb1..ecf598daf4 100644 --- a/platform/commonUI/dialog/res/templates/message.html +++ b/platform/commonUI/dialog/res/templates/message.html @@ -1,6 +1,5 @@
-
\ No newline at end of file diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index 7089e3a714..8bbf5e21c1 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -28,7 +28,12 @@ define( function BannerController($scope, notificationService, dialogService) { $scope.active = notificationService.active; $scope.MessageSeverity = MessageSeverity; - $scope.dismiss = function(notification) { + $scope.action = function (action, $event){ + $event.stopPropagation(); + return action(); + } + $scope.dismiss = function(notification, $event) { + $event.stopPropagation(); notificationService.dismissOrMinimize(notification); }; $scope.maximize = function(notification) { diff --git a/platform/commonUI/notification/bundle.json b/platform/commonUI/notification/bundle.json index d8958d0ac1..d729e42673 100644 --- a/platform/commonUI/notification/bundle.json +++ b/platform/commonUI/notification/bundle.json @@ -34,7 +34,8 @@ ], "indicators": [ { - "implementation": "NotificationIndicator.js" + "implementation": "NotificationIndicator.js", + "priority": "fallback" } ], "services": [ diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 8a74fc7a3f..411e3727cb 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -180,7 +180,7 @@ define( notifications queued for display, setup a timeout to dismiss the dialog. */ - if (notification && (notification.autoDismiss !== false + if (notification && (notification.autoDismiss || this.selectNextNotification())) { timeout = notification.autoDismiss || this.DEFAULT_AUTO_DISMISS; diff --git a/testing/dialogTest/bundle.json b/testing/dialogTest/bundle.json index 0e55477bda..1b1acf6cc0 100644 --- a/testing/dialogTest/bundle.json +++ b/testing/dialogTest/bundle.json @@ -34,10 +34,12 @@ ], "indicators": [ { - "implementation": "DialogLaunchIndicator.js" + "implementation": "DialogLaunchIndicator.js", + "priority": "fallback" }, { - "implementation": "NotificationLaunchIndicator.js" + "implementation": "NotificationLaunchIndicator.js", + "priority": "fallback" } ] } From 301b73c6c605fff4cc4beb5dacf6bc213cb3c11f Mon Sep 17 00:00:00 2001 From: Henry Date: Wed, 14 Oct 2015 14:16:37 -0700 Subject: [PATCH 041/148] Banner notifications are not maximized if 'info' message --- .../commonUI/general/src/controllers/BannerController.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index 8bbf5e21c1..2baa18f9b5 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -37,10 +37,12 @@ define( notificationService.dismissOrMinimize(notification); }; $scope.maximize = function(notification) { - notification.cancel = function(){ - dialogService.dismiss(); + if (notification.severity > MessageSeverity.INFO){ + notification.cancel = function(){ + dialogService.dismiss(); + } + dialogService.showBlockingMessage(notification); } - dialogService.showBlockingMessage(notification); } } return BannerController; From f08725b6a27cacbe45f85d1282d16fbe0f0f4974 Mon Sep 17 00:00:00 2001 From: Henry Date: Wed, 14 Oct 2015 15:03:29 -0700 Subject: [PATCH 042/148] Fixed jshint errors --- .../general/src/controllers/BannerController.js | 6 +++--- testing/dialogTest/bundle.json | 1 + testing/dialogTest/src/NotificationLaunchController.js | 10 +++++----- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index 2baa18f9b5..a59860f884 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -31,7 +31,7 @@ define( $scope.action = function (action, $event){ $event.stopPropagation(); return action(); - } + }; $scope.dismiss = function(notification, $event) { $event.stopPropagation(); notificationService.dismissOrMinimize(notification); @@ -40,10 +40,10 @@ define( if (notification.severity > MessageSeverity.INFO){ notification.cancel = function(){ dialogService.dismiss(); - } + }; dialogService.showBlockingMessage(notification); } - } + }; } return BannerController; }); \ No newline at end of file diff --git a/testing/dialogTest/bundle.json b/testing/dialogTest/bundle.json index 1b1acf6cc0..bb2d464d64 100644 --- a/testing/dialogTest/bundle.json +++ b/testing/dialogTest/bundle.json @@ -28,6 +28,7 @@ "depends": [ "$scope", "$timeout", + "$log", "notificationService" ] } diff --git a/testing/dialogTest/src/NotificationLaunchController.js b/testing/dialogTest/src/NotificationLaunchController.js index eb38fcb3c3..63b436a894 100644 --- a/testing/dialogTest/src/NotificationLaunchController.js +++ b/testing/dialogTest/src/NotificationLaunchController.js @@ -26,13 +26,13 @@ define( function (MessageSeverity) { "use strict"; - function NotificationLaunchController($scope, $timeout, notificationService) { + function NotificationLaunchController($scope, $timeout, $log, notificationService) { var messageCounter = 1; $scope.newSuccess = function(){ notificationService.info({ title: "Success notification!" - }) + }); }; function getExampleActionText() { @@ -90,7 +90,7 @@ define( primaryAction: { label: 'Retry', action: function() { - console.log('Retry clicked'); + $log.info('Retry clicked'); } }, actions: getExampleActions()}); @@ -105,7 +105,7 @@ define( primaryAction: { label: 'Retry', action: function() { - console.log('Retry clicked'); + $log.info('Retry clicked'); } }, actions: getExampleActions()}); @@ -127,7 +127,7 @@ define( notification.progressText = ["Estimated time remaining:" + " about ", 60 - Math.floor((notification.progress / 100) * 60), " seconds"].join(" "); if (notification.progress < 100) { - $timeout(function(){incrementProgress(notification)}, 1000); + $timeout(function(){incrementProgress(notification);}, 1000); } } From dc5feb8b1a816f1f74d15db0a7d7277bc6d32cd5 Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 22 Oct 2015 10:54:48 -0700 Subject: [PATCH 043/148] Added some documentation to notification and dialog launchers --- testing/dialogTest/res/dialog-launch.html | 3 +- .../dialogTest/res/notification-launch.html | 2 +- .../dialogTest/src/DialogLaunchController.js | 105 ++++++------------ .../dialogTest/src/DialogLaunchIndicator.js | 6 + .../src/NotificationLaunchController.js | 54 +++++++-- 5 files changed, 86 insertions(+), 84 deletions(-) diff --git a/testing/dialogTest/res/dialog-launch.html b/testing/dialogTest/res/dialog-launch.html index 1b117c2ebf..bc56e6b4f2 100644 --- a/testing/dialogTest/res/dialog-launch.html +++ b/testing/dialogTest/res/dialog-launch.html @@ -3,7 +3,8 @@ Known | Unknown | - Error + Error | + Info Dialogs \ No newline at end of file diff --git a/testing/dialogTest/res/notification-launch.html b/testing/dialogTest/res/notification-launch.html index e9b7e8f84e..1e077bf3be 100644 --- a/testing/dialogTest/res/notification-launch.html +++ b/testing/dialogTest/res/notification-launch.html @@ -1,7 +1,7 @@ - Success | + Success | Error | Alert | Progress diff --git a/testing/dialogTest/src/DialogLaunchController.js b/testing/dialogTest/src/DialogLaunchController.js index bc8cdcb419..42882a0dfe 100644 --- a/testing/dialogTest/src/DialogLaunchController.js +++ b/testing/dialogTest/src/DialogLaunchController.js @@ -26,7 +26,23 @@ define( function (MessageSeverity) { "use strict"; + /** + * A controller for the dialog launch view. This view allows manual + * launching of dialogs for demonstration and testing purposes. It + * also demonstrates the use of the DialogService. + * @param $scope + * @param $timeout + * @param $log + * @param dialogService + * @param notificationService + * @constructor + */ function DialogLaunchController($scope, $timeout, $log, dialogService, notificationService) { + + /* + Demonstrates launching a progress dialog and updating it + periodically with the progress of an ongoing process. + */ $scope.launchProgress = function (knownProgress) { var model = { title: "Progress Dialog Example", @@ -72,6 +88,10 @@ define( } }; + + /* + Demonstrates launching an error dialog + */ $scope.launchError = function () { var model = { title: "Error Dialog Example", @@ -100,87 +120,32 @@ define( } }; - $scope.launchMessages = function () { + /* + Demonstrates launching an error dialog + */ + $scope.launchInfo = function () { var model = { - title: "Messages", + title: "Info Dialog Example", + actionText: "This is an example of a blocking info" + + " dialog. This dialog can be used to draw the user's" + + " attention to an event.", severity: MessageSeverity.INFO, actions: [ { - label: "Done", + label: "OK", action: function () { + $log.debug("OK Pressed"); dialogService.dismiss(); } - } - ], - messages: [] + }, + ] }; - function getExampleActionText() { - var actionTexts = [ - "Adipiscing turpis mauris in enim elementu hac, enim aliquam etiam.", - "Eros turpis, pulvinar turpis eros eu", - "Lundium nascetur a, lectus montes ac, parturient in natoque, duis risus risus pulvinar pid rhoncus, habitasse auctor natoque!" - ]; - return actionTexts[Math.floor(Math.random()*3)]; + if (!dialogService.showBlockingMessage(model)) { + $log.error("Could not display modal dialog"); } - - function getExampleActions() { - var actions = [ - { - label: "Try Again", - action: function () { - $log.debug("Try Again pressed"); - } - }, - { - label: "Remove", - action: function () { - $log.debug("Remove pressed"); - } - }, - { - label: "Cancel", - action: function () { - $log.debug("Cancel pressed"); - } - } - ]; - - // Randomly remove some actions off the top; leave at least one - actions.splice(0,Math.floor(Math.random() * actions.length)); - - return actions; - } - - function getExampleSeverity() { - var severities = [ - MessageSeverity.INFO, - MessageSeverity.ALERT, - MessageSeverity.ERROR - ]; - return severities[Math.floor(Math.random() * severities.length)]; - } - - function createMessage (messageNumber) { - var messageModel = { - title: "Message Title " + messageNumber, - actionText: getExampleActionText(), - severity: getExampleSeverity(), - actions: getExampleActions() - }; - return messageModel; - } - - function dismiss() { - dialogService.dismiss(); - } - - model.messages = notificationService.notifications; - dialogService.getDialogResponse('overlay-message-list', { - dialog: model, - cancel: dismiss - }); }; + } return DialogLaunchController; } diff --git a/testing/dialogTest/src/DialogLaunchIndicator.js b/testing/dialogTest/src/DialogLaunchIndicator.js index 47c516fc70..9330ce2194 100644 --- a/testing/dialogTest/src/DialogLaunchIndicator.js +++ b/testing/dialogTest/src/DialogLaunchIndicator.js @@ -26,6 +26,12 @@ define( function () { "use strict"; + /** + * A tool for manually invoking dialogs. When included this + * indicator will allow for dialogs of different types to be + * launched for demonstration and testing purposes. + * @constructor + */ function DialogLaunchIndicator() { } diff --git a/testing/dialogTest/src/NotificationLaunchController.js b/testing/dialogTest/src/NotificationLaunchController.js index 63b436a894..b45bbfc094 100644 --- a/testing/dialogTest/src/NotificationLaunchController.js +++ b/testing/dialogTest/src/NotificationLaunchController.js @@ -26,14 +26,21 @@ define( function (MessageSeverity) { "use strict"; + /** + * Allows launching of notification messages for the purposes of + * demonstration and testing. Also demonstrates use of + * the NotificationService. Notifications are non-blocking messages that + * appear at the bottom of the screen to inform the user of events + * in a non-intrusive way. For more information see the + * {@link NotificationService} + * @param $scope + * @param $timeout + * @param $log + * @param notificationService + * @constructor + */ function NotificationLaunchController($scope, $timeout, $log, notificationService) { var messageCounter = 1; - $scope.newSuccess = function(){ - - notificationService.info({ - title: "Success notification!" - }); - }; function getExampleActionText() { var actionTexts = [ @@ -80,11 +87,14 @@ define( ]; return severities[Math.floor(Math.random() * severities.length)]; } - + + /** + * Launch a new notification with a severity level of 'Error'. + */ $scope.newError = function(){ notificationService.notify({ - title: "Error notification " + messageCounter++ + "!", + title: "Example error notification " + messageCounter++, hint: "An error has occurred", severity: MessageSeverity.ERROR, primaryAction: { @@ -95,11 +105,13 @@ define( }, actions: getExampleActions()}); }; - + /** + * Launch a new notification with a severity of 'Alert'. + */ $scope.newAlert = function(){ notificationService.notify({ - title: "Alert notification " + (messageCounter++) + "!", + title: "Alert notification " + (messageCounter++), hint: "This is an alert message", severity: MessageSeverity.ALERT, primaryAction: { @@ -111,17 +123,25 @@ define( actions: getExampleActions()}); }; + + /** + * Launch a new notification with a progress bar that is updated + * periodically, tracking an ongoing process. + */ $scope.newProgress = function(){ var notification = { - title: "Progress notification!", + title: "Progress notification example", severity: MessageSeverity.INFO, progress: 0, actionText: getExampleActionText(), unknownProgress: false - }; + /** + * Simulate an ongoing process and update the progress bar. + * @param notification + */ function incrementProgress(notification) { notification.progress = Math.min(100, Math.floor(notification.progress + Math.random() * 30)); notification.progressText = ["Estimated time remaining:" + @@ -135,6 +155,16 @@ define( incrementProgress(notification); }; + /** + * Launch a new notification with severity level of INFO. + */ + $scope.newInfo = function(){ + + notificationService.info({ + title: "Example Info notification " + messageCounter++ + }); + }; + } return NotificationLaunchController; } From 1c5101eca60dde69b2d8c9c8ca353ed3f12ee06b Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 11:30:57 -0700 Subject: [PATCH 044/148] [Time Conductor] Add DateAggregator Add DateAggregator, to allow composite services to expose different ways of parsing/formatting dates. nasa/openmctweb#182. --- .../general/src/services/DateAggregator.js | 116 ++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 platform/commonUI/general/src/services/DateAggregator.js diff --git a/platform/commonUI/general/src/services/DateAggregator.js b/platform/commonUI/general/src/services/DateAggregator.js new file mode 100644 index 0000000000..3c2762d1bd --- /dev/null +++ b/platform/commonUI/general/src/services/DateAggregator.js @@ -0,0 +1,116 @@ +/***************************************************************************** + * 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"; + + /** + * Formats dates for display and parses dates from user input, + * varying by a chosen time system. + * + * Time systems are typically domain keys from telemetry metadata. + * If omitted/left undefined, the time system is presumed to be UTC time, + * with its numeric interpretation being milliseconds since the + * start of 1970. + * + * @interface DateService + */ + + /** + * Check if the provided text can be parsed into a numeric + * representation of a time in the specified time system. + * @method validate + * @memberof DateService# + * @param {string} text the text to validate + * @param {string} [key] a key identifying the time system + * @returns {boolean} true if the text can be parsed + */ + + /** + * Parse the provided into a numeric representation of a time + * in the specified time system. + * + * Behavior of this method for invalid text is undefined; use + * the `validate` method to check for validity first. + * + * @method parse + * @memberof DateService# + * @param {string} text the text to parse + * @param {string} [key] a key identifying the time system + * @returns {number} a numeric representation of the date/time + */ + + /** + * Format the provided numeric representation of a time + * into a human-readable string appropriate for that time system. + * + * If the time system is not recognized, the return value will be + * `undefined`. + * + * @method format + * @memberof DateService# + * @param {number} value the time value to format + * @param {string} [key] a key identifying the time system + * @returns {string} a human-readable representation of the date/time + */ + + /** + * Composites multiple DateService implementations such that + * they can be used as one. + * @memberof platform/commonUI/general + * @constructor + */ + function DateAggregator(dateProviders) { + this.dateProviders = dateProviders; + } + + DateAggregator.prototype.validate = function (text, key) { + return this.dateProviders.some(function (provider) { + return provider.validate(text, key); + }); + }; + + DateAggregator.prototype.format = function (value, key) { + var i, text; + for (i = 0; i < this.dateProviders.length; i += 1) { + text = this.dateProviders[i].format(value, key); + if (text !== undefined) { + return text; + } + } + }; + + DateAggregator.prototype.parse = function (text, key) { + var i; + for (i = 0; i < this.dateProviders.length; i += 1) { + if (this.dateProviders[i].validate(text, key)) { + return this.dateProviders[i].parse(text, key); + } + } + }; + + return DateAggregator; +}); From 6b42d3bf4b5bf1856994acdbb128e6fb781760fd Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 11:43:42 -0700 Subject: [PATCH 045/148] [Time Conductor] Test DateAggregator --- .../test/services/DateAggregatorSpec.js | 94 +++++++++++++++++++ platform/commonUI/general/test/suite.json | 1 + 2 files changed, 95 insertions(+) create mode 100644 platform/commonUI/general/test/services/DateAggregatorSpec.js diff --git a/platform/commonUI/general/test/services/DateAggregatorSpec.js b/platform/commonUI/general/test/services/DateAggregatorSpec.js new file mode 100644 index 0000000000..ba55bc907a --- /dev/null +++ b/platform/commonUI/general/test/services/DateAggregatorSpec.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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/ + + +define( + ["../../src/services/DateAggregator"], + function (DateAggregator) { + 'use strict'; + + var DATE_SERVICE_METHODS = [ "format", "validate", "parse" ]; + + describe("DateAggregator", function () { + var mockProviders, + dateAggregator; + + beforeEach(function () { + mockProviders = [ 'a', 'b', 'c', undefined ].map(function (k, i) { + var mockProvider = jasmine.createSpyObj( + 'provider-' + k, + DATE_SERVICE_METHODS + ); + + mockProvider.format.andCallFake(function (value, key) { + return key === k ? + ("Formatted " + value + " for " + k) : + undefined; + }); + + mockProvider.parse.andCallFake(function (text, key) { + return key === k ? i : undefined; + }); + + mockProvider.validate.andCallFake(function (text, key) { + return key === k; + }); + + return mockProvider; + }); + + dateAggregator = new DateAggregator(mockProviders); + }); + + it("formats dates using the first provider which gives a result", function () { + expect(dateAggregator.format(42, "a")) + .toEqual("Formatted 42 for a"); + expect(dateAggregator.format(12321, "b")) + .toEqual("Formatted 12321 for b"); + expect(dateAggregator.format(1977, "c")) + .toEqual("Formatted 1977 for c"); + expect(dateAggregator.format(0)) + .toEqual("Formatted 0 for undefined"); + }); + + it("parses dates using the first provider which validates", function () { + expect(dateAggregator.parse("x", "a")).toEqual(0); + expect(dateAggregator.parse("x", "b")).toEqual(1); + expect(dateAggregator.parse("x", "c")).toEqual(2); + expect(dateAggregator.parse("x")).toEqual(3); + }); + + it("validates across all providers", function () { + expect(dateAggregator.validate("x", "a")).toBeTruthy(); + expect(dateAggregator.validate("x", "b")).toBeTruthy(); + expect(dateAggregator.validate("x", "c")).toBeTruthy(); + expect(dateAggregator.validate("x")).toBeTruthy(); + expect(dateAggregator.validate("x", "z")).toBeFalsy(); + + mockProviders[3].validate.andReturn(false); + expect(dateAggregator.validate("x")).toBeFalsy(); + }); + + }); + } +); diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json index 0d19fbb9e4..3ab06212d4 100644 --- a/platform/commonUI/general/test/suite.json +++ b/platform/commonUI/general/test/suite.json @@ -17,6 +17,7 @@ "directives/MCTPopup", "directives/MCTResize", "directives/MCTScroll", + "services/DateAggregator", "services/Popup", "services/PopupService", "services/UrlService", From 794231143ecbd484951060f27d329dfda075c1fa Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 11:55:38 -0700 Subject: [PATCH 046/148] [Time Conductor] Add spec for UTCDateProvider Add test cases for UTCDateProvider, which will provide default date/time formatting/parsing. --- .../general/src/services/UTCDateProvider.js | 51 ++++++++++++++ .../test/services/UTCDateProviderSpec.js | 67 +++++++++++++++++++ platform/commonUI/general/test/suite.json | 1 + 3 files changed, 119 insertions(+) create mode 100644 platform/commonUI/general/src/services/UTCDateProvider.js create mode 100644 platform/commonUI/general/test/services/UTCDateProviderSpec.js diff --git a/platform/commonUI/general/src/services/UTCDateProvider.js b/platform/commonUI/general/src/services/UTCDateProvider.js new file mode 100644 index 0000000000..54fcbf4737 --- /dev/null +++ b/platform/commonUI/general/src/services/UTCDateProvider.js @@ -0,0 +1,51 @@ +/***************************************************************************** + * 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([ + 'moment' +], function ( + moment +) { + "use strict"; + + /** + * Composites multiple DateService implementations such that + * they can be used as one. + * @memberof platform/commonUI/general + * @constructor + * @implements {DateService} + */ + function UTCDateProvider() { + } + + UTCDateProvider.prototype.validate = function (text, key) { + }; + + UTCDateProvider.prototype.format = function (value, key) { + }; + + UTCDateProvider.prototype.parse = function (text, key) { + }; + + return UTCDateProvider; +}); diff --git a/platform/commonUI/general/test/services/UTCDateProviderSpec.js b/platform/commonUI/general/test/services/UTCDateProviderSpec.js new file mode 100644 index 0000000000..1a1873030d --- /dev/null +++ b/platform/commonUI/general/test/services/UTCDateProviderSpec.js @@ -0,0 +1,67 @@ +/***************************************************************************** + * 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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/ + + +define( + ["../../src/services/UTCDateProvider", "moment"], + function (UTCDateProvider, moment) { + 'use strict'; + + describe("UTCDateProvider", function () { + var testDate, testTimestamp, dateProvider; + + beforeEach(function () { + testDate = "1977-05-25 17:30:00"; + testTimestamp = moment.utc(testDate).valueOf(); + dateProvider = new UTCDateProvider(); + }); + + it("distinguishes valid dates from invalid dates", function () { + expect(dateProvider.validate(testDate)) + .toBeTruthy(); + expect(dateProvider.validate("2015-garbage :00:00")) + .toBeFalsy(); + }); + + it("parses dates to their numeric representations", function () { + expect(dateProvider.parse(testDate)).toEqual(testTimestamp); + }); + + it("formats to text representing UTC date/times", function () { + var formatted = dateProvider.format(testTimestamp); + expect(formatted).toEqual(jasmine.any(String)); + // Use moment to verify that formatted value is equal + // to the original date/time + expect(moment.utc(formatted).valueOf()).toEqual(testTimestamp); + }); + + it("does not handle defined keys", function () { + expect(dateProvider.validate(testDate, 'someKey')) + .toBeFalsy(); + expect(dateProvider.format(testTimestamp, 'someKey')) + .toBeUndefined(); + }); + + }); + } +); diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json index 3ab06212d4..9f80aaabc2 100644 --- a/platform/commonUI/general/test/suite.json +++ b/platform/commonUI/general/test/suite.json @@ -18,6 +18,7 @@ "directives/MCTResize", "directives/MCTScroll", "services/DateAggregator", + "services/UTCDateProvider", "services/Popup", "services/PopupService", "services/UrlService", From c882b2d4c3c14b93a147aba7ed5c47c4d544ece2 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 12:08:34 -0700 Subject: [PATCH 047/148] [Time Conductor] Implement date provider Implement UTCDateProvider sufficient to pass spec. --- .../general/src/services/UTCDateProvider.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/platform/commonUI/general/src/services/UTCDateProvider.js b/platform/commonUI/general/src/services/UTCDateProvider.js index 54fcbf4737..38b6c61b8b 100644 --- a/platform/commonUI/general/src/services/UTCDateProvider.js +++ b/platform/commonUI/general/src/services/UTCDateProvider.js @@ -28,6 +28,14 @@ define([ ) { "use strict"; + var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss", + DATE_FORMATS = [ + DATE_FORMAT, + "YYYY-MM-DD HH:mm:ss", + "YYYY-MM-DD HH:mm", + "YYYY-MM-DD" + ]; + /** * Composites multiple DateService implementations such that * they can be used as one. @@ -39,12 +47,17 @@ define([ } UTCDateProvider.prototype.validate = function (text, key) { + return key === undefined && moment.utc(text, DATE_FORMATS).isValid(); }; UTCDateProvider.prototype.format = function (value, key) { + return key === undefined ? + moment.utc(value).format(DATE_FORMAT) : + undefined; }; UTCDateProvider.prototype.parse = function (text, key) { + return key === undefined && moment.utc(text, DATE_FORMATS).valueOf(); }; return UTCDateProvider; From 0d47b7c47dc8bd186e024587f4b70b505330611b Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 12:10:12 -0700 Subject: [PATCH 048/148] [Time Conductor] Expose dateService in bundle definition --- platform/commonUI/general/bundle.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index 1aa0b1dfc1..a69c810195 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -15,6 +15,19 @@ "depends": [ "$document", "$window" ] } ], + "components": [ + { + "type": "aggregator", + "provides": "dateService", + "implementation": "services/DateAggregator.js" + }, + { + "type": "provider", + "provides": "dateService", + "implementation": "services/UTCDateProvider.js", + "priority": "fallback" + } + ], "runs": [ { "implementation": "StyleSheetLoader.js", From 117470068a01951c90151a7c8fe8fe942d42c357 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 12:17:08 -0700 Subject: [PATCH 049/148] [Time Conductor] Use dateService from TimeRangeController --- platform/commonUI/general/bundle.json | 2 +- .../src/controllers/TimeRangeController.js | 17 +++++++++------ .../controllers/TimeRangeControllerSpec.js | 21 ++++++++++++++++++- 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index a69c810195..05c86cbcf7 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -66,7 +66,7 @@ { "key": "TimeRangeController", "implementation": "controllers/TimeRangeController.js", - "depends": [ "$scope", "now" ] + "depends": [ "$scope", "dateService", "now" ] }, { "key": "DateTimePickerController", diff --git a/platform/commonUI/general/src/controllers/TimeRangeController.js b/platform/commonUI/general/src/controllers/TimeRangeController.js index d4fb21be08..9ec95bac23 100644 --- a/platform/commonUI/general/src/controllers/TimeRangeController.js +++ b/platform/commonUI/general/src/controllers/TimeRangeController.js @@ -30,23 +30,28 @@ define( TICK_SPACING_PX = 150; /** + * Controller used by the `time-controller` template. * @memberof platform/commonUI/general * @constructor */ - function TimeConductorController($scope, now) { + function TimeRangeController($scope, dateService, now) { var tickCount = 2, innerMinimumSpan = 1000, // 1 second outerMinimumSpan = 1000 * 60 * 60, // 1 hour initialDragValue; + function timeSystemKey() { + return ($scope.parameters || {}).domain; + } + function formatTimestamp(ts) { - return moment.utc(ts).format(DATE_FORMAT); + return dateService.format(ts, timeSystemKey()); } function parseTimestamp(text) { - var m = moment.utc(text, DATE_FORMAT); - if (m.isValid()) { - return m.valueOf(); + var key = timeSystemKey(); + if (dateService.validate(text, key)) { + return dateService.parse(text, key); } else { throw new Error("Could not parse " + text); } @@ -297,6 +302,6 @@ define( $scope.$watch("boundsModel.end", updateEndFromText); } - return TimeConductorController; + return TimeRangeController; } ); diff --git a/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js b/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js index 91d3ecb9db..30cddab922 100644 --- a/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js +++ b/platform/commonUI/general/test/controllers/TimeRangeControllerSpec.js @@ -33,6 +33,7 @@ define( describe("The TimeRangeController", function () { var mockScope, + mockDateService, mockNow, controller; @@ -57,8 +58,26 @@ define( "$scope", [ "$apply", "$watch", "$watchCollection" ] ); + mockDateService = jasmine.createSpyObj( + "dateService", + [ "validate", "format", "parse" ] + ); + mockDateService.validate.andCallFake(function (text) { + return moment.utc(text).isValid(); + }); + mockDateService.parse.andCallFake(function (text) { + return moment.utc(text).valueOf(); + }); + mockDateService.format.andCallFake(function (value) { + return moment.utc(value).format("YYYY-MM-DD HH:mm:ss"); + }); mockNow = jasmine.createSpy('now'); - controller = new TimeRangeController(mockScope, mockNow); + + controller = new TimeRangeController( + mockScope, + mockDateService, + mockNow + ); }); it("watches the model that was passed in", function () { From 950578f09b9762c8a60a1c199c7f61d2a31529ed Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 12:20:15 -0700 Subject: [PATCH 050/148] [Time Conductor] Hide datetime pickers for non-UTC domains --- .../general/res/templates/controls/time-controller.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index 300e56c381..e0d7804b3b 100644 --- a/platform/commonUI/general/res/templates/controls/time-controller.html +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -29,7 +29,10 @@ ng-model="boundsModel.start" ng-class="{ error: !boundsModel.startValid }"> - + +
- +
From c0fda5b5729116798392f7060fad7ad10b86bcc7 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 12:41:46 -0700 Subject: [PATCH 051/148] [Time Conductor] Add JSDoc Add typedefs relevant to the date aggregator; in particular, document properties used to determine how to format timestamps associated with a telemetry point. --- .../general/src/services/DateAggregator.js | 4 +- platform/telemetry/src/TelemetryCapability.js | 58 +++++++++++++++++++ 2 files changed, 61 insertions(+), 1 deletion(-) diff --git a/platform/commonUI/general/src/services/DateAggregator.js b/platform/commonUI/general/src/services/DateAggregator.js index 3c2762d1bd..ee01929b27 100644 --- a/platform/commonUI/general/src/services/DateAggregator.js +++ b/platform/commonUI/general/src/services/DateAggregator.js @@ -31,7 +31,9 @@ define([ * Formats dates for display and parses dates from user input, * varying by a chosen time system. * - * Time systems are typically domain keys from telemetry metadata. + * Time systems are typically specified as `system` properties + * of domains in {@link TelemetryDomainMetadata}. + * * If omitted/left undefined, the time system is presumed to be UTC time, * with its numeric interpretation being milliseconds since the * start of 1970. diff --git a/platform/telemetry/src/TelemetryCapability.js b/platform/telemetry/src/TelemetryCapability.js index 1fbd12a691..d89b3cd3bf 100644 --- a/platform/telemetry/src/TelemetryCapability.js +++ b/platform/telemetry/src/TelemetryCapability.js @@ -36,6 +36,64 @@ define( getRangeValue: ZERO }; + /** + * Provides metadata about telemetry associated with a + * given domain object. + * + * @typedef TelemetryMetadata + * @property {string} source the machine-readable identifier for + * the source of telemetry data for this object; used by + * {@link TelemetryService} implementations to determine + * whether or not they provide data for this object. + * @property {string} key the machine-readable identifier for + * telemetry data associated with this specific object, + * within that `source`. + * @property {TelemetryDomainMetadata[]} domains supported domain + * options for telemetry data associated with this object, + * to use in interpreting a {@link TelemetrySeries} + * @property {TelemetryRangeMetadata[]} ranges supported range + * options for telemetry data associated with this object, + * to use in interpreting a {@link TelemetrySeries} + */ + + /** + * Provides metadata about range options within a telemetry series. + * Range options describe distinct properties within any given datum + * of a telemetry series; for instance, a telemetry series containing + * both raw and uncalibrated values may provide separate ranges for + * each. + * + * @typedef TelemetryRangeMetadata + * @property {string} key machine-readable identifier for this range + * @property {string} name human-readable name for this range + * @property {string} [units] human-readable units for this range + * @property {string} [format] data format for this range; usually, + * one of `number`, or `string`. If `undefined`, + * should presume to be a `number`. Custom formats + * may be indicated here. + */ + + /** + * Provides metadata about domain options within a telemetry series. + * Domain options describe distinct properties within any given datum + * of a telemtry series; for instance, a telemetry series containing + * both spacecraft event time and earth received times may provide + * separate domains for each. + * + * Domains are typically used to represent timestamps in a telemetry + * series, but more generally may express any property which will + * have unique values for each datum in a series. It is this property + * which makes domains distinct from ranges, as it makes these values + * appropriate and meaningful for use to sort and bound a series. + * + * @typedef TelemetryDomainMetadata + * @property {string} key machine-readable identifier for this range + * @property {string} name human-readable name for this range + * @property {string} [system] machine-readable identifier for the + * time/date system associated with this domain; + * used by {@link DateService} + */ + /** * A telemetry capability provides a means of requesting telemetry * for a specific object, and for unwrapping the response (to get From 9bc4327c597261ead0c7becf35d3cebfbddc2752 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 12:51:10 -0700 Subject: [PATCH 052/148] [Time Conductor] Add non-time-like domain Add a non-time-like domain to sine wave generator telemetry, to support integration of custom domain formatting into time conductor. --- example/generator/bundle.json | 10 ++++ example/generator/src/SinewaveDateProvider.js | 55 +++++++++++++++++++ .../generator/src/SinewaveTelemetrySeries.js | 3 + 3 files changed, 68 insertions(+) create mode 100644 example/generator/src/SinewaveDateProvider.js diff --git a/example/generator/bundle.json b/example/generator/bundle.json index cdb4736957..fc18f31193 100644 --- a/example/generator/bundle.json +++ b/example/generator/bundle.json @@ -8,6 +8,11 @@ "type": "provider", "provides": "telemetryService", "depends": [ "$q", "$timeout" ] + }, + { + "implementation": "SinewaveDateProvider.js", + "type": "provider", + "provides": "dateService" } ], "capabilities": [ @@ -38,6 +43,11 @@ { "key": "yesterday", "name": "Yesterday" + }, + { + "key": "index", + "name": "Index", + "system": "generator.index" } ], "ranges": [ diff --git a/example/generator/src/SinewaveDateProvider.js b/example/generator/src/SinewaveDateProvider.js new file mode 100644 index 0000000000..9b819a8796 --- /dev/null +++ b/example/generator/src/SinewaveDateProvider.js @@ -0,0 +1,55 @@ +/***************************************************************************** + * 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"; + + /** + * Provides date-time formatting for the Sine Wave Generator's + * `index` domain; demonstrates how to support domains which should + * not necessarily be formatted as UTC dates. + * @memberof example/generator + * @constructor + * @implements {DateService} + */ + function SinewaveDateProvider() { + } + + SinewaveDateProvider.prototype.validate = function (text, key) { + return key === 'generator.index' && /^#\d+$/.test(text); + }; + + SinewaveDateProvider.prototype.format = function (value, key) { + return key === 'generator.index' ? + ('#' + Math.floor(value)) : + undefined; + }; + + SinewaveDateProvider.prototype.parse = function (text, key) { + return key === 'generator.index' && parseInt(key.substring(1), 10); + }; + + return SinewaveDateProvider; +}); diff --git a/example/generator/src/SinewaveTelemetrySeries.js b/example/generator/src/SinewaveTelemetrySeries.js index 1e84034766..17084a07da 100644 --- a/example/generator/src/SinewaveTelemetrySeries.js +++ b/example/generator/src/SinewaveTelemetrySeries.js @@ -58,6 +58,9 @@ define( }; generatorData.getDomainValue = function (i, domain) { + if (domain === 'index') { + return i; + } return (i + offset) * 1000 + firstTime * 1000 - (domain === 'yesterday' ? ONE_DAY : 0); }; From e8d7093eb57393f2c9e58925fa3c48b29987e54e Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 13:07:04 -0700 Subject: [PATCH 053/148] [Time Conductor] Use time systems from time conductor --- example/generator/bundle.json | 12 ++++++++++ .../src/controllers/TimeRangeController.js | 4 ++-- platform/features/conductor/bundle.json | 4 ++-- .../res/templates/time-conductor.html | 1 + .../conductor/src/ConductorRepresenter.js | 23 +++++++++++-------- .../src/ConductorTelemetryDecorator.js | 2 +- .../features/conductor/src/TimeConductor.js | 20 ++++++++-------- 7 files changed, 42 insertions(+), 24 deletions(-) diff --git a/example/generator/bundle.json b/example/generator/bundle.json index fc18f31193..b2050e07e9 100644 --- a/example/generator/bundle.json +++ b/example/generator/bundle.json @@ -73,6 +73,18 @@ } ] } + ], + "constants": [ + { + "key": "TIME_CONDUCTOR_DOMAINS", + "value": [ + { "key": "time", "name": "Time" }, + { "key": "yesterday", "name": "Yesterday" }, + { "key": "index", "name": "Index", "system": "generator.index" } + ], + "priority": -1, + "comment": "Placeholder; to be replaced by inspection of available domains." + } ] } } diff --git a/platform/commonUI/general/src/controllers/TimeRangeController.js b/platform/commonUI/general/src/controllers/TimeRangeController.js index 9ec95bac23..5f2f0fa3e6 100644 --- a/platform/commonUI/general/src/controllers/TimeRangeController.js +++ b/platform/commonUI/general/src/controllers/TimeRangeController.js @@ -41,7 +41,7 @@ define( initialDragValue; function timeSystemKey() { - return ($scope.parameters || {}).domain; + return ($scope.parameters || {}).system; } function formatTimestamp(ts) { @@ -57,7 +57,7 @@ define( } } - // From 0.0-1.0 to "0%"-"1%" + // From 0.0-1.0 to "0%"-"100%" function toPercent(p) { return (100 * p) + "%"; } diff --git a/platform/features/conductor/bundle.json b/platform/features/conductor/bundle.json index de903cfb93..10d3f32665 100644 --- a/platform/features/conductor/bundle.json +++ b/platform/features/conductor/bundle.json @@ -36,9 +36,9 @@ { "key": "TIME_CONDUCTOR_DOMAINS", "value": [ - { "key": "time", "name": "Time" }, - { "key": "yesterday", "name": "Yesterday" } + { "key": "time", "name": "Time" } ], + "priority": "fallback", "comment": "Placeholder; to be replaced by inspection of available domains." } ] diff --git a/platform/features/conductor/res/templates/time-conductor.html b/platform/features/conductor/res/templates/time-conductor.html index 4126652d5b..16cc6296c8 100644 --- a/platform/features/conductor/res/templates/time-conductor.html +++ b/platform/features/conductor/res/templates/time-conductor.html @@ -1,4 +1,5 @@ ", + "", "" ].join(''), THROTTLE_MS = 200, @@ -74,11 +77,12 @@ define( broadcastBounds; // Combine start/end times into a single object - function bounds(start, end) { + function bounds() { + var domain = conductor.domain(); return { start: conductor.displayStart(), end: conductor.displayEnd(), - domain: conductor.domain() + domain: domain && domain.key }; } @@ -97,12 +101,10 @@ define( } function updateDomain(value) { - conductor.domain(value); - repScope.$broadcast('telemetry:display:bounds', bounds( - conductor.displayStart(), - conductor.displayEnd(), - conductor.domain() - )); + var newDomain = conductor.domain(value); + conductorScope.parameters.system = + newDomain && newDomain.system; + repScope.$broadcast('telemetry:display:bounds', bounds()); } // telemetry domain metadata -> option for a select control @@ -130,7 +132,8 @@ define( { outer: bounds(), inner: bounds() }; conductorScope.ngModel.options = conductor.domainOptions().map(makeOption); - conductorScope.ngModel.domain = conductor.domain(); + conductorScope.ngModel.domain = (conductor.domain() || {}).key; + conductorScope.parameters = {}; conductorScope .$watch('ngModel.conductor.inner.start', updateConductorInner); diff --git a/platform/features/conductor/src/ConductorTelemetryDecorator.js b/platform/features/conductor/src/ConductorTelemetryDecorator.js index ab2d958d7e..f359199ce2 100644 --- a/platform/features/conductor/src/ConductorTelemetryDecorator.js +++ b/platform/features/conductor/src/ConductorTelemetryDecorator.js @@ -51,7 +51,7 @@ define( request = request || {}; request.start = start; request.end = end; - request.domain = domain; + request.domain = domain && domain.key; return request; } diff --git a/platform/features/conductor/src/TimeConductor.js b/platform/features/conductor/src/TimeConductor.js index 0fa0403fd9..400cb06f97 100644 --- a/platform/features/conductor/src/TimeConductor.js +++ b/platform/features/conductor/src/TimeConductor.js @@ -43,7 +43,7 @@ define( function TimeConductor(start, end, domains) { this.range = { start: start, end: end }; this.domains = domains; - this.activeDomain = domains[0].key; + this.activeDomain = domains[0]; } /** @@ -73,7 +73,7 @@ define( /** * Get available domain options which can be used to bound time * selection. - * @returns {TelemetryDomain[]} available domains + * @returns {TelemetryDomainMetadata[]} available domains */ TimeConductor.prototype.domainOptions = function () { return this.domains; @@ -82,19 +82,21 @@ define( /** * Get or set (if called with an argument) the active domain. * @param {string} [key] the key identifying the domain choice - * @returns {TelemetryDomain} the active telemetry domain + * @returns {TelemetryDomainMetadata} the active telemetry domain */ TimeConductor.prototype.domain = function (key) { - function matchesKey(domain) { - return domain.key === key; - } + var i; if (arguments.length > 0) { - if (!this.domains.some(matchesKey)) { - throw new Error("Unknown domain " + key); + for (i = 0; i < this.domains.length; i += 1) { + if (this.domains[i].key === key) { + return (this.activeDomain = this.domains[i]); + } } - this.activeDomain = key; + + throw new Error("Unknown domain " + key); } + return this.activeDomain; }; From 4ff03b081dac5d7e6dcec577eae7acd74d0674e0 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 13:08:33 -0700 Subject: [PATCH 054/148] [Time Conductor] Suppress date picker for non-UTC time systems --- .../general/res/templates/controls/time-controller.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index e0d7804b3b..87b6c682b2 100644 --- a/platform/commonUI/general/res/templates/controls/time-controller.html +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -30,7 +30,7 @@ ng-class="{ error: !boundsModel.startValid }"> @@ -55,7 +55,7 @@ ng-class="{ error: !boundsModel.endValid }"> From 0628398b01ba4ac9c97eb05488d64ee4ead4891e Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 22 Oct 2015 13:30:34 -0700 Subject: [PATCH 055/148] Moved notifications examples from 'testing' to examples --- bundles.json | 3 +-- {testing/dialogTest => example/notifications}/bundle.json | 0 .../notifications}/res/dialog-launch.html | 0 .../notifications}/res/notification-launch.html | 0 .../notifications}/src/DialogLaunchController.js | 0 .../notifications}/src/DialogLaunchIndicator.js | 0 .../notifications}/src/NotificationLaunchController.js | 0 .../notifications}/src/NotificationLaunchIndicator.js | 0 8 files changed, 1 insertion(+), 2 deletions(-) rename {testing/dialogTest => example/notifications}/bundle.json (100%) rename {testing/dialogTest => example/notifications}/res/dialog-launch.html (100%) rename {testing/dialogTest => example/notifications}/res/notification-launch.html (100%) rename {testing/dialogTest => example/notifications}/src/DialogLaunchController.js (100%) rename {testing/dialogTest => example/notifications}/src/DialogLaunchIndicator.js (100%) rename {testing/dialogTest => example/notifications}/src/NotificationLaunchController.js (100%) rename {testing/dialogTest => example/notifications}/src/NotificationLaunchIndicator.js (100%) diff --git a/bundles.json b/bundles.json index c85b681bf5..7119dc690a 100644 --- a/bundles.json +++ b/bundles.json @@ -31,6 +31,5 @@ "example/imagery", "example/eventGenerator", "example/generator", - - "testing/dialogTest" + "example/notifications" ] diff --git a/testing/dialogTest/bundle.json b/example/notifications/bundle.json similarity index 100% rename from testing/dialogTest/bundle.json rename to example/notifications/bundle.json diff --git a/testing/dialogTest/res/dialog-launch.html b/example/notifications/res/dialog-launch.html similarity index 100% rename from testing/dialogTest/res/dialog-launch.html rename to example/notifications/res/dialog-launch.html diff --git a/testing/dialogTest/res/notification-launch.html b/example/notifications/res/notification-launch.html similarity index 100% rename from testing/dialogTest/res/notification-launch.html rename to example/notifications/res/notification-launch.html diff --git a/testing/dialogTest/src/DialogLaunchController.js b/example/notifications/src/DialogLaunchController.js similarity index 100% rename from testing/dialogTest/src/DialogLaunchController.js rename to example/notifications/src/DialogLaunchController.js diff --git a/testing/dialogTest/src/DialogLaunchIndicator.js b/example/notifications/src/DialogLaunchIndicator.js similarity index 100% rename from testing/dialogTest/src/DialogLaunchIndicator.js rename to example/notifications/src/DialogLaunchIndicator.js diff --git a/testing/dialogTest/src/NotificationLaunchController.js b/example/notifications/src/NotificationLaunchController.js similarity index 100% rename from testing/dialogTest/src/NotificationLaunchController.js rename to example/notifications/src/NotificationLaunchController.js diff --git a/testing/dialogTest/src/NotificationLaunchIndicator.js b/example/notifications/src/NotificationLaunchIndicator.js similarity index 100% rename from testing/dialogTest/src/NotificationLaunchIndicator.js rename to example/notifications/src/NotificationLaunchIndicator.js From 0053989de893b4ef9feee891e8e940a0a4825104 Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 22 Oct 2015 14:14:21 -0700 Subject: [PATCH 056/148] renamed dialog and notification 'actions' to 'options' --- .../src/DialogLaunchController.js | 16 ++++++++-------- .../src/NotificationLaunchController.js | 18 +++++++++--------- .../commonUI/dialog/res/templates/message.html | 12 ++++++------ platform/commonUI/dialog/src/DialogService.js | 6 +++--- .../general/res/templates/message-banner.html | 6 +++--- .../notification/src/NotificationService.js | 10 +++++----- 6 files changed, 34 insertions(+), 34 deletions(-) diff --git a/example/notifications/src/DialogLaunchController.js b/example/notifications/src/DialogLaunchController.js index 42882a0dfe..5679f990a0 100644 --- a/example/notifications/src/DialogLaunchController.js +++ b/example/notifications/src/DialogLaunchController.js @@ -52,17 +52,17 @@ define( unknownProgress: !knownProgress, unknownDuration: false, severity: MessageSeverity.INFO, - actions: [ + options: [ { label: "Cancel Operation", - action: function () { + callback: function () { $log.debug("Operation cancelled"); dialogService.dismiss(); } }, { label: "Do something else...", - action: function () { + callback: function () { $log.debug("Something else pressed"); } } @@ -97,17 +97,17 @@ define( title: "Error Dialog Example", actionText: "Something happened, and it was not good.", severity: MessageSeverity.ERROR, - actions: [ + options: [ { label: "Try Again", - action: function () { + callback: function () { $log.debug("Try Again Pressed"); dialogService.dismiss(); } }, { label: "Cancel", - action: function () { + callback: function () { $log.debug("Cancel Pressed"); dialogService.dismiss(); } @@ -130,10 +130,10 @@ define( " dialog. This dialog can be used to draw the user's" + " attention to an event.", severity: MessageSeverity.INFO, - actions: [ + options: [ { label: "OK", - action: function () { + callback: function () { $log.debug("OK Pressed"); dialogService.dismiss(); } diff --git a/example/notifications/src/NotificationLaunchController.js b/example/notifications/src/NotificationLaunchController.js index b45bbfc094..e59c009422 100644 --- a/example/notifications/src/NotificationLaunchController.js +++ b/example/notifications/src/NotificationLaunchController.js @@ -55,19 +55,19 @@ define( var actions = [ { label: "Try Again", - action: function () { + callback: function () { $log.debug("Try Again pressed"); } }, { label: "Remove", - action: function () { + callback: function () { $log.debug("Remove pressed"); } }, { label: "Cancel", - action: function () { + callback: function () { $log.debug("Cancel pressed"); } } @@ -97,13 +97,13 @@ define( title: "Example error notification " + messageCounter++, hint: "An error has occurred", severity: MessageSeverity.ERROR, - primaryAction: { + primaryOption: { label: 'Retry', - action: function() { + callback: function() { $log.info('Retry clicked'); } }, - actions: getExampleActions()}); + options: getExampleActions()}); }; /** * Launch a new notification with a severity of 'Alert'. @@ -114,13 +114,13 @@ define( title: "Alert notification " + (messageCounter++), hint: "This is an alert message", severity: MessageSeverity.ALERT, - primaryAction: { + primaryOption: { label: 'Retry', - action: function() { + callback: function() { $log.info('Retry clicked'); } }, - actions: getExampleActions()}); + options: getExampleActions()}); }; diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html index ecf598daf4..6b8c5c99cc 100644 --- a/platform/commonUI/dialog/res/templates/message.html +++ b/platform/commonUI/dialog/res/templates/message.html @@ -19,15 +19,15 @@ ng-show="ngModel.progress !== undefined || ngModel.unknownProgress">
- - {{dialogAction.label}} + ng-click="dialogOption.callback()"> + {{dialogOption.label}} - {{ngModel.primaryAction.label}} + ng-if="ngModel.primaryOption" + ng-click="ngModel.primaryOption.callback()"> + {{ngModel.primaryOption.label}}
diff --git a/platform/commonUI/dialog/src/DialogService.js b/platform/commonUI/dialog/src/DialogService.js index 215d64fead..27ffa9ae8b 100644 --- a/platform/commonUI/dialog/src/DialogService.js +++ b/platform/commonUI/dialog/src/DialogService.js @@ -178,7 +178,7 @@ define( * A user action that can be performed from a blocking dialog. These * actions will be rendered as buttons within a blocking dialog. * - * @typedef DialogAction + * @typedef DialogOption * @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 @@ -207,12 +207,12 @@ define( * 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} primaryAction an action that will + * @property {DialogOption} primaryOption an action that will * be added to the dialog as a button. The primary action can be * used as the suggested course of action for the user. Making it * distinct from other actions allows it to be styled differently, * and treated preferentially in banner mode. - * @property {DialogAction[]} actions a list of actions that will + * @property {DialogOption[]} options a list of actions that will * be added to the dialog as buttons. */ diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html index 629fc1080d..0af92aeba5 100644 --- a/platform/commonUI/general/res/templates/message-banner.html +++ b/platform/commonUI/general/res/templates/message-banner.html @@ -14,10 +14,10 @@ ng-model="active.notification"> - diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 411e3727cb..c11b92c651 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -37,13 +37,13 @@ define( "use strict"; /** - * A representation of a user action. Actions are provided to + * A representation of a user action. Options are provided to * dialogs and notifications and are shown as buttons. * - * @typedef {object} NotificationAction + * @typedef {object} NotificationOption * @property {string} label the label to appear on the button for * this action - * @property {function} action a callback function to be invoked + * @property {function} callback a callback function to be invoked * when the button is clicked */ @@ -67,12 +67,12 @@ define( * be automatically minimized or dismissed (depending on severity). * Additionally, if the provided value is a number, it will be used * as the delay period before being dismissed. - * @property {NotificationAction} primaryAction the default user + * @property {NotificationOption} primaryOption the default user * response to * this message. Will be represented as a button with the provided * label and action. May be used by banner notifications to display * only the most important option to users. - * @property {NotificationAction[]} actions any additional + * @property {NotificationOption[]} options any additional * actions the user can take. Will be represented as additional buttons * that may or may not be available from a banner. */ From 109ae3323d89192ad636e95825260f3e807d2c0d Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 22 Oct 2015 15:10:53 -0700 Subject: [PATCH 057/148] Added jsdoc and moved MessageController to dialogs from notifications --- platform/commonUI/dialog/bundle.json | 7 ++++++ .../src/MessageController.js | 15 ++++++++++- .../src/controllers/BannerController.js | 19 ++++++++++++++ platform/commonUI/notification/bundle.json | 5 ---- .../src/NotificationIndicatorController.js | 25 +++++++++++-------- 5 files changed, 55 insertions(+), 16 deletions(-) rename platform/commonUI/{notification => dialog}/src/MessageController.js (68%) diff --git a/platform/commonUI/dialog/bundle.json b/platform/commonUI/dialog/bundle.json index 80cd456c20..fb94f14b61 100644 --- a/platform/commonUI/dialog/bundle.json +++ b/platform/commonUI/dialog/bundle.json @@ -43,6 +43,13 @@ "key": "overlay", "templateUrl": "templates/overlay.html" } + ], + "controllers": [ + { + "key": "MessageController", + "implementation": "MessageController.js", + "depends": ["$scope"] + } ] } } \ No newline at end of file diff --git a/platform/commonUI/notification/src/MessageController.js b/platform/commonUI/dialog/src/MessageController.js similarity index 68% rename from platform/commonUI/notification/src/MessageController.js rename to platform/commonUI/dialog/src/MessageController.js index 390f4463d3..595f429f9e 100644 --- a/platform/commonUI/notification/src/MessageController.js +++ b/platform/commonUI/dialog/src/MessageController.js @@ -22,10 +22,23 @@ /*global define*/ define( - ['./MessageSeverity'], + ['../../notification/src/MessageSeverity'], function (MessageSeverity) { "use strict"; + /** + * A controller for the message view which used to represent a + * message to the user in the dialogs and notifications systems. The + * message view (../res/templates/message.html) is included + * from the blocking message dialog + * (../res/templates/overlay-blocking-message.html), + * and the message list (../res/templates/overlay-message-list.html) + * shown from the notifications indicator + * @param $scope + * @constructor + * @see DialogService#showBlockingMessage + * @see NotificationService + */ function MessageController($scope) { $scope.MessageSeverity = MessageSeverity; } diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index a59860f884..c3f698fc38 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -25,10 +25,29 @@ define( ['../../../notification/src/MessageSeverity'], function (MessageSeverity) { "use strict"; + + /** + * A controller for banner notifications. Banner notifications are a + * non-blocking way of drawing the user's attention to an event such + * as system errors, or the progress or successful completion of an + * ongoing task. This controller provides scoped functions for + * dismissing and 'maximizing' notifications. See {@link NotificationService} + * for more details on Notifications. + * + * @param $scope + * @param notificationService + * @param dialogService + * @constructor + */ function BannerController($scope, notificationService, dialogService) { $scope.active = notificationService.active; $scope.MessageSeverity = MessageSeverity; + $scope.action = function (action, $event){ + /* + Prevents default 'maximize' behaviour when clicking on + notification button + */ $event.stopPropagation(); return action(); }; diff --git a/platform/commonUI/notification/bundle.json b/platform/commonUI/notification/bundle.json index d729e42673..f4dbd5c71a 100644 --- a/platform/commonUI/notification/bundle.json +++ b/platform/commonUI/notification/bundle.json @@ -21,11 +21,6 @@ } ], "controllers": [ - { - "key": "MessageController", - "implementation": "MessageController.js", - "depends": ["$scope"] - }, { "key": "NotificationIndicatorController", "implementation": "NotificationIndicatorController.js", diff --git a/platform/commonUI/notification/src/NotificationIndicatorController.js b/platform/commonUI/notification/src/NotificationIndicatorController.js index 9571b0f6a4..e225fd41bf 100644 --- a/platform/commonUI/notification/src/NotificationIndicatorController.js +++ b/platform/commonUI/notification/src/NotificationIndicatorController.js @@ -26,25 +26,30 @@ define( function (MessageSeverity) { "use strict"; + /** + * Provides an indicator that is visible when there are + * banner notifications that have been minimized. Will also indicate + * the number of notifications. Notifications can be viewed by + * clicking on the indicator to launch a dialog showing a list of + * notifications. + * @param $scope + * @param notificationService + * @param dialogService + * @constructor + */ function NotificationIndicatorController($scope, notificationService, dialogService) { $scope.notifications = notificationService.notifications; $scope.highest = notificationService.highest; $scope.MessageSeverity = MessageSeverity; + /** + * Launch a dialog showing a list of current notifications. + */ $scope.showNotificationsList = function(){ var model = { title: "Messages", - severity: MessageSeverity.INFO, - actions: [ - { - label: "Done", - action: function () { - dialogService.dismiss(); - } - } - ], - messages: [] + severity: MessageSeverity.INFO }; model.messages = notificationService.notifications; From 552435b009e828aab2b9f3494fbce950dff73804 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 15:20:12 -0700 Subject: [PATCH 058/148] [Time Conductor] Add bundle for time handling --- platform/time/bundle.json | 18 ++++++ platform/time/src/TimeAggregator.js | 57 +++++++++++++++++++ platform/time/src/UTCTimeProvider.js | 44 ++++++++++++++ platform/time/src/UTCTimeSystem.js | 85 ++++++++++++++++++++++++++++ 4 files changed, 204 insertions(+) create mode 100644 platform/time/bundle.json create mode 100644 platform/time/src/TimeAggregator.js create mode 100644 platform/time/src/UTCTimeProvider.js create mode 100644 platform/time/src/UTCTimeSystem.js diff --git a/platform/time/bundle.json b/platform/time/bundle.json new file mode 100644 index 0000000000..9ab4fb1e97 --- /dev/null +++ b/platform/time/bundle.json @@ -0,0 +1,18 @@ +{ + "name": "Time services bundle", + "description": "Defines interfaces and provides default implementations for handling different time systems.", + "extensions": { + "components": [ + { + "provides": "timeService", + "type": "aggregator", + "implementation": "TimeAggregator.js" + }, + { + "provides": "timeService", + "type": "provider", + "implementation": "UTCTimeProvider.js" + } + ] + } +} diff --git a/platform/time/src/TimeAggregator.js b/platform/time/src/TimeAggregator.js new file mode 100644 index 0000000000..f3e0d5cfc3 --- /dev/null +++ b/platform/time/src/TimeAggregator.js @@ -0,0 +1,57 @@ +/***************************************************************************** + * 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 TimeAggregator(timeProviders) { + var systemMap = {}, + systemKeys = []; + + timeProviders.forEach(function (provider) { + provider.systems().forEach(function (key) { + if (!systemMap[key]) { + systemMap[key] = provider.system(key); + systemKeys.push(key); + } + }); + }); + + this.systemMap = systemMap; + this.systemKeys = systemKeys; + } + + TimeAggregator.prototype.systems = function () { + return this.systemKeys; + }; + + TimeAggregator.prototype.system = function (key) { + return this.systemMap[key || 'utc']; + }; + + return TimeAggregator; +}); diff --git a/platform/time/src/UTCTimeProvider.js b/platform/time/src/UTCTimeProvider.js new file mode 100644 index 0000000000..36c266c621 --- /dev/null +++ b/platform/time/src/UTCTimeProvider.js @@ -0,0 +1,44 @@ +/***************************************************************************** + * 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([ + './UTCTimeSystem' +], function ( + UTCTimeSystem +) { + "use strict"; + + function UTCTimeProvider(now) { + this.utcTimeSystem = new UTCTimeSystem(now); + } + + UTCTimeProvider.prototype.systems = function () { + return [ 'utc' ]; + }; + + UTCTimeProvider.prototype.system = function (key) { + return key === 'utc' ? this.utcTimeSystem : undefined; + }; + + return UTCTimeProvider; +}); diff --git a/platform/time/src/UTCTimeSystem.js b/platform/time/src/UTCTimeSystem.js new file mode 100644 index 0000000000..22c3488b50 --- /dev/null +++ b/platform/time/src/UTCTimeSystem.js @@ -0,0 +1,85 @@ +/***************************************************************************** + * 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([ + 'moment' +], function ( + moment +) { + "use strict"; + + var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss", + DATE_FORMATS = [ + DATE_FORMAT, + "YYYY-MM-DD HH:mm:ss", + "YYYY-MM-DD HH:mm", + "YYYY-MM-DD" + ], + SECOND = 1000, + MINUTE = 60 * SECOND, + HOUR = 60 * MINUTE, + DAY = 24 * HOUR, + WEEK = 7 * DAY, + MONTH_APPROX = 30 * DAY, + YEAR = 365 * DAY, + INCREMENTS = [ + SECOND, + MINUTE, + HOUR, + DAY, + WEEK, + MONTH_APPROX, + YEAR + ], + DEFAULT_INCREMENT = 3; + + + function UTCTimeSystem(now) { + this.nowFn = now; + } + + UTCTimeSystem.prototype.format = function (value) { + return moment.utc(value).format(DATE_FORMAT); + }; + + UTCTimeSystem.prototype.parse = function (text) { + return moment.utc(text, DATE_FORMATS).valueOf(); + }; + + UTCTimeSystem.prototype.validate = function (text) { + return moment.utc(text, DATE_FORMATS).isValid(); + }; + + UTCTimeSystem.prototype.now = function () { + return this.nowFn(); + }; + + UTCTimeSystem.prototype.increment = function (scale) { + var index = (scale || 0) + DEFAULT_INCREMENT; + index = Math.max(index, 0); + index = Math.min(index, INCREMENTS.length - 1); + return INCREMENTS[index]; + }; + + return UTCTimeSystem; +}); From 5e9f38dadd87bf38330df2bbafe34edcb0afc18e Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 15:20:54 -0700 Subject: [PATCH 059/148] [Time Conductor] Add dependency to UTCTimeProvider --- platform/time/bundle.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/platform/time/bundle.json b/platform/time/bundle.json index 9ab4fb1e97..9e831b5723 100644 --- a/platform/time/bundle.json +++ b/platform/time/bundle.json @@ -11,7 +11,8 @@ { "provides": "timeService", "type": "provider", - "implementation": "UTCTimeProvider.js" + "implementation": "UTCTimeProvider.js", + "depends": [ "now" ] } ] } From 1e71df5ce9cb9636a41ff2564ece27dad01b607e Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 15:26:22 -0700 Subject: [PATCH 060/148] [Time Conductor] Implement timeService in sinewave telemetry Switch from initial dateService interface to more practical timeService interface. --- example/generator/bundle.json | 4 +- ...ateProvider.js => SinewaveTimeProvider.js} | 23 ++++---- example/generator/src/SinewaveTimeSystem.js | 55 +++++++++++++++++++ 3 files changed, 67 insertions(+), 15 deletions(-) rename example/generator/src/{SinewaveDateProvider.js => SinewaveTimeProvider.js} (73%) create mode 100644 example/generator/src/SinewaveTimeSystem.js diff --git a/example/generator/bundle.json b/example/generator/bundle.json index b2050e07e9..6a182e6a7a 100644 --- a/example/generator/bundle.json +++ b/example/generator/bundle.json @@ -10,9 +10,9 @@ "depends": [ "$q", "$timeout" ] }, { - "implementation": "SinewaveDateProvider.js", + "implementation": "SinewaveTimeProvider.js", "type": "provider", - "provides": "dateService" + "provides": "timeService" } ], "capabilities": [ diff --git a/example/generator/src/SinewaveDateProvider.js b/example/generator/src/SinewaveTimeProvider.js similarity index 73% rename from example/generator/src/SinewaveDateProvider.js rename to example/generator/src/SinewaveTimeProvider.js index 9b819a8796..2f2bcc2391 100644 --- a/example/generator/src/SinewaveDateProvider.js +++ b/example/generator/src/SinewaveTimeProvider.js @@ -22,7 +22,9 @@ /*global define*/ define([ + './SinewaveTimeSystem' ], function ( + SinewaveTimeSystem ) { "use strict"; @@ -32,24 +34,19 @@ define([ * not necessarily be formatted as UTC dates. * @memberof example/generator * @constructor - * @implements {DateService} + * @implements {TimeService} */ - function SinewaveDateProvider() { + function SinewaveTimeProvider() { + this.indexTimeSystem = new SinewaveTimeSystem(); } - SinewaveDateProvider.prototype.validate = function (text, key) { - return key === 'generator.index' && /^#\d+$/.test(text); + SinewaveTimeProvider.prototype.systems = function () { + return [ 'generator.index' ]; }; - SinewaveDateProvider.prototype.format = function (value, key) { - return key === 'generator.index' ? - ('#' + Math.floor(value)) : - undefined; + SinewaveTimeProvider.prototype.system = function (key) { + return key === 'generator.index' ? this.indexTimeSystem : undefined; }; - SinewaveDateProvider.prototype.parse = function (text, key) { - return key === 'generator.index' && parseInt(key.substring(1), 10); - }; - - return SinewaveDateProvider; + return SinewaveTimeProvider; }); diff --git a/example/generator/src/SinewaveTimeSystem.js b/example/generator/src/SinewaveTimeSystem.js new file mode 100644 index 0000000000..c248de4bfd --- /dev/null +++ b/example/generator/src/SinewaveTimeSystem.js @@ -0,0 +1,55 @@ +/***************************************************************************** + * 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([ + './SinewaveTelemetrySeries' +], function ( + SinewaveTelemetrySeries +) { + "use strict"; + + function SinewaveTimeSystem(now) { + } + + SinewaveTimeSystem.prototype.format = function (value) { + return ('#' + Math.floor(value)); + }; + + SinewaveTimeSystem.prototype.parse = function (text) { + return parseInt(text.substring(1), 10); + }; + + SinewaveTimeSystem.prototype.validate = function (text) { + return (/^#\d+$/).test(text); + }; + + SinewaveTimeSystem.prototype.now = function () { + return new SinewaveTelemetrySeries().getPointCount(); + }; + + SinewaveTimeSystem.prototype.increment = function (scale) { + return Math.pow(10, (scale || 0) + 1); + }; + + return SinewaveTimeSystem; +}); From a154c9c8708580cc376adceb3777ef312858b6ac Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 15:51:12 -0700 Subject: [PATCH 061/148] [Time Conductor] Use timeService from control --- bundles.json | 1 + example/generator/src/SinewaveTimeSystem.js | 4 +- platform/commonUI/general/bundle.json | 2 +- .../templates/controls/time-controller.html | 2 +- .../src/controllers/TimeRangeController.js | 41 ++++++++++++++----- 5 files changed, 36 insertions(+), 14 deletions(-) diff --git a/bundles.json b/bundles.json index a0f7edd7a8..3c2eb90340 100644 --- a/bundles.json +++ b/bundles.json @@ -26,6 +26,7 @@ "platform/policy", "platform/entanglement", "platform/search", + "platform/time", "example/imagery", "example/eventGenerator", diff --git a/example/generator/src/SinewaveTimeSystem.js b/example/generator/src/SinewaveTimeSystem.js index c248de4bfd..24a9e35e62 100644 --- a/example/generator/src/SinewaveTimeSystem.js +++ b/example/generator/src/SinewaveTimeSystem.js @@ -44,11 +44,11 @@ define([ }; SinewaveTimeSystem.prototype.now = function () { - return new SinewaveTelemetrySeries().getPointCount(); + return new SinewaveTelemetrySeries({}).getPointCount(); }; SinewaveTimeSystem.prototype.increment = function (scale) { - return Math.pow(10, (scale || 0) + 1); + return Math.max(Math.pow(10, (scale || 0) + 1), 1); }; return SinewaveTimeSystem; diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index 05c86cbcf7..c0f5141694 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -66,7 +66,7 @@ { "key": "TimeRangeController", "implementation": "controllers/TimeRangeController.js", - "depends": [ "$scope", "dateService", "now" ] + "depends": [ "$scope", "timeService", "now" ] }, { "key": "DateTimePickerController", diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html index 87b6c682b2..5b41beeebf 100644 --- a/platform/commonUI/general/res/templates/controls/time-controller.html +++ b/platform/commonUI/general/res/templates/controls/time-controller.html @@ -102,7 +102,7 @@
diff --git a/platform/commonUI/general/src/controllers/TimeRangeController.js b/platform/commonUI/general/src/controllers/TimeRangeController.js index 5f2f0fa3e6..27efeeb3fc 100644 --- a/platform/commonUI/general/src/controllers/TimeRangeController.js +++ b/platform/commonUI/general/src/controllers/TimeRangeController.js @@ -34,24 +34,20 @@ define( * @memberof platform/commonUI/general * @constructor */ - function TimeRangeController($scope, dateService, now) { + function TimeRangeController($scope, timeService, now) { var tickCount = 2, innerMinimumSpan = 1000, // 1 second outerMinimumSpan = 1000 * 60 * 60, // 1 hour - initialDragValue; - - function timeSystemKey() { - return ($scope.parameters || {}).system; - } + initialDragValue, + timeSystem = timeService.system(); // Start with default function formatTimestamp(ts) { - return dateService.format(ts, timeSystemKey()); + return timeSystem.format(ts); } function parseTimestamp(text) { - var key = timeSystemKey(); - if (dateService.validate(text, key)) { - return dateService.parse(text, key); + if (timeSystem.validate(text)) { + return timeSystem.parse(text); } else { throw new Error("Could not parse " + text); } @@ -270,6 +266,30 @@ define( } } + function reinitializeBounds(now, increment) { + var end = Math.ceil(now / increment) * increment, + start = end - increment; + $scope.ngModel.outer.start = start; + $scope.ngModel.outer.end = end; + $scope.ngModel.inner.start = start; + $scope.ngModel.inner.end = end; + $scope.boundsModel = {}; + updateViewFromModel(); + } + + function updateTimeSystem(key) { + timeSystem = timeService.system(key) || timeService.system(); + + // One second / one hour in UTC; should be + // similarly useful in other time systems. + innerMinimumSpan = timeSystem.increment(-3); + outerMinimumSpan = timeSystem.increment(-1); + reinitializeBounds( + timeSystem.now(), + timeSystem.increment() + ); + } + function updateStartFromPicker(value) { updateOuterStart(value); updateBoundsText($scope.ngModel); @@ -300,6 +320,7 @@ define( $scope.$watch("ngModel.outer.end", updateEndFromPicker); $scope.$watch("boundsModel.start", updateStartFromText); $scope.$watch("boundsModel.end", updateEndFromText); + $scope.$watch("parameters.system", updateTimeSystem); } return TimeRangeController; From 16e4c327095d9a61dbd2b698bea32a2b8050de20 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 16:05:09 -0700 Subject: [PATCH 062/148] [Time Conductor] Remove now dependency, fix domain switch Remove dependency on now (current time can be retrieved via timeService); fix domain-switching behavior such that changes to time systems are reflected in changes to default bounds. --- platform/commonUI/general/bundle.json | 2 +- .../general/src/controllers/TimeRangeController.js | 8 +++----- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index c0f5141694..30057dcff1 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -66,7 +66,7 @@ { "key": "TimeRangeController", "implementation": "controllers/TimeRangeController.js", - "depends": [ "$scope", "timeService", "now" ] + "depends": [ "$scope", "timeService" ] }, { "key": "DateTimePickerController", diff --git a/platform/commonUI/general/src/controllers/TimeRangeController.js b/platform/commonUI/general/src/controllers/TimeRangeController.js index 27efeeb3fc..321698c1b9 100644 --- a/platform/commonUI/general/src/controllers/TimeRangeController.js +++ b/platform/commonUI/general/src/controllers/TimeRangeController.js @@ -34,7 +34,7 @@ define( * @memberof platform/commonUI/general * @constructor */ - function TimeRangeController($scope, timeService, now) { + function TimeRangeController($scope, timeService) { var tickCount = 2, innerMinimumSpan = 1000, // 1 second outerMinimumSpan = 1000 * 60 * 60, // 1 hour @@ -91,7 +91,7 @@ define( } function defaultBounds() { - var t = now(); + var t = timeSystem.now(); return { start: t - 24 * 3600 * 1000, // One day end: t @@ -122,8 +122,6 @@ define( } function updateViewFromModel(ngModel) { - var t = now(); - ngModel = ngModel || {}; ngModel.outer = ngModel.outer || defaultBounds(); ngModel.inner = ngModel.inner || copyBounds(ngModel.outer); @@ -274,7 +272,7 @@ define( $scope.ngModel.inner.start = start; $scope.ngModel.inner.end = end; $scope.boundsModel = {}; - updateViewFromModel(); + updateViewFromModel($scope.ngModel); } function updateTimeSystem(key) { From b4dd95490c6ee216c23855b87c0749024678767f Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 16:07:21 -0700 Subject: [PATCH 063/148] [Time Conductor] Don't treat defaults as invalid --- .../commonUI/general/src/controllers/TimeRangeController.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/platform/commonUI/general/src/controllers/TimeRangeController.js b/platform/commonUI/general/src/controllers/TimeRangeController.js index 321698c1b9..550ea49175 100644 --- a/platform/commonUI/general/src/controllers/TimeRangeController.js +++ b/platform/commonUI/general/src/controllers/TimeRangeController.js @@ -109,6 +109,9 @@ define( ngModel.outer[property]) { $scope.boundsModel[property] = formatTimestamp(ngModel.outer[property]); + // Never want to flag machine-generated text + // as invalid here. + $scope.boundsModel[property + 'Valid'] = true; } } catch (e) { // User-entered text is invalid, so leave it be From 67cf8d8cee1daf1ec7df41c595ff2e59861516d8 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 16:24:55 -0700 Subject: [PATCH 064/148] [Time Conductor] Support index domain from sine wave --- example/generator/src/SinewaveTelemetrySeries.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/example/generator/src/SinewaveTelemetrySeries.js b/example/generator/src/SinewaveTelemetrySeries.js index 17084a07da..529d4e80a2 100644 --- a/example/generator/src/SinewaveTelemetrySeries.js +++ b/example/generator/src/SinewaveTelemetrySeries.js @@ -49,6 +49,11 @@ define( Math.max(Math.floor(request.start / 1000), firstTime), offset = requestStart - firstTime; + if (request.domain === 'index') { + offset = Math.floor(request.start || 0); + count = Math.ceil(request.end || endTime); + } + if (request.size !== undefined) { offset = Math.max(offset, count - request.size); } @@ -59,7 +64,7 @@ define( generatorData.getDomainValue = function (i, domain) { if (domain === 'index') { - return i; + return i + offset; } return (i + offset) * 1000 + firstTime * 1000 - (domain === 'yesterday' ? ONE_DAY : 0); From 111b3bac09a841235274cc8564dc6425f31a0b65 Mon Sep 17 00:00:00 2001 From: Victor Woeltjen Date: Thu, 22 Oct 2015 16:27:21 -0700 Subject: [PATCH 065/148] [Time Conductor] Remove dateService Replaced by timeService --- platform/commonUI/general/bundle.json | 13 -- .../general/src/services/DateAggregator.js | 118 ------------------ .../general/src/services/UTCDateProvider.js | 64 ---------- .../test/services/DateAggregatorSpec.js | 94 -------------- .../test/services/UTCDateProviderSpec.js | 67 ---------- platform/commonUI/general/test/suite.json | 2 - 6 files changed, 358 deletions(-) delete mode 100644 platform/commonUI/general/src/services/DateAggregator.js delete mode 100644 platform/commonUI/general/src/services/UTCDateProvider.js delete mode 100644 platform/commonUI/general/test/services/DateAggregatorSpec.js delete mode 100644 platform/commonUI/general/test/services/UTCDateProviderSpec.js diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json index 30057dcff1..a4d4008f3d 100644 --- a/platform/commonUI/general/bundle.json +++ b/platform/commonUI/general/bundle.json @@ -15,19 +15,6 @@ "depends": [ "$document", "$window" ] } ], - "components": [ - { - "type": "aggregator", - "provides": "dateService", - "implementation": "services/DateAggregator.js" - }, - { - "type": "provider", - "provides": "dateService", - "implementation": "services/UTCDateProvider.js", - "priority": "fallback" - } - ], "runs": [ { "implementation": "StyleSheetLoader.js", diff --git a/platform/commonUI/general/src/services/DateAggregator.js b/platform/commonUI/general/src/services/DateAggregator.js deleted file mode 100644 index ee01929b27..0000000000 --- a/platform/commonUI/general/src/services/DateAggregator.js +++ /dev/null @@ -1,118 +0,0 @@ -/***************************************************************************** - * 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"; - - /** - * Formats dates for display and parses dates from user input, - * varying by a chosen time system. - * - * Time systems are typically specified as `system` properties - * of domains in {@link TelemetryDomainMetadata}. - * - * If omitted/left undefined, the time system is presumed to be UTC time, - * with its numeric interpretation being milliseconds since the - * start of 1970. - * - * @interface DateService - */ - - /** - * Check if the provided text can be parsed into a numeric - * representation of a time in the specified time system. - * @method validate - * @memberof DateService# - * @param {string} text the text to validate - * @param {string} [key] a key identifying the time system - * @returns {boolean} true if the text can be parsed - */ - - /** - * Parse the provided into a numeric representation of a time - * in the specified time system. - * - * Behavior of this method for invalid text is undefined; use - * the `validate` method to check for validity first. - * - * @method parse - * @memberof DateService# - * @param {string} text the text to parse - * @param {string} [key] a key identifying the time system - * @returns {number} a numeric representation of the date/time - */ - - /** - * Format the provided numeric representation of a time - * into a human-readable string appropriate for that time system. - * - * If the time system is not recognized, the return value will be - * `undefined`. - * - * @method format - * @memberof DateService# - * @param {number} value the time value to format - * @param {string} [key] a key identifying the time system - * @returns {string} a human-readable representation of the date/time - */ - - /** - * Composites multiple DateService implementations such that - * they can be used as one. - * @memberof platform/commonUI/general - * @constructor - */ - function DateAggregator(dateProviders) { - this.dateProviders = dateProviders; - } - - DateAggregator.prototype.validate = function (text, key) { - return this.dateProviders.some(function (provider) { - return provider.validate(text, key); - }); - }; - - DateAggregator.prototype.format = function (value, key) { - var i, text; - for (i = 0; i < this.dateProviders.length; i += 1) { - text = this.dateProviders[i].format(value, key); - if (text !== undefined) { - return text; - } - } - }; - - DateAggregator.prototype.parse = function (text, key) { - var i; - for (i = 0; i < this.dateProviders.length; i += 1) { - if (this.dateProviders[i].validate(text, key)) { - return this.dateProviders[i].parse(text, key); - } - } - }; - - return DateAggregator; -}); diff --git a/platform/commonUI/general/src/services/UTCDateProvider.js b/platform/commonUI/general/src/services/UTCDateProvider.js deleted file mode 100644 index 38b6c61b8b..0000000000 --- a/platform/commonUI/general/src/services/UTCDateProvider.js +++ /dev/null @@ -1,64 +0,0 @@ -/***************************************************************************** - * 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([ - 'moment' -], function ( - moment -) { - "use strict"; - - var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss", - DATE_FORMATS = [ - DATE_FORMAT, - "YYYY-MM-DD HH:mm:ss", - "YYYY-MM-DD HH:mm", - "YYYY-MM-DD" - ]; - - /** - * Composites multiple DateService implementations such that - * they can be used as one. - * @memberof platform/commonUI/general - * @constructor - * @implements {DateService} - */ - function UTCDateProvider() { - } - - UTCDateProvider.prototype.validate = function (text, key) { - return key === undefined && moment.utc(text, DATE_FORMATS).isValid(); - }; - - UTCDateProvider.prototype.format = function (value, key) { - return key === undefined ? - moment.utc(value).format(DATE_FORMAT) : - undefined; - }; - - UTCDateProvider.prototype.parse = function (text, key) { - return key === undefined && moment.utc(text, DATE_FORMATS).valueOf(); - }; - - return UTCDateProvider; -}); diff --git a/platform/commonUI/general/test/services/DateAggregatorSpec.js b/platform/commonUI/general/test/services/DateAggregatorSpec.js deleted file mode 100644 index ba55bc907a..0000000000 --- a/platform/commonUI/general/test/services/DateAggregatorSpec.js +++ /dev/null @@ -1,94 +0,0 @@ -/***************************************************************************** - * 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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/ - - -define( - ["../../src/services/DateAggregator"], - function (DateAggregator) { - 'use strict'; - - var DATE_SERVICE_METHODS = [ "format", "validate", "parse" ]; - - describe("DateAggregator", function () { - var mockProviders, - dateAggregator; - - beforeEach(function () { - mockProviders = [ 'a', 'b', 'c', undefined ].map(function (k, i) { - var mockProvider = jasmine.createSpyObj( - 'provider-' + k, - DATE_SERVICE_METHODS - ); - - mockProvider.format.andCallFake(function (value, key) { - return key === k ? - ("Formatted " + value + " for " + k) : - undefined; - }); - - mockProvider.parse.andCallFake(function (text, key) { - return key === k ? i : undefined; - }); - - mockProvider.validate.andCallFake(function (text, key) { - return key === k; - }); - - return mockProvider; - }); - - dateAggregator = new DateAggregator(mockProviders); - }); - - it("formats dates using the first provider which gives a result", function () { - expect(dateAggregator.format(42, "a")) - .toEqual("Formatted 42 for a"); - expect(dateAggregator.format(12321, "b")) - .toEqual("Formatted 12321 for b"); - expect(dateAggregator.format(1977, "c")) - .toEqual("Formatted 1977 for c"); - expect(dateAggregator.format(0)) - .toEqual("Formatted 0 for undefined"); - }); - - it("parses dates using the first provider which validates", function () { - expect(dateAggregator.parse("x", "a")).toEqual(0); - expect(dateAggregator.parse("x", "b")).toEqual(1); - expect(dateAggregator.parse("x", "c")).toEqual(2); - expect(dateAggregator.parse("x")).toEqual(3); - }); - - it("validates across all providers", function () { - expect(dateAggregator.validate("x", "a")).toBeTruthy(); - expect(dateAggregator.validate("x", "b")).toBeTruthy(); - expect(dateAggregator.validate("x", "c")).toBeTruthy(); - expect(dateAggregator.validate("x")).toBeTruthy(); - expect(dateAggregator.validate("x", "z")).toBeFalsy(); - - mockProviders[3].validate.andReturn(false); - expect(dateAggregator.validate("x")).toBeFalsy(); - }); - - }); - } -); diff --git a/platform/commonUI/general/test/services/UTCDateProviderSpec.js b/platform/commonUI/general/test/services/UTCDateProviderSpec.js deleted file mode 100644 index 1a1873030d..0000000000 --- a/platform/commonUI/general/test/services/UTCDateProviderSpec.js +++ /dev/null @@ -1,67 +0,0 @@ -/***************************************************************************** - * 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,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/ - - -define( - ["../../src/services/UTCDateProvider", "moment"], - function (UTCDateProvider, moment) { - 'use strict'; - - describe("UTCDateProvider", function () { - var testDate, testTimestamp, dateProvider; - - beforeEach(function () { - testDate = "1977-05-25 17:30:00"; - testTimestamp = moment.utc(testDate).valueOf(); - dateProvider = new UTCDateProvider(); - }); - - it("distinguishes valid dates from invalid dates", function () { - expect(dateProvider.validate(testDate)) - .toBeTruthy(); - expect(dateProvider.validate("2015-garbage :00:00")) - .toBeFalsy(); - }); - - it("parses dates to their numeric representations", function () { - expect(dateProvider.parse(testDate)).toEqual(testTimestamp); - }); - - it("formats to text representing UTC date/times", function () { - var formatted = dateProvider.format(testTimestamp); - expect(formatted).toEqual(jasmine.any(String)); - // Use moment to verify that formatted value is equal - // to the original date/time - expect(moment.utc(formatted).valueOf()).toEqual(testTimestamp); - }); - - it("does not handle defined keys", function () { - expect(dateProvider.validate(testDate, 'someKey')) - .toBeFalsy(); - expect(dateProvider.format(testTimestamp, 'someKey')) - .toBeUndefined(); - }); - - }); - } -); diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json index 9f80aaabc2..0d19fbb9e4 100644 --- a/platform/commonUI/general/test/suite.json +++ b/platform/commonUI/general/test/suite.json @@ -17,8 +17,6 @@ "directives/MCTPopup", "directives/MCTResize", "directives/MCTScroll", - "services/DateAggregator", - "services/UTCDateProvider", "services/Popup", "services/PopupService", "services/UrlService", From 83276d70d3942a9b46d9a176e4398841e725e51b Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 22 Oct 2015 16:29:10 -0700 Subject: [PATCH 066/148] Removed MessageSeverity enum and MessageController --- .../src/DialogLaunchController.js | 10 +-- .../src/NotificationLaunchController.js | 16 ++--- platform/commonUI/dialog/bundle.json | 7 -- .../dialog/res/templates/message.html | 8 +-- .../commonUI/dialog/src/MessageController.js | 47 ------------- .../general/res/templates/message-banner.html | 5 +- .../src/controllers/BannerController.js | 7 +- .../res/notification-indicator.html | 5 +- .../notification/src/MessageSeverity.js | 11 --- .../src/NotificationIndicatorController.js | 8 +-- .../notification/src/NotificationService.js | 29 ++++---- .../test/NotificationServiceSpec.js | 69 ++----------------- 12 files changed, 44 insertions(+), 178 deletions(-) delete mode 100644 platform/commonUI/dialog/src/MessageController.js delete mode 100644 platform/commonUI/notification/src/MessageSeverity.js diff --git a/example/notifications/src/DialogLaunchController.js b/example/notifications/src/DialogLaunchController.js index 5679f990a0..e6a8b4e132 100644 --- a/example/notifications/src/DialogLaunchController.js +++ b/example/notifications/src/DialogLaunchController.js @@ -22,8 +22,8 @@ /*global define*/ define( - ['../../../platform/commonUI/notification/src/MessageSeverity'], - function (MessageSeverity) { + [], + function () { "use strict"; /** @@ -51,7 +51,7 @@ define( actionText: "Calculating...", unknownProgress: !knownProgress, unknownDuration: false, - severity: MessageSeverity.INFO, + severity: "info", options: [ { label: "Cancel Operation", @@ -96,7 +96,7 @@ define( var model = { title: "Error Dialog Example", actionText: "Something happened, and it was not good.", - severity: MessageSeverity.ERROR, + severity: "error", options: [ { label: "Try Again", @@ -129,7 +129,7 @@ define( actionText: "This is an example of a blocking info" + " dialog. This dialog can be used to draw the user's" + " attention to an event.", - severity: MessageSeverity.INFO, + severity: "info", options: [ { label: "OK", diff --git a/example/notifications/src/NotificationLaunchController.js b/example/notifications/src/NotificationLaunchController.js index e59c009422..7d0618ada4 100644 --- a/example/notifications/src/NotificationLaunchController.js +++ b/example/notifications/src/NotificationLaunchController.js @@ -22,8 +22,8 @@ /*global define*/ define( - ['../../../platform/commonUI/notification/src/MessageSeverity'], - function (MessageSeverity) { + [], + function () { "use strict"; /** @@ -81,9 +81,9 @@ define( function getExampleSeverity() { var severities = [ - MessageSeverity.INFO, - MessageSeverity.ALERT, - MessageSeverity.ERROR + "info", + "alert", + "error" ]; return severities[Math.floor(Math.random() * severities.length)]; } @@ -96,7 +96,7 @@ define( notificationService.notify({ title: "Example error notification " + messageCounter++, hint: "An error has occurred", - severity: MessageSeverity.ERROR, + severity: "error", primaryOption: { label: 'Retry', callback: function() { @@ -113,7 +113,7 @@ define( notificationService.notify({ title: "Alert notification " + (messageCounter++), hint: "This is an alert message", - severity: MessageSeverity.ALERT, + severity: "alert", primaryOption: { label: 'Retry', callback: function() { @@ -132,7 +132,7 @@ define( var notification = { title: "Progress notification example", - severity: MessageSeverity.INFO, + severity: "info", progress: 0, actionText: getExampleActionText(), unknownProgress: false diff --git a/platform/commonUI/dialog/bundle.json b/platform/commonUI/dialog/bundle.json index fb94f14b61..80cd456c20 100644 --- a/platform/commonUI/dialog/bundle.json +++ b/platform/commonUI/dialog/bundle.json @@ -43,13 +43,6 @@ "key": "overlay", "templateUrl": "templates/overlay.html" } - ], - "controllers": [ - { - "key": "MessageController", - "implementation": "MessageController.js", - "depends": ["$scope"] - } ] } } \ No newline at end of file diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html index 6b8c5c99cc..8568fe5fb1 100644 --- a/platform/commonUI/dialog/res/templates/message.html +++ b/platform/commonUI/dialog/res/templates/message.html @@ -1,9 +1,5 @@ -
+
diff --git a/platform/commonUI/dialog/src/MessageController.js b/platform/commonUI/dialog/src/MessageController.js deleted file mode 100644 index 595f429f9e..0000000000 --- a/platform/commonUI/dialog/src/MessageController.js +++ /dev/null @@ -1,47 +0,0 @@ -/***************************************************************************** - * 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( - ['../../notification/src/MessageSeverity'], - function (MessageSeverity) { - "use strict"; - - /** - * A controller for the message view which used to represent a - * message to the user in the dialogs and notifications systems. The - * message view (../res/templates/message.html) is included - * from the blocking message dialog - * (../res/templates/overlay-blocking-message.html), - * and the message list (../res/templates/overlay-message-list.html) - * shown from the notifications indicator - * @param $scope - * @constructor - * @see DialogService#showBlockingMessage - * @see NotificationService - */ - function MessageController($scope) { - $scope.MessageSeverity = MessageSeverity; - } - return MessageController; - } -); diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html index 0af92aeba5..29b107126e 100644 --- a/platform/commonUI/general/res/templates/message-banner.html +++ b/platform/commonUI/general/res/templates/message-banner.html @@ -1,8 +1,5 @@
diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index c3f698fc38..511bf23b38 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -22,8 +22,8 @@ /*global define*/ define( - ['../../../notification/src/MessageSeverity'], - function (MessageSeverity) { + [], + function () { "use strict"; /** @@ -41,7 +41,6 @@ define( */ function BannerController($scope, notificationService, dialogService) { $scope.active = notificationService.active; - $scope.MessageSeverity = MessageSeverity; $scope.action = function (action, $event){ /* @@ -56,7 +55,7 @@ define( notificationService.dismissOrMinimize(notification); }; $scope.maximize = function(notification) { - if (notification.severity > MessageSeverity.INFO){ + if (notification.severity != "info"){ notification.cancel = function(){ dialogService.dismiss(); }; diff --git a/platform/commonUI/notification/res/notification-indicator.html b/platform/commonUI/notification/res/notification-indicator.html index 1d2bf90960..9c7e80a639 100644 --- a/platform/commonUI/notification/res/notification-indicator.html +++ b/platform/commonUI/notification/res/notification-indicator.html @@ -1,8 +1,5 @@ diff --git a/platform/commonUI/notification/src/MessageSeverity.js b/platform/commonUI/notification/src/MessageSeverity.js deleted file mode 100644 index 44064bf92f..0000000000 --- a/platform/commonUI/notification/src/MessageSeverity.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Created by akhenry on 10/7/15. - */ -/*global define*/ -define(function(){ - return { - INFO: 0, - ALERT: 1, - ERROR: 2 - }; -}); \ No newline at end of file diff --git a/platform/commonUI/notification/src/NotificationIndicatorController.js b/platform/commonUI/notification/src/NotificationIndicatorController.js index e225fd41bf..21da649a8f 100644 --- a/platform/commonUI/notification/src/NotificationIndicatorController.js +++ b/platform/commonUI/notification/src/NotificationIndicatorController.js @@ -22,8 +22,8 @@ /*global define*/ define( - ['./MessageSeverity'], - function (MessageSeverity) { + [], + function () { "use strict"; /** @@ -40,7 +40,6 @@ define( function NotificationIndicatorController($scope, notificationService, dialogService) { $scope.notifications = notificationService.notifications; $scope.highest = notificationService.highest; - $scope.MessageSeverity = MessageSeverity; /** * Launch a dialog showing a list of current notifications. @@ -48,8 +47,7 @@ define( $scope.showNotificationsList = function(){ var model = { - title: "Messages", - severity: MessageSeverity.INFO + title: "Messages" }; model.messages = notificationService.notifications; diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index c11b92c651..2e1a44a1a8 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -32,8 +32,8 @@ * @namespace platform/commonUI/dialog */ define( - ["./MessageSeverity"], - function (MessageSeverity) { + [], + function () { "use strict"; /** @@ -56,8 +56,9 @@ define( * * @typedef {object} Notification * @property {string} title The title of the message - * @property {MessageSeverity} severity The importance of the - * message (eg. error, info) + * @property {string} severity The importance of the + * message (one of 'info', 'alert', or 'error' where info < alert < + * error) * @property {number} progress The completion status of a task * represented numerically * @property {boolean} unknownProgress a boolean indicating that the @@ -91,7 +92,7 @@ define( function NotificationService($timeout, DEFAULT_AUTO_DISMISS, MINIMIZE_TIMEOUT) { this.notifications = []; this.$timeout = $timeout; - this.highest ={ severity: MessageSeverity.INFO }; + this.highest ={ severity: "info" }; this.DEFAULT_AUTO_DISMISS = DEFAULT_AUTO_DISMISS; this.MINIMIZE_TIMEOUT = MINIMIZE_TIMEOUT; @@ -118,7 +119,7 @@ define( */ NotificationService.prototype.info = function (notification) { notification.autoDismiss = notification.autoDismiss || true; - notification.severity = MessageSeverity.INFO; + notification.severity = "info"; this.notify(notification); }; @@ -130,13 +131,18 @@ define( * @param {Notification} notification The notification to display */ NotificationService.prototype.notify = function (notification) { - var self = this; - + var self = this, + ordinality = { + "info": 1, + "alert": 2, + "error": 3 + }; + notification.severity = notification.severity || "info" if (notification.autoDismiss === true){ notification.autoDismiss = this.DEFAULT_AUTO_DISMISS; } - if (notification.severity > this.highest.severity){ + if (ordinality[notification.severity.toLowerCase()] > ordinality[this.highest.severity.toLowerCase()]){ this.highest.severity = notification.severity; } @@ -271,11 +277,6 @@ define( //For now minimize everything, and have discussion around which //kind of messages should or should not be in the minimized //notifications list - /*if (notification.severity > MessageSeverity.INFO){ - this.minimize(notification); - } else { - this.dismiss(notification); - }*/ this.minimize(notification); }; diff --git a/platform/commonUI/notification/test/NotificationServiceSpec.js b/platform/commonUI/notification/test/NotificationServiceSpec.js index 3957fe622e..dca76652ce 100644 --- a/platform/commonUI/notification/test/NotificationServiceSpec.js +++ b/platform/commonUI/notification/test/NotificationServiceSpec.js @@ -22,8 +22,8 @@ /*global define,describe,it,expect,beforeEach,waitsFor,jasmine */ define( - ['../src/NotificationService','../src/MessageSeverity'], - function (NotificationService, MessageSeverity) { + ['../src/NotificationService'], + function (NotificationService) { "use strict"; describe("The notification service ", function () { @@ -34,46 +34,6 @@ define( successModel, errorModel; - /** - * 1) Calling .notify results in a new notification being created - * with the provided model and set to the active notification. DONE - * - * 2) Calling .notify with autoDismiss results in a SUCCESS notification - * becoming dismissed after timeout has elapsed DONE - * - * 3) Calling .notify with autoDismiss results in an ERROR notification - * being MINIMIZED after a timeout has elapsed DONE - * - * 4) Calling .notify with an active info notification results in that - * notification being auto-dismissed, and the new notification becoming - * active. DONE - * - * 5) Calling .notify with an active error notification results in that - * notification being auto-minimized and the new notification becoming - * active. DONE - * - * 6) Calling .notify with an active error notification, AND a - * queued error notification results in the active notification - * being auto-dismissed, the next message in the queue becoming - * active, then auto-dismissed, and then the provided notification - * becoming active. - */ - - /** - var model = { - title: string, - progress: number, - severity: MessageSeverity, - unknownProgress: boolean, - minimized: boolean, - autoDismiss: boolean | number, - actions: { - label: string, - action: function - } - } - */ - beforeEach(function(){ mockTimeout = jasmine.createSpy("$timeout"); mockAutoDismiss = mockMinimizeTimeout = 1000; @@ -81,11 +41,11 @@ define( mockTimeout, mockAutoDismiss, mockMinimizeTimeout); successModel = { title: "Mock Success Notification", - severity: MessageSeverity.INFO + severity: "info" }; errorModel = { title: "Mock Error Notification", - severity: MessageSeverity.ERROR + severity: "error" }; }); @@ -147,23 +107,6 @@ define( activeNotification = notificationService.getActiveNotification(); expect(activeNotification).toBe(errorModel); }); - /* Test is temporarily invalid as info messages are being - minimized - it("auto-dismisses an active success notification, removing" + - " it completely", function() { - //First pre-load with a info message - notificationService.notify(successModel); - //Then notify of an error - notificationService.notify(errorModel); - expect(notificationService.notifications.length).toEqual(2); - mockTimeout.mostRecentCall.args[0](); - //Two timeouts, one is to force minimization after - // displaying the message for a minimum period, the - // second is to allow minimization animation to take place. - mockTimeout.mostRecentCall.args[0](); - //Previous info message should be completely dismissed - expect(notificationService.notifications.length).toEqual(1); - });*/ it("auto-minimizes an active error notification", function() { var activeNotification; //First pre-load with an error message @@ -190,11 +133,11 @@ define( var activeNotification, error2 = { title: "Second Mock Error Notification", - severity: MessageSeverity.ERROR + severity: "error" }, error3 = { title: "Third Mock Error Notification", - severity: MessageSeverity.ERROR + severity: "error" }; //First pre-load with a info message From e3ef68bc6f711a30973b274e6a58a55d9299755e Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 22 Oct 2015 16:41:09 -0700 Subject: [PATCH 067/148] Fixed jslint errors --- example/notifications/src/DialogLaunchController.js | 6 ++---- .../commonUI/general/src/controllers/BannerController.js | 2 +- platform/commonUI/notification/src/NotificationService.js | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/example/notifications/src/DialogLaunchController.js b/example/notifications/src/DialogLaunchController.js index e6a8b4e132..f35d008cd0 100644 --- a/example/notifications/src/DialogLaunchController.js +++ b/example/notifications/src/DialogLaunchController.js @@ -130,15 +130,13 @@ define( " dialog. This dialog can be used to draw the user's" + " attention to an event.", severity: "info", - options: [ - { + primaryOption: { label: "OK", callback: function () { $log.debug("OK Pressed"); dialogService.dismiss(); } - }, - ] + } }; if (!dialogService.showBlockingMessage(model)) { diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index 511bf23b38..068b5cda81 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -55,7 +55,7 @@ define( notificationService.dismissOrMinimize(notification); }; $scope.maximize = function(notification) { - if (notification.severity != "info"){ + if (notification.severity !== "info"){ notification.cancel = function(){ dialogService.dismiss(); }; diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 2e1a44a1a8..8887e7cb9a 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -137,7 +137,7 @@ define( "alert": 2, "error": 3 }; - notification.severity = notification.severity || "info" + notification.severity = notification.severity || "info"; if (notification.autoDismiss === true){ notification.autoDismiss = this.DEFAULT_AUTO_DISMISS; } From 78b528b4a575f606f2c481f8f7707a7fd2f23232 Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 23 Oct 2015 11:48:25 -0700 Subject: [PATCH 068/148] Added additional test cases, and some tidying --- .../notification/src/NotificationIndicator.js | 17 +--- .../src/NotificationIndicatorController.js | 11 +-- .../NotificationIndicatorControllerSpec.js | 80 +++++++++++++++++++ .../commonUI/notification/test/suite.json | 3 +- 4 files changed, 87 insertions(+), 24 deletions(-) create mode 100644 platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js diff --git a/platform/commonUI/notification/src/NotificationIndicator.js b/platform/commonUI/notification/src/NotificationIndicator.js index b1d20e8264..29a831d251 100644 --- a/platform/commonUI/notification/src/NotificationIndicator.js +++ b/platform/commonUI/notification/src/NotificationIndicator.js @@ -26,25 +26,10 @@ define( function () { "use strict"; - function NotificationIndicator() { - - } + function NotificationIndicator() {} NotificationIndicator.template = 'notificationIndicatorTemplate'; - NotificationIndicator.prototype.getGlyph = function () { - return "A"; - }; - NotificationIndicator.prototype.getGlyphClass = function () { - return 'caution'; - }; - NotificationIndicator.prototype.getText = function () { - return "Notifications"; - }; - NotificationIndicator.prototype.getDescription = function () { - return "Notifications"; - }; - return NotificationIndicator; } ); diff --git a/platform/commonUI/notification/src/NotificationIndicatorController.js b/platform/commonUI/notification/src/NotificationIndicatorController.js index 21da649a8f..685152de9c 100644 --- a/platform/commonUI/notification/src/NotificationIndicatorController.js +++ b/platform/commonUI/notification/src/NotificationIndicatorController.js @@ -45,14 +45,11 @@ define( * Launch a dialog showing a list of current notifications. */ $scope.showNotificationsList = function(){ - - var model = { - title: "Messages" - }; - - model.messages = notificationService.notifications; dialogService.getDialogResponse('overlay-message-list', { - dialog: model, + dialog: { + title: "Messages", + messages: notificationService.notifications + }, cancel: function(){ dialogService.dismiss(); } diff --git a/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js b/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js new file mode 100644 index 0000000000..fa906012ae --- /dev/null +++ b/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js @@ -0,0 +1,80 @@ +/***************************************************************************** + * 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,describe,it,expect,beforeEach,waitsFor,jasmine */ + +define( + ['../src/NotificationIndicatorController'], + function (NotificationIndicatorController) { + "use strict"; + + describe("The notification indicator controller ", function () { + var mockNotificationService, + mockScope, + mockDialogService; + + beforeEach(function(){ + mockNotificationService = jasmine.createSpy("notificationService"); + mockScope = jasmine.createSpy("$scope"); + mockDialogService = { + getDialogResponse: function(template, model){}, + dismiss: function(){} + } + + spyOn(mockDialogService, 'getDialogResponse'); + spyOn(mockDialogService, 'dismiss'); + }); + + it("exposes the highest notification severity to the template", function() { + mockNotificationService.highest = { + severity: "error" + }; + var controller = new NotificationIndicatorController(mockScope, mockNotificationService, mockDialogService); + expect(mockScope.highest).toBeTruthy(); + expect(mockScope.highest.severity).toBe("error"); + }); + + it("invokes the dialog service to show list of messages", function() { + var controller = new NotificationIndicatorController(mockScope, mockNotificationService, mockDialogService); + expect(mockScope.showNotificationsList).toBeDefined(); + mockScope.showNotificationsList(); + expect(mockDialogService.getDialogResponse).toHaveBeenCalled(); + expect(mockDialogService.getDialogResponse.mostRecentCall.args[0]).toBe('overlay-message-list'); + expect(mockDialogService.getDialogResponse.mostRecentCall.args[1].dialog).toBeDefined(); + expect(mockDialogService.getDialogResponse.mostRecentCall.args[1].cancel).toBeDefined(); + //Invoke the cancel callback + mockDialogService.getDialogResponse.mostRecentCall.args[1].cancel(); + expect(mockDialogService.dismiss).toHaveBeenCalled(); + }); + + it("provides a means of dismissing the message list", function() { + var controller = new NotificationIndicatorController(mockScope, mockNotificationService, mockDialogService); + expect(mockScope.showNotificationsList).toBeDefined(); + mockScope.showNotificationsList(); + expect(mockDialogService.getDialogResponse).toHaveBeenCalled(); + expect(mockDialogService.getDialogResponse.mostRecentCall.args[1].cancel).toBeDefined(); + //Invoke the cancel callback + mockDialogService.getDialogResponse.mostRecentCall.args[1].cancel(); + expect(mockDialogService.dismiss).toHaveBeenCalled(); + }) + + }); + }); \ No newline at end of file diff --git a/platform/commonUI/notification/test/suite.json b/platform/commonUI/notification/test/suite.json index 08238b16c0..2b52722303 100644 --- a/platform/commonUI/notification/test/suite.json +++ b/platform/commonUI/notification/test/suite.json @@ -1,3 +1,4 @@ [ - "NotificationService" + "NotificationService", + "NotificationIndicatorController" ] \ No newline at end of file From fa7431d68bb8070710c3e072661595b67e9ad23d Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 23 Oct 2015 12:01:48 -0700 Subject: [PATCH 069/148] Added test case to DialogServiceSpec --- platform/commonUI/dialog/test/DialogServiceSpec.js | 11 +++++++++++ .../test/NotificationIndicatorControllerSpec.js | 11 ++++------- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/platform/commonUI/dialog/test/DialogServiceSpec.js b/platform/commonUI/dialog/test/DialogServiceSpec.js index 949c1102a8..ddd826ef39 100644 --- a/platform/commonUI/dialog/test/DialogServiceSpec.js +++ b/platform/commonUI/dialog/test/DialogServiceSpec.js @@ -121,6 +121,17 @@ define( ); }); + it("invokes the overlay service with the correct parameters when" + + " a blocking dialog is requested", function() { + var dialogModel = {}; + expect(dialogService.showBlockingMessage(dialogModel)).toBe(true); + expect(mockOverlayService.createOverlay).toHaveBeenCalledWith( + "overlay-blocking-message", + dialogModel, + "t-dialog-sm" + ); + }); + }); } ); \ No newline at end of file diff --git a/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js b/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js index fa906012ae..f20e3dd357 100644 --- a/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js +++ b/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js @@ -34,13 +34,10 @@ define( beforeEach(function(){ mockNotificationService = jasmine.createSpy("notificationService"); mockScope = jasmine.createSpy("$scope"); - mockDialogService = { - getDialogResponse: function(template, model){}, - dismiss: function(){} - } - - spyOn(mockDialogService, 'getDialogResponse'); - spyOn(mockDialogService, 'dismiss'); + mockDialogService = jasmine.createSpyObj( + "dialogService", + ["getDialogResponse","dismiss"] + ); }); it("exposes the highest notification severity to the template", function() { From 89046ecad563319d06d4972329ca5c6b30ed85f7 Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 23 Oct 2015 12:03:56 -0700 Subject: [PATCH 070/148] fixed jslint error --- .../notification/test/NotificationIndicatorControllerSpec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js b/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js index f20e3dd357..1c85704fc4 100644 --- a/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js +++ b/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js @@ -71,7 +71,7 @@ define( //Invoke the cancel callback mockDialogService.getDialogResponse.mostRecentCall.args[1].cancel(); expect(mockDialogService.dismiss).toHaveBeenCalled(); - }) + }); }); }); \ No newline at end of file From e05858e26bc82d00ee4d15109dbff9e40b876f92 Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 23 Oct 2015 12:11:37 -0700 Subject: [PATCH 071/148] Added newline to end of source files --- platform/commonUI/dialog/test/DialogServiceSpec.js | 2 +- platform/commonUI/notification/bundle.json | 2 +- .../notification/src/NotificationIndicatorController.js | 1 + platform/commonUI/notification/src/NotificationService.js | 2 +- .../notification/test/NotificationIndicatorControllerSpec.js | 3 ++- platform/commonUI/notification/test/NotificationServiceSpec.js | 3 ++- platform/commonUI/notification/test/suite.json | 2 +- 7 files changed, 9 insertions(+), 6 deletions(-) diff --git a/platform/commonUI/dialog/test/DialogServiceSpec.js b/platform/commonUI/dialog/test/DialogServiceSpec.js index ddd826ef39..2dc109ac44 100644 --- a/platform/commonUI/dialog/test/DialogServiceSpec.js +++ b/platform/commonUI/dialog/test/DialogServiceSpec.js @@ -134,4 +134,4 @@ define( }); } -); \ No newline at end of file +); diff --git a/platform/commonUI/notification/bundle.json b/platform/commonUI/notification/bundle.json index f4dbd5c71a..4851dd28b6 100644 --- a/platform/commonUI/notification/bundle.json +++ b/platform/commonUI/notification/bundle.json @@ -42,4 +42,4 @@ } ] } -} \ No newline at end of file +} diff --git a/platform/commonUI/notification/src/NotificationIndicatorController.js b/platform/commonUI/notification/src/NotificationIndicatorController.js index 685152de9c..66ad825a32 100644 --- a/platform/commonUI/notification/src/NotificationIndicatorController.js +++ b/platform/commonUI/notification/src/NotificationIndicatorController.js @@ -60,3 +60,4 @@ define( return NotificationIndicatorController; } ); + diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 8887e7cb9a..140c4537c8 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -282,4 +282,4 @@ define( return NotificationService; } -); \ No newline at end of file +); diff --git a/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js b/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js index 1c85704fc4..59450fd060 100644 --- a/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js +++ b/platform/commonUI/notification/test/NotificationIndicatorControllerSpec.js @@ -74,4 +74,5 @@ define( }); }); - }); \ No newline at end of file + } +); diff --git a/platform/commonUI/notification/test/NotificationServiceSpec.js b/platform/commonUI/notification/test/NotificationServiceSpec.js index dca76652ce..695275bc70 100644 --- a/platform/commonUI/notification/test/NotificationServiceSpec.js +++ b/platform/commonUI/notification/test/NotificationServiceSpec.js @@ -174,4 +174,5 @@ define( }); }); }); - }); \ No newline at end of file + } +); diff --git a/platform/commonUI/notification/test/suite.json b/platform/commonUI/notification/test/suite.json index 2b52722303..75e88599fd 100644 --- a/platform/commonUI/notification/test/suite.json +++ b/platform/commonUI/notification/test/suite.json @@ -1,4 +1,4 @@ [ "NotificationService", "NotificationIndicatorController" -] \ No newline at end of file +] From 789b640b9bb8979c9620d46c678573a510b9a52e Mon Sep 17 00:00:00 2001 From: Henry Date: Fri, 23 Oct 2015 16:28:42 -0700 Subject: [PATCH 072/148] Refactored dismiss and minimize out of NotificationService and on to returned Notification type --- .../src/NotificationLaunchController.js | 19 +- .../general/res/templates/message-banner.html | 18 +- .../src/controllers/BannerController.js | 9 +- .../src/NotificationIndicatorController.js | 6 +- .../notification/src/NotificationService.js | 233 +++++++++++------- .../test/NotificationServiceSpec.js | 47 +++- 6 files changed, 218 insertions(+), 114 deletions(-) diff --git a/example/notifications/src/NotificationLaunchController.js b/example/notifications/src/NotificationLaunchController.js index 7d0618ada4..851e0575f5 100644 --- a/example/notifications/src/NotificationLaunchController.js +++ b/example/notifications/src/NotificationLaunchController.js @@ -130,7 +130,7 @@ define( */ $scope.newProgress = function(){ - var notification = { + var notificationModel = { title: "Progress notification example", severity: "info", progress: 0, @@ -142,17 +142,18 @@ define( * Simulate an ongoing process and update the progress bar. * @param notification */ - function incrementProgress(notification) { - notification.progress = Math.min(100, Math.floor(notification.progress + Math.random() * 30)); - notification.progressText = ["Estimated time remaining:" + - " about ", 60 - Math.floor((notification.progress / 100) * 60), " seconds"].join(" "); - if (notification.progress < 100) { - $timeout(function(){incrementProgress(notification);}, 1000); + function incrementProgress(notificationModel) { + notificationModel.progress = Math.min(100, Math.floor(notificationModel.progress + Math.random() * 30)); + notificationModel.progressText = ["Estimated time" + + " remaining:" + + " about ", 60 - Math.floor((notificationModel.progress / 100) * 60), " seconds"].join(" "); + if (notificationModel.progress < 100) { + $timeout(function(){incrementProgress(notificationModel);}, 1000); } } - notificationService.notify(notification); - incrementProgress(notification); + notificationService.notify(notificationModel); + incrementProgress(notificationModel); }; /** diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html index 29b107126e..44c7f915b6 100644 --- a/platform/commonUI/general/res/templates/message-banner.html +++ b/platform/commonUI/general/res/templates/message-banner.html @@ -1,20 +1,20 @@
- + - diff --git a/platform/commonUI/general/src/controllers/BannerController.js b/platform/commonUI/general/src/controllers/BannerController.js index 068b5cda81..4be9304cc6 100644 --- a/platform/commonUI/general/src/controllers/BannerController.js +++ b/platform/commonUI/general/src/controllers/BannerController.js @@ -52,14 +52,15 @@ define( }; $scope.dismiss = function(notification, $event) { $event.stopPropagation(); - notificationService.dismissOrMinimize(notification); + notification.dismissOrMinimize(); }; $scope.maximize = function(notification) { - if (notification.severity !== "info"){ - notification.cancel = function(){ + if (notification.model.severity !== "info"){ + + notification.model.cancel = function(){ dialogService.dismiss(); }; - dialogService.showBlockingMessage(notification); + dialogService.showBlockingMessage(notification.model); } }; } diff --git a/platform/commonUI/notification/src/NotificationIndicatorController.js b/platform/commonUI/notification/src/NotificationIndicatorController.js index 66ad825a32..e58b0a606b 100644 --- a/platform/commonUI/notification/src/NotificationIndicatorController.js +++ b/platform/commonUI/notification/src/NotificationIndicatorController.js @@ -48,7 +48,11 @@ define( dialogService.getDialogResponse('overlay-message-list', { dialog: { title: "Messages", - messages: notificationService.notifications + //Launch the message list dialog with the models + // from the notifications + messages: notificationService.notifications && notificationService.notifications.map(function(notification){ + return notification.model; + }) }, cancel: function(){ dialogService.dismiss(); diff --git a/platform/commonUI/notification/src/NotificationService.js b/platform/commonUI/notification/src/NotificationService.js index 140c4537c8..cff2d57d7a 100644 --- a/platform/commonUI/notification/src/NotificationService.js +++ b/platform/commonUI/notification/src/NotificationService.js @@ -29,7 +29,7 @@ * dialogs so that the same information can be provided in a dialog * and then minimized to a banner notification if needed. * - * @namespace platform/commonUI/dialog + * @namespace platform/commonUI/notification */ define( [], @@ -54,11 +54,10 @@ define( * dialogs so that the same information can be provided in a dialog * and then minimized to a banner notification if needed. * - * @typedef {object} Notification + * @typedef {object} NotificationModel * @property {string} title The title of the message - * @property {string} severity The importance of the - * message (one of 'info', 'alert', or 'error' where info < alert < - * error) + * @property {string} severity The importance of the message (one of + * 'info', 'alert', or 'error' where info < alert