ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-21 03:55:31 +00:00
Code Issues Actions 4 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
Show Stats 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>
.severity-error {
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}}">
<mct-container key="overlay" class="severity-{{ngModel.dialog.severity}}">
<div class="abs top-bar">
<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 class="abs outline">
<div class='abs contents l-dialog dialog-content'>
<div class="abs outline editor">
<div class='abs contents l-dialog'>
<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>
</div>
<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>
</mct-container>

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

@ -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"

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

@ -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 {

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

@ -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;

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

@ -31,7 +31,7 @@
</span><span class="label"
ng-class='ngModel.getTextClass()'>
{{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 -->
</span><a href=''
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">
<span class="label">
Objects not saved
</span><span
class="l-progress-bar s-progress-bar"
ng-class="{ indeterminate:true }"><span class="progress-amt-holder">
<span class="progress-amt" style="width: 35%"></span></span>
</span><a class="l-action s-action">
</span><mct-include key="'progress-bar'"
ng-model="ngModel"
ng-hide-x="ngModel.dialog.progress === undefined"></mct-include><a class="l-action s-action">
Try Again
</a><a class="ui-symbol close">
&#x78;

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

@ -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%; }

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

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

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

@ -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%; }

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

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

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

@ -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");
}