Compare commits
10 Commits
v1.2-RC4
...
table-sizi
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3407b8f8ce | ||
|
|
e586d97911 | ||
|
|
f9ef3bd487 | ||
|
|
e96f69a926 | ||
|
|
9f7bdecbf0 | ||
|
|
db1eb5a1e3 | ||
|
|
bfe68d1ad1 | ||
|
|
895a0de13e | ||
|
|
4de68616d5 | ||
|
|
48efdeafaa |
56
src/plugins/telemetryTable/components/sizing-row.vue
Normal file
56
src/plugins/telemetryTable/components/sizing-row.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<tr class="c-telemetry-table__sizing-tr"><td>SIZING ROW</td></tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
isEditing: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isEditing: function (isEditing) {
|
||||
if (isEditing) {
|
||||
this.pollForRowHeight();
|
||||
} else {
|
||||
this.clearPoll();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick().then(() => {
|
||||
this.height = this.$el.offsetHeight;
|
||||
this.$emit('change-height', this.height);
|
||||
});
|
||||
|
||||
if (this.isEditing) {
|
||||
this.pollForRowHeight();
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.clearPoll();
|
||||
},
|
||||
methods: {
|
||||
pollForRowHeight() {
|
||||
this.clearPoll();
|
||||
this.pollID = window.setInterval(this.heightPoll, 300);
|
||||
},
|
||||
clearPoll() {
|
||||
if (this.pollID) {
|
||||
window.clearInterval(this.pollID);
|
||||
this.pollID = undefined;
|
||||
}
|
||||
},
|
||||
heightPoll() {
|
||||
let height = this.$el.offsetHeight;
|
||||
|
||||
if (height !== this.height) {
|
||||
this.$emit('change-height', height);
|
||||
this.height = height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -115,7 +115,7 @@
|
||||
display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
|
||||
align-items: stretch;
|
||||
position: absolute;
|
||||
height: 18px; // Needed when a row has empty values in its cells
|
||||
min-height: 18px; // Needed when a row has empty values in its cells
|
||||
|
||||
&.is-selected {
|
||||
background-color: $colorSelectedBg !important;
|
||||
@@ -153,6 +153,12 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__sizing-tr {
|
||||
// A row element used to determine sizing of rows based on font size
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************* SPECIFIC CASE WRAPPERS */
|
||||
|
||||
@@ -234,6 +234,10 @@
|
||||
class="c-telemetry-table__sizing js-telemetry-table__sizing"
|
||||
:style="sizingTableWidth"
|
||||
>
|
||||
<sizing-row
|
||||
:is-editing="isEditing"
|
||||
@change-height="setRowHeight"
|
||||
/>
|
||||
<tr>
|
||||
<template v-for="(title, key) in headers">
|
||||
<th
|
||||
@@ -266,6 +270,7 @@ import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue';
|
||||
import CSVExporter from '../../../exporters/CSVExporter.js';
|
||||
import _ from 'lodash';
|
||||
import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
|
||||
import SizingRow from './sizing-row.vue';
|
||||
|
||||
const VISIBLE_ROW_COUNT = 100;
|
||||
const ROW_HEIGHT = 17;
|
||||
@@ -278,7 +283,8 @@ export default {
|
||||
TableColumnHeader,
|
||||
search,
|
||||
TelemetryFilterIndicator,
|
||||
ToggleSwitch
|
||||
ToggleSwitch,
|
||||
SizingRow
|
||||
},
|
||||
inject: ['table', 'openmct', 'objectPath'],
|
||||
props: {
|
||||
@@ -876,6 +882,12 @@ export default {
|
||||
this.isAutosizeEnabled = true;
|
||||
|
||||
this.$nextTick().then(this.calculateColumnWidths);
|
||||
},
|
||||
setRowHeight(height) {
|
||||
this.rowHeight = height;
|
||||
this.setHeight();
|
||||
this.calculateTableSize();
|
||||
this.clearRowsAndRerender();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -101,6 +101,12 @@ body.desktop {
|
||||
@each $size in $listFontSizes {
|
||||
&[data-font-size="#{$size}"] {
|
||||
font-size: #{$size}px;
|
||||
|
||||
// Set row heights in telemetry tables
|
||||
tr {
|
||||
min-height: #{$size + ($tabularTdPadTB * 2)};
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user