From 8cc58946cf97393e1135c181f9988ad687b61303 Mon Sep 17 00:00:00 2001 From: Deep Tailor Date: Fri, 10 Jul 2020 12:47:52 -0700 Subject: [PATCH 1/5] Remove Karma Report that was accidentally checked in (#3097) * remove karma report * add report.*.json to gitignore Co-authored-by: Andrew Henry Co-authored-by: Nikhil --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 3d231f100b..86b84da9b0 100644 --- a/.gitignore +++ b/.gitignore @@ -37,4 +37,7 @@ protractor/logs # npm-debug log npm-debug.log +# karma reports +report.*.json + package-lock.json From 8a6f944655cabada677b56a2ca50d100ef0f1e44 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 10 Jul 2020 15:08:14 -0700 Subject: [PATCH 2/5] Missing items (#3125) * Missing objects styling WIP - Grabbing prior work from `missing-items` branch; * Missing objects styling WIP - Grabbing prior work on hover and missing theme constants from `missing-items` branch; - Refined theme constants values; - Renamed relevant mixins and classes from "isUnknown" to "isMissing"; - Applied new hover and missing/unknown styling to Folder-view grid items; * Missing objects styling WIP - Significant refinements and additions to `is-missing`; - Normalize object type icons as a markup `*__type-icon` to support styling and positioning of `is-missing__indicator` as a markup element; - Application to tree items, l-browse-bar in main view, c-object-label, grid view; - Change hover approach in grid-items and tree to use filters; * Missing objects styling WIP - Styles added to object-name component in Inspector, markup simplified; - Styles added to Tabs view; * Missing objects styling WIP - Simplified and consolidated `is-missing` approach into `.c-object-label` class; - Modded `.c-object-label` class to use flex 1 1 auto, instead of 0 1 auto - be on the outlook for regression problems!; - TODO: wire up `is-missing` for real and Folder List view; * Missing objects styling WIP - Added `is-missing` styling to Folder list view; - Cleanups, simplification and normalization with tree items in list-item and list-view.scss; - Using `c-object-label` now in Folder list view; - Removed too-broad `` color definition in table.scss; * Missing objects styling WIP - `is-missing` added to layout frames, with support for hidden frames and telemetry views. - Further styles enhancement; - Continued added wiring points into markup; * Missing objects styling WIP - `is-missing` added to mct-plot; - Significant improvements for cursor lock indicators in plots; * Missing objects styling WIP - Plot legend fixes, added overflow scrolling for collapsed and expanded legends; - Removed conmmented code; * Wire up 'is-missing' - Added property checks on domainObject for status 'missing'; * Fix linting issues * remove carat from eslint package Co-authored-by: Deep Tailor --- .../commonUI/general/res/templates/label.html | 10 +- .../components/TelemetryView.vue | 8 +- .../components/telemetry-view.scss | 10 ++ .../folderView/components/GridItem.vue | 12 ++- .../folderView/components/ListItem.vue | 12 ++- .../folderView/components/grid-view.scss | 20 ++-- .../folderView/components/list-item.scss | 26 +---- .../folderView/components/list-view.scss | 3 +- src/plugins/plot/res/templates/mct-plot.html | 29 +++-- src/plugins/tabs/components/tabs.vue | 28 +++-- src/styles/_constants-espresso.scss | 4 + src/styles/_constants-maelstrom.scss | 4 + src/styles/_constants-snow.scss | 4 + src/styles/_constants.scss | 2 +- src/styles/_controls.scss | 8 +- src/styles/_legacy-plots.scss | 100 +++++++++++++----- src/styles/_mixins.scss | 24 +++++ src/styles/_table.scss | 2 - src/styles/vue-styles.scss | 1 - src/ui/components/ObjectFrame.vue | 18 +++- src/ui/components/ObjectLabel.vue | 15 ++- src/ui/components/object-frame.scss | 13 +++ src/ui/components/object-label.scss | 27 ++++- src/ui/inspector/ObjectName.vue | 26 +++-- src/ui/layout/BrowseBar.vue | 12 ++- src/ui/layout/layout.scss | 6 +- src/ui/layout/mct-tree.scss | 19 +--- 27 files changed, 310 insertions(+), 133 deletions(-) diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html index 2eb1aa9b69..c2cd4551b5 100644 --- a/platform/commonUI/general/res/templates/label.html +++ b/platform/commonUI/general/res/templates/label.html @@ -19,7 +19,13 @@ this source code distribution or the Licensing information page available at runtime from the About dialog for additional information. --> -
-
+
+
+ +
{{model.name}}
diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue index 2f7aa39bc1..fd84fac82b 100644 --- a/src/plugins/displayLayout/components/TelemetryView.vue +++ b/src/plugins/displayLayout/components/TelemetryView.vue @@ -31,10 +31,16 @@
+
+ > +
+
-
{{ item.model.name }}
+ > + +
+
{{ item.model.name }}
 diff --git a/src/plugins/folderView/components/grid-view.scss b/src/plugins/folderView/components/grid-view.scss index e809dca574..00c97ecdc4 100644 --- a/src/plugins/folderView/components/grid-view.scss +++ b/src/plugins/folderView/components/grid-view.scss @@ -38,7 +38,15 @@ // Object is an alias to an original. [class*='__type-icon'] { @include isAlias(); - color: $colorIconAliasForKeyFilter; + } + } + + &.is-missing { + @include isMissing(); + + [class*='__type-icon'], + [class*='__details'] { + opacity: $opacityMissing; } } @@ -85,15 +93,14 @@ body.desktop & { $transOutMs: 300ms; flex-flow: column nowrap; - transition: background $transOutMs ease-in-out; + transition: $transOutMs ease-in-out; &:hover { - background: $colorItemBgHov; + filter: $filterItemHoverFg; transition: $transIn; .c-grid-item__type-icon { - filter: $colorKeyFilterHov; - transform: scale(1); + transform: scale(1.1); transition: $transInBounce; } } @@ -103,7 +110,7 @@ } &__controls { - align-items: start; + align-items: baseline; flex: 0 0 auto; order: 1; .c-info-button, @@ -115,7 +122,6 @@ font-size: floor($gridItemDesk / 3); margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%; order: 2; - transform: scale(0.9); transform-origin: center; transition: all $transOutMs ease-in-out; } diff --git a/src/plugins/folderView/components/list-item.scss b/src/plugins/folderView/components/list-item.scss index 264a259a08..d0c19136f5 100644 --- a/src/plugins/folderView/components/list-item.scss +++ b/src/plugins/folderView/components/list-item.scss @@ -1,37 +1,17 @@ /******************************* LIST ITEM */ .c-list-item { - &__name a { - display: flex; - - > * + * { margin-left: $interiorMarginSm; } - } - &__type-icon { - // Have to do it this way instead of using icon-* class, due to need to apply alias to the icon - color: $colorKey; - display: inline-block; - width: 1em; - margin-right:$interiorMarginSm; + color: $colorItemTreeIcon; } - &__name-value { + &__name { @include ellipsize(); } &.is-alias { // Object is an alias to an original. [class*='__type-icon'] { - &:after { - color: $colorIconAlias; - content: $glyph-icon-link; - font-family: symbolsfont; - display: block; - position: absolute; - text-shadow: rgba(black, 0.5) 0 1px 2px; - top: auto; left: -1px; bottom: 1px; right: auto; - transform-origin: bottom left; - transform: scale(0.65); - } + @include isAlias(); } } } diff --git a/src/plugins/folderView/components/list-view.scss b/src/plugins/folderView/components/list-view.scss index 90527e4313..bb4ba0ace8 100644 --- a/src/plugins/folderView/components/list-view.scss +++ b/src/plugins/folderView/components/list-view.scss @@ -13,7 +13,8 @@ cursor: pointer; &:hover { - background: $colorListItemBgHov; + background: $colorItemTreeHoverBg; + filter: $filterHov; transition: $transIn; } } diff --git a/src/plugins/plot/res/templates/mct-plot.html b/src/plugins/plot/res/templates/mct-plot.html index 335548f0f7..2cc543dac5 100644 --- a/src/plugins/plot/res/templates/mct-plot.html +++ b/src/plugins/plot/res/templates/mct-plot.html @@ -28,17 +28,22 @@ ng-click="legend.set('expanded', !legend.get('expanded'));">
-
+
+ ng-class="{'is-cursor-locked': !!lockHighlightPoint }"> +
+ ng-class="{'is-missing': series.status === 'missing'}" + ng-repeat="series in series track by $index" + >
- + {{ series.get('name') }}
-
+
+
Cursor locked to point
@@ -76,12 +84,15 @@ - - + @@ -134,7 +145,7 @@ {{option.name}} - +
- {{ tab.domainObject.name }} +
+ +
+ {{ tab.domainObject.name }}
-
-
- {{ currentTab.domainObject.name }} -
-
* + * { + margin-left: $interiorMargin; + } + @include hover() { - background: $colorBtnBgHov; + filter: $filterHov; } &.is-current { diff --git a/src/styles/_legacy-plots.scss b/src/styles/_legacy-plots.scss index a7969d0ea9..e02e449204 100644 --- a/src/styles/_legacy-plots.scss +++ b/src/styles/_legacy-plots.scss @@ -43,7 +43,9 @@ mct-plot { .c-plot, .gl-plot { - .s-status-taking-snapshot & { + overflow: hidden; + + .s-status-taking-snapshot & { .c-control-bar { display: none; } @@ -51,6 +53,17 @@ mct-plot { display: none; } } + + /*********************** MISSING ITEM INDICATORS */ + .is-missing__indicator { + display: none; + } + .is-missing { + @include isMissing(); + .is-missing__indicator { + font-size: 0.8em; + } + } } .c-plot { @@ -74,6 +87,7 @@ mct-plot { display: flex; flex: 1 1 auto; flex-direction: column; + overflow: hidden; } &--stacked { @@ -102,18 +116,17 @@ mct-plot { } } - .gl-plot { display: flex; position: relative; width: 100%; height: 100%; - min-height: $plotMinH; /*********************** AXIS AND DISPLAY AREA */ .plot-wrapper-axis-and-display-area { position: relative; flex: 1 1 auto; + min-height: $plotMinH; } .gl-plot-wrapper-display-area-and-x-axis { @@ -196,7 +209,6 @@ mct-plot { left: 0; top: 0; right: auto; bottom: 0; padding-left: 5px; text-orientation: mixed; - //overflow: hidden; writing-mode: vertical-lr; &:before { // Icon denoting configurability @@ -368,12 +380,6 @@ mct-plot { z-index: -10; .l-view-section { - //$m: $interiorMargin; - //top: $m !important; - //right: $m; - //bottom: $m; - //left: $m; - .s-status-timeconductor-unsynced .holder-plot { .t-object-alert.t-alert-unsynced { display: none; @@ -429,14 +435,18 @@ mct-plot { /****************** _LEGEND.SCSS */ .gl-plot-legend, .c-plot-legend { + overflow: hidden; + &__wrapper { // Holds view-control and both collapsed and expanded legends flex: 1 1 auto; - overflow: auto; // Prevents collapsed legend from forcing scrollbars on higher parent containers + height: 100%; + overflow: auto; + padding: 2px; } &__view-control { - padding-top: 2px; + padding-top: 4px; margin-right: $interiorMarginSm; } @@ -481,15 +491,21 @@ mct-plot { /***************** GENERAL STYLES, ALL STATES */ .plot-legend-item { // General styles for legend items, both expanded and collapsed legend states + > * + * { + margin-left: $interiorMarginSm; + } + .plot-series-color-swatch { - border-radius: $smallCr; + border-radius: 30%; //$smallCr; border: 1px solid $colorBodyBg; display: inline-block; + flex: 0 0 auto; height: $plotSwatchD; width: $plotSwatchD; } .plot-series-name { display: inline; + @include ellipsize(); } .plot-series-value { @@ -497,6 +513,16 @@ mct-plot { } } +.plot-series-swatch-and-name { + display: flex; + flex: 0 1 auto; + align-items: center; + + > * + * { + margin-left: $interiorMarginSm; + } +} + .plot-wrapper-expanded-legend { flex: 1 1 auto; } @@ -505,9 +531,6 @@ mct-plot { &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; } &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; } - &.plot-legend-collapsed .icon-cursor-lock::before { padding-right: 5px; } - &.plot-legend-expanded .icon-cursor-lock::before { padding-right: 5px; } - &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; } &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; } &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; } @@ -521,19 +544,13 @@ mct-plot { display: flex; align-items: center; justify-content: stretch; - &:not(:first-child) { - margin-left: $interiorMarginLg; - } + .plot-series-swatch-and-name, .plot-series-value { @include ellipsize(); flex: 1 1 auto; } - .plot-series-swatch-and-name { - margin-right: $interiorMarginSm; - } - .plot-series-value { text-align: left; } @@ -543,7 +560,7 @@ mct-plot { /***************** GENERAL STYLES, EXPANDED */ &.plot-legend-expanded { .gl-plot-legend { - // max-height: 70%; + max-height: 70%; } .plot-wrapper-expanded-legend { @@ -564,6 +581,11 @@ mct-plot { display: flex; flex: 1 1 auto; overflow: hidden; + + > .plot-legend-item + .plot-legend-item { + // Space between plot items + margin-left: $interiorMarginLg; + } } } } @@ -595,12 +617,17 @@ mct-plot { min-width: 0; flex: 1 1 auto; overflow-y: auto; + + > * + * { + // Space between plot items + margin-top: $interiorMarginSm; + } } .plot-legend-item { - margin-bottom: 1px; margin-left: 0; - flex-wrap: wrap; + flex-wrap: nowrap; .plot-series-swatch-and-name { + @include ellipsize(); flex: 0 1 auto; min-width: 20%; } @@ -654,3 +681,24 @@ mct-plot { display: inline-block !important; } } + +/*********************** CURSOR LOCK INDICATOR */ +[class*='c-state-indicator__alert-cursor-lock'] { + display: none; +} + +[class*='is-cursor-locked'] { + background: rgba($colorInfo, 0.1); + + [class*='c-state-indicator__alert-cursor-lock'] { + @include userSelectNone(); + color: $colorInfo; + display: block; + margin-right: $interiorMarginSm; + + &[class*='--verbose'] { + padding: $interiorMarginSm; + + } + } +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index ecf6ac5074..3da26cc316 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -117,6 +117,30 @@ } } +@mixin isMissing($absPos: false) { + // Common styles to be applied to tree items, object labels, grid and list item views + //opacity: 0.7; + //pointer-events: none; // Don't think we can do this, as disables title hover on icon element + + .is-missing__indicator { + display: block; + text-shadow: $colorBodyBg 0 0 2px; + color: $colorAlert; + font-family: symbolsfont; + + &:before { + content: $glyph-icon-alert-triangle; + } + } + + @if $absPos { + .is-missing__indicator { + position: absolute; + z-index: 3; + } + } +} + @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) { background-image: linear-gradient(-45deg, rgba($c, $a) 25%, transparent 25%, diff --git a/src/styles/_table.scss b/src/styles/_table.scss index 24a78961b7..10724e6ff9 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -49,8 +49,6 @@ table { td { vertical-align: top; } - - a { color: $colorBtnMajorBg; } } .is-editing { diff --git a/src/styles/vue-styles.scss b/src/styles/vue-styles.scss index 2837d80e83..ded07743cf 100644 --- a/src/styles/vue-styles.scss +++ b/src/styles/vue-styles.scss @@ -13,7 +13,6 @@ @import "../plugins/filters/components/filters-view.scss"; @import "../plugins/filters/components/global-filters.scss"; @import "../plugins/flexibleLayout/components/flexible-layout.scss"; -@import "../plugins/folderView/components/grid-item.scss"; @import "../plugins/folderView/components/grid-view.scss"; @import "../plugins/folderView/components/list-item.scss"; @import "../plugins/folderView/components/list-view.scss"; diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue index 6b6be28235..7a58c00eb0 100644 --- a/src/ui/components/ObjectFrame.vue +++ b/src/ui/components/ObjectFrame.vue @@ -24,13 +24,24 @@ class="c-so-view has-local-controls" :class="{ 'c-so-view--no-frame': !hasFrame, - 'has-complex-content': complexContent + 'has-complex-content': complexContent, + 'is-missing': domainObject.status === 'missing' }" >
+
+ +
{{ domainObject && domainObject.name }}
@@ -46,6 +57,9 @@ @click="expand" >
+
-
{{ observedObject.name }}
+ > + +
+
+ {{ observedObject.name }} +
diff --git a/src/ui/components/object-frame.scss b/src/ui/components/object-frame.scss index c4fc236e21..dd1d17f654 100644 --- a/src/ui/components/object-frame.scss +++ b/src/ui/components/object-frame.scss @@ -2,6 +2,10 @@ display: flex; flex-direction: column; + &.is-missing { + border: $borderMissing; + } + /*************************** HEADER */ &__header { flex: 0 0 auto; @@ -39,6 +43,15 @@ > .c-so-view__local-controls { top: $interiorMarginSm; right: $interiorMarginSm; } + + &.is-missing { + @include isMissing($absPos: true); + + .is-missing__indicator { + top: $interiorMargin; + left: $interiorMargin; + } + } } &__local-controls { diff --git a/src/ui/components/object-label.scss b/src/ui/components/object-label.scss index 32dabb94c5..3181f23a31 100644 --- a/src/ui/components/object-label.scss +++ b/src/ui/components/object-label.scss @@ -3,23 +3,38 @@ // Used mostly in trees and lists display: flex; align-items: center; - flex: 0 1 auto; + flex: 1 1 auto; overflow: hidden; white-space: nowrap; + > * + * { margin-left: $interiorMargin; } + &__name { @include ellipsize(); display: inline; } - &__type-icon, - &:before { + &__type-icon { // Type icon. Must be an HTML entity to allow inclusion of alias indicator. display: block; flex: 0 0 auto; font-size: 1.1em; - opacity: 0.6; - margin-right: $interiorMargin; + //margin-right: $interiorMargin; + } + + &.is-missing { + @include isMissing($absPos: true); + + [class*='__type-icon']:before, + [class*='__type-icon']:after{ + opacity: $opacityMissing; + } + + .is-missing__indicator { + right: -3px; + top: -3px; + transform: scale(0.7); + } } } @@ -27,6 +42,8 @@ border-radius: $controlCr; padding: $interiorMarginSm 1px; + > * + * { margin-left: $interiorMarginSm; } + &__name { display: inline; width: 100%; diff --git a/src/ui/inspector/ObjectName.vue b/src/ui/inspector/ObjectName.vue index 4fac5a027b..c10b6492bc 100644 --- a/src/ui/inspector/ObjectName.vue +++ b/src/ui/inspector/ObjectName.vue @@ -1,16 +1,24 @@
+
+ {{ series.get('name') }}