From 184b716b538db53bccbb619193d515f35f99ded2 Mon Sep 17 00:00:00 2001 From: Deep Tailor Date: Mon, 19 Oct 2020 11:48:10 -0700 Subject: [PATCH] [Telemetry Table] Row counts (#3428) * add marked rows and total rows in tables * Styling for table row counts addition - Main styles for new `.c-table-indicator` and elements; - Refined main layout spacing; - Layout for table footer elements; - Hover behavior for footer when table in Display Layout; * Styling for table row counts addition - Refined `.c-filter-indication` styles; - Refined `.c-table-indicator` styles; - Added dynamic tooltips for total and marked rows count elements; * fix lint issues Co-authored-by: charlesh88 --- .../filters/components/global-filters.scss | 22 +++++--- .../components/table-footer-indicator.scss | 29 ++++++++++ ...dicator.vue => table-footer-indicator.vue} | 55 +++++++++++++++---- .../telemetryTable/components/table.scss | 29 ++++++++++ .../telemetryTable/components/table.vue | 15 +++-- .../telemetry-filter-indicator.scss | 37 ------------- src/styles/vue-styles.scss | 2 +- src/ui/layout/layout.scss | 3 +- 8 files changed, 130 insertions(+), 62 deletions(-) create mode 100644 src/plugins/telemetryTable/components/table-footer-indicator.scss rename src/plugins/telemetryTable/components/{TelemetryFilterIndicator.vue => table-footer-indicator.vue} (77%) delete mode 100644 src/plugins/telemetryTable/components/telemetry-filter-indicator.scss diff --git a/src/plugins/filters/components/global-filters.scss b/src/plugins/filters/components/global-filters.scss index 795c23f4b3..8839eae53a 100644 --- a/src/plugins/filters/components/global-filters.scss +++ b/src/plugins/filters/components/global-filters.scss @@ -3,20 +3,26 @@ @include userSelectNone(); background: $colorFilterBg; color: $colorFilterFg; - display: flex; - align-items: center; - font-size: 0.9em; - margin-top: $interiorMarginSm; - padding: 2px; - text-transform: uppercase; &:before { font-family: symbolsfont-12px; content: $glyph-icon-filter; - display: block; - font-size: 12px; margin-right: $interiorMarginSm; } + + &--mixed { + .c-filter-indication__mixed { + font-style: italic; + } + } + + &__label { + + .c-filter-indication__label { + &:before { + content: ', '; + } + } + } } .c-filter-tree-item { diff --git a/src/plugins/telemetryTable/components/table-footer-indicator.scss b/src/plugins/telemetryTable/components/table-footer-indicator.scss new file mode 100644 index 0000000000..3419cec3f9 --- /dev/null +++ b/src/plugins/telemetryTable/components/table-footer-indicator.scss @@ -0,0 +1,29 @@ +.c-table-indicator { + display: flex; + align-items: center; + font-size: 0.9em; + overflow: hidden; + + &__elem { + @include ellipsize(); + flex: 0 1 auto; + padding: 2px; + text-transform: uppercase; + + > * { + //display: contents; + } + } + + &__counts { + //background: rgba(deeppink, 0.1); + display: flex; + flex: 1 1 auto; + justify-content: flex-end; + overflow: hidden; + + > * { + margin-left: $interiorMargin; + } + } +} diff --git a/src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue b/src/plugins/telemetryTable/components/table-footer-indicator.vue similarity index 77% rename from src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue rename to src/plugins/telemetryTable/components/table-footer-indicator.vue index 2128e43be9..a6bea0d465 100644 --- a/src/plugins/telemetryTable/components/TelemetryFilterIndicator.vue +++ b/src/plugins/telemetryTable/components/table-footer-indicator.vue @@ -1,18 +1,41 @@ @@ -27,6 +50,16 @@ const USE_GLOBAL = 'useGlobal'; export default { inject: ['openmct', 'table'], + props: { + markedRows: { + type: Number, + default: 0 + }, + totalRows: { + type: Number, + default: 0 + } + }, data() { return { filterNames: [], diff --git a/src/plugins/telemetryTable/components/table.scss b/src/plugins/telemetryTable/components/table.scss index 13d8a184d0..55472daa86 100644 --- a/src/plugins/telemetryTable/components/table.scss +++ b/src/plugins/telemetryTable/components/table.scss @@ -150,6 +150,35 @@ white-space: nowrap; } } + + &__footer { + $pt: 2px; + border-top: 1px solid $colorInteriorBorder; + margin-top: $interiorMargin; + padding: $pt 0; + overflow: hidden; + transition: all 250ms; + + &:not(.is-filtering) { + .c-frame & { + height: 0; + padding: 0; + visibility: hidden; + } + } + } + + .c-frame & { + // target .c-frame .c-telemetry-table {} + $pt: 2px; + &:hover { + .c-telemetry-table__footer:not(.is-filtering) { + height: $pt + 16px; + padding: initial; + visibility: visible; + } + } + } } /******************************* SPECIFIC CASE WRAPPERS */ diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue index 83bf31110c..923a2c3cf7 100644 --- a/src/plugins/telemetryTable/components/table.vue +++ b/src/plugins/telemetryTable/components/table.vue @@ -253,7 +253,11 @@ :object-path="objectPath" /> - + @@ -262,7 +266,7 @@ import TelemetryTableRow from './table-row.vue'; import search from '../../../ui/components/search.vue'; import TableColumnHeader from './table-column-header.vue'; -import TelemetryFilterIndicator from './TelemetryFilterIndicator.vue'; +import TableFooterIndicator from './table-footer-indicator.vue'; import CSVExporter from '../../../exporters/CSVExporter.js'; import _ from 'lodash'; import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue'; @@ -277,7 +281,7 @@ export default { TelemetryTableRow, TableColumnHeader, search, - TelemetryFilterIndicator, + TableFooterIndicator, ToggleSwitch }, inject: ['table', 'openmct', 'objectPath'], @@ -342,7 +346,8 @@ export default { paused: false, markedRows: [], isShowingMarkedRowsOnly: false, - hideHeaders: configuration.hideHeaders + hideHeaders: configuration.hideHeaders, + totalNumberOfRows: 0 }; }, computed: { @@ -451,6 +456,8 @@ export default { let filteredRows = this.table.filteredRows.getRows(); let filteredRowsLength = filteredRows.length; + this.totalNumberOfRows = filteredRowsLength; + if (filteredRowsLength < VISIBLE_ROW_COUNT) { end = filteredRowsLength; } else { diff --git a/src/plugins/telemetryTable/components/telemetry-filter-indicator.scss b/src/plugins/telemetryTable/components/telemetry-filter-indicator.scss deleted file mode 100644 index 818612287d..0000000000 --- a/src/plugins/telemetryTable/components/telemetry-filter-indicator.scss +++ /dev/null @@ -1,37 +0,0 @@ -.c-filter-indication { - @include userSelectNone(); - background: $colorFilterBg; - color: $colorFilterFg; - display: flex; - align-items: center; - font-size: 0.9em; - margin-top: $interiorMarginSm; - padding: 2px; - text-transform: uppercase; - - &:before { - font-family: symbolsfont-12px; - content: $glyph-icon-filter; - display: block; - font-size: 12px; - margin-right: $interiorMarginSm; - } - - &__mixed { - margin-right: $interiorMarginSm; - } - - &--mixed { - .c-filter-indication__mixed { - font-style: italic; - } - } - - &__label { - + .c-filter-indication__label { - &:before { - content: ','; - } - } - } -} diff --git a/src/styles/vue-styles.scss b/src/styles/vue-styles.scss index 1713be5504..2df7ec7a42 100644 --- a/src/styles/vue-styles.scss +++ b/src/styles/vue-styles.scss @@ -18,7 +18,7 @@ @import "../plugins/folderView/components/list-view.scss"; @import "../plugins/imagery/components/imagery-view-layout.scss"; @import "../plugins/telemetryTable/components/table-row.scss"; -@import "../plugins/telemetryTable/components/telemetry-filter-indicator.scss"; +@import "../plugins/telemetryTable/components/table-footer-indicator.scss"; @import "../plugins/tabs/components/tabs.scss"; @import "../plugins/telemetryTable/components/table.scss"; @import "../plugins/timeConductor/conductor.scss"; diff --git a/src/ui/layout/layout.scss b/src/ui/layout/layout.scss index 527de3d6c0..7a324f6e8b 100644 --- a/src/ui/layout/layout.scss +++ b/src/ui/layout/layout.scss @@ -81,7 +81,7 @@ flex: 0 0 auto; + * { - margin-top: $interiorMarginLg; + margin-top: $interiorMargin; } } } @@ -148,6 +148,7 @@ /******************************* HEAD */ &__main-view-browse-bar { flex: 0 0 auto; + margin-bottom: $interiorMargin; // Needs some additional visual separation } body.mobile & .l-shell__main-view-browse-bar {