[Frontend] Initial styling for selectable styling

Fixes #1161
New .s-selectable, .s-hover, .s-selected and .s-moveable classes
New supporting color constants
Markup in layouts, fixed position/panels updated
Removed old commented code

platform/commonUI/general/res/sass/_fixed-position.scss

@@ -21,7 +21,6 @@
 *****************************************************************************/
 .t-fixed-position {
 	&.l-fixed-position {
-		//		@include test(red);
 		position: absolute;
 		top: 0;
 		right: 0;
@@ -35,7 +34,6 @@
 			height: 100%;
 			width: 100%;
 			.l-grid {
-				//				@include test(orange);
 				position: absolute;
 				height: 100%;
 				width: 100%;
@@ -49,11 +47,6 @@
 		position: absolute;
 		border: 1px solid transparent;
 
-		&.s-selected {
-			@include boxShdwLarge();
-			border-color: $colorKey;
-			cursor: move;
-		}
 		&.s-not-selected {
 			opacity: 0.8;
 		}
@@ -76,26 +69,19 @@
 		}
 
 		.l-fixed-position-text {
-			//@include txtShdwSubtle();
 			border: 1px solid transparent;
 			font-size: 0.8rem;
-			$p: 1px; //$interiorMarginSm;
+			$p: 1px;
 			line-height: 100%;
 			&.l-static-text {
-				//				overflow: auto;
 				padding: $p;
 			}
 			&.l-telemetry {
 				.l-elem {
-					//@include absPosDefault($p);
-					//@include absPosDefault(0);
 					box-sizing: border-box;
 					display: block;
 					padding: 2px;
-					//width: 50%;
 					&.l-title {
-						//right: auto;
-						//left: $p;
 						float: none;
 						overflow: hidden;
 						text-overflow: ellipsis;
@@ -103,9 +89,6 @@
 						width: auto;
 					}
 					&.l-value {
-						// @include test(blue);
-						// right: $p;
-						// left: auto;
 						border-radius: $smallCr;
 						$valPad: 5px;
 						float: right;
@@ -125,7 +108,6 @@
 
 	.l-fixed-position-item-handle {
 		$brd: 1px solid $colorKey;
-		//		border-radius: $controlCr;
 		background: rgba($colorKey, 0.5);
 		cursor: crosshair;
 		border: $brd;

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

@@ -65,6 +65,7 @@
 @import "user-environ/frame";
 @import "user-environ/top-bar";
 @import "user-environ/tool-bar";
+@import "user-environ/selecting";
 
 /********************************* VIEWS */
 @import "fixed-position";

platform/commonUI/general/res/sass/edit/_editor.scss

@@ -97,7 +97,7 @@
     .frame.child-frame.panel {
         &:hover {
             @include boxShdwLarge();
-            border-color: $colorKey;
+            border-color: $colorSelectableSelectedPrimary;
             .view-switcher {
                 opacity: 1;
             }

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

@@ -0,0 +1,39 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2016, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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.
+ *****************************************************************************/
+.s-selectable {
+    border: 1px solid transparent;
+
+    &.s-hover {
+        // Styles when hovering over a selectable object
+        border-color: $colorSelectableHov !important;
+    }
+
+    &.s-selected {
+        // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
+        border-color: $colorSelectableSelectedPrimary !important;
+    }
+
+    &.s-moveable {
+        @include boxShdwLarge();
+        cursor: move;
+    }
+}

platform/commonUI/themes/espresso/res/sass/_constants.scss

@@ -63,6 +63,9 @@ $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
 $colorTick: rgba(white, 0.2);
+$colorSelectableSelectedPrimary: $colorKey;
+$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
+$colorSelectableHov: $colorSelectableSelectedSecondary;
 
 // Menu colors
 $colorMenuBg: pullForward($colorBodyBg, 23%);

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

@@ -63,6 +63,9 @@ $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
 $colorTick: rgba(black, 0.2);
+$colorSelectableSelectedPrimary: $colorKey;
+$colorSelectableSelectedSecondary: pushBack($colorSelectableSelectedPrimary, 20%);
+$colorSelectableHov: $colorSelectableSelectedSecondary;
 
 // Menu colors
 $colorMenuBg: pushBack($colorBodyBg, 10%);

platform/features/layout/res/templates/fixed.html

@@ -44,7 +44,7 @@
 
     <!-- Selection highlight, handles -->
     <span ng-if="controller.selected()">
-        <div class="l-fixed-position-item s-selected"
+        <div class="l-fixed-position-item s-selectable s-selected s-moveable"
              mct-drag-down="controller.moveHandle().startDrag(controller.selected())"
              mct-drag="controller.moveHandle().continueDrag(delta)"
              mct-drag-up="controller.moveHandle().endDrag()"

platform/features/layout/res/templates/layout.html

@@ -33,61 +33,28 @@
         </div>
         <!-- Drag handles -->
         <span ng-show="domainObject.hasCapability('editor')">
-
+            <span class="edit-handle edit-move"
-            <span
-                class="edit-handle edit-move"
                   mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
                   mct-drag="controller.continueDrag(delta)"
                   mct-drag-up="controller.endDrag()">
             </span>
-            <!--
-            <span
-                class="edit-handle edit-resize-w"
-                  mct-drag-down="controller.startDrag(childObject.getId(), [1,0], [-1,0])"
-                  mct-drag="controller.continueDrag(delta)"
-                  mct-drag-up="controller.endDrag()">
-            </span>
-            <span
-                class="edit-handle edit-resize-e"
-                  mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [1,0])"
-                  mct-drag="controller.continueDrag(delta)"
-                  mct-drag-up="controller.endDrag()">
-            </span>
 
-            <span
+            <span class="edit-corner edit-resize-nw"
-                class="edit-handle edit-resize-n"
-                  mct-drag-down="controller.startDrag(childObject.getId(), [0,1], [0,-1])"
-                  mct-drag="controller.continueDrag(delta)"
-                  mct-drag-up="controller.endDrag()">
-            </span>
-            <span
-                class="edit-handle edit-resize-s"
-                  mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [0,1])"
-                  mct-drag="controller.continueDrag(delta)"
-                  mct-drag-up="controller.endDrag()">
-            </span>
-            -->
-
-            <span
-                class="edit-corner edit-resize-nw"
                   mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [-1,-1])"
                   mct-drag="controller.continueDrag(delta)"
                   mct-drag-up="controller.endDrag()">
             </span>
-            <span
+            <span class="edit-corner edit-resize-ne"
-                class="edit-corner edit-resize-ne"
                   mct-drag-down="controller.startDrag(childObject.getId(), [0,1], [1,-1])"
                   mct-drag="controller.continueDrag(delta)"
                   mct-drag-up="controller.endDrag()">
             </span>
-            <span
+            <span class="edit-corner edit-resize-sw"
-                class="edit-corner edit-resize-sw"
                   mct-drag-down="controller.startDrag(childObject.getId(), [1,0], [-1,1])"
                   mct-drag="controller.continueDrag(delta)"
                   mct-drag-up="controller.endDrag()">
             </span>
-            <span
+            <span class="edit-corner edit-resize-se"
-                class="edit-corner edit-resize-se"
                   mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [1,1])"
                   mct-drag="controller.continueDrag(delta)"
                   mct-drag-up="controller.endDrag()">