ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-31 08:25:31 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Add optional delay parameter to dialog service

Browse Source 
Issue #1168
This commit is contained in:
David Hudson 2016-09-13 16:36:25 +09:00
parent ea35395d7e
commit 2740b6f957
5 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/dialog/res/templates/overlay.html
View File

@ -19,7 +19,7 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div class="abs overlay"> <div class="abs overlay" ng-class="{'delayEntry100ms' : !!ngModel.delay}">
<div class="abs blocker"></div> <div class="abs blocker"></div>
<div class="abs holder"> <div class="abs holder">
<a ng-click="ngModel.cancel()" <a ng-click="ngModel.cancel()"

3
platform/commonUI/dialog/src/DialogService.js
View File

@ -200,6 +200,9 @@ define(
* shown above a progress bar to indicate what's happening. * shown above a progress bar to indicate what's happening.
* @property {number} progress a percentage value (1-100) * @property {number} progress a percentage value (1-100)
* indicating the completion of the blocking task * indicating the completion of the blocking task
* @property {boolean} delay adds a brief delay before loading
* the dialog. Useful for removing the dialog flicker when the
* conditions for displaying the dialog change rapidly.
* @property {string} progressText the message to show below a * @property {string} progressText the message to show below a
* progress bar to indicate progress. For example, this might be * progress bar to indicate progress. For example, this might be
* used to indicate time remaining, or items still to process. * used to indicate time remaining, or items still to process.

3
platform/commonUI/edit/src/actions/SaveInProgressDialog.js
View File

@ -9,7 +9,8 @@ define([], function () {
title: "Saving...", title: "Saving...",
hint: "Do not navigate away from this page or close this browser tab while this message is displayed.", hint: "Do not navigate away from this page or close this browser tab while this message is displayed.",
unknownProgress: true, unknownProgress: true,
severity: "info" severity: "info",
delay: true
}); });
}; };

3
platform/commonUI/general/res/sass/_constants.scss
View File

@ -62,6 +62,9 @@ $ueDesktopMinW: 600px;
$ovrTopBarH: 45px; $ovrTopBarH: 45px;
$ovrFooterH: 24px; $ovrFooterH: 24px;
$overlayMargin: 25px; $overlayMargin: 25px;
/*************** Progress Overlay */
$durEntryMs: 100ms;
$delayEntryMs: 100ms;
/*************** Items */ /*************** Items */
$ueBrowseGridItemLg: 200px; $ueBrowseGridItemLg: 200px;
$ueBrowseGridItemTopBarH: 20px; $ueBrowseGridItemTopBarH: 20px;

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

@ -22,15 +22,14 @@
.overlay { .overlay {
font-size: 90%; font-size: 90%;
z-index: 5; &.delayEntry100ms {
@include keyframes(fadeInFromNone) { @include keyframes(fadeInFromNone) {
0% { display: none; opacity: 0; } 0% { display: none; opacity: 0; }
1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; }
95% { display: block; opacity: 0; } }
100% { display: block; opacity: 1; } @include animation-delay($delayEntryMs);
@include animation(fadeInFromNone $durEntryMs ease-in);
} }
@include animation(fadeInFromNone 100ms ease-in);
.blocker { .blocker {
background: $colorOvrBlocker; background: $colorOvrBlocker;
z-index: 100; z-index: 100;