Migrate styles (#2307)

* Legacy style migration in progress

- Working bottom up, many legacy items commented out. Stopped at
controls/indicators;

* Further migrations and deprecating
- Legacy indicator styles moved;

* WIP Styles migration
- s-button converted to c-button, WIP;
- Other

* Significant progress on migration, but still very WIP

- Mostly constants and overlay styling;
- Also bubbles and splitter;
- TODO: fix tree in overlay and splitter in imagery!

* Fix Summary Widgets UI WIP

- Remove non-working status 'editing' checks;

* Fix Summary Widgets UI WIP

- Remove non-working status 'editing' checks;
- view-control > c-disclosure-triangle;

* Fix Summary Widgets UI WIP

- Markup changes;
- Migrate CSS to styles-new, remove old;

* Fix Summary Widgets UI WIP

- Rule formatting and layout;
- Refinement to _controls / select {} padding;

* Fix Summary Widgets UI WIP

- Toolbar styles made more portable;
- Palette style  migration;
- Very WIP;

* Fix Summary Widgets UI WIP

- Palettes all fixed and functional;
- Conditions layout;
- New c-button--swatched styles;

* Fix Summary Widgets UI WIP

- Clean up code;

* Fix Summary Widgets UI WIP

- Fix button in Test Data area;

* Fix layout in shell left pane due to elements being moved

- Styles fixed and refined;

* Fixed palettes

- Fixed icon palette;
- Significant refinement to general palette styles;

* Significant fixes for Summary Widgets

- Widget editing UI fixed;
- JS cleanups and improvements;
- CSS, JS code cleanup;

* Migrate tree view used in Locator

- Mods to legacy markup;
- Mods to current CSS;
- Removed import of legacy tree CSS in legacy-styles.scss;

* Migrate archetypes

- l-flex-row, l-flex-col, etc. moved to legacy;
- grid-* styles cleaned up and moved, @extends removed;
- WIP on c-object-label, move styles from mct-tree.vue into ObjectLabel
.vue;
- TODO: finish up c-object-label, cleanups in mct-tree.vue;

* Migrate effects and animation mixins

* Object labels, legacy cleanup

- Add and apply .c-object-label for tree node elements;
- Remove legacy class "tree" from markup;
- Tweak color of tree item hover for better contrast in Inspector;

* Fix palettes in Inspector

* Various

- Fix hover color in tree for better mechanics on a variety of bgs;
- Fix object label in Locator tree;
- Remove overlay blocker test color;

* Significant work for Summary Widgets, mctForm, compact form

- Forms in overlay dialogs fixed;
- form, compact-form, other classes migrated into new _forms.scss;
- Fixes for Summary Widgets;
- Theme constants files synced, add form values;
- Removed import of legacy forms/elems SCSS file;

* Migrate various

- Autoflow tabular;
- Datetime;
- Channel selector;
- Form validation;

* Migrate wait spinners, final cleanup

* Remove old src/styles directory

- Remove old Snow and Espresso plugins;
- Remove refs to old Snow and Espresso config'd aliases;

* Update Palette.js

* Update Palette.js

* Removed commented code

* Removed commented code

* Migrate About, startup and splash screen styles

src/ui/components/ObjectLabel.vue

@@ -1,15 +1,48 @@
 <template>
-<a class="c-tree__item__label"
+<a class="c-tree__item__label c-object-label"
     draggable="true"
     @dragstart="dragStart"
     @click="navigateOrPreview"
     :href="objectLink">
-    <div class="c-tree__item__type-icon"
+    <div class="c-tree__item__type-icon c-object-label__type-icon"
         :class="typeClass"></div>
-    <div class="c-tree__item__name">{{ observedObject.name }}</div>
+    <div class="c-tree__item__name c-object-label__name">{{ observedObject.name }}</div>
 </a>
 </template>
 
+<style lang="scss">
+    @import "~styles/sass-base";
+    .c-object-label {
+        // <a> tag and draggable element that holds type icon and name.
+        // Used mostly in trees and lists
+        border-radius: $controlCr;
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        overflow: hidden;
+        padding: $interiorMarginSm;
+        white-space: nowrap;
+
+        &__name {
+            @include ellipsize();
+            display: inline;
+            color: $colorItemTreeFg;
+            width: 100%;
+        }
+
+        &__type-icon {
+            // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
+            display: block;
+            flex: 0 0 auto;
+            font-size: 1.3em;
+            margin-right: $interiorMarginSm;
+            color: $colorItemTreeIcon;
+            width: $treeTypeIconW;
+        }
+    }
+</style>
+
+
 <script>
 
 import ObjectLink from '../mixins/object-link';

src/ui/inspector/Elements.vue

@@ -6,7 +6,7 @@
         @clear="applySearch">
     </Search>
     <div class="c-elements-pool__elements">
-        <ul class="tree c-tree c-elements-pool__tree" id="inspector-elements-tree"
+        <ul class="c-tree c-elements-pool__tree" id="inspector-elements-tree"
             v-if="elements.length > 0">
             <li :key="element.identifier.key" v-for="(element, index) in elements" @drop="moveTo(index)" @dragover="allowDrop">
                 <div class="c-tree__item c-elements-pool__item">

src/ui/inspector/Inspector.vue

@@ -57,6 +57,12 @@
             height: $d;
         }
 
+        .c-tree {
+            // When a tree is in the Inspector, remove scrolling and right pad
+            overflow: visible;
+            padding-right: 0;
+        }
+
         /************************************************************** LEGACY */
         // TODO: refactor when legacy properties markup can be converted
         .inspector-location {

src/ui/layout/Layout.vue

@@ -227,6 +227,14 @@
                 width: 200px;
             }
         }
+
+        &__toolbar {
+            $p: $interiorMargin;
+            background: $editUIBaseColor;
+            border-radius: $basicCr;
+            height: $p + 24px; // Need to standardize the height
+            padding: $p;
+        }
     }
 
     .is-editing {
@@ -239,6 +247,7 @@
             }
         }
     }
+
 </style>
 
 <script>

src/ui/layout/mct-tree.vue

@@ -1,17 +1,16 @@
 <template>
-    <div class="c-tree__wrapper">
-        <div class="l-shell__search">
-            <search class="c-search--major" ref="shell-search"
+    <div class="c-tree-and-search">
+        <div class="c-tree-and-search__search">
+            <search class="c-search" ref="shell-search"
                 :value="searchValue"
                 @input="searchTree"
                 @clear="searchTree">
             </search>
         </div>
-        <div
-            v-if="treeItems.length === 0">
+        <div class="c-tree-and-search__no-results" v-if="treeItems.length === 0">
             No results found
         </div>
-        <ul class="c-tree">
+        <ul class="c-tree-and-search__tree c-tree">
             <tree-item v-for="treeItem in treeItems"
                        :key="treeItem.id"
                        :node="treeItem">
@@ -23,16 +22,34 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
+    .c-tree-and-search {
+        display: flex;
+        flex-direction: column;
+        padding-right: $interiorMarginSm;
+        overflow: auto;
+
+        > * + * { margin-top: $interiorMargin; }
+
+        &__search {
+            flex: 0 0 auto;
+        }
+
+        &__no-results {
+            font-style: italic;
+            opacity: 0.6;
+        }
+
+        &__tree {
+            flex: 1 1 auto;
+            height: 100%;
+        }
+    }
+
     .c-tree {
         @include userSelectNone();
         overflow-x: hidden;
         overflow-y: auto;
-        height: 100%;
-
-        &__wrapper {
-            overflow-y: auto;
-            padding-right: $interiorMarginSm;
-        }
+        padding-right: $interiorMargin;
 
         .c-tree {
             margin-left: 15px;
@@ -59,7 +76,8 @@
                 }
             }
 
-            &.is-navigated-object {
+            &.is-navigated-object,
+            &.is-selected {
                 background: $colorItemTreeSelectedBg;
                 .c-tree__item__type-icon:before {
                     color: $colorItemTreeIconHover;
@@ -86,33 +104,34 @@
                 margin-right: $interiorMarginSm;
             }
 
+            // Object labels in trees
             &__label {
                 // <a> tag that holds type icon and name.
                 // Draggable element.
-                border-radius: $controlCr;
+                /*border-radius: $controlCr;
                 display: flex;
                 align-items: center;
                 flex: 1 1 auto;
                 overflow: hidden;
                 padding: $aPad;
-                white-space: nowrap;
+                white-space: nowrap;*/
             }
 
             &__name {
-                @include ellipsize();
-                display: inline;
+               // @include ellipsize();
+               // display: inline;
                 color: $colorItemTreeFg;
-                width: 100%;
+              //  width: 100%;
             }
 
             &__type-icon {
-                // Type icon. Must be HTML entity to allow inclusion of alias indicator.
-                display: block;
-                flex: 0 0 auto;
-                font-size: 1.3em;
-                margin-right: $interiorMarginSm;
+                // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
+               // display: block;
+             //   flex: 0 0 auto;
+              //  font-size: 1.3em;
+              //  margin-right: $interiorMarginSm;
                 color: $colorItemTreeIcon;
-                width: $treeTypeIconW;
+              //  width: $treeTypeIconW;
             }
 
             &.is-alias {