From 8b9c51f3033c68664f74ea3ee02c2ca8a533094e Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 31 May 2016 11:40:31 -0700 Subject: [PATCH] [Frontend] Styling Export button fixes #973 - Done; - Styling for Export button and tabular view area in layout frame context; - Export button in frame context now hidden until user hovers over tabular view area in frame, includes animated transition; - Normalized line-height on button and menu elements in frame context; - Layout/markup/SASS for historical and RT tabular view modified; - Converted imagery.html layout to use flexbox; --- .../commonUI/general/res/sass/_mixins.scss | 1 - .../general/res/sass/features/_imagery.scss | 19 ++-------- .../general/res/sass/lists/_tabular.scss | 35 ++++++++++++++++- .../general/res/sass/user-environ/_frame.scss | 3 +- .../imagery/res/templates/imagery.html | 38 +++++++------------ .../table/res/templates/historical-table.html | 2 +- .../table/res/templates/rt-table.html | 1 + 7 files changed, 53 insertions(+), 46 deletions(-) diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index d7fa694100..1c04dc18d9 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -348,7 +348,6 @@ display: inline-block; font-family: 'symbolsfont'; margin-left: $interiorMarginSm; - vertical-align: top; } @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) { diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss index c1024d2912..cd04568e02 100644 --- a/platform/commonUI/general/res/sass/features/_imagery.scss +++ b/platform/commonUI/general/res/sass/features/_imagery.scss @@ -1,13 +1,10 @@ .l-image-main-wrapper, -.l-image-main, -.l-image-main-controlbar, .l-image-thumbs-wrapper { @include absPosDefault(0, false); } /*************************************** MAIN LAYOUT */ .l-image-main-wrapper { - //@include test(); @if $enableImageryThumbs == true { bottom: $interiorMargin*2 + $imageThumbsWrapperH; } @@ -15,16 +12,14 @@ min-width: 150px; .l-image-main { background-color: $colorPlotBg; - bottom: $imageMainControlBarH + $interiorMargin; + margin-bottom: $interiorMargin; } .l-image-main-controlbar { - top: auto; - height: $imageMainControlBarH; + &.l-flex-row { @include align-items(center); } } } .l-image-thumbs-wrapper { - //@include test(red); top: auto; height: $imageThumbsWrapperH; } @@ -44,24 +39,17 @@ background-repeat: no-repeat; } -.l-image-main { - //cursor: crosshair; -} - .l-image-main-controlbar { - //@include test(); font-size: 0.8em; - line-height: $imageMainControlBarH; + line-height: inherit; .left, .right { direction: rtl; overflow: hidden; } .left { - //@include test(red); text-align: left; } .right { - //@include test(green); z-index: 2; } .l-date, @@ -71,7 +59,6 @@ .l-mag { direction: ltr; display: inline-block; - //white-space: nowrap; &:before { content: "\000049"; } diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss index 748766a5fb..b80a855d3d 100644 --- a/platform/commonUI/general/res/sass/lists/_tabular.scss +++ b/platform/commonUI/general/res/sass/lists/_tabular.scss @@ -24,6 +24,10 @@ height: 100%; } +.tabular-holder { + @include absPosDefault(); +} + .tabular, table { box-sizing: border-box; @@ -165,11 +169,38 @@ table { } /********************************************************** SPECIFIC TABULAR VIEWS */ -.t-tabular { - &.t-historical { +.tabular-holder { + &.t-exportable { $btnExportH: 25px; .l-view-section { top: $btnExportH + $interiorMargin; } } +} + +.child-frame { + .tabular-holder { + &.t-exportable { + $btnExportH: $btnFrameH; + .s-btn.t-export { + @include trans-prop-nice(opacity, $dur: 50ms); + opacity: 0; + } + .l-view-section { + @include trans-prop-nice(top, $dur: 150ms, $delay: 50ms); + top: 0; + } + &:hover { + .s-btn.t-export { + @include trans-prop-nice(opacity, 150ms, 100ms); + opacity: 1; + } + .l-view-section { + @include trans-prop-nice(top, $dur: 150ms); + top: $btnExportH + $interiorMargin; + } + } + } + } + } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index 64c4dbd69b..b06fcc2c8b 100644 --- a/platform/commonUI/general/res/sass/user-environ/_frame.scss +++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss @@ -54,7 +54,8 @@ height: $ohH; line-height: $ohH; padding: 0 $interiorMargin; - > span { + > span, + &:before { font-size: 0.65rem; } } diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html index 03ba13083b..5242c1b189 100644 --- a/platform/features/imagery/res/templates/imagery.html +++ b/platform/features/imagery/res/templates/imagery.html @@ -1,23 +1,18 @@
-
+ ng-mouseleave="showLocalControls = false;">
- + < - @@ -25,29 +20,23 @@
-
+ mct-background-image="imagery.getImageUrl()">
-
+
- + {{imagery.getZone()}} {{imagery.getTime()}} {{imagery.getDate()}}
- + ng-class="{ paused: imagery.paused() }"> + title="Not all of image is visible; click to reset.">
diff --git a/platform/features/table/res/templates/historical-table.html b/platform/features/table/res/templates/historical-table.html index 2fdee102e1..b253737156 100644 --- a/platform/features/table/res/templates/historical-table.html +++ b/platform/features/table/res/templates/historical-table.html @@ -4,6 +4,6 @@ rows="rows" enableFilter="true" enableSort="true" - class="t-tabular t-historical"> + class="tabular-holder t-exportable">
\ No newline at end of file diff --git a/platform/features/table/res/templates/rt-table.html b/platform/features/table/res/templates/rt-table.html index d35015c96c..c5ae6de0dc 100644 --- a/platform/features/table/res/templates/rt-table.html +++ b/platform/features/table/res/templates/rt-table.html @@ -4,6 +4,7 @@ rows="rows" enableFilter="true" enableSort="true" + class="tabular-holder t-exportable" auto-scroll="autoScroll">
\ No newline at end of file