Merge branch 'open95' of https://github.com/nasa/openmctweb into open95

platform/commonUI/browse/bundle.json

@@ -45,12 +45,6 @@
                 "templateUrl": "templates/create/locator.html"
             }
         ],
-        "templates": [
-            {
-                "key": "topbar-browse",
-                "templateUrl": "templates/topbar-browse.html"
-            }
-        ],
         "representations": [
             {
                 "key": "browse-object",

platform/commonUI/browse/res/templates/create/create-button.html

@@ -20,10 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
-    <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
+    <div class="s-menu major create-btn" ng-click="createController.toggle()">
-	    Create
+		<span class="ui-symbol icon type-icon">&#x2b;</span>
+		<span class="title-label">Create</span>
     </div>
-    <div class="menu dropdown super-menu" ng-show="createController.isActive()">
+    <div class="menu super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>

platform/commonUI/browse/res/templates/topbar-browse.html

@@ -1,36 +0,0 @@
-<!--
- Open MCT Web, Copyright (c) 2014-2015, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT Web is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT Web includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class='top-bar browse abs'>
-    <!-- TO-DO: replace JS placeholders for click actions -->
-    <div class='browse-main bar abs left'>
-        <a class="menu-element btn btn-menu browse-btn" onclick="alert('Not yet functional. This will allow filtering of browsed objects and search context.');">
-            <span class='ui-symbol badge major' href=''>*</span>Browse All<span class='ui-symbol invoke-menu'>v</span>
-        </a>
-        <input type='text' class='control filter' name='filter-available'/>
-        <a class='icon icon-filter ui-symbol' onclick="alert('Not yet functional. This will initiate a search.');">M</a>
-    </div>
-    <div class='icon-buttons-main bar abs right'>
-        <a class='ui-symbol icon major alert' onclick="alert('Not yet functional. This will allow updating of domain objects that need to be refreshed.');">!<span id='alert-actions-menu' class='ui-symbol invoke-menu'>v</span></a>
-        <!--a class='ui-symbol icon major profile' href=''>P<span id='profile-actions-menu' class='ui-symbol invoke-menu'>v</span></a-->
-        <a class='ui-symbol icon major settings' onclick="alert('Not yet functional. This will allow access to application configuration settings.');">G<span id='settings-actions-menu' class='ui-symbol invoke-menu'>v</span></a>
-    </div>
-</div>

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

@@ -34,13 +34,13 @@
     </div>
 </div>
 <div class="abs bottom-bar">
-    <a class='btn lg major'
+    <a class='s-btn major'
-       href=''
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
     </a>
-    <a class='btn lg subtle' href='' ng-click="ngModel.cancel()">
+    <a class='s-btn'
+       ng-click="ngModel.cancel()">
         Cancel
     </a>
 </div>

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

@@ -35,7 +35,7 @@
     <div class="abs bottom-bar">
         <a ng-repeat="option in ngModel.dialog.options"
            href=''
-           class="btn lg"
+           class="s-btn 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='btn'
+        <a class='s-btn'
            ng-click="currentAction.perform()"
            ng-class="{ major: $index === 0, subtle: $index !== 0 }">
             {{currentAction.getMetadata().name}}

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

@@ -29,7 +29,7 @@
 	font-size: 0.75rem;
 
 	&:hover {
-		.l-autoflow-header .l-btn.change-column-width {
+		.l-autoflow-header .s-btn.change-column-width {
 			@include trans-prop-nice-fade(50ms);
 			opacity: 1;
 		}
@@ -45,7 +45,7 @@
 		span {
 			vertical-align: middle;
 		}
-		.l-btn.change-column-width {
+		.s-btn.change-column-width {
 			@include trans-prop-nice-fade(500ms);
 			opacity: 0;
 		}

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

@@ -49,6 +49,7 @@ $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
 $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.2);
+$colorInvokeMenu: #fff;
 // Menu colors
 $colorMenuBg: lighten($colorBodyBg, 23%);
 $colorMenuFg: lighten($colorMenuBg, 70%);
@@ -105,7 +106,7 @@ $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 // Overlay
 $ovrTopBarH: 60px;
-$ovrFooterH: 40px;
+$ovrFooterH: 30px;
 $overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
@@ -125,7 +126,7 @@ $tabularHeaderH: 22px; //18px
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 3px;
 // Imagery
-$imageMainControlBarH: 22px;
+$imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
 $imageThumbsWrapperH: $imageThumbsD * 1.4;
 $imageThumbPad: 1px;

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

@@ -54,7 +54,7 @@
 	display: inline-block;
 }
 
-.btn-menu .invoke-menu,
+.s-menu .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }

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

@@ -19,27 +19,19 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@import "compass";
-@import "compass/reset";
-@import "compass/css3";
-@import "compass/utilities";
-
-@import "mixins";
-@import "forms/mixins";
-@import "mobile/mixins";
-
 @import "effects";
 @import "global";
 @import "fonts";
-@import "user-environ/layout";
-@import "mobile/layout";
-@import "fixed-position";
 @import "about";
 @import "text";
 @import "icons";
 @import "limits";
 @import "data-status";
-@import "lists/tabular";
+@import "helpers/bubbles";
+@import "helpers/splitter";
+@import "helpers/wait-spinner";
+@import "messages";
+@import "properties";
 
 /********************************* CONTROLS */
 @import "controls/breadcrumb";
@@ -50,7 +42,6 @@
 @import "controls/menus";
 @import "controls/time-controller";
 @import "mobile/controls/menus";
-@import "edit/editor";
 
 /********************************* FORMS */
 @import "forms/elems";
@@ -62,13 +53,14 @@
 @import "forms/validation";
 @import "forms/filter";
 
-@import "plots/plots-main";
+/********************************* USER ENVIRON */
+@import "user-environ/layout";
+@import "mobile/layout";
+@import "edit/editor";
 @import "search/search";
 @import "mobile/search/search";
 @import "overlay/overlay";
 @import "mobile/overlay/overlay";
-
-/********************************* USER ENVIRON */
 @import "tree/tree";
 @import "mobile/tree";
 @import "user-environ/frame";
@@ -76,14 +68,10 @@
 @import "user-environ/bottom-bar";
 @import "user-environ/tool-bar";
 
-/********************************* HELPERS */
-@import "helpers/bubbles";
-@import "helpers/splitter";
-@import "helpers/wait-spinner";
-@import "messages";
-@import "properties";
-
 /********************************* VIEWS */
+@import "fixed-position";
+@import "lists/tabular";
+@import "plots/plots-main";
 @import "iframe";
 @import "hide-non-functional";
 @import "views";

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

@@ -153,28 +153,22 @@
     $fgBase: lighten($fg, $ltnRatio);
     $gradC1: lighten($bgBase, $gradRatio);
     $gradC2: $bgBase;
-    $cInvokeBase: lighten($gradC1, $ltnRatio*2);
+    $cInvokeBase: #fff;
 
     @include background-image(linear-gradient($gradC1, $gradC2));
     @include border-radius($controlCr);
     @include box-sizing(border-box);
     @include boxShdwSubtle();
     border: none;
-    border-top: 1px solid lighten($gradC1, 2%);
+    //border-top: 1px solid lighten($gradC1, 2%);
     color: $fg;
     display: inline-block;
     @if $hover == true {
         &:not(.disabled):hover {
             @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
             color: lighten($fgBase, $hovRatio);
-            &.btn-menu .invoke-menu {
-                color: lighten($cInvokeBase, $hovRatio);
-            }
         }
     }
-    &.btn-menu .invoke-menu {
-        color: $cInvokeBase;
-    }
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
@@ -216,17 +210,21 @@
     }
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
+	// $ic: Icon color
     @include containerSubtle($bg, $fg, true);
-}
+	.icon {
-
+		color: $ic;
-@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	}
-    // No longer should be used; use btnSubtle instead
+	&:not(.disabled) {
-    //@include containerSubtle($bg, $fg, true);
+		&:not(.paused) {
-    //@include background-image(linear-gradient(lighten($bg, 20%), $bg));
+			&:hover {
-    /*	&:not(.disabled):hover {
+				.icon {
-            @include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
+					color: lighten($ic, $ltGamma);
-        }*/
+				}
+			}
+		}
+	}
 }
 
 @mixin boxIncised($sVal: 0.6) {

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

@@ -23,8 +23,7 @@ $baseRatio: 1.5;
 $pad: $interiorMargin * $baseRatio;
 
 /******* LAYOUT AND SIZING */
-.btn,
+/*.l-btn {
-.l-btn {
 	@include user-select(none);
 	//line-height: 1.5em; // Was 1.25em
 	line-height: 150%;
@@ -35,14 +34,13 @@ $pad: $interiorMargin * $baseRatio;
 		$h: $ueTopBarH; // - $interiorMargin;
 		height: $h;
 		line-height: $h - 2;
-		//padding: 0 $pad * 6 0 $pad;
 		padding: 0 $pad * 3;
 	}
 	&.create-btn {
+		font-size: 1em;
 		&:before {
 			content:"+";
 			font-family: symbolsfont;
-			font-size: 0.8em;
 		}
 		.menu {
 			margin-left: $pad * -1;
@@ -57,105 +55,109 @@ $pad: $interiorMargin * $baseRatio;
 	&.vsm {
 		padding: 0 ($pad / $baseRatio) / 2;
 	}
-}
+}*/
 
 /*********************************** STYLE STYLES */
-.btn,
 .s-btn {
-	$base: lighten($colorBodyBg, 20%); // Moved to s-btn
+	$base: lighten($colorBodyBg, 20%);
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
 	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
+	@include user-select(none);
+	//@include containerSubtle($colorBodyBg, $colorBodyFg, true);
 	cursor: pointer;
-	//line-height: 1.2em;
 	text-decoration: none;
-	&.major {
+	height: $btnStdH;
-		$bg: $colorKey;
+	line-height: $btnStdH;
-		@include btnSubtle($bg);
+	padding: 0 $pad;
-		$fg: lighten($bg, 50%);
-		color: $fg;
-		&:hover {
-			@include btnSubtle(lighten($bg, 5%), $fg);
-			//color: $fg;
-		}
-		.invoke-menu {
-			color: $fg;
-		}
-	}
-	&.subtle {
-		@include btnSubtle($base, lighten($base, 40%));
-	}
-	&.very-subtle,
-	&.s-very-subtle {
-		@include containerSubtle($colorBodyBg, $colorBodyFg, true);
-		&.paused {
-			@include containerSubtle($colorPausedBg, $colorPausedFg, true);
-			.icon:before {
-				content:"\0000EF";
-			}
-		}
-	}
-}
 
-.icon-btn,
+		font-size: 0.7rem;
-.s-icon-btn {
-	@extend .s-btn;
-	font-size: 1em;
 	.icon {
+		font-size: 0.8rem;
 		color: $colorKey;
 	}
+
+	.title-label {
+		vertical-align: top;
+	}
+
+	&.sm {
+		padding: 0 $pad / $baseRatio;
+	}
+	&.vsm {
+		padding: 0 ($pad / $baseRatio) / 2;
+	}
+
+	&:not(.major) {
+		@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
+	}
+
+	&.major {
+		$bg: $colorKey;
+		$fg: lighten($bg, 70%);
+		@include btnSubtle($bg, $fg, $fg);
+	}
+
 	&.paused {
-		.icon {
+		@include btnSubtle($colorPausedBg, $colorPausedFg, $colorPausedFg);
-			color: $colorPausedFg;
+		.icon:before {
-		}
+			content: "\0000EF";
-	}
-
-	&:not(.disabled) {
-		&:not(.paused) {
-			&:hover {
-				.icon {
-					color: lighten($colorKey, $ltGamma);
-				}
-			}
-		}
-	}
-
-	&.labeled {
-		padding: 0 $pad/2;
-		.icon {
-			//font-size: 1.5em;
-		}
-		.title-label {
-			margin-left: $interiorMargin;
 		}
 	}
 
 	&.pause-play {
-/*		&.paused {
+		/*
-			.icon {
+			&.paused {
-				@include pulse(500ms);
+				.icon {
+					@include pulse(500ms);
+				}
 			}
-		}*/
+		*/
 		.icon:before {
-			content:"\0000F1";
+			content: "\0000F1";
 		}
 	}
 
 	&.show-thumbs {
 		.icon:before {
-			content:"\000039";
+			content: "\000039";
 		}
 	}
 }
 
+.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
+	//@include test(red);
+	font-size: 0; // Remove space between s-btn elements due to white space in markup
+
+	.s-btn {
+		@include border-radius(0);
+		margin-left: 1px;
+	}
+
+	.first {
+		.s-btn {
+			@include border-left-radius($controlCr);
+			margin-left: 0;
+		}
+	}
+
+	.last {
+		.s-btn {
+			@include border-right-radius($controlCr);
+		}
+	}
+}
 /*********************************** LAYOUT STYLES */
-span.btn,
+/*
-span.btn span,
+
-span.l-btn,
+span.s-btn,
-span.l-btn span,
+span.s-btn span,
-a.btn,
+a.s-btn,
-a.btn span,
+a.s-btn span,
-a.l-btn,
+a.s-btn,
-a.l-btn span {
+a.s-btn span {
 	display: inline-block;
-}
+}
+*/

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

@@ -100,22 +100,6 @@
 	}
 }
 
-.btn-bar {
-	//	position: relative;
-/*	.btn,
-	.btn-set,
-	.t-btn {
-		display: inline-block;
-		//		margin-left: $interiorMargin;
-	}
-	.btn,
-	.t-btn {
-		&:first-child {
-			//			margin-left: 0;
-		}
-	}*/
-}
-
 .l-composite-control {
 	vertical-align: middle;
 	&.l-checkbox {
@@ -153,42 +137,6 @@
 	font-size: 0.7rem;
 }
 
-/*
-.btn-set {
-	// Buttons that have a very tight conceptual grouping - no internal space between them.
-	display: inline-block;
-	position: relative;
-	.btn,
-	.t-btn {
-		@include border-radius(0);
-		border-left: 1px solid lighten($colorBodyBg, 20%);
-		margin-left: 0;
-		&:first-child {
-			border-left: none;
-			@include border-left-radius($controlCr);
-		}
-		&:last-child {
-			@include border-right-radius($controlCr);
-		}
-	}
-}
-*/
-
-.object-browse-bar .btn,
-.object-browse-bar .t-btn,
-.object-browse-bar .view-switcher,
-.top-bar .buttons-main .btn,
-.top-bar .buttons-main .t-btn,
-.top-bar .view-switcher,
-.tool-bar .btn,
-.tool-bar .t-btn {
-	$h: $btnToolbarH;
-	display: inline-block;
-	font-size: $h * $btnFontSizeToH;
-	line-height: 200%;
-	vertical-align: top;
-}
-
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);
 	$d: $formRowCtrlsH;
@@ -256,7 +204,7 @@ label.checkbox.custom {
 	}
 }
 
-.btn-menu label.checkbox.custom {
+.s-menu label.checkbox.custom {
 	margin-left: 5px;
 }
 
@@ -267,84 +215,6 @@ label.checkbox.custom {
 	}
 }
 
-.btn-menu {
-	$h: 20px;
-	$p: $interiorMarginSm * 2;
-	$c: $colorBodyFg;
-	@include btnSubtle($colorBodyBg);
-	/*	height: $h;
-		line-height: $h;
-		&.dropdown {
-			padding-left: $p;
-			padding-right: $p;
-		}*/
-
-	&:not(.disabled):hover {
-		color: lighten($c, 20%);
-	}
-
-	/*	&.context-available {
-			// An element like the invoke-menu triangle;
-			// Indicates that this element has a dropdown menu available;
-			// Currently unused
-			$c: $colorKey;
-			color: $c;
-			padding: 0 5px;
-			&:hover {
-				color: lighten($c, 10%);
-			}
-		}*/
-
-	span.l-click-area {
-		// In markup, this element should not enclose anything.
-		@extend .abs;
-	}
-
-	.type-icon {
-		//margin-right: $interiorMargin;
-	}
-
-	.name {
-		margin-left: $interiorMargin;
-	}
-	.menu {
-		//		margin-left: (-1 * $p);
-		position: absolute;
-		left: 0;
-		text-align: left;
-		.ui-symbol.icon {
-			width: 12px;
-		}
-	}
-}
-
-.top-bar .btn-menu {
-	$h: $btnStdH; //$ueTopBarBtnH; // 35px
-	$p: 10px;
-	$badgeM: $interiorMargin;
-	$badgeD: $h - ($badgeM * 2);
-	//height: $h;
-	//line-height: $h;
-	//padding-right: 10px;
-	&.browse-btn {
-		margin-right: $interiorMargin;
-		padding-left: $badgeD + $badgeM * 2;
-		.badge {
-			@include border-radius($controlCr * 1.5);
-			display: block;
-			font-size: 1em;
-			line-height: $badgeD;
-			position: absolute;
-			top: $badgeM;
-			left: $badgeM;
-			bottom: $badgeM;
-			right: auto;
-			width: $badgeD;
-			height: auto;
-		}
-	}
-}
-
 .context-available {
 	$c: $colorKey;
 	color: $c;
@@ -355,9 +225,6 @@ label.checkbox.custom {
 
 .view-switcher {
 	@include trans-prop-nice-fade($controlFadeMs);
-	.type-icon {
-		//vertical-align: top;
-	}
 }
 
 /******************************************************** OBJECT-HEADER */

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

@@ -19,7 +19,52 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******************************************************** MENUS */
+/******************************************************** MENU BUTTONS */
+.s-menu {
+	// Formerly .btn-menu
+	@extend .s-btn;
+	span.l-click-area {
+		// In markup, this element should not enclose anything.
+		@extend .abs;
+	}
+
+	.icon {
+		font-size: 120%;
+	}
+
+	.title-label {
+		margin-left: $interiorMarginSm;
+	}
+
+	&:after {
+		// Adds the downward facing arrow element
+		color: rgba($colorInvokeMenu, 0.2);
+		content: '\76';
+		display: inline-block;
+		font-family: 'symbolsfont';
+		margin-left: $interiorMarginSm;
+		@include text-shadow(none);
+		vertical-align: top;
+	}
+	&.create-btn {
+		.title-label {
+			font-size: 1rem;
+		}
+		&:after {
+			color: rgba($colorInvokeMenu, 0.5);
+		}
+	}
+
+	.menu {
+		left: 0;
+		text-align: left;
+		.ui-symbol.icon {
+			width: 12px;
+		}
+	}
+}
+
+/******************************************************** MENUS THEMSELVES */
 .menu-element {
 	$bg: lighten($colorBodyBg, 5%);
 	$bgHover: lighten($bg, 20%);

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

@@ -1,40 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "compass";
-@import "compass/css3";
-    @import "compass/css3/border-radius";
-    @import "compass/css3/opacity";
-@import "compass/utilities";
-
-@import "constants";
-@import "mobile/constants";
-@import "mixins";
-@import "forms/mixins";
-@import "mobile/mixins";
-@import "forms/elems";
-@import "forms/textarea";
-@import "forms/text-input";
-@import "forms/selects";
-@import "forms/channel-selector";
-@import "forms/datetime";
-@import "forms/validation";
-@import "forms/filter";

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

@@ -1,33 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "compass";
-@import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/opacity";
-@import "compass/utilities";
-
-@import "constants";
-@import "mobile/constants";
-@import "mixins";
-@import "mobile/mixins";
-@import "items/item";
-@import "mobile/item";

platform/commonUI/general/res/sass/mobile/_layout.scss

@@ -119,7 +119,7 @@
         }
         .view-switcher {
             margin-right: 0 !important;
-            .name {
+            .title-label {
                 // Hide the name in mobile
                 display: none;
             }

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

@@ -63,8 +63,20 @@
         //font-size: 1em;
         height: $ovrFooterH;
         text-align: right;
-        .btn {
+        .s-btn {
-            margin-left: 10px;
+	        $l: 15%;
+	        @include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
+	        font-size: 95%;
+	        height: $ovrFooterH;
+	        line-height: $ovrFooterH;
+            margin-left: $interiorMargin;
+	        padding: 0 $interiorMargin * 3;
+	        &.major {
+		        @extend .s-btn.major;
+		        &:hover {
+			        @extend .s-btn.major:hover;
+		        }
+	        }
         }
     }
     .contents.l-dialog {

platform/commonUI/general/res/sass/theme-espresso.scss

@@ -19,7 +19,18 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+@import "compass";
+@import "compass/reset";
+@import "compass/css3";
+@import "compass/utilities";
+
 @import "constants";
 @import "mobile/constants";
+
+@import "mixins";
+@import "forms/mixins";
+@import "mobile/mixins";
+
 @import "themes/theme-espresso";
 @import "main";

platform/commonUI/general/res/sass/themes/_theme-espresso.scss

@@ -21,4 +21,10 @@
  *****************************************************************************/
 /* CONSTANTS */
 //$colorBodyBg: #fff;
-//$colorBodyFg: #666;
+//$colorBodyFg: #666;
+
+/*
+@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	background: red;
+	display: inline-block;
+}*/

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

@@ -47,6 +47,8 @@
 	}
 	&.frame-template {
 		.view-switcher {
+			font-size: 80%;
+			height: $ohH;
 			line-height: $ohH;
 			z-index: 10;
 		}
@@ -64,7 +66,7 @@
 	}
 	.view-switcher {
 		// Hide the name when the view switcher is in a frame context
-		.name {
+		.title-label {
 			display: none;
 		}
 	}

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

@@ -299,19 +299,15 @@
 	}
 }
 
-.object-browse-bar .btn,
+.object-browse-bar .s-btn,
-.object-browse-bar .t-btn,
+.top-bar .buttons-main .s-btn,
-.object-browse-bar .view-switcher,
+.top-bar .s-menu,
-.top-bar .buttons-main .btn,
+.tool-bar .s-btn,
-.top-bar .buttons-main .t-btn,
+.tool-bar .s-menu {
-.top-bar .view-switcher,
+	$h: $btnToolbarH;
-.tool-bar .btn,
+	height: $h;
-.tool-bar .t-btn {
+	line-height: $h;
-    $h: $btnToolbarH;
+	vertical-align: top;
-    display: inline-block;
-    font-size: $h * $btnFontSizeToH;
-    line-height: 200%;
-    vertical-align: top;
 }
 
 .object-browse-bar,

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="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
+<a class="s-btn key-{{parameters.action.getMetadata().key}}"
    ng-class="{ labeled: parameters.labeled }"
    title="{{parameters.action.getMetadata().description}}"
    ng-click="parameters.action.perform()">

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

@@ -20,17 +20,16 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="ActionGroupController">
-
     <span ng-repeat="action in ungrouped">
-        <mct-include key="'action-button'" parameters="{ action: action }">
+        <mct-include key="'action-button'" parameters="{ action: action }"></mct-include>
-        </mct-include>
     </span>
-
+    <span class="l-btn-set" ng-repeat="group in groups">
-    <span class="btn-set" ng-repeat="group in groups">
         <span ng-repeat="action in group">
-            <mct-include key="'action-button'" parameters="{ action: action }">
+            <mct-include key="'action-button'"
+                         parameters="{ action: action }"
+                         ng-class="{ first:$index == 0, last:$index == group.length - 1 }"
+	            >
             </mct-include>
         </span>
     </span>
-
 </span>

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

@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
     <div
-	    class="view-switcher menu-element s-btn l-btn btn-menu dropdown click-invoke"
+	    class="view-switcher menu-element s-menu"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >
@@ -33,11 +33,9 @@
 	        ></span>
 
         <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
-        <span class="name">{{ngModel.selected.name}}</span>
+        <span class="title-label">{{ngModel.selected.name}}</span>
-        <span class='ui-symbol invoke-menu'>v</span>
 
-
+        <div class="menu" ng-show="toggle.isActive()">
-        <div class="menu dropdown" ng-show="toggle.isActive()">
             <ul>
                 <li ng-repeat="option in view"
                     ng-click="ngModel.selected = option; toggle.setState(false)">

platform/commonUI/general/res/templates/menu/context-menu.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
-    <div class="menu context-menu dropdown">
+    <div class="menu context-menu">
         <ul>
 
             <li ng-repeat="menuAction in menuActions"

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

@@ -10,7 +10,7 @@
             ng-show="false && showLocalControls"
              >
             <a
-               class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+               class="s-btn"
                ng-click="plot.stepBackPanZoom()"
                ng-show="1"
                title="Restore previous pan/zoom">
@@ -18,7 +18,7 @@
             </a>
 
             <a
-               class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+               class="s-btn"
                ng-click="plot.unzoom()"
                ng-show="1"
                title="Reset pan/zoom">
@@ -36,7 +36,7 @@
         <div class="l-image-main-controlbar l-flex bar">
             <div class="left">
                 <a
-                    class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"
+                    class="s-btn show-thumbs sm hidden"
                     ng-click="showThumbsBubble = (showThumbsBubble)? false:true"
                     ><span class="ui-symbol icon"></span></a>
                 <span class="l-timezone">{{imagery.getZone()}}</span>
@@ -45,7 +45,7 @@
             </div>
             <div class="right">
                 <a
-                    class="t-btn l-btn s-btn s-icon-btn s-very-subtle pause-play sm"
+                    class="s-btn pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
                     ng-class="{ paused: imagery.paused() }"
                     ><span class="ui-symbol icon"></span></a>
@@ -53,10 +53,10 @@
                    ng-if="imagery.getImageUrl()"
                    target="_blank"
                    title="Open image in new tab."
-                   class="t-btn l-btn s-btn s-icon-btn s-very-subtle sm">
+                   class="s-btn">
                     <span class="ui-symbol icon">y</span></a>
                 <a href=""
-                    class="l-btn s-btn s-icon-btn l-mag s-mag ui-symbol vsm"
+                    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."

platform/features/layout/bundle.json

@@ -85,7 +85,7 @@
                                 },
                                 {
                                     "property": "fill",
-                                    "glyph": "\u00E0",
+                                    "glyph": "\ue606",
                                     "control": "color"
                                 },
                                 {

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

@@ -105,23 +105,21 @@
                  ng-show="representation.showControls"
                  style="position: absolute; top: 8px; right: 8px;">
 
-                <a href=""
+                <a class="s-btn"
-                   class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
                    ng-click="plot.stepBackPanZoom()"
                    ng-show="plot.isZoomed()"
                    title="Restore previous pan/zoom">
                     <span class="ui-symbol icon">&lt;</span>
                 </a>
 
-                <a href=""
+                <a class="s-btn"
-                   class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
                    ng-click="plot.unzoom()"
                    ng-show="plot.isZoomed()"
                    title="Reset pan/zoom">
                     <span class="ui-symbol icon">I</span>
                 </a>
 
-                <div class="menu-element btn s-very-subtle btn-menu dropdown menus-to-left"
+                <div class="menu-element s-menu menus-to-left"
                      ng-if="plot.getModeOptions().length > 1"
                      ng-controller="ClickAwayController as toggle">
 
@@ -129,9 +127,8 @@
 
                     <span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
                     <span>{{plot.getMode().name}}</span>
-                    <span class='ui-symbol invoke-menu'>v</span>
 
-                    <div class="menu dropdown" ng-show="toggle.isActive()">
+                    <div class="menu" ng-show="toggle.isActive()">
                         <ul>
                             <li ng-repeat="option in plot.getModeOptions()">
                                 <a href="" ng-click="plot.setMode(option); toggle.setState(false)">

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="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+<a class="s-btn"
    ng-class="{ labeled: structure.text }"
    ng-click="structure.click()">
     <span class="ui-symbol icon">

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

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div
-	class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke t-color-palette"
+	class="t-btn l-btn s-btn s-icon-btn s-menu menu-element t-color-palette"
     ng-controller="ClickAwayController as toggle"
 	>
 
@@ -30,11 +30,9 @@
     <span class="title-label" ng-if="structure.text">
         {{structure.text}}
     </span>
-    <span class='ui-symbol invoke-menu' ng-if="!structure.text">v</span>
-
 
     <div
-	    class="menu dropdown l-color-palette"
+	    class="menu l-color-palette"
         ng-controller="ColorController as colors"
         ng-show="toggle.isActive()"
 	    >

platform/forms/res/templates/controls/menu-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.
 -->
-<div class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
+<div class="s-menu menu-element"
      ng-controller="ClickAwayController as toggle">
 
     <span class="l-click-area" ng-click="toggle.toggle()"></span>
@@ -28,12 +28,8 @@
     <span class="title-label" ng-if="structure.text">
         {{structure.text}}
     </span>
-    <span class='ui-symbol invoke-menu'
-          ng-if="!structure.text">
-        v
-    </span>
 
-    <div class="menu dropdown" ng-show="toggle.isActive()">
+    <div class="menu" ng-show="toggle.isActive()">
         <ul>
             <li ng-click="structure.click(option.key); toggle.setState(false)" ng-repeat="option in structure.options">
                 <a href="">

platform/search/res/templates/search.html

@@ -105,7 +105,7 @@
 
         <!-- Load more button --> 
         <div ng-if="controller.areMore()">
-            <a class="load-more-button btn very-subtle vsm"
+            <a class="load-more-button s-btn vsm"
                     ng-click="controller.loadMore()"> 
                 More Results
             </a>