From 4b774f7b127572e328b7be2934341343e455b66e Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 6 May 2015 10:34:16 -0700 Subject: [PATCH] [Frontend] Clean up WTD-1172 Moved HTML limits markup out of plot.html and into temp-limits/.../examples.html --- platform/commonUI/general/res/css/plots.css | 83 ++++++++----------- .../general/res/css/theme-espresso.css | 83 ++++++++----------- .../general/res/sass/plots/_plots-main.scss | 9 +- .../features/plot/res/templates/plot.html | 15 ---- .../features/temp-limits/res/examples.html | 16 +++- 5 files changed, 90 insertions(+), 116 deletions(-) diff --git a/platform/commonUI/general/res/css/plots.css b/platform/commonUI/general/res/css/plots.css index 4cf7eea8b0..a14c9b7f97 100644 --- a/platform/commonUI/general/res/css/plots.css +++ b/platform/commonUI/general/res/css/plots.css @@ -5,35 +5,7 @@ position: relative; width: 100%; height: 100%; - /****************************** Limits */ - /*.l-limit { - // Limits in plot display area - - $h: 10px; - $a0: 0.1; - $a1: 0.2; - //top: auto; - height: auto; - z-index: 0; - &.s-limit-upr { - //$dir: 0deg; - &.s-limit-yellow { - @include limitBg($colorLimitYellow); - } - &.s-limit-red { - @include limitBg($colorLimitRed); - } - } - &.s-limit-lwr { - //$dir: 180deg; - &.s-limit-yellow { - @include limitBg($colorLimitYellow); - } - &.s-limit-red { - @include limitBg($colorLimitRed); - } - } - }*/ } + /****************************** Limits */ } /* line 17, ../sass/plots/_plots-main.scss */ .gl-plot .gl-plot-axis-area { position: absolute; } @@ -147,13 +119,30 @@ height: 24px; overflow-x: hidden; overflow-y: auto; } - /* line 137, ../sass/plots/_plots-main.scss */ + /* line 136, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit, .gl-plot .l-oob-data { position: absolute; left: 0; right: 0; width: auto; } - /* line 173, ../sass/plots/_plots-main.scss */ + /* line 144, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit { + height: auto; + z-index: 0; } + /* line 158, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit.s-limit-upr.s-limit-yellow { + background: rgba(204, 153, 0, 0.2); } + /* line 161, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit.s-limit-upr.s-limit-red { + background: rgba(204, 0, 0, 0.2); } + /* line 167, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit.s-limit-lwr.s-limit-yellow { + background: rgba(204, 153, 0, 0.2); } + /* line 170, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit.s-limit-lwr.s-limit-red { + background: rgba(204, 0, 0, 0.2); } + /* line 176, ../sass/plots/_plots-main.scss */ .gl-plot .l-oob-data { -moz-animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite; @@ -169,7 +158,7 @@ pointer-events: none; height: 10px; z-index: 1; } - /* line 182, ../sass/plots/_plots-main.scss */ + /* line 185, ../sass/plots/_plots-main.scss */ .gl-plot .l-oob-data.l-oob-data-up { top: 0; bottom: auto; @@ -178,7 +167,7 @@ background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); } - /* line 187, ../sass/plots/_plots-main.scss */ + /* line 190, ../sass/plots/_plots-main.scss */ .gl-plot .l-oob-data.l-oob-data-dwn { bottom: 0; top: auto; @@ -188,20 +177,20 @@ background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); } -/* line 197, ../sass/plots/_plots-main.scss */ +/* line 200, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item, .gl-plot-legend .legend-item, .legend .plot-legend-item, .legend .legend-item { display: inline-block; margin-right: 10px; } - /* line 201, ../sass/plots/_plots-main.scss */ + /* line 204, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item span, .gl-plot-legend .legend-item span, .legend .plot-legend-item span, .legend .legend-item span { vertical-align: middle; } - /* line 204, ../sass/plots/_plots-main.scss */ + /* line 207, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item .plot-color-swatch, .gl-plot-legend .plot-legend-item .color-swatch, .gl-plot-legend .legend-item .plot-color-swatch, @@ -217,7 +206,7 @@ height: 8px; width: 8px; } -/* line 219, ../sass/plots/_plots-main.scss */ +/* line 222, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -225,22 +214,22 @@ color: #fff; line-height: 1.5em; padding: 0px 5px; } - /* line 225, ../sass/plots/_plots-main.scss */ + /* line 228, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item .plot-color-swatch { border: 1px solid #333; height: 9px; width: 9px; } -/* line 233, ../sass/plots/_plots-main.scss */ +/* line 236, ../sass/plots/_plots-main.scss */ .tick { position: absolute; border: 0 rgba(255, 255, 255, 0.3) solid; } - /* line 236, ../sass/plots/_plots-main.scss */ + /* line 239, ../sass/plots/_plots-main.scss */ .tick.tick-x { border-right-width: 1px; height: 100%; } -/* line 242, ../sass/plots/_plots-main.scss */ +/* line 245, ../sass/plots/_plots-main.scss */ .gl-plot-tick, .tick-label { font-size: 0.7rem; @@ -248,7 +237,7 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - /* line 250, ../sass/plots/_plots-main.scss */ + /* line 253, ../sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x, .tick-label.gl-plot-x-tick-label, .tick-label.tick-label-x { @@ -259,7 +248,7 @@ width: 20%; margin-left: -10%; text-align: center; } - /* line 260, ../sass/plots/_plots-main.scss */ + /* line 263, ../sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y, .tick-label.gl-plot-y-tick-label, .tick-label.tick-label-y { @@ -269,18 +258,18 @@ margin-bottom: -0.5em; text-align: right; } -/* line 272, ../sass/plots/_plots-main.scss */ +/* line 275, ../sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label { top: 5px; } -/* line 275, ../sass/plots/_plots-main.scss */ +/* line 278, ../sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label { right: 5px; left: 5px; } -/* line 282, ../sass/plots/_plots-main.scss */ +/* line 285, ../sass/plots/_plots-main.scss */ .tick-label.tick-label-x { top: 0; } -/* line 285, ../sass/plots/_plots-main.scss */ +/* line 288, ../sass/plots/_plots-main.scss */ .tick-label.tick-label-y { right: 0; left: 0; } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 95cc481648..68d57571fd 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -2270,35 +2270,7 @@ input[type="text"] { position: relative; width: 100%; height: 100%; - /****************************** Limits */ - /*.l-limit { - // Limits in plot display area - - $h: 10px; - $a0: 0.1; - $a1: 0.2; - //top: auto; - height: auto; - z-index: 0; - &.s-limit-upr { - //$dir: 0deg; - &.s-limit-yellow { - @include limitBg($colorLimitYellow); - } - &.s-limit-red { - @include limitBg($colorLimitRed); - } - } - &.s-limit-lwr { - //$dir: 180deg; - &.s-limit-yellow { - @include limitBg($colorLimitYellow); - } - &.s-limit-red { - @include limitBg($colorLimitRed); - } - } - }*/ } + /****************************** Limits */ } /* line 17, ../sass/plots/_plots-main.scss */ .gl-plot .gl-plot-axis-area { position: absolute; } @@ -2412,13 +2384,30 @@ input[type="text"] { height: 24px; overflow-x: hidden; overflow-y: auto; } - /* line 137, ../sass/plots/_plots-main.scss */ + /* line 136, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit, .gl-plot .l-oob-data { position: absolute; left: 0; right: 0; width: auto; } - /* line 173, ../sass/plots/_plots-main.scss */ + /* line 144, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit { + height: auto; + z-index: 0; } + /* line 158, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit.s-limit-upr.s-limit-yellow { + background: rgba(204, 153, 0, 0.2); } + /* line 161, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit.s-limit-upr.s-limit-red { + background: rgba(204, 0, 0, 0.2); } + /* line 167, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit.s-limit-lwr.s-limit-yellow { + background: rgba(204, 153, 0, 0.2); } + /* line 170, ../sass/plots/_plots-main.scss */ + .gl-plot .l-limit.s-limit-lwr.s-limit-red { + background: rgba(204, 0, 0, 0.2); } + /* line 176, ../sass/plots/_plots-main.scss */ .gl-plot .l-oob-data { -moz-animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite; @@ -2434,7 +2423,7 @@ input[type="text"] { pointer-events: none; height: 10px; z-index: 1; } - /* line 182, ../sass/plots/_plots-main.scss */ + /* line 185, ../sass/plots/_plots-main.scss */ .gl-plot .l-oob-data.l-oob-data-up { top: 0; bottom: auto; @@ -2443,7 +2432,7 @@ input[type="text"] { background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); } - /* line 187, ../sass/plots/_plots-main.scss */ + /* line 190, ../sass/plots/_plots-main.scss */ .gl-plot .l-oob-data.l-oob-data-dwn { bottom: 0; top: auto; @@ -2453,20 +2442,20 @@ input[type="text"] { background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); } -/* line 197, ../sass/plots/_plots-main.scss */ +/* line 200, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item, .gl-plot-legend .legend-item, .legend .plot-legend-item, .legend .legend-item { display: inline-block; margin-right: 10px; } - /* line 201, ../sass/plots/_plots-main.scss */ + /* line 204, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item span, .gl-plot-legend .legend-item span, .legend .plot-legend-item span, .legend .legend-item span { vertical-align: middle; } - /* line 204, ../sass/plots/_plots-main.scss */ + /* line 207, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item .plot-color-swatch, .gl-plot-legend .plot-legend-item .color-swatch, .gl-plot-legend .legend-item .plot-color-swatch, @@ -2482,7 +2471,7 @@ input[type="text"] { height: 8px; width: 8px; } -/* line 219, ../sass/plots/_plots-main.scss */ +/* line 222, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -2490,22 +2479,22 @@ input[type="text"] { color: #fff; line-height: 1.5em; padding: 0px 5px; } - /* line 225, ../sass/plots/_plots-main.scss */ + /* line 228, ../sass/plots/_plots-main.scss */ .gl-plot-legend .plot-legend-item .plot-color-swatch { border: 1px solid #333; height: 9px; width: 9px; } -/* line 233, ../sass/plots/_plots-main.scss */ +/* line 236, ../sass/plots/_plots-main.scss */ .tick { position: absolute; border: 0 rgba(255, 255, 255, 0.3) solid; } - /* line 236, ../sass/plots/_plots-main.scss */ + /* line 239, ../sass/plots/_plots-main.scss */ .tick.tick-x { border-right-width: 1px; height: 100%; } -/* line 242, ../sass/plots/_plots-main.scss */ +/* line 245, ../sass/plots/_plots-main.scss */ .gl-plot-tick, .tick-label { font-size: 0.7rem; @@ -2513,7 +2502,7 @@ input[type="text"] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - /* line 250, ../sass/plots/_plots-main.scss */ + /* line 253, ../sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x, .tick-label.gl-plot-x-tick-label, .tick-label.tick-label-x { @@ -2524,7 +2513,7 @@ input[type="text"] { width: 20%; margin-left: -10%; text-align: center; } - /* line 260, ../sass/plots/_plots-main.scss */ + /* line 263, ../sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y, .tick-label.gl-plot-y-tick-label, .tick-label.tick-label-y { @@ -2534,18 +2523,18 @@ input[type="text"] { margin-bottom: -0.5em; text-align: right; } -/* line 272, ../sass/plots/_plots-main.scss */ +/* line 275, ../sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-x-tick-label { top: 5px; } -/* line 275, ../sass/plots/_plots-main.scss */ +/* line 278, ../sass/plots/_plots-main.scss */ .gl-plot-tick.gl-plot-y-tick-label { right: 5px; left: 5px; } -/* line 282, ../sass/plots/_plots-main.scss */ +/* line 285, ../sass/plots/_plots-main.scss */ .tick-label.tick-label-x { top: 0; } -/* line 285, ../sass/plots/_plots-main.scss */ +/* line 288, ../sass/plots/_plots-main.scss */ .tick-label.tick-label-y { right: 0; left: 0; } diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 5d91c07f8e..42a42d999f 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -133,7 +133,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa /****************************** Limits */ - //.l-limit, + .l-limit, .l-oob-data { position: absolute; left: 0; @@ -141,8 +141,11 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa width: auto; } - /*.l-limit { + .l-limit { // Limits in plot display area + @mixin limitBg($c) { + background: rgba($c, 0.2); + } $h: 10px; $a0: 0.1; @@ -168,7 +171,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa @include limitBg($colorLimitRed); } } - }*/ + } .l-oob-data { $c: #7748d6; diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html index 65cf351e81..bcf2966be0 100644 --- a/platform/features/plot/res/templates/plot.html +++ b/platform/features/plot/res/templates/plot.html @@ -53,21 +53,6 @@ ng-mouseenter="subplot.isHovering(true); representation.showControls = true;" ng-mouseleave="subplot.isHovering(false)"> -
- - -
-
diff --git a/platform/features/temp-limits/res/examples.html b/platform/features/temp-limits/res/examples.html index cdcb989f4a..e85adfdb08 100644 --- a/platform/features/temp-limits/res/examples.html +++ b/platform/features/temp-limits/res/examples.html @@ -1,13 +1,21 @@

Limits Examples

Plot limits

+
-
-
-
-
+
\ No newline at end of file