Fix indentation part deux

Fix indentation
Toolbar sanding and polishing
2019-01-25 12:39:41 -08:00 · 2019-01-25 11:21:37 -08:00 · 2019-01-23 16:09:41 -08:00 · 2019-01-23 15:40:05 -08:00 · 2019-01-23 15:07:40 -08:00 · 2019-01-23 14:47:19 -08:00
13 changed files with 263 additions and 236 deletions
--- a/src/plugins/displayLayout/DisplayLayoutToolbar.js
+++ b/src/plugins/displayLayout/DisplayLayoutToolbar.js
@@ -32,7 +32,7 @@ define([], function () {
                // is inside a layout, or the main layout is selected.
                return (openmct.editor.isEditing() && selection &&
                    ((selection[1] && selection[1].context.item && selection[1].context.item.type === 'layout') ||
-                    (selection[0].context.item && selection[0].context.item.type === 'layout')));
+                        (selection[0].context.item && selection[0].context.item.type === 'layout')));
            },
            toolbar: function (selection) {
                const DIALOG_FORM = {
@@ -196,24 +196,62 @@ define([], function () {
                    options: [
                        {
                            value: false,
-                            icon: "icon-grid-snap-no",
-                            title: "Do not snap to grid"
+                            icon: "icon-grid-snap-to",
+                            title: "Grid snapping enabled"
                        },
                        {
                            value: true,
-                            icon: "icon-grid-snap-to",
-                            title: "Snap to grid"
+                            icon: "icon-grid-snap-no",
+                            title: "Grid snapping disabled"
                        }
                    ]
                };
+                let x = {
+                    control: "input",
+                    type: "number",
+                    domainObject: selectedParent,
+                    property: function () {
+                        return getPath() + ".x";
+                    },
+                    label: "X:",
+                    title: "X position"
+                },
+                y = {
+                    control: "input",
+                    type: "number",
+                    domainObject: selectedParent,
+                    property: function () {
+                        return getPath() + ".y";
+                    },
+                    label: "Y:",
+                    title: "Y position",
+                },
+                width = {
+                    control: 'input',
+                    type: 'number',
+                    domainObject: selectedParent,
+                    property: function () {
+                        return getPath() + ".width";
+                    },
+                    label: 'W:',
+                    title: 'Resize object width'
+                },
+                height = {
+                    control: 'input',
+                    type: 'number',
+                    domainObject: selectedParent,
+                    property: function () {
+                        return getPath() + ".height";
+                    },
+                    label: 'H:',
+                    title: 'Resize object height'
+                };

                if (layoutItem.type === 'subobject-view') {
                    if (toolbar.length > 0) {
                        toolbar.push(separator);
                    }

-                    toolbar.push(stackOrder);
-                    toolbar.push(separator);
                    toolbar.push({
                        control: "toggle-button",
                        domainObject: selectedParent,
@@ -223,154 +261,119 @@ define([], function () {
                        options: [
                            {
                                value: false,
-                                icon: 'icon-frame-hide',
-                                title: "Hide frame"
+                                icon: 'icon-frame-show',
+                                title: "Frame visible"
                            },
                            {
                                value: true,
-                                icon: 'icon-frame-show',
-                                title: "Show frame"
+                                icon: 'icon-frame-hide',
+                                title: "Frame hidden"
                            }
                        ]
                    });
                    toolbar.push(separator);
+                    toolbar.push(stackOrder);
+                    toolbar.push(x);
+                    toolbar.push(y);
+                    toolbar.push(width);
+                    toolbar.push(height);
                    toolbar.push(useGrid);
                    toolbar.push(separator);
                    toolbar.push(remove);
                } else {
-                    const TEXT_SIZE = [9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96];
+                    const TEXT_SIZE = [8, 9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96, 128];
                    let fill = {
-                            control: "color-picker",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".fill";
-                            },
-                            icon: "icon-paint-bucket",
-                            title: "Set fill color"
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        property: function () {
+                            return getPath() + ".fill";
                        },
-                        stroke = {
-                            control: "color-picker",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".stroke";
-                            },
-                            icon: "icon-line-horz",
-                            title: "Set border color"
+                        icon: "icon-paint-bucket",
+                        title: "Set fill color"
+                    },
+                    stroke = {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        property: function () {
+                            return getPath() + ".stroke";
                        },
-                        color = {
-                            control: "color-picker",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".color";
-                            },
-                            icon: "icon-font",
-                            mandatory: true,
-                            title: "Set text color",
-                            preventNone: true
+                        icon: "icon-line-horz",
+                        title: "Set border color"
+                    },
+                    color = {
+                        control: "color-picker",
+                        domainObject: selectedParent,
+                        property: function () {
+                            return getPath() + ".color";
                        },
-                        size = {
-                            control: "select-menu",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".size";
-                            },
-                            title: "Set text size",
-                            options: TEXT_SIZE.map(size => {
-                                return {
-                                    value: size + "px"
-                                };
-                            })
+                        icon: "icon-font",
+                        mandatory: true,
+                        title: "Set text color",
+                        preventNone: true
+                    },
+                    size = {
+                        control: "select-menu",
+                        domainObject: selectedParent,
+                        property: function () {
+                            return getPath() + ".size";
                        },
-                        x = {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".x";
-                            },
-                            label: "X:",
-                            title: "X position"
-                        },
-                        y = {
-                            control: "input",
-                            type: "number",
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".y";
-                            },
-                            label: "Y:",
-                            title: "Y position",
-                        },
-                        width = {
-                            control: 'input',
-                            type: 'number',
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".width";
-                            },
-                            label: 'W:',
-                            title: 'Resize object width'
-                        },
-                        height = {
-                            control: 'input',
-                            type: 'number',
-                            domainObject: selectedParent,
-                            property: function () {
-                                return getPath() + ".height";
-                            },
-                            label: 'H:',
-                            title: 'Resize object height'
-                        };
+                        title: "Set text size",
+                        options: TEXT_SIZE.map(size => {
+                            return {
+                                value: size + "px"
+                            };
+                        })
+                    };

                    if (layoutItem.type === 'telemetry-view') {
                        let displayMode = {
-                                control: "select-menu",
-                                domainObject: selectedParent,
-                                property: function () {
-                                    return getPath() + ".displayMode";
-                                },
-                                title: "Set display mode",
-                                options: [
-                                    {
-                                        name: 'Label + Value',
-                                        value: 'all'
-                                    },
-                                    {
-                                        name: "Label only",
-                                        value: "label"
-                                    },
-                                    {
-                                        name: "Value only",
-                                        value: "value"
-                                    }
-                                ]
+                            control: "select-menu",
+                            domainObject: selectedParent,
+                            property: function () {
+                                return getPath() + ".displayMode";
                            },
-                            value = {
-                                control: "select-menu",
-                                domainObject: selectedParent,
-                                property: function () {
-                                    return getPath() + ".value";
+                            title: "Set display mode",
+                            options: [
+                                {
+                                    name: 'Label + Value',
+                                    value: 'all'
                                },
-                                title: "Set value",
-                                options: openmct.telemetry.getMetadata(selectedObject).values().map(value => {
-                                    return {
-                                        name: value.name,
-                                        value: value.key
-                                    }
-                                })
-                            };
+                                {
+                                    name: "Label only",
+                                    value: "label"
+                                },
+                                {
+                                    name: "Value only",
+                                    value: "value"
+                                }
+                            ]
+                        },
+                        value = {
+                            control: "select-menu",
+                            domainObject: selectedParent,
+                            property: function () {
+                                return getPath() + ".value";
+                            },
+                            title: "Set value",
+                            options: openmct.telemetry.getMetadata(selectedObject).values().map(value => {
+                                return {
+                                    name: value.name,
+                                    value: value.key
+                                }
+                            })
+                        };
                        toolbar = [
                            displayMode,
                            separator,
                            value,
                            separator,
-                            stackOrder,
                            fill,
                            stroke,
                            color,
                            separator,
                            size,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            height,
@@ -379,7 +382,7 @@ define([], function () {
                            separator,
                            remove
                        ];
-                    } else if (layoutItem.type === 'text-view' ) {
+                    } else if (layoutItem.type === 'text-view') {
                        let text = {
                            control: "button",
                            domainObject: selectedParent,
@@ -391,13 +394,13 @@ define([], function () {
                            dialog: DIALOG_FORM['text']
                        };
                        toolbar = [
-                            stackOrder,
                            fill,
                            stroke,
                            separator,
                            color,
                            size,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            height,
@@ -410,10 +413,10 @@ define([], function () {
                        ];
                    } else if (layoutItem.type === 'box-view') {
                        toolbar = [
-                            stackOrder,
                            fill,
                            stroke,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            height,
@@ -434,9 +437,9 @@ define([], function () {
                            dialog: DIALOG_FORM['image']
                        };
                        toolbar = [
-                            stackOrder,
                            stroke,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            height,
@@ -469,9 +472,9 @@ define([], function () {
                            title: "Y2 position",
                        };
                        toolbar = [
-                            stackOrder,
                            stroke,
                            separator,
+                            stackOrder,
                            x,
                            y,
                            x2,
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@@ -171,8 +171,6 @@
                if (itemIndex !== undefined) {
                    this.attachSelectionListener(itemIndex);
                }
-
-                this.updateDrilledIn();
            },
            attachSelectionListener(index) {
                let path = `configuration.items[${index}].useGrid`;
@@ -208,15 +206,6 @@
                    this.mutate(`configuration.items[${index}]`, item);
                }.bind(this));
            },
-            updateDrilledIn(drilledInItem) {
-                let identifier = drilledInItem && this.openmct.objects.makeKeyString(drilledInItem.identifier);
-                this.drilledIn = identifier;
-                this.layoutItems.forEach(item => {
-                    if (item.type === 'subobject-view') {
-                        item.drilledIn = this.openmct.objects.makeKeyString(item.identifier) === identifier;
-                    }
-                });
-            },
            bypassSelection($event) {
                if (this.dragInProgress) {
                    if ($event) {
--- a/src/plugins/flexibleLayout/toolbarProvider.js
+++ b/src/plugins/flexibleLayout/toolbarProvider.js
@@ -57,14 +57,14 @@ function ToolbarProvider(openmct) {
                property: 'configuration.rowsLayout',
                options: [
                    {
-                        value: false,
+                        value: true,
                        icon: 'icon-columns',
-                        title: 'Columns'
+                        title: 'Columns layout'
                    },
                    {
-                        value: true,
+                        value: false,
                        icon: 'icon-rows',
-                        title: 'Rows'
+                        title: 'Rows layout'
                    }
                ]
            };
@@ -120,14 +120,14 @@ function ToolbarProvider(openmct) {
                    property: `configuration.containers[${containerIndex}].frames[${frameIndex}].noFrame`,
                    options: [
                        {
-                            value: true,
+                            value: false,
                            icon: 'icon-frame-hide',
-                            title: "Hide frame"
+                            title: "Frame hidden"
                        },
                        {
-                            value: false,
+                            value: true,
                            icon: 'icon-frame-show',
-                            title: "Show frame"
+                            title: "Frame visible"
                        }
                    ]
                };
--- a/src/plugins/folderView/components/ListItem.vue
+++ b/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"
-                     :class="item.type.cssClass"></div>
-                {{item.model.name}}
+                <div class="c-list-item__type-icon" :class="item.type.cssClass"></div>
+                <div class="c-list-item__name-value">{{item.model.name}}</div>
            </a>
        </td>
        <td class="c-list-item__type">{{ item.type.name }}</td>
@@ -20,17 +19,24 @@

    /******************************* LIST ITEM */
    .c-list-item {
-        &__name {
-            @include ellipsize();
+        &__name a {
+            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>
--- a/src/plugins/folderView/components/ListView.vue
+++ b/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;
--- a/src/plugins/notebook/res/templates/notebook.html
+++ b/src/plugins/notebook/res/templates/notebook.html
@@ -5,21 +5,17 @@
                @input="search"
                @clear="search">
            </search>
-        <div class="c-notebook__controls">
-            <div class="select c-notebook__controls__time">
-                <select v-model="showTime">
-                    <option value="0" selected="selected">Show all</option>
-                    <option value="1">Last hour</option>
-                    <option value="8">Last 8 hours</option>
-                    <option value="24">Last 24 hours</option>
-                </select>
-            </div>
-            <div class="select c-notebook__controls__sort">
-                <select v-model="sortEntries">
-                    <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
-                    <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
-                </select>
-            </div>
+        <div class="c-notebook__controls ">
+            <select class="c-notebook__controls__time" v-model="showTime">
+                <option value="0" selected="selected">Show all</option>
+                <option value="1">Last hour</option>
+                <option value="8">Last 8 hours</option>
+                <option value="24">Last 24 hours</option>
+            </select>
+            <select class="c-notebook__controls__time" v-model="sortEntries">
+                <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
+                <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
+            </select>
        </div>
    </div>
    <div class="c-notebook__drag-area icon-plus"
--- a/src/plugins/plot/res/templates/plot-options-edit.html
+++ b/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">
-                                <option ng-repeat="option in yKeyOptions"
-                                        value="{{option.value}}"
-                                        ng-selected="option.value == form.yKey">
-                                    {{option.name}}
-                                </option>
-                            </select>
-                        </div>
+                        <select ng-model="form.yKey">
+                            <option ng-repeat="option in yKeyOptions"
+                                    value="{{option.value}}"
+                                    ng-selected="option.value == form.yKey">
+                                {{option.name}}
+                            </option>
+                        </select>
                    </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">
-                                <option value="none">None</option>
-                                <option value="linear">Linear interpolate</option>
-                                <option value="stepAfter">Step after</option>
-                            </select>
-                        </div>
+                        <select ng-model="form.interpolate">
+                            <option value="none">None</option>
+                            <option value="linear">Linear interpolate</option>
+                            <option value="stepAfter">Step after</option>
+                        </select>
                    </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">
-                            <option value="hidden">Hidden</option>
-                            <option value="top">Top</option>
-                            <option value="right">Right</option>
-                            <option value="bottom">Bottom</option>
-                            <option value="left">Left</option>
-                        </select>
-                    </div>
+                    <select ng-model="form.position">
+                        <option value="hidden">Hidden</option>
+                        <option value="top">Top</option>
+                        <option value="right">Right</option>
+                        <option value="bottom">Bottom</option>
+                        <option value="left">Left</option>
+                    </select>
                </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">
-                            <option value="none">nothing</option>
-                            <option value="nearestTimestamp">nearest timestamp</option>
-                            <option value="nearestValue">nearest Value</option>
-                            <option value="min">minimum value</option>
-                            <option value="max">maximum value</option>
-                        </select>
-                    </div>
+                    <select ng-model="form.valueToShowWhenCollapsed">
+                        <option value="none">Nothing</option>
+                        <option value="nearestTimestamp">Nearest timestamp</option>
+                        <option value="nearestValue">Nearest value</option>
+                        <option value="min">Minimum value</option>
+                        <option value="max">Maximum value</option>
+                    </select>
                </div>
            </li>
            <li class="grid-row">
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/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: $editFrameHovMovebarColorBg;
+                background: $b;
+                > * { background: $b; }
+            }
+        }
+    }
+
    /******************************* LEGACY */
    .s-status-taking-snapshot,
    .overlay.snapshot {
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@@ -381,17 +381,6 @@ $createBtnTextTransform: uppercase;
    box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }

-/**************************************************** NOT USED, LEAVE FOR NOW */
-// Slider controls, not in use
-/*
-$sliderColorBase: $colorKey;
-$sliderColorRangeHolder: rgba(black, 0.07);
-$sliderColorRange: rgba($sliderColorBase, 0.2);
-$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: pushBack($sliderColorBase, 20%);
-$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$sliderColorRangeValHovBg: $sliderColorRange;
-$sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: 15px;
-$sliderKnobR: 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);
+}
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@@ -385,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) {
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -380,16 +380,6 @@ $createBtnTextTransform: uppercase;
    background: $c;
 }

-
-/**************************************************** NOT USED, LEAVE FOR NOW */
-
-// Content status
-/*
-$colorAlert: #ff3c00;
-$colorWarningHi: #990000;
-$colorWarningLo: #ff9900;
-$colorDiagnostic: #a4b442;
-$colorCommand: #3693bd;
-$colorInfo: #2294a2;
-$colorOk: #33cc33;
-*/
+@mixin themedSelect($bg: $colorBtnBg, $fg: $colorBtnFg) {
+    @include cSelect($bg, $fg, lighten($bg, 20%), none);
+}
--- a/src/styles-new/_controls.scss
+++ b/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 80%, 0 0;
+    border: none;
+    border-radius: $controlCr;
+    padding: 1px 20px 1px $interiorMargin;
+}
+
 /******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
 .c-hyperlink {
    &--link {
@@ -411,7 +422,7 @@ input[type=number]::-webkit-outer-spin-button {
 }

@mixin cToolbarSeparator() {
-    $m: $interiorMargin;
+    $m: 1px;
    $b: 1px;
    display: block;
    width: $m + $b; // Allow for border
@@ -426,6 +437,10 @@ input[type=number]::-webkit-outer-spin-button {
    height: $p + 24px; // Need to standardize the height
    padding: $p;

+    > * + * {
+        margin-left: 2px;
+    }
+
    &__separator {
        @include cToolbarSeparator();
    }
--- a/src/styles-new/_mixins.scss
+++ b/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;
@@ -209,7 +219,7 @@
 }

@mixin htmlInputReset() {
-    appearance: none;
+    @include appearanceNone();
    background: transparent;
    border: none;
    border-radius: 0;
@@ -278,6 +288,7 @@
    display: inline-flex;
    align-items: center;
    justify-content: center;
+    line-height: $fs; // Remove effect on top and bottom padding
    overflow: hidden;

    &:before,
@@ -287,6 +298,10 @@
        flex: 0 0 auto;
    }

+    &:before {
+        font-size: 0.9em;
+    }
+
    &:after {
        font-size: 0.8em;
    }
@@ -294,15 +309,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;
@@ -436,6 +454,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.
Author	SHA1	Message	Date
charlesh88	1ae678cbea	Fix indentation part deux	2019-01-25 12:39:41 -08:00
charlesh88	488a5a77d5	Fix indentation	2019-01-25 11:21:37 -08:00
charlesh88	88d7da63fa	Toolbar sanding and polishing - Button order tweaked to place stack order near X, Y, etc. inputs; - Improved spacing between items themselves and separators;	2019-01-23 16:09:41 -08:00
charlesh88	4656237b44	Enable all sub-object views in Display Layout to use numeric inputs for x, y, width and height	2019-01-23 15:40:05 -08:00
charlesh88	b9b65ec0b8	Change 'toggle'-style toolbar buttons to reflect current state, rather than what will be the setting once clicked - When frame is hidden, button displays the frame-hidden icon, and tooltip says 'Frame hidden';	2019-01-23 15:07:40 -08:00
charlesh88	8965ba4ed3	Merge latest TCR, resolve conflicts	2019-01-23 14:47:19 -08:00
charlesh88	063e4b3e62	Telemetry Table editing styles - Headers now have hover effects;	2019-01-23 14:41:47 -08:00
charlesh88	f541a79676	Remove updateDrilledIn function and calls	2019-01-23 14:37:16 -08:00
charlesh88	155929c97f	List View fixes - Ellipsizing now works; - Better icon and text alignment;	2019-01-23 10:03:05 -08:00
charlesh88	53f773812d	Styling for selects - New cleaner styling approach; - New cSelect and appearanceNone mixins; - Converted selects in Notebook, plot-options-edit;	2019-01-22 16:44:15 -08:00