Getting vue-toolbar reverted back to latestvue-toolbar

- Merging this branch with vue-layout may cause conflicts;

3 files changed, 153 insertions, 117 deletions

diff --git a/src/styles-new/_controls.scss b/src/styles-new/_controls.scss
index ca81f3be9..85e105399 100644
--- a/src/styles-new/_controls.scss
+++ b/src/styles-new/_controls.scss
@@ -1,10 +1,35 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, 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.
+ *****************************************************************************/
+
+// VERSION MANUALLY RESTORED FROM VUE-LAYOUT
+
 /******************************************************** PLACEHOLDERS */
 @mixin cControl() {
-    @include userSelectNone();
     $fs: 1em;
+    @include userSelectNone();
     display: inline-flex;
     align-items: center;
-    justify-content: start;
+    justify-content: center;
+    overflow: hidden;
 
     &:before,
     &:after {
@@ -18,6 +43,7 @@
     }
 
     [class*="__label"] {
+        @include ellipsize();
         display: block;
         line-height: $fs; // Remove effect on top and bottom padding
         font-size: $fs;
@@ -29,8 +55,8 @@
     background: $colorBtnBg;
     border-radius: $controlCr;
     color: $colorBtnFg;
-    padding: nth($btnPad, 1) nth($btnPad, 2);
     cursor: pointer;
+    padding: nth($btnPad, 1) nth($btnPad, 2);
 
     &:hover {
         background: $colorBtnBgHov;
@@ -165,109 +191,6 @@ button {
     }
 }
 
-.c-ctrl-wrapper {
-    @include cCtrlWrapper();
-}
-
-/********* Toolbar */
-.c-toolbar,
-.c-toolbar .c-ctrl-wrapper {
-    display: flex;
-    align-items: stretch;
-}
-
-.c-toolbar {
-    height: 24px; // Need to standardize the height
-
-    .c-click-icon {
-        @include cControl();
-        $pLR: $interiorMargin - 1;
-        $pTB: 2px;
-        color: $colorBodyFg;
-        padding: $pTB $pLR;
-
-        &--swatched {
-            padding-bottom: floor($pTB / 2);
-            width: 2em; // Standardize the width
-        }
-
-        &[class*='--caution'] {
-            &:before {
-                color: $colorBtnCautionBg;
-            }
-
-            &:hover {
-                background: rgba($colorBtnCautionBgHov, 0.2);
-                :before {
-                    color: $colorBtnCautionBgHov;
-                }
-            }
-        }
-    }
-
-    .c-labeled-input {
-        font-size: 0.9em;
-        width: 5em;
-
-        + .c-labeled-input {
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
-/********* Button Sets */
-.c-button-set {
-    // When one set is adjacent to another, provides a divider between
-
-    display: inline-flex;
-    flex: 0 0 auto;
-
-    > * {
-        // Assume buttons are immediate descendants
-        flex: 0 0 auto;
-
-        + * {
-            // margin-left: $interiorMarginSm;
-        }
-    }
-
-    + .c-button-set {
-        $m: $interiorMargin;
-        $b: 1px;
-        &:before {
-            content: '';
-            display: block;
-            width: $m + $b; // Allow for border
-            border-right: $b solid $colorInteriorBorder;
-            margin-right: $m;
-        }
-    }
-
-    &[class*='--strip'] {
-        // Buttons are smashed together with minimal margin
-        // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
-        // c-click-icons get grouped more closely together
-        &[class^="c-button"] {
-            // Only apply the following to buttons that have background, eg. c-button
-            border-radius: 0;
-
-            + * {
-                margin-left: 1px;
-            }
-
-            &:first-child {
-                border-top-left-radius: $controlCr;
-                border-bottom-left-radius: $controlCr;
-            }
-
-            &:last-child {
-                border-top-right-radius: $controlCr;
-                border-bottom-right-radius: $controlCr;
-            }
-        }
-    }
-}
-
 /******************************************************** DISCLOSURE CONTROLS */
 /********* Disclosure Button */
 // Provides a downward arrow icon that when clicked displays a context menu
@@ -349,13 +272,23 @@ button {
     // An input used in the Toolbar
     // Assumes label is before the input
     @include cControl();
-    @include labeledInput();
 
     input {
         margin-left: $interiorMarginSm;
     }
 }
 
+/******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
+.c-hyperlink {
+    &--link {
+        color: $colorKey;
+    }
+
+    &--button {
+        @include cButton();
+    }
+}
+
 /******************************************************** MENUS */
 @mixin menuOuter() {
     border-radius: $basicCr;
@@ -372,6 +305,7 @@ button {
     color: $colorMenuFg;
     li {
         @include cControl();
+        justify-content: start;
         color: $colorMenuFg;
         display: flex;
         padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
@@ -511,3 +445,108 @@ button {
         }
     }
 }
+
+/******************************************************** TOOLBAR */
+.c-ctrl-wrapper {
+    @include cCtrlWrapper();
+}
+
+.c-toolbar,
+.c-toolbar .c-ctrl-wrapper {
+    display: flex;
+    align-items: stretch;
+}
+
+.c-toolbar {
+    height: 24px; // Need to standardize the height
+
+    .c-click-icon {
+        @include cControl();
+        $pLR: $interiorMargin - 1;
+        $pTB: 2px;
+        color: $colorBodyFg;
+        padding: $pTB $pLR;
+
+        &--swatched {
+            padding-bottom: floor($pTB / 2);
+            width: 2em; // Standardize the width
+        }
+
+        &[class*='--caution'] {
+            &:before {
+                color: $colorBtnCautionBg;
+            }
+
+            &:hover {
+                background: rgba($colorBtnCautionBgHov, 0.2);
+                :before {
+                    color: $colorBtnCautionBgHov;
+                }
+            }
+        }
+    }
+
+    .c-labeled-input {
+        font-size: 0.9em;
+        input[type='number'] {
+            width: 40px; // Number input sucks and must have size set using this method
+        }
+
+        + .c-labeled-input {
+            margin-left: $interiorMargin;
+        }
+    }
+}
+
+/********* Button Sets */
+.c-button-set {
+    // When one set is adjacent to another, provides a divider between
+
+    display: inline-flex;
+    flex: 0 0 auto;
+
+    > * {
+        // Assume buttons are immediate descendants
+        flex: 0 0 auto;
+
+        + * {
+            // margin-left: $interiorMarginSm;
+        }
+    }
+
+    + .c-button-set {
+        $m: $interiorMargin;
+        $b: 1px;
+        &:before {
+            content: '';
+            display: block;
+            width: $m + $b; // Allow for border
+            border-right: $b solid $colorInteriorBorder;
+            margin-right: $m;
+        }
+    }
+
+    &[class*='--strip'] {
+        // Buttons are smashed together with minimal margin
+        // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
+        // c-click-icons get grouped more closely together
+        &[class^="c-button"] {
+            // Only apply the following to buttons that have background, eg. c-button
+            border-radius: 0;
+
+            + * {
+                margin-left: 1px;
+            }
+
+            &:first-child {
+                border-top-left-radius: $controlCr;
+                border-bottom-left-radius: $controlCr;
+            }
+
+            &:last-child {
+                border-top-right-radius: $controlCr;
+                border-bottom-right-radius: $controlCr;
+            }
+        }
+    }
+}
diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss
index 68eecaf98..426db8c18 100644
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@@ -20,6 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+// VERSION MANUALLY RESTORED FROM VUE-LAYOUT
+
 /************************** VISUALS */
 @mixin ancillaryIcon($d, $c) {
     // Used for small icons used in combination with larger icons,
@@ -233,16 +235,6 @@
     }
 }
 
-@mixin labeledInput() {
-    // A text or numeric input preceded by a label. Mostly used in toolbar.
-
-    input[type='text'],
-    input[type='search'],
-    input[type='number'] {
-        width: 100%;
-    }
-}
-
 /************************** MATH */
 @function percentToDecimal($p) {
     @return $p / 100%;
diff --git a/src/ui/components/layout/Toolbar.vue b/src/ui/components/layout/Toolbar.vue
index 1d97feac1..88eb04278 100644
--- a/src/ui/components/layout/Toolbar.vue
+++ b/src/ui/components/layout/Toolbar.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="c-toolbar">
+        <!-- VERSION MANUALLY RESTORED FROM VUE-LAYOUT -->
         <div class="c-button-set">
             <div class="c-ctrl-wrapper">
                 <div class="c-button--menu js-add-button icon-plus"
@@ -118,6 +119,10 @@
 
         <div class="c-button-set"
              v-if="toolsItemSelected">
+            <toggle-button title="Toggle frame" checked
+                           class="c-click-icon"
+                           inner-class-on="icon-frame-show"
+                           inner-class-off="icon-frame-hide"></toggle-button>
             <toggle-button title="Snap to grid" checked
                     class="c-click-icon"
                     inner-class-on="icon-grid-snap-to"