From ac59df9595ae212b5825b4d48b069f342864beea Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 7 Oct 2015 17:56:25 -0700 Subject: [PATCH] [Frontend] Added type-icon to message dialogs open #159 open #170 Percent complete added to progress-bar.html; Refined overlay height; --- .../res/templates/blocking-message.html | 12 +++--- .../general/res/sass/controls/_messages.scss | 18 ++++++++- .../general/res/sass/overlay/_overlay.scss | 7 ++-- .../general/res/templates/indicator.html | 4 +- .../general/res/templates/progress-bar.html | 3 +- .../espresso/res/css/theme-espresso.css | 39 ++++++++++++------- .../themes/snow/res/css/theme-snow.css | 39 ++++++++++++------- testing/dialogTest/res/dialog-launch.html | 7 ++-- 8 files changed, 83 insertions(+), 46 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/blocking-message.html b/platform/commonUI/dialog/res/templates/blocking-message.html index fc2b5c1df3..4f2caf3df5 100644 --- a/platform/commonUI/dialog/res/templates/blocking-message.html +++ b/platform/commonUI/dialog/res/templates/blocking-message.html @@ -1,24 +1,24 @@ - + +
!
+
{{ngModel.dialog.title}}
{{ngModel.dialog.hint}}
-
+
{{ngModel.dialog.actionText}}
- -
-
{{dialogAction.label}}
+
\ No newline at end of file diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 91dce92a09..f3e1c82702 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -130,7 +130,7 @@ line-height: $h; width: 100px; } - .progress-info.progress-estimate { display: none; } + .progress-info { display: none; } z-index: 10; } @@ -159,4 +159,20 @@ &.caution { @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; + } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 327c41856d..4790d59768 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -47,7 +47,7 @@ width: 50%; min-height: 300px; max-height: 800px; - min-width: 450px; + min-width: 600px; max-width: 1000px; z-index: 101; > .contents { @@ -58,6 +58,7 @@ left: $m; } } + .title { @include ellipsize(); font-size: 1.2em; @@ -127,6 +128,6 @@ .t-dialog-sm .overlay > .holder { // Used for blocker and in-progress dialogs, modal alerts, etc. //@include test(red); - min-height: 225px; - height: 225px; + min-height: 275px; + height: 275px; } \ No newline at end of file diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html index 20bf22668b..e9be598b18 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -31,8 +31,8 @@ {{ngModel.getText()}} - 5 - + + diff --git a/platform/commonUI/general/res/templates/progress-bar.html b/platform/commonUI/general/res/templates/progress-bar.html index 337494164c..8337553765 100644 --- a/platform/commonUI/general/res/templates/progress-bar.html +++ b/platform/commonUI/general/res/templates/progress-bar.html @@ -4,6 +4,7 @@ -
+
+ {{ngModel.dialog.progress}}% complete. {{ngModel.dialog.progressText}}
\ No newline at end of file diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index 70c42472c7..3f7cc363b9 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -2507,7 +2507,7 @@ label.checkbox.custom { line-height: 8px; width: 100px; } /* line 133, ../../../../general/res/sass/controls/_messages.scss */ - .l-message-banner .progress-info.progress-estimate { + .l-message-banner .progress-info { display: none; } /* line 137, ../../../../general/res/sass/controls/_messages.scss */ @@ -2584,6 +2584,16 @@ label.checkbox.custom { .s-message-banner.caution .s-action:hover { 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 */ .l-time-controller { position: relative; @@ -4234,7 +4244,7 @@ span.req { width: 50%; min-height: 300px; max-height: 800px; - min-width: 450px; + min-width: 600px; max-width: 1000px; z-index: 101; } /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ @@ -4243,7 +4253,7 @@ span.req { right: 25px; bottom: 25px; left: 25px; } -/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .title { overflow: hidden; text-overflow: ellipsis; @@ -4251,30 +4261,30 @@ span.req { font-size: 1.2em; line-height: 120%; margin-bottom: 5px; } -/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .hint { color: #b3b3b3; } -/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 73, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; right: 0; 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'] { width: 100%; } -/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 90, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .l-progress-bar { display: block; height: 15px; line-height: 15px; margin: .5em 0; width: 100%; } -/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4283,14 +4293,14 @@ span.req { overflow: visible; height: 30px; 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 { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; 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) { background-color: gray; -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 { color: white; } } -/* line 127, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 128, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { - min-height: 225px; - height: 225px; } + min-height: 300px; + 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) { /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ @@ -4387,7 +4397,6 @@ span.req { .overlay > .holder .contents .top-bar, .overlay > .holder .contents .editor, .overlay > .holder .contents .bottom-bar { - background-color: rgba(255, 165, 0, 0.2); top: auto; right: auto; bottom: auto; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 0789136f68..3ad64bc37f 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -2455,7 +2455,7 @@ label.checkbox.custom { line-height: 8px; width: 100px; } /* line 133, ../../../../general/res/sass/controls/_messages.scss */ - .l-message-banner .progress-info.progress-estimate { + .l-message-banner .progress-info { display: none; } /* line 137, ../../../../general/res/sass/controls/_messages.scss */ @@ -2532,6 +2532,16 @@ label.checkbox.custom { .s-message-banner.caution .s-action:hover { 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 */ .l-time-controller { position: relative; @@ -4157,7 +4167,7 @@ span.req { width: 50%; min-height: 300px; max-height: 800px; - min-width: 450px; + min-width: 600px; max-width: 1000px; z-index: 101; } /* line 53, ../../../../general/res/sass/overlay/_overlay.scss */ @@ -4166,7 +4176,7 @@ span.req { right: 25px; bottom: 25px; left: 25px; } -/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 62, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .title { overflow: hidden; text-overflow: ellipsis; @@ -4174,30 +4184,30 @@ span.req { font-size: 1.2em; line-height: 120%; margin-bottom: 5px; } -/* line 68, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 69, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .hint { color: #999999; } -/* line 72, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 73, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 76, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 77, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 40px; left: 0; right: 0; 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'] { width: 100%; } -/* line 89, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 90, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .l-progress-bar { display: block; height: 15px; line-height: 15px; margin: .5em 0; width: 100%; } -/* line 98, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 99, ../../../../general/res/sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4206,14 +4216,14 @@ span.req { overflow: visible; height: 30px; 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 { font-size: 95%; height: 30px; line-height: 30px; margin-left: 5px; 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) { background-color: #969696; -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 { color: white; } } -/* line 127, ../../../../general/res/sass/overlay/_overlay.scss */ +/* line 128, ../../../../general/res/sass/overlay/_overlay.scss */ .t-dialog-sm .overlay > .holder { - min-height: 225px; - height: 225px; } + min-height: 300px; + 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) { /* line 3, ../../../../general/res/sass/mobile/overlay/_overlay.scss */ @@ -4301,7 +4311,6 @@ span.req { .overlay > .holder .contents .top-bar, .overlay > .holder .contents .editor, .overlay > .holder .contents .bottom-bar { - background-color: rgba(255, 165, 0, 0.2); top: auto; right: auto; bottom: auto; diff --git a/testing/dialogTest/res/dialog-launch.html b/testing/dialogTest/res/dialog-launch.html index 59d3437c10..7c91fd8f1f 100644 --- a/testing/dialogTest/res/dialog-launch.html +++ b/testing/dialogTest/res/dialog-launch.html @@ -1,5 +1,6 @@ -    -    - + Dialogs: + Known | + Unknown | + Error \ No newline at end of file