From f114f742c4406f59ede7f89ce16b3d8096a4d9c9 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 6 May 2015 16:55:25 -0700 Subject: [PATCH] [Frontend] Tweaks to markup and CSS WTD-1172 scrolling.html markup and CSS hooks; added comments to change points; CSS tweaking; --- .../commonUI/general/res/sass/_constants.scss | 10 ++-- .../commonUI/general/res/sass/_limits.scss | 54 +++++++------------ .../general/res/sass/lists/_tabular.scss | 9 ++++ .../general/res/sass/plots/_plots-main.scss | 2 +- .../res/templates/elements/telemetry.html | 7 +-- .../features/plot/res/templates/plot.html | 4 +- .../scrolling/res/templates/scrolling.html | 14 ++++- 7 files changed, 56 insertions(+), 44 deletions(-) diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index b3c9a10e73..e87f381854 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -25,8 +25,11 @@ $colorFormValid: #33cc33; $colorFormError: #cc0000; $colorFormInvalid: #ff9900; $colorGridLines: rgba(#fff, 0.05); -$colorLimitYellow: #cc9900; -$colorLimitRed: #cc0000; +$colorLimitYellow: #9d7500; +$colorLimitRed: #aa0000; +$colorTelemFresh: #fff; +$colorTelemStale: #aaa; +$styleTelemState: italic; // Ratios $ltGamma: 20%; @@ -57,6 +60,7 @@ $ueBrowseGridItemBottomBarH: 40px; $colorItemBase: lighten($colorBodyBg, 5%); $colorItemFg: lighten($colorItemBase, 20%); $colorItemSelected: $colorKey; +$itemPadLR: 5px; // Tree $treeVCW: 10px; @@ -68,7 +72,7 @@ $colorItemTreeVCHover: $colorAlt1; //Tabular $tabularHeaderH: 20px; -$tabularTdPadLR: 5px; +$tabularTdPadLR: $itemPadLR; $tabularTdPadTB: 2px; $tabularColorBorder: rgba(white, 0.1); $tabularColorBodyBg: darken($colorBodyBg, 10%); diff --git a/platform/commonUI/general/res/sass/_limits.scss b/platform/commonUI/general/res/sass/_limits.scss index eb3f9e7b0b..94c32a2bf1 100644 --- a/platform/commonUI/general/res/sass/_limits.scss +++ b/platform/commonUI/general/res/sass/_limits.scss @@ -1,4 +1,13 @@ -.s-limit { +@mixin limit($c, $glyph) { + background: $c; + &:before { + color: lighten($c, 30%); + content: $glyph; + } +} + +.s-limit-upr, +.s-limit-lwr { $a: 0.5; $l: 30%; white-space: nowrap; @@ -6,40 +15,17 @@ display: inline-block; font-family: symbolsfont; font-size: 0.8em; - //line-height: 1.1em; margin-right: $interiorMarginSm; vertical-align: middle; } - &.s-limit-upr { - &.s-limit-yellow { - background: rgba($colorLimitYellow, $a); - &:before { - color: lighten($colorLimitYellow, $l); - content: "\0000ed"; - } - } - &.s-limit-red { - background: rgba($colorLimitRed, $a); - &:before { - color: lighten($colorLimitRed, $l); - content: "\0000eb"; - } - } - } - &.s-limit-lwr { - &.s-limit-yellow { - background: rgba($colorLimitYellow, $a); - &:before { - color: lighten($colorLimitYellow, $l); - content: "\0000ec"; - } - } - &.s-limit-red { - background: rgba($colorLimitRed, $a); - &:before { - color: lighten($colorLimitRed, $l); - content: "\0000ee"; - } - } - } +} + +.s-limit-upr { + &.s-limit-yellow { @include limit($colorLimitYellow, "\0000ed"); } + &.s-limit-red { @include limit($colorLimitRed, "\0000eb"); } +} + +.s-limit-lwr { + &.s-limit-yellow { @include limit($colorLimitYellow, "\0000ec"); } + &.s-limit-red { @include limit($colorLimitRed, "\0000ee"); } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss index 6c4061da76..40845af94e 100644 --- a/platform/commonUI/general/res/sass/lists/_tabular.scss +++ b/platform/commonUI/general/res/sass/lists/_tabular.scss @@ -71,10 +71,19 @@ } .td { border-top: 1px solid $tabularColorBorder; + color: $colorTelemFresh; padding: $tabularTdPadTB $tabularTdPadLR; &.numeric { text-align: right; } + &.s-cell-type-value { + text-align: right; + .l-cell-contents { + @include border-radius($smallCr); + padding-left: $itemPadLR; + padding-right: $itemPadLR; + } + } } } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 2d36da73fa..aebb93413d 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -224,7 +224,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa @include border-radius($smallCr); color: #fff; line-height: 1.5em; - padding: 0px 5px; + padding: 0px $itemPadLR; .plot-color-swatch { border: 1px solid $colorBodyBg; height: $swatchD + 1; diff --git a/platform/features/layout/res/templates/elements/telemetry.html b/platform/features/layout/res/templates/elements/telemetry.html index 8d16dc47a7..0cffc10d49 100644 --- a/platform/features/layout/res/templates/elements/telemetry.html +++ b/platform/features/layout/res/templates/elements/telemetry.html @@ -9,12 +9,13 @@ {{ngModel.name}}
+ {{ngModel.value}} diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index bcf2966be0..2310a5bc82 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -5,10 +5,11 @@ ng-style="{ height: 100 / plot.getSubPlots().length + '%'}" ng-repeat="subplot in plot.getSubPlots()">
+ @@ -54,6 +55,7 @@ ng-mouseleave="subplot.isHovering(false)"> +
diff --git a/platform/features/scrolling/res/templates/scrolling.html b/platform/features/scrolling/res/templates/scrolling.html index a26fd6503e..2bdd862950 100644 --- a/platform/features/scrolling/res/templates/scrolling.html +++ b/platform/features/scrolling/res/templates/scrolling.html @@ -13,8 +13,18 @@
-
- {{cell}} +
+ + + {{cell}} +