Implement an inspector view provider to display a component that allows setting printf format for alphanumeric items in a display layout.

platform/import-export/src/actions/ImportAsJSONAction.js

@@ -64,30 +64,12 @@ define(['zepto'], function ($) {
         var tree = this.generateNewIdentifiers(objTree);
         var rootId = tree.rootId;
         var rootObj = this.instantiate(tree.openmct[rootId], rootId);
-        var newStyleParent = parent.useCapability('adapter');
-        var newStyleRootObj = rootObj.useCapability('adapter');
 
-        if (this.openmct.composition.checkPolicy(newStyleParent, newStyleRootObj)) {
-            // Instantiate all objects in tree with their newly generated ids,
-            // adding each to its rightful parent's composition
-            rootObj.getCapability("location").setPrimaryLocation(parent.getId());
-            this.deepInstantiate(rootObj, tree.openmct, []);
-            parent.getCapability("composition").add(rootObj);
-        } else {
-            var dialog = this.openmct.overlays.dialog({
-                iconClass: 'alert',
-                message: "We're sorry, but you cannot import that object type into this object.",
-                buttons: [
-                    {
-                        label: "Ok",
-                        emphasis: true,
-                        callback: function () {
-                            dialog.dismiss();
-                        }
-                    }
-                ]
-            });
-        }
+        // Instantiate all objects in tree with their newly genereated ids,
+        // adding each to its rightful parent's composition
+        rootObj.getCapability("location").setPrimaryLocation(parent.getId());
+        this.deepInstantiate(rootObj, tree.openmct, []);
+        parent.getCapability("composition").add(rootObj);
     };
 
     ImportAsJSONAction.prototype.deepInstantiate = function (parent, tree, seen) {

src/adapter/views/TypeInspectorViewProvider.js

@@ -25,7 +25,7 @@ define([
             cssClass: representation.cssClass,
             description: representation.description,
             canView: function (selection) {
-                if (selection.length !== 1 || selection[0].length === 0) {
+                if (selection.length === 0 || selection[0].length === 0) {
                     return false;
                 }
 

src/plugins/displayLayout/components/AlphanumericFormatView.vue

@@ -23,21 +23,17 @@
 <template>
     <div class="c-properties" v-if="isEditing">
         <div class="c-properties__header">Alphanumeric Format</div>
-        <ul class="c-properties__section">
+        <ul class="c-properties__section" v-if="!multiSelect">
             <li class="c-properties__row">
                 <div class="c-properties__label" title="Printf formatting for the selected telemetry">
                     <label for="telemetryPrintfFormat">Format</label>
                 </div>
                 <div class="c-properties__value">
-                    <input id="telemetryPrintfFormat"
-                        type="text"
-                        @change="formatTelemetry"
-                        :value="telemetryFormat"
-                        :placeholder="nonMixedFormat ? '' : 'Mixed'"
-                    >
+                    <input id="telemetryPrintfFormat" type="text" @change="formatTelemetry" :value="telemetryFormat">
                 </div>
             </li>
         </ul>
+        <div class="c-properties__row--span-all" v-if="multiSelect">No format to display for multiple items</div>
     </div>
 </template>
 
@@ -48,8 +44,8 @@
             let selectionPath = this.openmct.selection.get()[0];
             return {
                 isEditing: this.openmct.editor.isEditing(),
-                telemetryFormat: undefined,
-                nonMixedFormat: false
+                telemetryFormat: selectionPath[0].context.layoutItem.format,
+                multiSelect: false
             }
         },
         methods: {
@@ -57,23 +53,17 @@
                 this.isEditing = isEditing;
             },
             formatTelemetry(event) {
+                let selectionPath = this.openmct.selection.get()[0];
                 let newFormat = event.currentTarget.value;
-                this.openmct.selection.get().forEach(selectionPath => {
-                    selectionPath[0].context.updateTelemetryFormat(newFormat);    
-                });
+                selectionPath[0].context.updateTelemetryFormat(newFormat);
                 this.telemetryFormat = newFormat;
             },
             handleSelection(selection) {
-                if (selection.length === 0 || selection[0].length < 2) {
+                if (selection.length === 0 || selection[0].length === 0) {
                     return;
                 }
 
-                let format = selection[0][0].context.layoutItem.format;
-                this.nonMixedFormat = selection.every(selectionPath => {
-                    return selectionPath[0].context.layoutItem.format === format;
-                });
-
-                this.telemetryFormat = this.nonMixedFormat ? format : '';
+                this.multiSelect = selection.length > 1 ? true : false;
             }
         },
         mounted() {

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -560,7 +560,7 @@
                 }
             },
             updateTelemetryFormat(item, format) {
-                let index = _.findIndex(this.layoutItems, item);
+                let index = this.layoutItems.indexOf(item);
                 item.format = format;
                 this.mutate(`configuration.items[${index}]`, item);
             }

src/plugins/displayLayout/components/TelemetryView.vue

@@ -202,6 +202,7 @@
                 }.bind(this));
             },
             updateView(datum) {
+                // TODO: normalize datum
                 this.datum = datum;
             },
             removeSubscription() {

src/plugins/telemetryTable/TableConfigurationViewProvider.js

@@ -37,7 +37,7 @@ define([
             key: 'table-configuration',
             name: 'Telemetry Table Configuration',
             canView: function (selection) {
-                if (selection.length !== 1 || selection[0].length === 0) {
+                if (selection.length === 0 || selection[0].length === 0) {
                     return false;
                 }
                 let object = selection[0][0].context.item;

src/plugins/telemetryTable/TelemetryTable.js

@@ -45,10 +45,8 @@ define([
             this.subscriptions = {};
             this.tableComposition = undefined;
             this.telemetryObjects = [];
-            this.rowBuffer = [];
             this.outstandingRequests = 0;
             this.configuration = new TelemetryTableConfiguration(domainObject, openmct);
-            this.paused = false;
 
             this.addTelemetryObject = this.addTelemetryObject.bind(this);
             this.removeTelemetryObject = this.removeTelemetryObject.bind(this);
@@ -204,11 +202,7 @@ define([
                 if (!this.telemetryObjects.includes(telemetryObject)) {
                     return;
                 }
-
-                if (!this.paused) {
-                    let row = new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator);
-                    this.boundedRows.add(row);
-                }
+                this.boundedRows.add(new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
             }, subscribeOptions);
         }
 
@@ -240,17 +234,6 @@ define([
             }
         }
 
-        pause() {
-            this.paused = true;
-            this.boundedRows.unsubscribeFromBounds();
-        }
-
-        unpause() {
-            this.paused = false;
-            this.boundedRows.subscribeToBounds();
-            this.refreshData();
-        }
-
         destroy() {
             this.boundedRows.destroy();
             this.filteredRows.destroy();

src/plugins/telemetryTable/collections/BoundedTableRowCollection.js

@@ -43,8 +43,7 @@ define(
                 this.sortByTimeSystem(openmct.time.timeSystem());
 
                 this.lastBounds = openmct.time.bounds();
-
-                this.subscribeToBounds();
+                openmct.time.on('bounds', this.bounds);
             }
 
             addOne(item) {
@@ -141,16 +140,8 @@ define(
                 return this.parseTime(row.datum[this.sortOptions.key]);
             }
 
-            unsubscribeFromBounds() {
-                this.openmct.time.off('bounds', this.bounds);
-            }
-
-            subscribeToBounds() {
-                this.openmct.time.on('bounds', this.bounds);
-            }
-
             destroy() {
-                this.unsubscribeFromBounds();
+                this.openmct.time.off('bounds', this.bounds);
             }
         }
         return BoundedTableRowCollection;

src/plugins/telemetryTable/components/table-row.vue

@@ -20,13 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<tr :style="{ top: rowTop }"
-    class="noselect"
-    :class="[
-        rowLimitClass,
-        {'is-selected': marked}
-    ]"
-    @click="markRow">
+<tr :style="{ top: rowTop }" :class="rowLimitClass">
     <td v-for="(title, key) in headers" 
         :key="key"
         :style="columnWidths[key] === undefined ? {} : { width: columnWidths[key] + 'px', 'max-width': columnWidths[key] + 'px'}"
@@ -36,15 +30,6 @@
 </template>
 
 <style>
-    .noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-        -webkit-user-select: none; /* Safari */
-        -khtml-user-select: none; /* Konqueror HTML */
-        -moz-user-select: none; /* Firefox */
-            -ms-user-select: none; /* Internet Explorer/Edge */
-                user-select: none; /* Non-prefixed version, currently
-                                    supported by Chrome and Opera */
-    }
 </style>
 
 <script>
@@ -84,11 +69,6 @@ export default {
             type: Number,
             required: false,
             default: 0
-        },
-        marked: {
-            type: Boolean,
-            required: false,
-            default: false
         }
     },
     methods: {
@@ -99,17 +79,6 @@ export default {
             this.formattedRow = row.getFormattedDatum(this.headers);
             this.rowLimitClass = row.getRowLimitClass();
             this.cellLimitClasses = row.getCellLimitClasses();
-        },
-        markRow: function (event) {
-            if (event.shiftKey) {
-                this.$emit('markMultipleConcurrent', this.rowIndex);
-            } else {
-                if (this.marked) {
-                    this.$emit('unmark', this.rowIndex);
-                } else {
-                    this.$emit('mark', this.rowIndex);
-                }
-            }
         }
     },
     // TODO: use computed properties

src/plugins/telemetryTable/components/table.vue

@@ -20,111 +20,80 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-<div class="c-table-wrapper">
-    <div class="c-table-control-bar c-control-bar">
+<div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
+     :class="{'loading': loading}">
+    <div class="c-table__control-bar c-control-bar">
         <button class="c-button icon-download labeled"
-           v-on:click="exportAllDataAsCSV()"
+           v-on:click="exportAsCSV()"
            title="Export This View's Data">
-            <span class="c-button__label">Export Table Data</span>
-        </button>
-        <button class="c-button icon-download labeled"
-            v-show="markedRows.length"
-            v-on:click="exportMarkedDataAsCSV()"
-            title="Export Marked Rows As CSV">
-            <span class="c-button__label">Export Marked Rows</span>
-        </button>
-        <button class="c-button icon-x labeled"
-            v-show="markedRows.length"
-            v-on:click="unmarkAllRows()"
-            title="Unmark All Rows">
-            <span class="c-button__label">Unmark All Rows</span>
-        </button>
-        <div class="c-separator"></div>
-        <button class="c-button icon-pause pause-play labeled"
-                :class=" paused ? 'icon-play is-paused' : 'icon-pause'"
-            v-on:click="togglePauseByButton()"
-            :title="paused ? 'Continue Data Flow' : 'Pause Data Flow'">
-            <span class="c-button__label">
-                {{paused ? 'Play' : 'Pause'}}
-            </span>
+            <span class="c-button__label">Export As CSV</span>
         </button>
     </div>
-
-    <div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
-         :class="{
-         'loading': loading,
-         'paused' : paused
-        }">
-        <div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>
-        <!-- Headers table -->
-        <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 class="c-telemetry-table__headers__labels">
-                        <table-column-header
-                            v-for="(title, key, headerIndex) in headers"
-                            :key="key"
-                            :headerKey="key"
-                            :headerIndex="headerIndex"
-                            @sort="sortBy(key)"
-                            @resizeColumn="resizeColumn"
-                            @dropTargetOffsetChanged="setDropTargetOffset"
-                            @dropTargetActive="dropTargetActive"
-                            @reorderColumn="reorderColumn"
-                            @resizeColumnEnd="updateConfiguredColumnWidths"
-                            :columnWidth="columnWidths[key]"
-                            :sortOptions="sortOptions"
-                            :isEditing="isEditing"
-                        ><span class="c-telemetry-table__headers__label">{{title}}</span>
-                        </table-column-header>
-                    </tr>
-                    <tr class="c-telemetry-table__headers__filter">
-                        <table-column-header
-                            v-for="(title, key, headerIndex) in headers"
-                            :key="key"
-                            :headerKey="key"
-                            :headerIndex="headerIndex"
-                            @resizeColumn="resizeColumn"
-                            @dropTargetOffsetChanged="setDropTargetOffset"
-                            @dropTargetActive="dropTargetActive"
-                            @reorderColumn="reorderColumn"
-                            @resizeColumnEnd="updateConfiguredColumnWidths"
-                            :columnWidth="columnWidths[key]"
-                            :isEditing="isEditing"
-                            >
-                            <search class="c-table__search"
-                                v-model="filters[key]"
-                                v-on:input="filterChanged(key)"
-                                v-on:clear="clearFilter(key)" />
-                        </table-column-header>
-                    </tr>
-                </thead>
-            </table>
-        </div>
-        <!-- Content table -->
-        <div class="c-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w" @scroll="scroll" :style="{ 'max-width': widthWithScroll}">
-            <div class="c-telemetry-table__scroll-forcer" :style="{ width: totalWidth + 'px' }"></div>
-            <table class="c-table__body c-telemetry-table__body js-telemetry-table__content"
-                   :style="{ height: totalHeight + 'px'}">
-                <tbody>
-                    <telemetry-table-row v-for="(row, rowIndex) in visibleRows"
-                        :key="rowIndex"
-                        :headers="headers"
-                        :columnWidths="columnWidths"
-                        :rowIndex="rowIndex"
-                        :rowOffset="rowOffset"
-                        :rowHeight="rowHeight"
-                        :row="row"
-                        :marked="row.marked"
-                        @mark="markRow"
-                        @unmark="unmarkRow"
-                        @markMultipleConcurrent="markMultipleConcurrentRows">
-                    </telemetry-table-row>
-                </tbody>
-            </table>
-        </div>
-        <!-- Sizing table -->
-        <table class="c-telemetry-table__sizing js-telemetry-table__sizing" :style="sizingTableWidth">
+    <div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>
+    <!-- Headers table -->
+    <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 class="c-telemetry-table__headers__labels">
+                    <table-column-header
+                        v-for="(title, key, headerIndex) in headers"
+                        :key="key"
+                        :headerKey="key"
+                        :headerIndex="headerIndex"
+                        @sort="sortBy(key)"
+                        @resizeColumn="resizeColumn"
+                        @dropTargetOffsetChanged="setDropTargetOffset"
+                        @dropTargetActive="dropTargetActive"
+                        @reorderColumn="reorderColumn"
+                        @resizeColumnEnd="updateConfiguredColumnWidths"
+                        :columnWidth="columnWidths[key]"
+                        :sortOptions="sortOptions"
+                        :isEditing="isEditing"
+                    ><span class="c-telemetry-table__headers__label">{{title}}</span>
+                    </table-column-header>
+                </tr>
+                <tr class="c-telemetry-table__headers__filter">
+                    <table-column-header
+                        v-for="(title, key, headerIndex) in headers"
+                        :key="key"
+                        :headerKey="key"
+                        :headerIndex="headerIndex"
+                        @resizeColumn="resizeColumn"
+                        @dropTargetOffsetChanged="setDropTargetOffset"
+                        @dropTargetActive="dropTargetActive"
+                        @reorderColumn="reorderColumn"
+                        @resizeColumnEnd="updateConfiguredColumnWidths"
+                        :columnWidth="columnWidths[key]"
+                        :isEditing="isEditing"
+                        >
+                        <search class="c-table__search"
+                            v-model="filters[key]"
+                            v-on:input="filterChanged(key)"
+                            v-on:clear="clearFilter(key)" />
+                    </table-column-header>
+                </tr>
+            </thead>
+        </table>
+    </div>
+    <!-- Content table -->
+    <div class="c-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w" @scroll="scroll" :style="{ 'max-width': widthWithScroll}">
+        <div class="c-telemetry-table__scroll-forcer" :style="{ width: totalWidth + 'px' }"></div>
+        <table class="c-table__body c-telemetry-table__body js-telemetry-table__content"
+               :style="{ height: totalHeight + 'px'}">
+            <tbody>
+                <telemetry-table-row v-for="(row, rowIndex) in visibleRows"
+                    :headers="headers"
+                    :columnWidths="columnWidths"
+                    :rowIndex="rowIndex"
+                    :rowOffset="rowOffset"
+                    :rowHeight="rowHeight"
+                    :row="row">
+                </telemetry-table-row>
+            </tbody>
+        </table>
+    </div>
+    <!-- Sizing table -->
+    <table class="c-telemetry-table__sizing js-telemetry-table__sizing" :style="sizingTableWidth">
         <tr>
             <template v-for="(title, key) in headers">
             <th :key="key" :style="{ width: configuredColumnWidths[key] + 'px', 'max-width': configuredColumnWidths[key] + 'px'}">{{title}}</th>
@@ -136,8 +105,7 @@
             :row="sizingRowData">
         </telemetry-table-row>
     </table>
-    </div>
-</div><!-- closes c-table-wrapper -->
+</div>
 </template>
 
 <style lang="scss">
@@ -248,10 +216,6 @@
                 align-items: stretch;
                 position: absolute;
                 height: 18px; // Needed when a row has empty values in its cells
-
-                &.is-selected {
-                    background-color: $colorSelectedBg;
-                }
             }
 
             td {
@@ -302,10 +266,6 @@
         }
     }
 
-    .paused {
-        border: 1px solid #ff9900;
-    }
-
     /******************************* LEGACY */
     .s-status-taking-snapshot,
     .overlay.snapshot {
@@ -368,10 +328,7 @@ export default {
             dropOffsetLeft: undefined,
             isDropTargetActive: false,
             isAutosizeEnabled: configuration.autosize,
-            scrollW: 0,
-            markCounter: 0,
-            paused: false,
-            markedRows: []
+            scrollW: 0
         }
     },
     computed: {
@@ -557,27 +514,15 @@ export default {
             // which causes subsequent scroll to use an out of date height.
             this.contentTable.style.height = this.totalHeight + 'px'; 
         },
-        exportAsCSV(data) {
+        exportAsCSV() {
             const headerKeys = Object.keys(this.headers);
-
-            this.csvExporter.export(data, {
+            const justTheData = this.table.filteredRows.getRows()
+                .map(row => row.getFormattedDatum(this.headers));
+            this.csvExporter.export(justTheData, {
                 filename: this.table.domainObject.name + '.csv',
                 headers: headerKeys
             });
         },
-        exportAllDataAsCSV() {
-            const justTheData = this.table.filteredRows.getRows()
-                .map(row => row.getFormattedDatum(this.headers));
-
-            this.exportAsCSV(justTheData);
-        },
-        exportMarkedDataAsCSV() {
-            const data = this.table.filteredRows.getRows()
-                .filter(row => row.marked === true)
-                .map(row => row.getFormattedDatum(this.headers));
-
-            this.exportAsCSV(data);
-        },
         outstandingRequests(loading) {
             this.loading = loading;
         },
@@ -666,110 +611,7 @@ export default {
                 scrollTop = this.scrollable.scrollTop;
             }, RESIZE_POLL_INTERVAL);
         },
-        pause(pausedByButton) {
-            if (pausedByButton) {
-                this.pausedByButton = true;
-            }
-            this.paused = true;
-            this.table.pause();
-        },
-        unpause(unpausedByButton) {
-            if (unpausedByButton) {
-                this.paused = false;
-                this.table.unpause();
-                this.markedRows = [];
-                this.pausedByButton = false;
-            } else {
-                if (!this.pausedByButton) {
-                    this.paused = false;
-                    this.table.unpause();
-                    this.markedRows = [];
-                }
-            }
-            
-        },
-        togglePauseByButton() {
-            if (this.paused) {
-                this.unpause(true);
-            } else {
-                this.pause(true);
-            }
-        },
-        undoMarkedRows(unpause) {
-            this.markedRows.forEach(r => r.marked = false);
-            this.markedRows = [];
-        },
-        unmarkRow(rowIndex) {
-            this.undoMarkedRows();
-            this.unpause();
-        },
-        markRow(rowIndex) {
-            let insertMethod = 'unshift';
 
-            if (this.markedRows.length && !this.ctrlKeyPressed) {
-                this.undoMarkedRows();
-                insertMethod = 'push';
-            }
-
-            let markedRow = this.visibleRows[rowIndex];
-
-            this.$set(markedRow, 'marked', true);
-            this.pause();
-
-            this.markedRows[insertMethod](markedRow);
-        },
-        unmarkAllRows(skipUnpause) {
-            this.markedRows.forEach(row => row.marked = false);
-            this.markedRows = [];
-            this.unpause();
-        },
-        markMultipleConcurrentRows(rowIndex) {
-
-            if (!this.markedRows.length) {
-                this.markRow(rowIndex);
-            } else {
-                if (this.markedRows.length > 1) {
-                    this.markedRows.forEach((r,i) => {
-                        if (i !== 0) {
-                            r.marked = false;
-                        }
-                    });
-                    this.markedRows.splice(1);
-                }
-                let lastRowToBeMarked = this.visibleRows[rowIndex];
-
-                let allRows = this.table.filteredRows.getRows(),
-                    firstRowIndex = allRows.indexOf(this.markedRows[0]),
-                    lastRowIndex = allRows.indexOf(lastRowToBeMarked);
-
-                //supports backward selection
-                if (lastRowIndex < firstRowIndex) {
-                    let temp = lastRowIndex;
-                
-                    lastRowIndex = firstRowIndex;
-                    firstRowIndex = temp - 1;
-                }
-
-                for (var i = firstRowIndex + 1; i <= lastRowIndex; i++) {
-                    let row = allRows[i];
-                    row.marked = true;
-                    this.markedRows.push(row);
-                }
-
-                this.$forceUpdate();
-            }
-        },
-        keydown(event) {
-            if ((event.ctrlKey || event.metaKey)) {
-                this.ctrlKeyPressed = true;
-            }
-        },
-        keyup(event) {
-            if ((event.ctrlKey || event.key.toLowerCase() === 'meta')) {
-                console.log('up');
-                this.ctrlKeyPressed = false;
-            }
-        }
     },
     created() {
         this.filterChanged = _.debounce(this.filterChanged, 500);
@@ -802,9 +644,6 @@ export default {
         this.calculateScrollbarWidth();
 
         this.table.initialize();
-
-        document.addEventListener('keydown', this.keydown);
-        document.addEventListener('keyup', this.keyup);
     },
     destroyed() {
         this.table.off('object-added', this.addObject);
@@ -823,9 +662,6 @@ export default {
         this.table.configuration.destroy();
 
         this.table.destroy();
-
-        document.removeEventListener('keydown', this.keydown);
-        document.removeEventListener('keyup', this.keyup);
     }
 }
 </script>

src/styles-new/_controls.scss

@@ -585,15 +585,15 @@ select {
     margin-right: $m;
 }
 
-.c-separator {
-    @include cToolbarSeparator();
-}
-
 .c-toolbar {
     > * + * {
         margin-left: 2px;
     }
 
+    &__button {
+
+    }
+
     &__separator {
         @include cToolbarSeparator();
     }

src/styles-new/_table.scss

@@ -76,43 +76,23 @@ div.c-table {
     height: 100%;
 }
 
-.c-table-wrapper {
-    // Wraps .c-control-bar and .c-table
-    @include abs();
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-    > .c-table {
-        height: auto;
-        flex: 1 1 auto;
-    }
-
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
-}
-
-.c-table-control-bar {
-    display: flex;
-    flex: 0 0 auto;
-
-    > * + * {
-        margin-left: $interiorMarginSm;
-    }
-}
-
 .c-table {
     // Can be used by any type of table, scrolling, LAD, etc.
     $min-w: 50px;
 
     width: 100%;
 
+    &__control-bar,
     &__headers-w {
         flex: 0 0 auto;
     }
 
     /******************************* ELEMENTS */
+
+    &__control-bar {
+        margin-bottom: $interiorMarginSm;
+    }
+
     thead tr,
     &.c-table__headers {
         background: $colorTabHeaderBg;

src/ui/components/ObjectFrame.vue

@@ -123,12 +123,7 @@
         .c-click-icon,
         .c-button {
             // Shrink buttons a bit when they appear in a frame
-            align-items: baseline;
-            font-size: 0.85em;
-            padding: 3px 5px;
-            &:before {
-                font-size: 0.8em;
-            }
+            font-size: 0.8em;
         }
     }
 </style>