alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] Progress bar as include; progress dialog

Browse Source 
open #163
open #170
Progress bar now mct-include;
Progress dialog sanded;
Dialog launcher modded;
This commit is contained in:
Charles Hacskaylo
2015-10-06 16:10:27 -07:00
parent 2aeebff652
commit 30fd8c451e
12 changed files with 81 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
platform/commonUI/dialog/res/templates/blocking-message.html
View File

@@ -1,30 +1,26 @@
<style> <mct-container key="overlay" class="severity-{{ngModel.dialog.severity}}">
.severity-error { <div class="abs top-bar">
color: #d9534f;
}
.severity-info {
}
.time-estimate {
color: darkgray;
}
.dialog-content {
margin-top: 5em;
}
</style>
<mct-container key="overlay">
<div class="abs top-bar severity-{{ngModel.dialog.severity}}">
<div class="title">{{ngModel.dialog.title}}</div> <div class="title">{{ngModel.dialog.title}}</div>
<div class="hint">Do not navigate away from this page or close this browser tab while this operation is in progress.</div>
</div> </div>
<div class="abs outline"> <div class="abs outline editor">
<div class='abs contents l-dialog dialog-content'> <div class='abs contents l-dialog'>
<div class="hint">{{ngModel.dialog.hint}}</div> <div class="hint">{{ngModel.dialog.hint}}</div>
<br />
<div ng-hide="ngModel.dialog.progress === undefined" style="background-color: darkgray; width: 100%; height: 1em;"><div ng-show="ngModel.dialog.progress > 0" style="color: #2e2e2e; background-color: lightgray; text-align: center; min-width: 2em; width: {{ngModel.dialog.progress}}%">{{ngModel.dialog.progress}} %</div></div> <mct-include key="'progress-bar'"
ng-model="ngModel"
ng-hide="ngModel.dialog.progress === undefined"></mct-include>
<!--<div ng-hide="ngModel.dialog.progress === undefined" style="background-color: darkgray; width: 100%; height: 1em;"><div ng-show="ngModel.dialog.progress > 0" style="color: #2e2e2e; background-color: lightgray; text-align: center; min-width: 2em; width: {{ngModel.dialog.progress}}%">{{ngModel.dialog.progress}} %</div></div>-->
<div class="time-estimate" ng-hide="ngModel.dialog.progressText === undefined">{{ngModel.dialog.progressText}}</div> <div class="time-estimate" ng-hide="ngModel.dialog.progressText === undefined">{{ngModel.dialog.progressText}}</div>
</div> </div>
</div> </div>
<div class="abs bottom-bar"> <div class="abs bottom-bar">
<span ng-repeat="dialogAction in ngModel.dialog.actions"><input type="button" value="{{dialogAction.label}}" ng-click="dialogAction.action()"></span> <a ng-repeat="dialogAction in ngModel.dialog.actions"
class="s-btn lg"
ng-click="dialogAction.action()">
{{dialogAction.label}}
</a>
</div> </div>
</mct-container> </mct-container>

4
platform/commonUI/general/bundle.json
View File

@@ -43,6 +43,10 @@
"key": "message-banner", "key": "message-banner",
"templateUrl": "templates/message-banner.html" "templateUrl": "templates/message-banner.html"
}, },
{
"key": "progress-bar",
"templateUrl": "templates/progress-bar.html"
},
{ {
"key": "time-controller", "key": "time-controller",
"templateUrl": "templates/controls/time-controller.html" "templateUrl": "templates/controls/time-controller.html"

4
platform/commonUI/general/res/sass/controls/_messages.scss
View File

@@ -104,14 +104,14 @@
height: auto; width: auto; height: auto; width: auto;
line-height: $lh; line-height: $lh;
max-width: 300px; max-width: 300px;
padding: 0 $interiorMargin 0 $interiorMarginLg; padding: 0 $interiorMargin 0 $interiorMargin;
@include transform(translateX(-50%)); @include transform(translateX(-50%));
a, span { a, span {
@include flex(0 1 auto); @include flex(0 1 auto);
margin-left: $interiorMargin; margin-left: $interiorMargin;
&:first-child { &:first-child {
margin-left: 0; //margin-left: 0;
} }
} }
a { a {

10
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@@ -45,6 +45,7 @@
.title { .title {
@include ellipsize(); @include ellipsize();
font-size: 1.2em; font-size: 1.2em;
line-height: 120%;
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
} }
@@ -58,6 +59,15 @@
left: 0; right: 0; left: 0; right: 0;
} }
.l-progress-bar {
$h: $progressBarHOverlay;
display: block;
height: $h;
line-height: $h;
margin: .5em 0;
width: 100%;
}
.bottom-bar { .bottom-bar {
top: auto; right: 0; bottom: 0; left: 0; top: auto; right: 0; bottom: 0; left: 0;
overflow: visible; overflow: visible;

2
platform/commonUI/general/res/templates/indicator.html
View File

@@ -31,7 +31,7 @@
</span><span class="label" </span><span class="label"
ng-class='ngModel.getTextClass()'> ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}} {{ngModel.getText()}}
</span><span class="count"> </span><span class="count">5
<!-- Add count value here if this type of indicator has one or more messages associated with it --> <!-- Add count value here if this type of indicator has one or more messages associated with it -->
</span><a href='' </span><a href=''
class="ui-symbol" class="ui-symbol"

8
platform/commonUI/general/res/templates/message-banner.html
View File

@@ -1,11 +1,9 @@
<div class="l-message-banner s-message-banner"> <div class="l-message-banner s-message-banner">
<span class="label"> <span class="label">
Objects not saved Objects not saved
</span><span </span><mct-include key="'progress-bar'"
class="l-progress-bar s-progress-bar" ng-model="ngModel"
ng-class="{ indeterminate:true }"><span class="progress-amt-holder"> ng-hide-x="ngModel.dialog.progress === undefined"></mct-include><a class="l-action s-action">
<span class="progress-amt" style="width: 35%"></span></span>
</span><a class="l-action s-action">
Try Again Try Again
</a><a class="ui-symbol close"> </a><a class="ui-symbol close">
&#x78; &#x78;

27
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@@ -2476,7 +2476,7 @@ label.checkbox.custom {
width: auto; width: auto;
line-height: 18px; line-height: 18px;
max-width: 300px; max-width: 300px;
padding: 0 5px 0 10px; padding: 0 5px 0 5px;
-moz-transform: translateX(-50%); -moz-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
@@ -2487,9 +2487,6 @@ label.checkbox.custom {
-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto;
flex: 0 1 auto; flex: 0 1 auto;
margin-left: 5px; } 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 */ /* line 117, ../../../../general/res/sass/controls/_messages.scss */
.l-message-banner a { .l-message-banner a {
display: inline-block; } display: inline-block; }
@@ -4243,17 +4240,25 @@ span.req {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 1.2em; font-size: 1.2em;
line-height: 120%;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 51, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 52, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .top-bar { .overlay .top-bar {
height: 60px; } height: 60px; }
/* line 55, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 56, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .editor { .overlay .editor {
top: 70px; top: 70px;
bottom: 40px; bottom: 40px;
left: 0; left: 0;
right: 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 { .overlay .bottom-bar {
top: auto; top: auto;
right: 0; right: 0;
@@ -4262,14 +4267,14 @@ span.req {
overflow: visible; overflow: visible;
height: 30px; height: 30px;
text-align: right; } 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 { .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
font-size: 95%; font-size: 95%;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
margin-left: 5px; margin-left: 5px;
padding: 0 15px; } 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) { .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) {
background-color: gray; background-color: gray;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@@ -4308,14 +4313,14 @@ span.req {
/* line 296, ../../../../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 { .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon {
color: white; } } color: white; } }
/* line 85, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 95, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog { .overlay .contents.l-dialog {
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; left: 5px;
overflow: auto; } 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'] { .overlay .contents.l-dialog .field.l-med input[type='text'] {
width: 100%; } width: 100%; }

1
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@@ -66,6 +66,7 @@ $colorStatusCaution: #ffa864;
$colorStatusAlert: $colorAlert; $colorStatusAlert: $colorAlert;
$colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarOuter: rgba(#000, 0.1);
$colorProgressBarAmt: $colorKey; $colorProgressBarAmt: $colorKey;
$progressBarHOverlay: 15px;
$progressBarStripeW: 20px; $progressBarStripeW: 20px;
// Selects // Selects

27
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@@ -2424,7 +2424,7 @@ label.checkbox.custom {
width: auto; width: auto;
line-height: 18px; line-height: 18px;
max-width: 300px; max-width: 300px;
padding: 0 5px 0 10px; padding: 0 5px 0 5px;
-moz-transform: translateX(-50%); -moz-transform: translateX(-50%);
-ms-transform: translateX(-50%); -ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
@@ -2435,9 +2435,6 @@ label.checkbox.custom {
-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto;
flex: 0 1 auto; flex: 0 1 auto;
margin-left: 5px; } 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 */ /* line 117, ../../../../general/res/sass/controls/_messages.scss */
.l-message-banner a { .l-message-banner a {
display: inline-block; } display: inline-block; }
@@ -4166,17 +4163,25 @@ span.req {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 1.2em; font-size: 1.2em;
line-height: 120%;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 51, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 52, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .top-bar { .overlay .top-bar {
height: 60px; } height: 60px; }
/* line 55, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 56, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .editor { .overlay .editor {
top: 70px; top: 70px;
bottom: 40px; bottom: 40px;
left: 0; left: 0;
right: 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 { .overlay .bottom-bar {
top: auto; top: auto;
right: 0; right: 0;
@@ -4185,14 +4190,14 @@ span.req {
overflow: visible; overflow: visible;
height: 30px; height: 30px;
text-align: right; } 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 { .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
font-size: 95%; font-size: 95%;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
margin-left: 5px; margin-left: 5px;
padding: 0 15px; } 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) { .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) {
background-color: #969696; background-color: #969696;
-moz-border-radius: 4px; -moz-border-radius: 4px;
@@ -4222,14 +4227,14 @@ span.req {
/* line 296, ../../../../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 { .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon {
color: white; } } color: white; } }
/* line 85, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 95, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .contents.l-dialog { .overlay .contents.l-dialog {
top: 5px; top: 5px;
right: 5px; right: 5px;
bottom: 5px; bottom: 5px;
left: 5px; left: 5px;
overflow: auto; } 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'] { .overlay .contents.l-dialog .field.l-med input[type='text'] {
width: 100%; } width: 100%; }

1
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@@ -66,6 +66,7 @@ $colorStatusCaution: #ffa864;
$colorStatusAlert: $colorAlert; $colorStatusAlert: $colorAlert;
$colorProgressBarOuter: rgba(#000, 0.1); $colorProgressBarOuter: rgba(#000, 0.1);
$colorProgressBarAmt: #0a0; $colorProgressBarAmt: #0a0;
$progressBarHOverlay: 15px;
$progressBarStripeW: 20px; $progressBarStripeW: 20px;
// Selects // Selects

6
testing/dialogTest/res/dialog-launch.html
View File

@@ -1 +1,5 @@
<span ng-controller="DialogLaunchController"><input type="button" value="Launch progress" ng-click="launchProgress()" /></span>&nbsp;&nbsp;<span ng-controller="DialogLaunchController"><input type="button" value="Launch error" ng-click="launchError()" /></span> <span ng-controller="DialogLaunchController">
<input type="button" value="Known Progress" ng-click="launchProgress(true)" />&nbsp;&nbsp;
<input type="button" value="Unknown Progress" ng-click="launchProgress(false)" />&nbsp;&nbsp;
<input type="button" value="Error" ng-click="launchError()" />
</span>

5
testing/dialogTest/src/DialogLaunchController.js
View File

@@ -27,11 +27,12 @@ define(
"use strict"; "use strict";
function DialogLaunchController($scope, dialogService, $timeout, $log, messageSeverity) { function DialogLaunchController($scope, dialogService, $timeout, $log, messageSeverity) {
$scope.launchProgress = function () { $scope.launchProgress = function (knownProgress) {
var model = { var model = {
title: "Progress dialog example", title: "Progress dialog example",
progress: 0, progress: 0,
hint: "Calculating...", hint: "Calculating...",
unknownProgress: !knownProgress,
unknownDuration: false, unknownDuration: false,
severity: messageSeverity.INFO, severity: messageSeverity.INFO,
actions: [ actions: [
@@ -62,7 +63,9 @@ define(
if (dialogService.showBlockingMessage(model)) { if (dialogService.showBlockingMessage(model)) {
//Do processing here //Do processing here
model.hint = "Processing 100 objects..."; model.hint = "Processing 100 objects...";
if (knownProgress) {
$timeout(incrementProgress, 1000); $timeout(incrementProgress, 1000);
}
} else { } else {
$log.error("Could not display modal dialog"); $log.error("Could not display modal dialog");
} }