Merge branch 'topic-conditionals' into conditionals-styling-2

- Tweaks for layout/overflow issues;
- Better header alignment;
- Much better approach to "accordion" spacing;

src/plugins/condition/components/condition.scss

@@ -11,6 +11,7 @@
 
 .c-condition {
     flex-direction: column;
+    min-width: 400px;
 
     > * + * {
         margin-top: $interiorMarginSm;
@@ -24,10 +25,13 @@
 
     /***************************** HEADER */
     &__header {
+        $h: 22px;
         display: flex;
-        align-items: flex-start;
+        align-items: start;
         align-content: stretch;
         overflow: hidden;
+        min-height: $h;
+        line-height: $h;
 
         > * {
             flex: 0 0 auto;
@@ -36,6 +40,11 @@
             }
         }
     }
+
+    &__drag-grippy {
+        transform: translateY(50%);
+    }
+
     &__name {
         font-weight: bold;
         align-self: baseline; // Fixes bold line-height offset problem

src/plugins/plot/src/configuration/PlotSeries.js

@@ -143,7 +143,7 @@ define([
             let strategy;
 
             if (this.model.interpolate !== 'none') {
-                strategy = 'minMax';
+                strategy = 'minmax';
             }
 
             options = _.extend({}, { size: 1000, strategy, filters: this.filters }, options || {});

src/plugins/telemetryTable/components/table.vue

@@ -28,7 +28,7 @@
         <button
             v-if="allowExport"
             class="c-button icon-download labeled"
-            title="Export This View's Data"
+            title="Export this view's data"
             @click="exportAllDataAsCSV()"
         >
             <span class="c-button__label">Export Table Data</span>
@@ -37,7 +37,7 @@
             v-if="allowExport"
             v-show="markedRows.length"
             class="c-button icon-download labeled"
-            title="Export Marked Rows As CSV"
+            title="Export marked rows as CSV"
             @click="exportMarkedDataAsCSV()"
         >
             <span class="c-button__label">Export Marked Rows</span>
@@ -45,7 +45,7 @@
         <button
             v-show="markedRows.length"
             class="c-button icon-x labeled"
-            title="Unmark All Rows"
+            title="Unmark all rows"
             @click="unmarkAllRows()"
         >
             <span class="c-button__label">Unmark All Rows</span>
@@ -58,7 +58,7 @@
             v-if="marking.enable"
             class="c-button icon-pause pause-play labeled"
             :class=" paused ? 'icon-play is-paused' : 'icon-pause'"
-            :title="paused ? 'Continue Data Flow' : 'Pause Data Flow'"
+            :title="paused ? 'Continue real-time data flow' : 'Pause real-time data flow'"
             @click="togglePauseByButton()"
         >
             <span class="c-button__label">
@@ -66,6 +66,29 @@
             </span>
         </button>
 
+        <template v-if="!isEditing">
+            <div
+                class="c-separator"
+            >
+            </div>
+            <button
+                v-if="isAutosizeEnabled"
+                class="c-button icon-arrows-right-left labeled"
+                title="Increase column widths to fit currently available data."
+                @click="recalculateColumnWidths"
+            >
+                <span class="c-button__label">Expand Columns</span>
+            </button>
+            <button
+                v-else
+                class="c-button icon-expand labeled"
+                title="Automatically size columns to fit the table into the available space."
+                @click="autosizeColumns"
+            >
+                <span class="c-button__label">Autosize Columns</span>
+            </button>
+        </template>
+
         <slot name="buttons"></slot>
     </div>
     <!-- main controlbar end -->
@@ -461,17 +484,20 @@ export default {
             this.scrollW = (this.scrollable.offsetWidth - this.scrollable.clientWidth) + 1;
         },
         calculateColumnWidths() {
-            let columnWidths = {};
+            let columnWidths = {},
-            let totalWidth = 0;
+                totalWidth = 0,
-            let sizingRowEl = this.sizingTable.children[0];
+                headerKeys = Object.keys(this.headers),
-            let sizingCells = Array.from(sizingRowEl.children);
+                sizingTableRow = this.sizingTable.children[0],
-            let headerKeys = Object.keys(this.headers);
+                sizingCells = sizingTableRow.children;
 
-            headerKeys.forEach((headerKey, headerIndex)=>{
+            headerKeys.forEach((headerKey, headerIndex, array)=>{
-                let cell = sizingCells[headerIndex];
+                if (this.isAutosizeEnabled) {
-                let columnWidth = cell.offsetWidth;
+                    columnWidths[headerKey] = this.sizingTable.clientWidth / array.length;
-                columnWidths[headerKey] = columnWidth;
+                } else {
-                totalWidth += columnWidth;
+                    let cell = sizingCells[headerIndex];
+                    columnWidths[headerKey] = cell.offsetWidth;
+                }
+                totalWidth += columnWidths[headerKey];
             });
 
             this.columnWidths = columnWidths;
@@ -818,6 +844,31 @@ export default {
                 this.setHeight();
                 this.scrollable.scrollTop = this.userScroll;
             }
+        },
+        updateWidthsAndClearSizingTable() {
+            this.calculateColumnWidths();
+            this.configuredColumnWidths = this.columnWidths;
+
+            this.visibleRows.forEach((row, i) => {
+                this.$set(this.sizingRows, i, undefined);
+                delete this.sizingRows[i];
+            });
+        },
+        recalculateColumnWidths() {
+            this.visibleRows.forEach((row,i) => {
+                this.$set(this.sizingRows, i, row);
+            });
+
+            this.configuredColumnWidths = {};
+            this.isAutosizeEnabled = false;
+
+            this.$nextTick()
+                .then(this.updateWidthsAndClearSizingTable);
+        },
+        autosizeColumns() {
+            this.isAutosizeEnabled = true;
+
+            this.$nextTick().then(this.calculateColumnWidths);
         }
     }
 }

src/styles/_controls.scss

@@ -229,6 +229,7 @@ section {
 
     &.is-expanded {
         flex: 1 1 100%;
+        max-height: max-content;
     }
 
     .c-section__header {
@@ -676,6 +677,7 @@ select {
 
 .c-separator {
     @include cToolbarSeparator();
+    height: 100%;
 }
 
 .c-row-separator {