Compare commits

...

10 Commits

Author SHA1 Message Date
Deep Tailor
3407b8f8ce revert changes to elasticsearchproviderspec 2020-08-05 11:28:11 -07:00
Deep Tailor
e586d97911 add reject callbacks to failing tests 2020-08-05 10:59:30 -07:00
Deep Tailor
f9ef3bd487 move sizing row to sizing table 2020-08-05 10:41:07 -07:00
Deep Tailor
e96f69a926 fix lint warning 2020-08-05 10:33:01 -07:00
Deep Tailor
9f7bdecbf0 fixed small bugs 2020-08-05 10:28:28 -07:00
Deep Tailor
db1eb5a1e3 only poll on edit 2020-08-04 16:38:50 -07:00
Deep Tailor
bfe68d1ad1 Merge branch 'table-sizing-row-08042020' of https://github.com/nasa/openmct into table-sizing-row-08042020 2020-08-04 15:10:17 -07:00
charlesh88
895a0de13e Fixes for dynamic table row heights
- Added tr { min-height } to `data-font-size` CSS;
- Refined markup in sizing-row.vue;
2020-08-04 15:07:59 -07:00
Deep Tailor
4de68616d5 clear interval on destroy 2020-08-04 13:18:18 -07:00
Deep Tailor
48efdeafaa working sizingRow - need style changes 2020-08-04 11:56:51 -07:00
4 changed files with 82 additions and 2 deletions

View 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>

View File

@@ -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 */

View File

@@ -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();
}
}
}

View File

@@ -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)};
}
}
}