From 30fd8c451e20826629600f0bf8b0b2e6a446e28e Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 6 Oct 2015 16:10:27 -0700 Subject: [PATCH] [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"); }