From 5a9bcfa938bd0a26e83d9d8f8064e30cff2d470e Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 26 Feb 2016 16:48:23 -0800 Subject: [PATCH] [Frontend] Markup, CSS changes #442 Removed white space from markup; Moved getGlyphClass up to status-block-holder element out of status-block; CSS mods to selectors and style defs in _messages.scss; --- example/notifications/res/dialog-launch.html | 7 +- .../res/notification-launch.html | 7 +- .../general/res/sass/controls/_messages.scss | 90 ++++++++++--------- .../general/res/templates/bottombar.html | 3 +- .../general/res/templates/indicator.html | 2 - .../res/notification-indicator.html | 7 +- 6 files changed, 58 insertions(+), 58 deletions(-) diff --git a/example/notifications/res/dialog-launch.html b/example/notifications/res/dialog-launch.html index bc56e6b4f2..9eebd2e3e5 100644 --- a/example/notifications/res/dialog-launch.html +++ b/example/notifications/res/dialog-launch.html @@ -1,10 +1,9 @@ - - + + Known | Unknown | Error | Info - - Dialogs + Dialogs \ No newline at end of file diff --git a/example/notifications/res/notification-launch.html b/example/notifications/res/notification-launch.html index 1e077bf3be..e5f5cbac6b 100644 --- a/example/notifications/res/notification-launch.html +++ b/example/notifications/res/notification-launch.html @@ -1,10 +1,9 @@ - - + + Success | Error | Alert | Progress - - Notifications + Notifications \ 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 f8869c18be..015b9db559 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -36,43 +36,49 @@ } } -mct-include.status-block-holder { - // mct-include that wraps status.block - // Must use display: inline-block to fix white space problems - display: inline-block; +// Status coloring +.ok, .info { + .status-indicator { + color: $colorStatusInfo; + } } -.status.block { +.alert, .caution, .warning { + .status-indicator, .count { + color: $colorStatusAlert; + } + +} + +.error, .err { + .status-indicator, .count { + color: $colorStatusError; + } +} + +.available { + .status-indicator, .count { + color: $colorStatusAvailable; + } +} + +.status-block-holder { + // Applied to mct-include element + // Contains status.block elements $transDelay: 1.5s; $transSpeed: .25s; - color: $colorStatusDefault; - display: inline-block; - margin-right: $interiorMargin; - .status-indicator, - .label, - .count { - display: inline-block; - vertical-align: top; - } - + display: inline-block; &.clickable { cursor: pointer; } &:not(.clickable) { cursor: default; } - - &.no-icon { + &.no-icon .status.block { .status-indicator { display: none; } } - &.float-right { float: right; } - - .status-indicator { - margin-right: $interiorMarginSm; - } - - &:not(.no-collapse) { + &:not(.no-collapse) .status.block { .label { // Max-width silliness is necessary for width transition @include trans-prop-nice(max-width, $transSpeed, $transDelay); @@ -92,21 +98,25 @@ mct-include.status-block-holder { } } - &.ok .status-indicator, - &.info .status-indicator { - color: $colorStatusInfo; +} + +.status.block { + $transDelay: 1.5s; + $transSpeed: .25s; + color: $colorStatusDefault; + display: inline-block; + margin-right: $interiorMargin; + .status-indicator, + .label, + .count { + display: inline-block; + vertical-align: top; } - &.alert .status-indicator, - &.warning .status-indicator, - &.caution .status-indicator { - color: $colorStatusAlert; + + .status-indicator { + margin-right: $interiorMarginSm; } - &.error .status-indicator { - color: $colorStatusError; - } - &.available .status-indicator { - color: $colorStatusAvailable; - } + .count { @include trans-prop-nice(opacity, $transSpeed, $transDelay); font-weight: bold; @@ -191,12 +201,6 @@ mct-include.status-block-holder { z-index: 10; } -.s-message-banner { - //@include transition-property(left, opacity); - //@include transition-duration(0.35s); - //@include transition-timing-function(ease-in-out); -} - .s-message-banner { border-radius: $controlCr; @include statusBannerColors($colorStatusDefault, $colorStatusFg); diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html index 1883d31dd5..5a5db7a357 100644 --- a/platform/commonUI/general/res/templates/bottombar.html +++ b/platform/commonUI/general/res/templates/bottombar.html @@ -24,7 +24,8 @@ + class="status-block-holder" + ng-class='indicator.ngModel.getGlyphClass()'> diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html index 401c9990b9..7b1f11a4d3 100644 --- a/platform/commonUI/general/res/templates/indicator.html +++ b/platform/commonUI/general/res/templates/indicator.html @@ -23,7 +23,6 @@
{{ngModel.getGlyph()}} @@ -32,6 +31,5 @@ {{ngModel.getText()}} G -
\ No newline at end of file diff --git a/platform/commonUI/notification/res/notification-indicator.html b/platform/commonUI/notification/res/notification-indicator.html index 9c7e80a639..2a2ec074df 100644 --- a/platform/commonUI/notification/res/notification-indicator.html +++ b/platform/commonUI/notification/res/notification-indicator.html @@ -1,10 +1,9 @@ + - - + {{notifications.length}} Notifications - - {{notifications.length}} + {{notifications.length}} \ No newline at end of file