From 6f3e2a8fbbccf8e0599e0cbec1802ee6f6f9a836 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 4 Apr 2019 10:45:17 -0700 Subject: [PATCH] Misc UI 7 (#2349) * Misc UI 7 - Better approach to hide/show in Tabs view; * Misc UI 7 - Fix Chrome 73 bug for Folders in Tabs and Flex Layouts views; * Misc UI 7 - Fixed look of text inputs in Snow; - Added description for Tabs View; * Misc UI 7 - Resizeable table column headers now clip properly; - Cleaned up and consolidated related CSS; * Misc UI 7 - Remove undesired top margin in Flex Layouts; - Fix Chrome 73 overflow bug in ObjectFrame; * Misc UI 7 - Remove undesired top margin in Flex Layouts; - Fix Chrome 73 overflow bug in ObjectFrame; - Enhanced View Large button so now displays in objects with frames hidden; - Changed behavior for frame move bar such that it only displays for selected items; - Fixed bug where telem table columns can't be resized in new tables; - Added overflow handling to telem table column headers; * Misc UI 7 - Remove undesired top margin in Flex Layouts; - Fix Chrome 73 overflow bug in ObjectFrame; - Enhanced View Large button so now displays in objects with frames hidden, and is only shown for objects that get .has-complex-content applied; - Changed behavior for frame move bar such that it only displays for selected items; - Fixed bug where telem table columns can't be resized in new tables; - Added overflow handling to telem table column headers; - Fix for clipped color palette in Summary Widgets, and better flex layout in sizing in edit interface; - Added timer and hyperlink to SIMPLE_CONTENT_TYPES list; * Misc UI 7 - Accessibility: add name of object as title attribute to Layout frames; - Moved c-frame base styling into c-so-view; * remove title from layoutFrame --- .../displayLayout/components/LayoutFrame.vue | 22 +++--- .../components/flexibleLayout.vue | 8 --- src/plugins/tabs/components/tabs.vue | 13 +++- src/plugins/tabs/plugin.js | 1 + .../components/table-column-header.vue | 28 +------- .../telemetryTable/components/table.vue | 37 +++++++++- src/styles-new/_constants-snow.scss | 6 +- src/styles-new/_constants.scss | 3 + src/styles-new/_controls.scss | 1 + src/styles-new/_legacy.scss | 8 +-- src/styles-new/_table.scss | 2 +- src/ui/components/ObjectFrame.vue | 71 ++++++++++++------- 12 files changed, 115 insertions(+), 85 deletions(-) diff --git a/src/plugins/displayLayout/components/LayoutFrame.vue b/src/plugins/displayLayout/components/LayoutFrame.vue index d0820ee71f..2f4e5bd9de 100644 --- a/src/plugins/displayLayout/components/LayoutFrame.vue +++ b/src/plugins/displayLayout/components/LayoutFrame.vue @@ -59,13 +59,6 @@ > *:first-child { flex: 1 1 auto; } - - &:not(.no-frame) { - background: $colorBodyBg; - border: $browseFrameBorder; - padding: $interiorMargin; - } - } .c-frame-edit { @@ -162,7 +155,6 @@ .is-editing { .c-frame { - $moveBarOutDelay: 500ms; &.no-frame { border: $editFrameBorder; // Base border style for a frame element while editing. } @@ -196,13 +188,25 @@ } } - .l-layout__frame:not(.is-resizing) { + .l-layout__frame[s-selected]:not(.is-resizing) { // Show and animate the __move bar for sub-object views with complex content + > .c-so-view.has-complex-content { + > .c-so-view__local-controls { + transition: transform 250ms ease-in-out; + transition-delay: $moveBarOutDelay; + } + } + &:hover > .c-so-view.has-complex-content { // Move content down so the __move bar doesn't cover it. padding-top: $editFrameMovebarH; transition: $transIn; + > .c-so-view__local-controls { + transition: transform 50ms ease-in-out; + transform: translateY($editFrameMovebarH); + } + &.c-so-view--no-frame { // Move content down with a bit more space padding-top: $editFrameMovebarH + $interiorMarginSm; diff --git a/src/plugins/flexibleLayout/components/flexibleLayout.vue b/src/plugins/flexibleLayout/components/flexibleLayout.vue index 5a03bff497..974c37950a 100644 --- a/src/plugins/flexibleLayout/components/flexibleLayout.vue +++ b/src/plugins/flexibleLayout/components/flexibleLayout.vue @@ -106,9 +106,6 @@ .c-fl { @include abs(); display: flex; - flex-direction: column; // TEMP: only needed to support temp-toolbar element - - > * + * { margin-top: $interiorMargin; } .temp-toolbar { flex: 0 0 auto; @@ -292,11 +289,6 @@ margin-bottom: $interiorMargin; } - &__object-view { - flex: 1 1 auto; - overflow: auto; - } - &__size-indicator { $size: 35px; diff --git a/src/plugins/tabs/components/tabs.vue b/src/plugins/tabs/components/tabs.vue index 9f35b01f27..ffa011e026 100644 --- a/src/plugins/tabs/components/tabs.vue +++ b/src/plugins/tabs/components/tabs.vue @@ -25,7 +25,7 @@
+ :class="{'c-tabs-view__object-holder--hidden': !isCurrent(tab)}">
@@ -68,6 +68,14 @@ flex: 1 1 auto; display: flex; flex-direction: column; + + &--hidden { + height: 1000px; + width: 1000px; + position: absolute; + left: -9999px; + top: -9999px; + } } &__object-name { @@ -78,7 +86,10 @@ } &__object { + display: flex; + flex-flow: column nowrap; flex: 1 1 auto; + height: 0; // Chrome 73 oveflow bug fix } &__empty-message { diff --git a/src/plugins/tabs/plugin.js b/src/plugins/tabs/plugin.js index d9d5e5e316..8ab13bffce 100644 --- a/src/plugins/tabs/plugin.js +++ b/src/plugins/tabs/plugin.js @@ -31,6 +31,7 @@ define([ openmct.types.addType('tabs', { name: "Tabs View", + description: 'Add multiple objects of any type to this view, and quickly navigate between them with tabs', creatable: true, cssClass: 'icon-tabs-view', initialize(domainObject) { diff --git a/src/plugins/telemetryTable/components/table-column-header.vue b/src/plugins/telemetryTable/components/table-column-header.vue index 88bd0a4f43..55e0a60840 100644 --- a/src/plugins/telemetryTable/components/table-column-header.vue +++ b/src/plugins/telemetryTable/components/table-column-header.vue @@ -34,39 +34,13 @@ isSortable ? 'is-sortable' : '', isSortable && sortOptions.key === headerKey ? 'is-sorting' : '', isSortable && sortOptions.direction].join(' ')"> -
-