Merge pull request #1254 from nasa/open1235

[Frontend] Fixes to Export buttons
This commit is contained in:
Andrew Henry 2016-10-18 09:32:28 -07:00 committed by GitHub
commit 56a662841e
2 changed files with 19 additions and 15 deletions

View File

@ -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 { .l-btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them. // 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 font-size: 0; // Remove space between s-button elements due to white space in markup
.s-button { .s-button {
@ -114,20 +122,16 @@ body.desktop .mini-tab-icon {
margin-left: 1px; margin-left: 1px;
} }
.first { > .s-button {
.s-button, // Styles for .s-button as immediate descendants in .l-btn-set
&.s-button { &:first-child { @include btnSetButtonFirst(); }
@include border-left-radius($controlCr); &:last-child { @include btnSetButtonLast(); }
margin-left: 0;
}
} }
.last { // Must use following due to DOM structure of action buttons,
.s-button, // which have structure like .l-btn-set > mct-representation class=first|last > .s-button
&.s-button { .first > .s-button { @include btnSetButtonFirst(); }
@include border-right-radius($controlCr); .last > .s-button { @include btnSetButtonLast(); }
}
}
} }
.paused { .paused {

View File

@ -23,12 +23,12 @@
class="abs holder holder-plot has-control-bar"> class="abs holder holder-plot has-control-bar">
<div class="l-control-bar" ng-show="!plot.hideExportButtons"> <div class="l-control-bar" ng-show="!plot.hideExportButtons">
<span class="l-btn-set"> <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()" ng-click="plot.exportPNG()"
title="Export This View's Data as PNG"> title="Export This View's Data as PNG">
PNG PNG
</a> </a>
<a class="s-button t-export labeled last" <a class="s-button t-export labeled"
ng-click="plot.exportJPG()" ng-click="plot.exportJPG()"
title="Export This View's Data as JPG"> title="Export This View's Data as JPG">
JPG JPG