[Frontend] Rename .s-btn to .s-button

Fixes #1047

platform/commonUI/dialog/res/templates/dialog.html

@@ -30,12 +30,12 @@
     </mct-form>
 </div>
 <div class="abs bottom-bar">
-    <a class='s-btn major'
+    <a class='s-button major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
     </a>
-    <a class='s-btn'
+    <a class='s-button'
        ng-click="ngModel.cancel()">
         Cancel
     </a>

platform/commonUI/dialog/res/templates/message.html

@@ -16,11 +16,11 @@
         </div>
         <div class="bottom-bar">
             <a ng-repeat="dialogOption in ngModel.options"
-               class="s-btn major"
+               class="s-button major"
                ng-click="dialogOption.callback()">
                 {{dialogOption.label}}
             </a>
-            <a class="s-btn major"
+            <a class="s-button major"
                ng-if="ngModel.primaryOption"
                ng-click="ngModel.primaryOption.callback()">
                 {{ngModel.primaryOption.label}}

platform/commonUI/dialog/res/templates/overlay-message-list.html

@@ -13,7 +13,7 @@
         </div>
         <div class="abs bottom-bar">
             <a ng-repeat="dialogAction in ngModel.dialog.actions"
-               class="s-btn major"
+               class="s-button major"
                ng-click="dialogAction.action()">
                 {{dialogAction.label}}
             </a>

platform/commonUI/dialog/res/templates/overlay-options.html

@@ -33,7 +33,7 @@
     <div class="abs bottom-bar">
         <a ng-repeat="option in ngModel.dialog.options"
            href=''
-           class="s-btn lg"
+           class="s-button lg"
            title="{{option.description}}"
            ng-click="ngModel.confirm(option.key)"
            ng-class="{ major: $first, subtle: !$first }">

platform/commonUI/edit/res/templates/edit-action-buttons.html

@@ -21,7 +21,7 @@
 -->
 <span ng-controller="EditActionController">
     <span ng-repeat="currentAction in editActions">
-        <a class='s-btn {{currentAction.getMetadata().cssclass}}'
+        <a class='s-button {{currentAction.getMetadata().cssclass}}'
            title='{{currentAction.getMetadata().name}}'
            ng-click="currentAction.perform()"
            ng-class="{ major: $index === 0 }">

platform/commonUI/general/res/sass/_about.scss

@@ -43,7 +43,7 @@
 		color: $colorAboutLink;
 	}
 	.s-description,
-	.s-btn {
+	.s-button {
 		line-height: 2em;
 	}
 	.l-licenses-software {

platform/commonUI/general/res/sass/_autoflow.scss

@@ -29,7 +29,7 @@
 	font-size: 0.75rem;
 
 	&:hover {
-		.l-autoflow-header .s-btn.change-column-width {
+		.l-autoflow-header .s-button.change-column-width {
 			@include trans-prop-nice-fade(50ms);
 			opacity: 1;
 		}
@@ -43,7 +43,7 @@
         .t-last-update {
             overflow: hidden;
         }
-		.s-btn.change-column-width {
+		.s-button.change-column-width {
 			@include trans-prop-nice-fade(500ms);
 			opacity: 0;
 		}

platform/commonUI/general/res/sass/controls/_buttons.scss

@@ -22,7 +22,7 @@
 $baseRatio: 1.5;
 $pad: $interiorMargin * $baseRatio;
 
-.s-btn {
+.s-button {
     @include user-select(none);
     cursor: pointer;
     text-decoration: none;
@@ -30,7 +30,7 @@ $pad: $interiorMargin * $baseRatio;
     line-height: $btnStdH;
 }
 
-.s-btn {
+.s-button {
     box-sizing: border-box;
     padding: 0 $pad;
     font-size: 0.7rem;
@@ -107,32 +107,32 @@ body.desktop .mini-tab-icon {
 
 .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-btn
+    // Structure: .btn-set > mct-representation class=first|last > .s-button
-    font-size: 0; // Remove space between s-btn elements due to white space in markup
+    font-size: 0; // Remove space between s-button elements due to white space in markup
 
-    .s-btn {
+    .s-button {
         border-radius: 0;
         margin-left: 1px;
     }
 
     .first {
-        .s-btn,
+        .s-button,
-        &.s-btn {
+        &.s-button {
             @include border-left-radius($controlCr);
             margin-left: 0;
         }
     }
 
     .last {
-        .s-btn,
+        .s-button,
-        &.s-btn {
+        &.s-button {
             @include border-right-radius($controlCr);
         }
     }
 }
 
 .paused {
-    &:not(.s-btn) {
+    &:not(.s-button) {
         border-color: $colorPausedBg !important;
         color: $colorPausedBg !important;
     }

platform/commonUI/general/res/sass/controls/_menus.scss

@@ -22,7 +22,7 @@
 /******************************************************** MENU BUTTONS */
 .s-menu-btn {
 	// Formerly .btn-menu
-	@extend .s-btn;
+	@extend .s-button;
 	span.l-click-area {
 		// In markup, this element should not enclose anything.
 		@extend .abs;

platform/commonUI/general/res/sass/controls/_messages.scss

@@ -128,7 +128,7 @@
 		font-weight: bold;
 		opacity: 1;
 	}
-    .s-btn {
+    .s-button {
         background: $colorStatusBtnBg;
         padding: 0 $interiorMargin;
         height: auto;

platform/commonUI/general/res/sass/forms/_channel-selector.scss

@@ -36,7 +36,7 @@
 	.btns-add-remove {
 //		background: rgba(#ff0000, 0.3);;
 		margin-top: 150px;
-		.s-btn {
+		.s-button {
 			display: block;
 			//font-size: 1.5em;
 			margin-bottom: $interiorMargin;

platform/commonUI/general/res/sass/lists/_tabular.scss

@@ -175,7 +175,7 @@ table {
     .tabular-holder {
         &.t-exportable {
             $btnExportH: $btnFrameH;
-            .s-btn.t-export {
+            .s-button.t-export {
                 @include trans-prop-nice(opacity, $dur: 50ms);
                 opacity: 0;
             }
@@ -184,7 +184,7 @@ table {
                 top: 0;
             }
             &:hover {
-                .s-btn.t-export {
+                .s-button.t-export {
                     @include trans-prop-nice(opacity, 150ms, 100ms);
                     opacity: 1;
                 }

platform/commonUI/general/res/sass/overlay/_overlay.scss

@@ -87,7 +87,7 @@
 
     .bottom-bar {
         text-align: right;
-        .s-btn {
+        .s-button {
             $bg: $colorOvrBtnBg;
             &:not(.major) {
                 @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -49,7 +49,7 @@
 		left: $myM;
 	}
 	&.frame-template {
-		.s-btn,
+		.s-button,
 		.s-menu-btn {
 			height: $ohH;
 			line-height: $ohH;

platform/commonUI/general/res/sass/user-environ/_layout.scss

@@ -237,10 +237,10 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
     @include trans-prop-nice-resize(0.25s);
 }
 
-.object-browse-bar .s-btn,
+.object-browse-bar .s-button,
-.top-bar .buttons-main .s-btn,
+.top-bar .buttons-main .s-button,
 .top-bar .s-menu-btn,
-.tool-bar .s-btn,
+.tool-bar .s-button,
 .tool-bar .s-menu-btn {
     $h: $btnToolbarH;
     height: $h;

platform/commonUI/general/res/templates/controls/action-button.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<a class="s-btn key-{{parameters.action.getMetadata().key}} {{parameters.action.getMetadata().cssclass}}"
+<a class="s-button key-{{parameters.action.getMetadata().key}} {{parameters.action.getMetadata().cssclass}}"
    ng-class="{ labeled: parameters.labeled }"
    title="{{parameters.action.getMetadata().description}}"
    ng-click="parameters.action.perform()">

platform/commonUI/general/res/templates/controls/selector.html

@@ -43,11 +43,11 @@
     </div>
     <div class='col col-2'>
         <div class='btn-holder valign-mid btns-add-remove'>
-            <a class='s-btn major'
+            <a class='s-button major'
                ng-click="selector.select(selector.treeModel.selectedObject)">
                 <span class='ui-symbol'>&gt;</span>
             </a>
-            <a class='s-btn major'
+            <a class='s-button major'
                ng-click="selector.deselect(selector.listModel.selectedObject)">
                 <span class='ui-symbol'>&lt;</span>
             </a>

platform/commonUI/general/res/templates/indicator.html

@@ -27,7 +27,7 @@
 	<span class="status-indicator {{ngModel.getCssClass()}}"></span><span class="label"
 		  ng-class='ngModel.getTextClass()'>
 		{{ngModel.getText()}}
-        <a class="s-btn icon-gear" ng-if="ngModel.configure"></a>
+        <a class="s-button icon-gear" ng-if="ngModel.configure"></a>
 	</span><span class="count">
 	</span>
 </div>

platform/commonUI/themes/snow/res/sass/_controls.scss

@@ -1,4 +1,4 @@
-.s-btn {
+.s-button {
 	&.major {
 		.title-label {
 			text-transform: uppercase;

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

@@ -5,13 +5,13 @@
         <div
             class="l-local-controls s-local-controls"
             ng-show="false && showLocalControls">
-            <a class="s-btn icon-arrow-left"
+            <a class="s-button icon-arrow-left"
                ng-click="plot.stepBackPanZoom()"
                ng-show="1"
                title="Restore previous pan/zoom">
             </a>
 
-            <a class="s-btn icon-arrows-out"
+            <a class="s-button icon-arrows-out"
                ng-click="plot.unzoom()"
                ng-show="1"
                title="Reset pan/zoom">
@@ -25,24 +25,24 @@
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="left flex-elem grows">
-                <a class="s-btn show-thumbs sm hidden icon-thumbs-strip"
+                <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
                     ng-click="showThumbsBubble = (showThumbsBubble)? false:true"></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 class="s-btn pause-play"
+                <a class="s-button pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
                     ng-class="{ paused: imagery.paused() }"></a>
                 <a href="{{imagery.getImageUrl()}}"
                    ng-if="imagery.getImageUrl()"
                    target="_blank"
                    title="Open image in new tab."
-                   class="s-btn icon-new-window">
+                   class="s-button icon-new-window">
                    </a>
                 <a href=""
-                    class="s-btn l-mag s-mag ui-symbol vsm icon-arrows-out"
+                    class="s-button l-mag s-mag ui-symbol vsm icon-arrows-out"
                     ng-click="clipped = false"
                     ng-show="clipped === true"
                     title="Not all of image is visible; click to reset."></a>

platform/features/plot/res/templates/plot.html

@@ -87,12 +87,12 @@
             <!-- TODO: Move into correct position; make part of group; infer from set of actions -->
             <div class="l-local-controls gl-plot-local-controls t-plot-display-controls"
                  ng-if="$first">
-                <a class="s-btn icon-arrow-left"
+                <a class="s-button icon-arrow-left"
                    ng-click="plot.stepBackPanZoom()"
                    ng-show="plot.isZoomed()"
                    title="Restore previous pan/zoom">
                 </a>
-                <a class="s-btn icon-arrows-out"
+                <a class="s-button icon-arrows-out"
                    ng-click="plot.unzoom()"
                    ng-show="plot.isZoomed()"
                    title="Reset pan/zoom">

platform/features/table/res/templates/mct-table.html

@@ -1,4 +1,4 @@
-<a class="t-btn l-btn s-btn t-export icon-download labeled"
+<a class="t-btn l-btn s-button t-export icon-download labeled"
    ng-click="exportAsCSV()"
    title="Export This View's Data">
     Export

platform/features/timeline/res/sass/_timeline-thematic.scss

@@ -112,7 +112,7 @@
         $l: 5%;
         @include user-select(none);
         @include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%));
-        .s-btn {
+        .s-button {
             height: 16px;
             line-height: 16px;
             .icon {

platform/features/timeline/res/templates/timeline.html

@@ -103,19 +103,19 @@
         <!-- TOP PANE GANTT BARS -->
         <div class="split-pane-component l-timeline-pane t-pane-h l-pane-top t-timeline-gantt l-timeline-gantt s-timeline-gantt">
             <div class="l-hover-btns-holder s-hover-btns-holder t-btns-zoom">
-                <a class="t-btn l-btn s-btn icon-arrows-out"
+                <a class="t-btn l-btn s-button icon-arrows-out"
                    ng-click="zoomController.fit()"
                    ng-show="true"
                    title="Zoom to fit">
                 </a>
 
-                <a class="t-btn l-btn s-btn icon-magnify-in"
+                <a class="t-btn l-btn s-button icon-magnify-in"
                    ng-click="zoomController.zoom(-1)"
                    ng-show="true"
                    title="Zoom in">
                 </a>
 
-                <a class="t-btn l-btn s-btn icon-magnify-out"
+                <a class="t-btn l-btn s-button icon-magnify-out"
                    ng-click="zoomController.zoom(1)"
                    ng-show="true"
                    title="Zoom out">

platform/forms/res/templates/controls/button.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<a class="s-btn {{structure.cssclass}}"
+<a class="s-button {{structure.cssclass}}"
    ng-class="{ labeled: structure.text }"
    ng-click="structure.click()">
     <span class="title-label" ng-if="structure.text">

platform/forms/res/templates/controls/color.html

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="t-btn l-btn s-btn s-menu-btn menu-element t-color-palette {{structure.cssclass}}"
+<div class="t-btn l-btn s-button s-menu-btn menu-element t-color-palette {{structure.cssclass}}"
     ng-controller="ClickAwayController as toggle">
 
     <span class="l-click-area" ng-click="toggle.toggle()"></span>

platform/search/res/templates/search.html

@@ -53,7 +53,7 @@
                             ng-model="ngModel"
                             class="l-flex-row flex-elem grows">
         </mct-representation>
-        <a class="load-more-button s-btn vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
+        <a class="load-more-button s-button vsm" ng-if="controller.areMore()" ng-click="controller.loadMore()">More Results</a>
     </div>
 
 </div>