[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;

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) {

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;
+        &.l-flex-row { @include align-items(center); }
-		height: $imageMainControlBarH;
 	}
 }
 
 .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";
 		}

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 {
+.tabular-holder {
-    &.t-historical {
+    &.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;
+                }
+            }
+        }
+    }
+
 }

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;
 			}
 		}

platform/features/imagery/res/templates/imagery.html

@@ -1,23 +1,18 @@
 <div class="t-imagery" ng-controller="ImageryController as imagery">
-    <div
+    <div class="l-image-main-wrapper l-flex-col"
-        class="l-image-main-wrapper"
         ng-mouseenter="showLocalControls = true;"
-        ng-mouseleave="showLocalControls = false;"
+        ng-mouseleave="showLocalControls = false;">
-        >
         <div
             class="l-local-controls s-local-controls"
-            ng-show="false && showLocalControls"
+            ng-show="false && showLocalControls">
-             >
+            <a class="s-btn"
-            <a
-               class="s-btn"
                ng-click="plot.stepBackPanZoom()"
                ng-show="1"
                title="Restore previous pan/zoom">
                 <span class="ui-symbol icon">&lt;</span>
             </a>
 
-            <a
+            <a class="s-btn"
-               class="s-btn"
                ng-click="plot.unzoom()"
                ng-show="1"
                title="Reset pan/zoom">
@@ -25,29 +20,23 @@
             </a>
         </div>
 
-        <div
+        <div class="l-image-main s-image-main flex-elem grows"
-            class="l-image-main s-image-main"
             ng-class="{ paused: imagery.paused(), stale:false }"
-            mct-background-image="imagery.getImageUrl()"
+            mct-background-image="imagery.getImageUrl()">
-            >
         </div>
 
-        <div class="l-image-main-controlbar l-flex-row">
+        <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="left flex-elem grows">
-                <a
+                <a class="s-btn show-thumbs sm hidden"
-                    class="s-btn show-thumbs sm hidden"
+                    ng-click="showThumbsBubble = (showThumbsBubble)? false:true"><span class="ui-symbol icon"></span></a>
-                    ng-click="showThumbsBubble = (showThumbsBubble)? false:true"
-                    ><span class="ui-symbol icon"></span></a>
                 <span class="l-timezone">{{imagery.getZone()}}</span>
                 <span class="l-time">{{imagery.getTime()}}</span>
                 <span class="l-date">{{imagery.getDate()}}</span>
             </div>
             <div class="right flex-elem">
-                <a
+                <a class="s-btn pause-play"
-                    class="s-btn pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
-                    ng-class="{ paused: imagery.paused() }"
+                    ng-class="{ paused: imagery.paused() }"><span class="ui-symbol icon"></span></a>
-                    ><span class="ui-symbol icon"></span></a>
                 <a href="{{imagery.getImageUrl()}}"
                    ng-if="imagery.getImageUrl()"
                    target="_blank"
@@ -58,8 +47,7 @@
                     class="s-btn l-mag s-mag ui-symbol vsm"
                     ng-click="clipped = false"
                     ng-show="clipped === true"
-                    title="Not all of image is visible; click to reset."
+                    title="Not all of image is visible; click to reset."></a>
-                    ></a>
             </div>
         </div>
     </div>

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">
     </mct-table>
 </div>

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">
     </mct-table>
 </div>