Merge branch 'topic-core-refactor' into misc-ui-4

- Toolbar now with color bg for better tie-in with edit area visually;
- Edit colors refined for Snow theme, WIP;

src/plugins/folderView/components/ListItem.vue

@@ -4,9 +4,8 @@
         @click="navigate">
         <td class="c-list-item__name">
             <a :href="objectLink" ref="objectLink">
-                <div class="c-list-item__type-icon"
+                <div class="c-list-item__type-icon" :class="item.type.cssClass"></div>
-                     :class="item.type.cssClass"></div>
+                <div class="c-list-item__name-value">{{item.model.name}}</div>
-                {{item.model.name}}
             </a>
         </td>
         <td class="c-list-item__type">{{ item.type.name }}</td>
@@ -20,17 +19,24 @@
 
     /******************************* LIST ITEM */
     .c-list-item {
-        &__name {
+        &__name a {
-            @include ellipsize();
+            display: flex;
+
+            > * + * { margin-left: $interiorMarginSm; }
         }
 
         &__type-icon {
+            // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon
             color: $colorKey;
             display: inline-block;
             width: 1em;
             margin-right:$interiorMarginSm;
         }
 
+        &__name-value {
+            @include ellipsize();
+        }
+
         &.is-alias {
             // Object is an alias to an original.
             [class*='__type-icon'] {
@@ -48,7 +54,6 @@
             }
         }
     }
-
 </style>
 
 <script>

src/plugins/folderView/components/ListView.vue

@@ -78,9 +78,12 @@
 
         td {
             $p: floor($interiorMargin * 1.5);
-            font-size: 1.1em;
+            @include ellipsize();
+            line-height: 120%; // Needed for icon alignment
+            max-width: 0;
             padding-top: $p;
             padding-bottom: $p;
+            width: 25%;
 
             &:not(.c-list-item__name) {
                 color: $colorItemFgDetails;

src/plugins/notebook/res/templates/notebook.html

@@ -5,21 +5,17 @@
                 @input="search"
                 @clear="search">
             </search>
-        <div class="c-notebook__controls">
+        <div class="c-notebook__controls ">
-            <div class="select c-notebook__controls__time">
+            <select class="c-notebook__controls__time" v-model="showTime">
-                <select v-model="showTime">
+                <option value="0" selected="selected">Show all</option>
-                    <option value="0" selected="selected">Show all</option>
+                <option value="1">Last hour</option>
-                    <option value="1">Last hour</option>
+                <option value="8">Last 8 hours</option>
-                    <option value="8">Last 8 hours</option>
+                <option value="24">Last 24 hours</option>
-                    <option value="24">Last 24 hours</option>
+            </select>
-                </select>
+            <select class="c-notebook__controls__time" v-model="sortEntries">
-            </div>
+                <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
-            <div class="select c-notebook__controls__sort">
+                <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
-                <select v-model="sortEntries">
+            </select>
-                    <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
-                    <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
-                </select>
-            </div>
         </div>
     </div>
     <div class="c-notebook__drag-area icon-plus"

src/plugins/plot/res/templates/plot-options-edit.html

@@ -41,28 +41,24 @@
                     <div class="grid-cell label"
                          title="The field to be plotted as a value for this series.">Value</div>
                     <div class="grid-cell value">
-                        <div class="select">
+                        <select ng-model="form.yKey">
-                            <select ng-model="form.yKey">
+                            <option ng-repeat="option in yKeyOptions"
-                                <option ng-repeat="option in yKeyOptions"
+                                    value="{{option.value}}"
-                                        value="{{option.value}}"
+                                    ng-selected="option.value == form.yKey">
-                                        ng-selected="option.value == form.yKey">
+                                {{option.name}}
-                                    {{option.name}}
+                            </option>
-                                </option>
+                        </select>
-                            </select>
-                        </div>
                     </div>
                 </li>
                 <li class="grid-row">
                     <div class="grid-cell label"
                          title="The line rendering style for this series.">Line Style</div>
                     <div class="grid-cell value">
-                        <div class="select">
+                        <select ng-model="form.interpolate">
-                            <select ng-model="form.interpolate">
+                            <option value="none">None</option>
-                                <option value="none">None</option>
+                            <option value="linear">Linear interpolate</option>
-                                <option value="linear">Linear interpolate</option>
+                            <option value="stepAfter">Step after</option>
-                                <option value="stepAfter">Step after</option>
+                        </select>
-                            </select>
-                        </div>
                     </div>
                 </li>
                 <li class="grid-row">
@@ -160,15 +156,13 @@
                 <div class="grid-cell label"
                      title="The position of the legend relative to the plot display area.">Position</div>
                 <div class="grid-cell value">
-                    <div class="select">
+                    <select ng-model="form.position">
-                        <select ng-model="form.position">
+                        <option value="hidden">Hidden</option>
-                            <option value="hidden">Hidden</option>
+                        <option value="top">Top</option>
-                            <option value="top">Top</option>
+                        <option value="right">Right</option>
-                            <option value="right">Right</option>
+                        <option value="bottom">Bottom</option>
-                            <option value="bottom">Bottom</option>
+                        <option value="left">Left</option>
-                            <option value="left">Left</option>
+                    </select>
-                        </select>
-                    </div>
                 </div>
             </li>
             <li class="grid-row">
@@ -180,15 +174,13 @@
                 <div class="grid-cell label"
                      title="What to display in the legend when it's collapsed.">When collapsed show</div>
                 <div class="grid-cell value">
-                    <div class="select">
+                    <select ng-model="form.valueToShowWhenCollapsed">
-                        <select ng-model="form.valueToShowWhenCollapsed">
+                        <option value="none">Nothing</option>
-                            <option value="none">nothing</option>
+                        <option value="nearestTimestamp">Nearest timestamp</option>
-                            <option value="nearestTimestamp">nearest timestamp</option>
+                        <option value="nearestValue">Nearest value</option>
-                            <option value="nearestValue">nearest Value</option>
+                        <option value="min">Minimum value</option>
-                            <option value="min">minimum value</option>
+                        <option value="max">Maximum value</option>
-                            <option value="max">maximum value</option>
+                    </select>
-                        </select>
-                    </div>
                 </div>
             </li>
             <li class="grid-row">

src/plugins/telemetryTable/components/table.vue

@@ -34,7 +34,7 @@
     <div class="c-telemetry-table__headers-w js-table__headers-w" ref="headersTable" :style="{ 'max-width': widthWithScroll}">
         <table class="c-table__headers c-telemetry-table__headers">
             <thead>
-                <tr>
+                <tr class="c-telemetry-table__headers__name">
                     <table-column-header
                         v-for="(title, key, headerIndex) in headers"
                         :key="key"
@@ -50,7 +50,7 @@
                         :sortOptions="sortOptions"
                         >{{title}}</table-column-header>
                 </tr>
-                <tr>
+                <tr class="c-telemetry-table__headers__filter">
                     <table-column-header
                         v-for="(title, key, headerIndex) in headers"
                         :key="key"
@@ -214,6 +214,22 @@
         }
     }
 
+    /******************************* EDITING */
+    .is-editing {
+        .c-telemetry-table__headers__name {
+            th[draggable],
+            th[draggable] > * {
+                cursor: move;
+            }
+
+            th[draggable]:hover {
+                $b: $editSelectableColor;
+                background: $b;
+                > * { background: $b; }
+            }
+        }
+    }
+
     /******************************* LEGACY */
     .s-status-taking-snapshot,
     .overlay.snapshot {

src/styles-new/_constants-espresso.scss

@@ -55,7 +55,7 @@ $basicCr: 4px;
 
 // Base colors
 $colorBodyBg: #393939;
-$colorBodyFg: #aaa;
+$colorBodyFg: #aaaaaa;
 $colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #262626;
@@ -65,7 +65,7 @@ $colorStatusBarFg: $colorBodyFg;
 $colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
-$colorKeyHov: #00c0f6;
+$colorKeyHov: #26d8ff;
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
@@ -116,13 +116,16 @@ $editColorBgBase: darken($editColor, $dlSpread);
 $editColorBg: rgba($editColorBgBase, 0.2);
 $editColorFg: lighten($editColor, $dlSpread);
 $editColorHov: lighten($editColor, 20%);
+
 // Canvas
-$editCanvasColorBg: $editColorBg; //#002524;
+$editCanvasColorBg: $editColorBg;
-$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
+$editCanvasColorGrid: rgba($editColorBgBase, 0.4);
+
 // Selectable
 $editSelectableColor: #006563;
 $editSelectableColorFg: lighten($editSelectableColor, 20%);
 $editSelectableColorHov: lighten($editSelectableColor, 10%);
+
 // Selectable selected
 $editSelectableColorSelected: $editSelectableColorHov;
 $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
@@ -222,6 +225,13 @@ $overlayColorFg: $colorMenuFg;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);
 
+// Toolbar
+$toolBarEditColorBg: darken($editColorBgBase, 5%);
+$toolBarEditColorFg: lighten($editColorBgBase, 20%);
+$toolBarEditColorBtnFg: $toolBarEditColorFg;
+$toolBarEditColorBtnBgHover: lighten($toolBarEditColorBg, 10%);
+$toolBarEditColorBtnFgHover: lighten($toolBarEditColorFg, 10%);
+
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #555555;
@@ -371,17 +381,6 @@ $createBtnTextTransform: uppercase;
     box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }
 
-/**************************************************** NOT USED, LEAVE FOR NOW */
+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
-// Slider controls, not in use
+    @include cSelect(linear-gradient(lighten($bg, 5%), $bg), $fg, lighten($bg, 20%), rgba(black, 0.5) 0 0.5px 3px);
-/*
+}
-$sliderColorBase: $colorKey;
-$sliderColorRangeHolder: rgba(black, 0.07);
-$sliderColorRange: rgba($sliderColorBase, 0.2);
-$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: darken($sliderColorBase, 20%);
-$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$sliderColorRangeValHovBg: $sliderColorRange;
-$sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: 15px;
-$sliderKnobR: 2px;
-*/

src/styles-new/_constants-maelstrom.scss

@@ -69,7 +69,7 @@ $colorStatusBarFg: $colorBodyFg;
 $colorStatusBarFgHov: #aaa;
 $colorKey: #0099cc;
 $colorKeyFg: #fff;
-$colorKeyHov: #00c0f6;
+$colorKeyHov: #26d8ff;
 $colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
 $colorKeySelectedBg: $colorKey;
@@ -120,13 +120,16 @@ $editColorBgBase: darken($editColor, $dlSpread);
 $editColorBg: rgba($editColorBgBase, 0.2);
 $editColorFg: lighten($editColor, $dlSpread);
 $editColorHov: lighten($editColor, 20%);
+
 // Canvas
-$editCanvasColorBg: $editColorBg; //#002524;
+$editCanvasColorBg: $editColorBg;
-$editCanvasColorGrid: rgba($editColorBgBase, 0.4); //lighten($editCanvasColorBg, 3%);
+$editCanvasColorGrid: rgba($editColorBgBase, 0.4);
+
 // Selectable
 $editSelectableColor: #006563;
 $editSelectableColorFg: lighten($editSelectableColor, 20%);
 $editSelectableColorHov: lighten($editSelectableColor, 10%);
+
 // Selectable selected
 $editSelectableColorSelected: $editSelectableColorHov;
 $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 30%);
@@ -142,7 +145,7 @@ $colorGridLines: rgba($editColor, 0.2);
 /************************************************** BROWSING */
 $browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.5);
 
 // Icons
 $colorIconAlias: #4af6f3;
@@ -226,6 +229,13 @@ $overlayColorFg: $colorMenuFg;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);
 
+// Toolbar
+$toolBarEditColorBg: darken($editColorBgBase, 5%);
+$toolBarEditColorFg: lighten($editColorBgBase, 20%);
+$toolBarEditColorBtnFg: $toolBarEditColorFg;
+$toolBarEditColorBtnBgHover: lighten($toolBarEditColorBg, 10%);
+$toolBarEditColorBtnFgHover: lighten($toolBarEditColorFg, 10%);
+
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #555555;
@@ -375,6 +385,10 @@ $createBtnTextTransform: uppercase;
     box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }
 
+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
+    @include cSelect(linear-gradient(lighten($bg, 5%), $bg), $fg, lighten($bg, 20%), rgba(black, 0.5) 0 0.5px 3px);
+}
+
 /**************************************************** OVERRIDES */
 .c-frame {
     &:not(.no-frame) {

src/styles-new/_constants-snow.scss

@@ -110,26 +110,29 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 /************************************************** EDITING */
 // Base Colors
 $dlSpread: 20%;
-$editColor: #00c7c3;
+$editColor: #6afdff;
 $editColorAlt: #9971ff;
-$editColorBgBase: darken($editColor, $dlSpread);
+$editColorBgBase: lighten($editColor, 20%);
-$editColorBg: darken($editColor, $dlSpread);
+$editColorBg: $editColor;
-$editColorFg: lighten($editColor, $dlSpread);
+$editColorFg: darken($editColor, $dlSpread);
 $editColorHov: lighten($editColor, 20%);
+
 // Canvas
-$editCanvasColorBg: #e6ffff;
+$editCanvasColorBg: lighten($editColorBgBase, 5%);
-$editCanvasColorGrid: darken($editCanvasColorBg, 10%);
+$editCanvasColorGrid: $editColorBgBase;
+
 // Selectable
-$editSelectableColor: #acdad6;
+$editSelectableColor: #00b3b1;
 $editSelectableColorFg: darken($editSelectableColor, 20%);
-$editSelectableColorHov: darken($editSelectableColor, 10%);
+$editSelectableColorHov: darken($editSelectableColor, 20%);
+
 // Selectable selected
-$editSelectableColorSelected: $editColor;
+$editSelectableColorSelected: #c60; //$editSelectableColorHov;
 $editSelectableColorSelectedFg: lighten($editSelectableColorSelected, 50%);
 $editSelectableColorFg: darken($editSelectableColor, 40%);
 $editSelectableBorder: 1px dotted $editSelectableColor;
 $editSelectableBorderHov: 1px dotted $editColorAlt;
-$editSelectableBorderSelected: 1px solid $editColor;
+$editSelectableBorderSelected: 1px solid $editSelectableColorSelected;
 $editSelectableShdwSelected: rgba($editColor, 0.75) 0 0 0 1px;
 $editMoveableSelectedShdw: rgba($editColor, 0.5) 0 0 10px;
 $editBorderDrilledIn: 1px dashed $editColorAlt;
@@ -138,7 +141,7 @@ $colorGridLines: rgba($editColor, 0.2);
 /************************************************** BROWSING */
 $browseSelectableBorderHov: 1px dotted rgba($colorBodyFg, 0.2);
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.2) 0 0 3px;
-$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.6);
+$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.5);
 
 // Icons
 $colorIconAlias: #4af6f3;
@@ -222,6 +225,13 @@ $overlayColorFg: $colorMenuFg;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1);
 
+// Toolbar
+$toolBarEditColorBg: darken($editColorBgBase, 5%);
+$toolBarEditColorFg: rgba(black, 0.7);
+$toolBarEditColorBtnFg: $toolBarEditColorFg;
+$toolBarEditColorBtnBgHover: lighten($toolBarEditColorBg, 10%);
+$toolBarEditColorBtnFgHover: rgba(black, 0.9);
+
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
 $colorIndicatorDisabled: #444;
@@ -370,16 +380,6 @@ $createBtnTextTransform: uppercase;
     background: $c;
 }
 
-
+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
-/**************************************************** NOT USED, LEAVE FOR NOW */
+    @include cSelect($bg, $fg, lighten($bg, 20%), none);
-
+}
-// Content status
-/*
-$colorAlert: #ff3c00;
-$colorWarningHi: #990000;
-$colorWarningLo: #ff9900;
-$colorDiagnostic: #a4b442;
-$colorCommand: #3693bd;
-$colorInfo: #2294a2;
-$colorOk: #33cc33;
-*/

src/styles-new/_controls.scss

@@ -228,6 +228,17 @@ input[type=number]::-webkit-outer-spin-button {
     }
 }
 
+// SELECTS
+select {
+    @include appearanceNone();
+    @include themedSelect();
+    background-repeat: no-repeat, no-repeat;
+    background-position: right .4em top 90%, 0 0;
+    border: none;
+    border-radius: $controlCr;
+    padding: 1px 20px 1px $interiorMargin;
+}
+
 /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
 .c-hyperlink {
     &--link {
@@ -421,21 +432,31 @@ input[type=number]::-webkit-outer-spin-button {
 
 .c-toolbar {
     $p: $interiorMargin;
-    border-top: 1px solid $colorInteriorBorder;
+    background: $toolBarEditColorBg;
+    border-radius: $basicCr;
     height: $p + 24px; // Need to standardize the height
-    padding-top: $p;
+    padding: $p;
 
     &__separator {
         @include cToolbarSeparator();
     }
 
+    .c-click-icon,
+    .c-labeled-input {
+        color: $toolBarEditColorBtnFg;
+    }
+
     .c-click-icon {
         @include cControl();
         $pLR: $interiorMargin - 1;
         $pTB: 2px;
-        color: $colorBodyFg;
         padding: $pTB $pLR;
 
+        &:hover {
+            background: $toolBarEditColorBtnBgHover !important;
+            color: $toolBarEditColorBtnFgHover !important;
+        }
+
         &--swatched {
             padding-bottom: floor($pTB / 2);
             width: 2em; // Standardize the width
@@ -535,7 +556,7 @@ input[type=number]::-webkit-outer-spin-button {
 
 input[type="range"] {
     // HTML5 range inputs
-    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    @include appearanceNone(); /* Hides the slider so that custom slider can be made */
     background: transparent; /* Otherwise white in Chrome */
     &:focus {
         outline: none; /* Removes the blue border. */

src/styles-new/_mixins.scss

@@ -60,6 +60,16 @@
     width: $d;
 }
 
+@mixin appearanceNone() {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+
+    &:focus {
+        outline: none;
+    }
+}
+
 @mixin isAlias() {
     &:after {
         color:$colorIconAlias;
@@ -194,7 +204,7 @@
 }
 
 @mixin htmlInputReset() {
-    appearance: none;
+    @include appearanceNone();
     background: transparent;
     border: none;
     border-radius: 0;
@@ -263,6 +273,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    line-height: $fs; // Remove effect on top and bottom padding
     overflow: hidden;
 
     &:before,
@@ -272,6 +283,10 @@
         flex: 0 0 auto;
     }
 
+    &:before {
+        font-size: 0.9em;
+    }
+
     &:after {
         font-size: 0.8em;
     }
@@ -279,15 +294,18 @@
     [class*="__label"] {
         @include ellipsize();
         display: block;
-        line-height: $fs; // Remove effect on top and bottom padding
         font-size: $fs;
     }
+
+    &[class*='icon'] > [class*="__label"] {
+        // When button holds both an icon and a label, provide margin between them.
+        margin-left: $interiorMarginSm;
+    }
 }
 
 @mixin cButton() {
     @include cControl();
     @include themedButton();
-    //@include buttonBehavior();
     border-radius: $controlCr;
     color: $colorBtnFg;
     cursor: pointer;
@@ -329,12 +347,12 @@
     // Make the icon bigger relative to its container
     @include cControl();
     $pLR: 4px;
-    $pTB: 3px;
+    $pTB: 4px;
     background: none;
     box-shadow: none;
     border-radius: $controlCr;
     cursor: pointer;
-    padding: $pTB $pLR ;
+    padding: $pTB $pLR;
 
     @include hover() {
         background: $colorClickIconBgHov;
@@ -421,6 +439,13 @@
     }
 }
 
+@mixin cSelect($bg, $fg, $arwClr, $shdw) {
+    $svgArwClr: str-slice(inspect($arwClr), 2, str-length(inspect($arwClr))); // Remove initial # in color value
+    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{$svgArwClr}' d='M5 5l5-5H0z'/%3e%3c/svg%3e"), $bg;
+    color: $fg;
+    box-shadow: $shdw;
+}
+
 @mixin wrappedInput() {
     // An input that is wrapped. Optionally includes a __label or icon element.
     // Based on .c-search.

src/ui/components/search.vue

@@ -18,9 +18,6 @@
     .c-search {
         @include wrappedInput();
 
-        padding-top: 2px;
-        padding-bottom: 2px;
-
         &:before {
             // Mag glass icon
             content: $glyph-icon-magnify;

src/ui/layout/Layout.vue

@@ -184,7 +184,6 @@
         }
 
         /******************************* MAIN AREA */
-
         &__main-container {
             // Wrapper for main views
             flex: 1 1 auto !important;