diff options
author | Deep Tailor <deep.j.tailor@nasa.gov> | 2020-03-09 20:31:26 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-03-09 20:31:26 +0300 |
commit | 5fcc4eebe1a21261aee4ea567212e8f0d20633bd (patch) | |
tree | 6e546ba4abf0a4f307c7aedb634be0252955d96d | |
parent | 8d86c914a10ab5925dfdbd89ab14cb5de5e752d5 (diff) |
Add a re-calculate column width button (#2719)vista-r4.3.1-rc1
* Add a recalculate Column width button
* Tweaks to telemetry table for recalculateColumnWidths
- Recalc button now hidden if isAutosizeEnabled === false;
- Recalc button label, title edited for clarity;
- Normalized button titles for other table buttons;
- Fixed `.c-separator` height issue;
* toggle between expand and autosize
* Tweaked button title text
* remove nested loop
* fix lint errors
* remove unecessary promise and use clientWidth instead of offsetWidth
Co-authored-by: charlesh88 <charlesh88@gmail.com>
-rw-r--r-- | src/plugins/telemetryTable/components/table.vue | 81 | ||||
-rw-r--r-- | src/styles/_controls.scss | 1 |
2 files changed, 67 insertions, 15 deletions
diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue index b5f325c62..c92d6f811 100644 --- a/src/plugins/telemetryTable/components/table.vue +++ b/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 totalWidth = 0; - let sizingRowEl = this.sizingTable.children[0]; - let sizingCells = Array.from(sizingRowEl.children); - let headerKeys = Object.keys(this.headers); - - headerKeys.forEach((headerKey, headerIndex)=>{ - let cell = sizingCells[headerIndex]; - let columnWidth = cell.offsetWidth; - columnWidths[headerKey] = columnWidth; - totalWidth += columnWidth; + let columnWidths = {}, + totalWidth = 0, + headerKeys = Object.keys(this.headers), + sizingTableRow = this.sizingTable.children[0], + sizingCells = sizingTableRow.children; + + headerKeys.forEach((headerKey, headerIndex, array)=>{ + if (this.isAutosizeEnabled) { + columnWidths[headerKey] = this.sizingTable.clientWidth / array.length; + } else { + 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); } } } diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss index 9159cd5bf..ec00a3e3a 100644 --- a/src/styles/_controls.scss +++ b/src/styles/_controls.scss @@ -619,6 +619,7 @@ select { .c-separator { @include cToolbarSeparator(); + height: 100%; } .c-toolbar { |