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

[Frontend] Added type-icon to message dialogs

Browse Source 
open #159
open #170
Percent complete added to progress-bar.html;
Refined overlay height;
This commit is contained in:
Charles Hacskaylo
2015-10-07 17:56:25 -07:00
parent 182eff977c
commit ac59df9595
8 changed files with 83 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,24 +1,24 @@
<mct-container key="overlay" class="severity-{{ngModel.dialog.severity}}"> <mct-container key="overlay" class="t-message severity-{{ngModel.dialog.severity}}">
<div class="abs ui-symbol type-icon message-type">!</div>
<div class="abs message-contents">
<div class="abs top-bar"> <div class="abs top-bar">
<div class="title">{{ngModel.dialog.title}}</div> <div class="title">{{ngModel.dialog.title}}</div>
<div class="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div> <div class="hint" ng-hide="ngModel.dialog.hint === undefined">{{ngModel.dialog.hint}}</div>
</div> </div>
<div class="abs editor"> <div class="abs editor">
<div class="progress-info progress-current-action"> <div class="message-action">
{{ngModel.dialog.actionText}} {{ngModel.dialog.actionText}}
</div> </div>
<mct-include key="'progress-bar'" <mct-include key="'progress-bar'"
ng-model="ngModel" ng-model="ngModel"
ng-hide="ngModel.dialog.progress === undefined"></mct-include> 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> </div>
<div class="abs bottom-bar"> <div class="abs bottom-bar">
<a ng-repeat="dialogAction in ngModel.dialog.actions" <a ng-repeat="dialogAction in ngModel.dialog.actions"
class="s-btn lg" class="s-btn major"
ng-click="dialogAction.action()"> ng-click="dialogAction.action()">
{{dialogAction.label}} {{dialogAction.label}}
</a> </a>
</div> </div>
</div>
</mct-container> </mct-container>

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

@ -130,7 +130,7 @@
line-height: $h; line-height: $h;
width: 100px; width: 100px;
} }
.progress-info.progress-estimate { display: none; } .progress-info { display: none; }
z-index: 10; z-index: 10;
} }
@ -160,3 +160,19 @@
@include statusBannerColors($colorStatusCaution); @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;
}
}

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

@ -47,7 +47,7 @@
width: 50%; width: 50%;
min-height: 300px; min-height: 300px;
max-height: 800px; max-height: 800px;
min-width: 450px; min-width: 600px;
max-width: 1000px; max-width: 1000px;
z-index: 101; z-index: 101;
> .contents { > .contents {
@ -58,6 +58,7 @@
left: $m; left: $m;
} }
} }
.title { .title {
@include ellipsize(); @include ellipsize();
font-size: 1.2em; font-size: 1.2em;
@ -127,6 +128,6 @@
.t-dialog-sm .overlay > .holder { .t-dialog-sm .overlay > .holder {
// Used for blocker and in-progress dialogs, modal alerts, etc. // Used for blocker and in-progress dialogs, modal alerts, etc.
//@include test(red); //@include test(red);
min-height: 225px; min-height: 275px;
height: 225px; height: 275px;
} }

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

@ -31,8 +31,8 @@
</span><span class="label" </span><span class="label"
ng-class='ngModel.getTextClass()'> ng-class='ngModel.getTextClass()'>
{{ngModel.getText()}} {{ngModel.getText()}}
</span><span class="count">5 </span><span class="count">
<!-- Add count value here if this type of indicator has one or more messages associated with it --> <!-- Add int 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"
ng-if="ngModel.configure"> ng-if="ngModel.configure">

3
platform/commonUI/general/res/templates/progress-bar.html
View File

@ -4,6 +4,7 @@
<span class="progress-amt" style="width: {{ngModel.dialog.progress}}%"></span> <span class="progress-amt" style="width: {{ngModel.dialog.progress}}%"></span>
</span> </span>
</span> </span>
<div class="progress-info progress-estimate hint" ng-hide="ngModel.dialog.progressText === undefined"> <div class="progress-info hint" ng-hide="ngModel.dialog.progressText === undefined">
<span class="progress-amt-text" ng-show="ngModel.dialog.progress > 0">{{ngModel.dialog.progress}}% complete. </span>
{{ngModel.dialog.progressText}} {{ngModel.dialog.progressText}}
</div> </div>

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

@ -2507,7 +2507,7 @@ label.checkbox.custom {
line-height: 8px; line-height: 8px;
width: 100px; } width: 100px; }
/* line 133, ../../../../general/res/sass/controls/_messages.scss */ /* line 133, ../../../../general/res/sass/controls/_messages.scss */
.l-message-banner .progress-info.progress-estimate { .l-message-banner .progress-info {
display: none; } display: none; }
/* line 137, ../../../../general/res/sass/controls/_messages.scss */ /* line 137, ../../../../general/res/sass/controls/_messages.scss */
@ -2584,6 +2584,16 @@ label.checkbox.custom {
.s-message-banner.caution .s-action:hover { .s-message-banner.caution .s-action:hover {
background-color: #ca5900; } 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 */ /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller { .l-time-controller {
position: relative; position: relative;
@ -4234,7 +4244,7 @@ span.req {
width: 50%; width: 50%;
min-height: 300px; min-height: 300px;
max-height: 800px; max-height: 800px;
min-width: 450px; min-width: 600px;
max-width: 1000px; max-width: 1000px;
z-index: 101; } z-index: 101; }
/* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */
@ -4243,7 +4253,7 @@ span.req {
right: 25px; right: 25px;
bottom: 25px; bottom: 25px;
left: 25px; } left: 25px; }
/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 62, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .title { .overlay .title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -4251,30 +4261,30 @@ span.req {
font-size: 1.2em; font-size: 1.2em;
line-height: 120%; line-height: 120%;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .hint { .overlay .hint {
color: #b3b3b3; } color: #b3b3b3; }
/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 73, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .top-bar { .overlay .top-bar {
height: 60px; } height: 60px; }
/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 77, ../../../../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;
overflow: auto; } 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'] { .overlay .editor .field.l-med input[type='text'] {
width: 100%; } width: 100%; }
/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 90, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .l-progress-bar { .overlay .l-progress-bar {
display: block; display: block;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
margin: .5em 0; margin: .5em 0;
width: 100%; } width: 100%; }
/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 99, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar { .overlay .bottom-bar {
top: auto; top: auto;
right: 0; right: 0;
@ -4283,14 +4293,14 @@ span.req {
overflow: visible; overflow: visible;
height: 30px; height: 30px;
text-align: right; } 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 { .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 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) { .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;
@ -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 { .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 127, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 128, ../../../../general/res/sass/overlay/_overlay.scss */
.t-dialog-sm .overlay > .holder { .t-dialog-sm .overlay > .holder {
min-height: 225px; min-height: 300px;
height: 225px; } 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) { @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 */ /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
@ -4387,7 +4397,6 @@ span.req {
.overlay > .holder .contents .top-bar, .overlay > .holder .contents .top-bar,
.overlay > .holder .contents .editor, .overlay > .holder .contents .editor,
.overlay > .holder .contents .bottom-bar { .overlay > .holder .contents .bottom-bar {
background-color: rgba(255, 165, 0, 0.2);
top: auto; top: auto;
right: auto; right: auto;
bottom: auto; bottom: auto;

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

@ -2455,7 +2455,7 @@ label.checkbox.custom {
line-height: 8px; line-height: 8px;
width: 100px; } width: 100px; }
/* line 133, ../../../../general/res/sass/controls/_messages.scss */ /* line 133, ../../../../general/res/sass/controls/_messages.scss */
.l-message-banner .progress-info.progress-estimate { .l-message-banner .progress-info {
display: none; } display: none; }
/* line 137, ../../../../general/res/sass/controls/_messages.scss */ /* line 137, ../../../../general/res/sass/controls/_messages.scss */
@ -2532,6 +2532,16 @@ label.checkbox.custom {
.s-message-banner.caution .s-action:hover { .s-message-banner.caution .s-action:hover {
background-color: #ca5900; } 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 */ /* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller { .l-time-controller {
position: relative; position: relative;
@ -4157,7 +4167,7 @@ span.req {
width: 50%; width: 50%;
min-height: 300px; min-height: 300px;
max-height: 800px; max-height: 800px;
min-width: 450px; min-width: 600px;
max-width: 1000px; max-width: 1000px;
z-index: 101; } z-index: 101; }
/* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */
@ -4166,7 +4176,7 @@ span.req {
right: 25px; right: 25px;
bottom: 25px; bottom: 25px;
left: 25px; } left: 25px; }
/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 62, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .title { .overlay .title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -4174,30 +4184,30 @@ span.req {
font-size: 1.2em; font-size: 1.2em;
line-height: 120%; line-height: 120%;
margin-bottom: 5px; } margin-bottom: 5px; }
/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .hint { .overlay .hint {
color: #999999; } color: #999999; }
/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 73, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .top-bar { .overlay .top-bar {
height: 60px; } height: 60px; }
/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 77, ../../../../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;
overflow: auto; } 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'] { .overlay .editor .field.l-med input[type='text'] {
width: 100%; } width: 100%; }
/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 90, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .l-progress-bar { .overlay .l-progress-bar {
display: block; display: block;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
margin: .5em 0; margin: .5em 0;
width: 100%; } width: 100%; }
/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 99, ../../../../general/res/sass/overlay/_overlay.scss */
.overlay .bottom-bar { .overlay .bottom-bar {
top: auto; top: auto;
right: 0; right: 0;
@ -4206,14 +4216,14 @@ span.req {
overflow: visible; overflow: visible;
height: 30px; height: 30px;
text-align: right; } 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 { .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 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) { .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;
@ -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 { .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 127, ../../../../general/res/sass/overlay/_overlay.scss */ /* line 128, ../../../../general/res/sass/overlay/_overlay.scss */
.t-dialog-sm .overlay > .holder { .t-dialog-sm .overlay > .holder {
min-height: 225px; min-height: 300px;
height: 225px; } 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) { @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 */ /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
@ -4301,7 +4311,6 @@ span.req {
.overlay > .holder .contents .top-bar, .overlay > .holder .contents .top-bar,
.overlay > .holder .contents .editor, .overlay > .holder .contents .editor,
.overlay > .holder .contents .bottom-bar { .overlay > .holder .contents .bottom-bar {
background-color: rgba(255, 165, 0, 0.2);
top: auto; top: auto;
right: auto; right: auto;
bottom: auto; bottom: auto;

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

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