From b8cb41b1daedaf8d553a3eb40dd44cd3afbc45c7 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 14 Oct 2016 16:53:00 -0700
Subject: [PATCH] [Frontend] Fixes to export buttons

Fixes #1235
Sass and markup mods; changes to
.l-btn-set and related classes
---
 .../general/res/sass/controls/_buttons.scss   | 30 +++++++++++--------
 .../features/plot/res/templates/plot.html     |  4 +--
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index 17e03941df..fe2c6d660c 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -104,9 +104,17 @@ body.desktop .mini-tab-icon {
     }
 }
 
+@mixin btnSetButtonFirst() {
+    @include border-left-radius($controlCr);
+    margin-left: 0;
+}
+
+@mixin btnSetButtonLast() {
+    @include border-right-radius($controlCr);
+}
+
 .l-btn-set {
     // Buttons that have a very tight conceptual grouping - no internal space between them.
-    // Structure: .btn-set > mct-representation class=first|last > .s-button
     font-size: 0; // Remove space between s-button elements due to white space in markup
 
     .s-button {
@@ -114,20 +122,16 @@ body.desktop .mini-tab-icon {
         margin-left: 1px;
     }
 
-    .first {
-        .s-button,
-        &.s-button {
-            @include border-left-radius($controlCr);
-            margin-left: 0;
-        }
+    > .s-button {
+        // Styles for .s-button as immediate descendants in .l-btn-set
+        &:first-child { @include btnSetButtonFirst(); }
+        &:last-child { @include btnSetButtonLast(); }
     }
 
-    .last {
-        .s-button,
-        &.s-button {
-            @include border-right-radius($controlCr);
-        }
-    }
+    // Must use following due to DOM structure of action buttons,
+    // which have structure like .l-btn-set > mct-representation class=first|last > .s-button
+    .first > .s-button { @include btnSetButtonFirst(); }
+    .last > .s-button { @include btnSetButtonLast(); }
 }
 
 .paused {
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
index 461389e2c1..53b5d348b0 100644
--- a/platform/features/plot/res/templates/plot.html
+++ b/platform/features/plot/res/templates/plot.html
@@ -23,12 +23,12 @@
       class="abs holder holder-plot has-control-bar">
     <div class="l-control-bar" ng-show="!plot.hideExportButtons">
          <span class="l-btn-set">
-            <a class="s-button t-export labeled"
+            <a class="s-button t-export labeled icon-download"
                ng-click="plot.exportPNG()"
                title="Export This View's Data as PNG">
                 PNG
             </a>
-            <a class="s-button t-export labeled last"
+            <a class="s-button t-export labeled"
                ng-click="plot.exportJPG()"
                title="Export This View's Data as JPG">
                 JPG