Give users the option to hide table headers (#3085)

* working hide header config

* Simplified Inspector UI layout

* fix lint errors

Co-authored-by: charlesh88 <charlesh88@gmail.com>
This commit is contained in:
Deep Tailor 2020-06-05 15:09:59 -07:00 committed by GitHub
parent 02b537580c
commit d0d4579f13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 2 deletions

View File

@ -2,7 +2,7 @@
<div class="c-inspect-properties">
<template v-if="isEditing">
<div class="c-inspect-properties__header">
Table Column Size
Table Layout
</div>
<ul class="c-inspect-properties__section">
<li class="c-inspect-properties__row">
@ -21,6 +21,22 @@
>
</div>
</li>
<li class="c-inspect-properties__row">
<div
class="c-inspect-properties__label"
title="Show or hide headers"
>
<label for="header-visibility">Hide Header</label>
</div>
<div class="c-inspect-properties__value">
<input
id="header-visibility"
type="checkbox"
:checked="configuration.hideHeaders === true"
@change="toggleHeaderVisibility"
>
</div>
</li>
</ul>
<div class="c-inspect-properties__header">
Table Column Visibility
@ -120,6 +136,12 @@ export default {
let column = new TelemetryTableColumn(this.openmct, metadatum);
this.tableConfiguration.addSingleColumnForObject(telemetryObject, column);
});
},
toggleHeaderVisibility() {
let hideHeaders = this.configuration.hideHeaders;
this.configuration.hideHeaders = !hideHeaders;
this.tableConfiguration.updateConfiguration(this.configuration);
}
}
}

View File

@ -139,6 +139,7 @@
></div>
<!-- Headers table -->
<div
v-show="!hideHeaders"
ref="headersTable"
class="c-telemetry-table__headers-w js-table__headers-w"
:style="{ 'max-width': widthWithScroll}"
@ -336,7 +337,8 @@ export default {
markCounter: 0,
paused: false,
markedRows: [],
isShowingMarkedRowsOnly: false
isShowingMarkedRowsOnly: false,
hideHeaders: configuration.hideHeaders
}
},
computed: {
@ -615,6 +617,7 @@ export default {
},
updateConfiguration(configuration) {
this.isAutosizeEnabled = configuration.autosize;
this.hideHeaders = configuration.hideHeaders;
this.updateHeaders();
this.$nextTick().then(this.calculateColumnWidths);