-
- You must add at least one telemetry object to edit this widget.
-
+
diff --git a/src/plugins/tabs/components/tabs.vue b/src/plugins/tabs/components/tabs.vue
index eca7fe0106..e617be218c 100644
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@@ -81,6 +81,7 @@
}
&__empty-message {
+ background: rgba($colorBodyFg, 0.1);
color: rgba($colorBodyFg, 0.7);
font-style: italic;
text-align: center;
diff --git a/src/plugins/timeConductor/Conductor.vue b/src/plugins/timeConductor/Conductor.vue
index 8c2caa30fd..6c76825233 100644
--- a/src/plugins/timeConductor/Conductor.vue
+++ b/src/plugins/timeConductor/Conductor.vue
@@ -126,7 +126,6 @@
grid-template-rows: 1fr;
grid-template-columns: 20px auto 1fr auto;
grid-template-areas: "tc-mode-icon tc-start tc-ticks tc-end";
- overflow: hidden;
}
&__mode-icon {
diff --git a/src/styles-new/_constants.scss b/src/styles-new/_constants.scss
index 7a2c78bd0a..5869dd34a8 100644
--- a/src/styles-new/_constants.scss
+++ b/src/styles-new/_constants.scss
@@ -80,7 +80,7 @@ $formLabelW: 30%;
$waitSpinnerD: 32px;
$waitSpinnerTreeD: 20px;
$waitSpinnerBorderW: 5px;
-$waitSpinnerTreeBorderW: 4px;
+$waitSpinnerTreeBorderW: 3px;
/*************** Messages */
$messageIconD: 80px;
$messageListIconD: 32px;
diff --git a/src/styles-new/_forms.scss b/src/styles-new/_forms.scss
index cb933f0b00..a46f84893a 100644
--- a/src/styles-new/_forms.scss
+++ b/src/styles-new/_forms.scss
@@ -143,7 +143,7 @@
@include nice-input();
padding: $interiorMargin;
position: relative;
- min-height: 150px;
+ min-height: 0; // Chrome 73 overflow bug fix
height: 100%;
>.wrapper {
$p: $interiorMargin;
diff --git a/src/styles-new/_global.scss b/src/styles-new/_global.scss
index d7abc0fafe..77050f0e3e 100644
--- a/src/styles-new/_global.scss
+++ b/src/styles-new/_global.scss
@@ -19,8 +19,7 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
-
-/******************************* RESETS */
+/******************************************************** RESETS */
*,
:before,
:after {
@@ -31,7 +30,7 @@ div {
position: relative;
}
-/******************************* UTILITIES */
+/******************************************************** UTILITIES */
.u-contents {
display: contents;
}
@@ -45,7 +44,7 @@ div {
}
}
-/******************************* BROWSER ELEMENTS */
+/******************************************************** BROWSER ELEMENTS */
body.desktop {
::-webkit-scrollbar {
box-sizing: border-box;
@@ -75,7 +74,7 @@ body.desktop {
}
}
-/************************** HTML ENTITIES */
+/******************************************************** HTML ENTITIES */
a {
color: $colorA;
cursor: pointer;
@@ -167,7 +166,6 @@ body.desktop .has-local-controls {
/******************************************************** SELECTION AND EDITING */
// Provides supporting styles for Display Layouts and augmented legacy Fixed Position view
-
.c-grid,
.c-grid__x,
.c-grid__y {
@@ -204,169 +202,88 @@ body.desktop .has-local-controls {
}
}
-/************************** LEGACY */
-
-mct-container {
+/******************************************************** STATES */
+@mixin spinner($b: 5px, $c: $colorKey) {
+ animation-name: rotation-centered;
+ animation-duration: 0.5s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ border-radius: 100%;
+ box-sizing: border-box;
+ border-color: rgba($c, 0.25);
+ border-top-color: rgba($c, 1.0);
+ border-style: solid;
+ border-width: $b;
display: block;
-}
-
-.abs {
position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- height: auto;
- width: auto;
+ left: 50%; top: 50%;
+ transform-origin: center;
+ transform: translate(-50%, -50%);
}
-.code {
- font-family: "Lucida Console", monospace;
- font-size: 0.7em;
- line-height: 150%;
- white-space: pre;
+.wait-spinner {
+ @include spinner($waitSpinnerBorderW, $colorKey);
+ pointer-events: none;
+ z-index: 2;
+ &.inline {
+ display: inline-block !important;
+ margin-right: $interiorMargin;
+ position: relative !important;
+ vertical-align: middle;
+ }
}
-.codehilite {
- @extend .code;
- background-color: rgba($colorBodyFg, 0.1);
- padding: 1em;
+.loading {
+ // Can be applied to any block element with height and width
+ pointer-events: none;
+ &:before,
+ &:after {
+ content: '';
+ }
+ &:before {
+ @include spinner($waitSpinnerBorderW, $colorLoadingFg);
+ height: $waitSpinnerD; width: $waitSpinnerD;
+ z-index: 10;
+ }
+ &:after {
+ @include abs();
+ background: $colorLoadingBg;
+ display: block;
+ z-index: 9;
+ }
+ &.c-tree__item {
+ $d: $waitSpinnerTreeD;
+ $spinnerL: 19px + $d/2;
+
+ display: flex;
+ align-items: center;
+ padding-left: $spinnerL + $d/2 + $interiorMargin;
+ background: $colorLoadingBg;
+ min-height: 5px + $d;
+
+ .c-tree__item__label {
+ font-style: italic;
+ opacity: 0.6;
+ }
+ &:before {
+ height: $d;
+ width: $d;
+ border-width: 4px;
+ left: $spinnerL;
+ }
+ &:after {
+ display: none;
+ }
+ }
+
+ &.c-loading--overlay {
+ @include abs();
+ }
}
*[disabled],
-.disabled,
-a.disabled {
+.disabled {
opacity: $controlDisabledOpacity;
pointer-events: none !important;
cursor: default !important;
}
-
-.s-status-missing {
- // Labels. Expects .s-status-missing to be applied to mct-representation that contains
- .t-object-label .t-item-icon:before {
- content: $glyph-icon-object-unknown;
- }
-
- // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
- .item .t-item-icon-glyph:before {
- content: $glyph-icon-object-unknown;
- }
-
- // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
- &.object-header {
- .type-icon:before {
- content: $glyph-icon-object-unknown;
- }
- }
-
- // Tree item. Expects .s-status-missing to be applied to .tree-item,
- // and mct-representation.search-item
- &.tree-item,
- &.search-item {
- > .rep-object-label .t-item-icon:before {
- content: $glyph-icon-object-unknown;
- }
- }
-}
-
-.align-right {
- text-align: right;
-}
-
-.centered {
- text-align: center;
-}
-
-.no-selection {
- // aka selection = "None". Used in palettes and their menu buttons.
- $c: red;
- $s: 48%;
- $e: 52%;
- background-image: linear-gradient(-45deg,
- transparent $s - 5%,
- $c $s,
- $c $e,
- transparent $e + 5%
- );
- box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
- background-repeat: no-repeat;
- background-size: contain;
-}
-
-.scrolling,
-.scroll {
- overflow: auto;
-}
-
-.vscroll {
- overflow-x: hidden;
- overflow-y: auto;
- &.scroll-pad {
- padding-right: $interiorMargin;
- }
-}
-
-.vscroll--persist {
- overflow-x: hidden;
- overflow-y: scroll;
-}
-
-.slidable {
- cursor: move; // Fallback
- cursor: grab;
- cursor: -moz-grab;
- cursor: -webkit-grab;
- &.horz {
- cursor: col-resize;
- }
- &.vert {
- cursor: row-resize;
- }
-}
-
-.no-margin {
- margin: 0;
-}
-
-.ds {
- box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
-}
-
-.capitalize {
- text-transform: capitalize;
-}
-
-.hide,
-.hidden,
-.t-main-view .hide-in-t-main-view {
- display: none !important;
-}
-
-.hide-nice {
- opacity: 0;
- pointer-events: none;
-}
-
-.invisible {
- display: block;
- visibility: hidden;
- height: 0;
- padding: 0;
- border: 0;
- margin: 0 !important;
- transform: scale(0);
- pointer-events: none;
- position: absolute;
-}
-
-.sep {
- color: rgba(#fff, 0.2);
-}
-
-.comma-list span {
- &:not(:first-child) {
- &:before {
- content: ', ';
- }
- }
-}
diff --git a/src/styles-new/_legacy.scss b/src/styles-new/_legacy.scss
index c632fa1026..5eaff9b420 100644
--- a/src/styles-new/_legacy.scss
+++ b/src/styles-new/_legacy.scss
@@ -461,7 +461,7 @@ body.mobile.phone {
width: $ruleLabelW;
}
-.t-message-widget-no-data {
+.js-summary-widget__message {
display: none;
}
@@ -508,7 +508,7 @@ body.mobile.phone {
&.expanded-widget-rules {
.widget-rules-wrapper {
min-height: 50px;
- height: auto;
+ height: 100%; // Fix for Chrome 73 scrolling bug
opacity: 1;
pointer-events: inherit;
}
@@ -520,7 +520,7 @@ body.mobile.phone {
opacity: 0.3;
pointer-events: none;
}
- .t-message-widget-no-data {
+ .js-summary-widget__message {
display: flex;
}
}
@@ -1177,79 +1177,6 @@ body.desktop {
}
}
-/******************************************************************* WAIT SPINNERS */
-@mixin spinner($b: 5px, $c: $colorKey) {
- animation-name: rotation-centered;
- animation-duration: 0.5s;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
- border-radius: 100%;
- box-sizing: border-box;
- border-color: rgba($c, 0.25);
- border-top-color: rgba($c, 1.0);
- border-style: solid;
- border-width: $b;
- display: block;
- position: absolute;
- left: 50%; top: 50%;
- transform-origin: center;
- transform: translate(-50%, -50%);
-}
-
-.wait-spinner {
- @include spinner($waitSpinnerBorderW, $colorKey);
- pointer-events: none;
- z-index: 2;
- &.inline {
- display: inline-block !important;
- margin-right: $interiorMargin;
- position: relative !important;
- vertical-align: middle;
- }
-}
-
-.loading {
- // Can be applied to any block element with height and width
- pointer-events: none;
- &:before,
- &:after {
- content: '';
- }
- &:before {
- @include spinner($waitSpinnerBorderW, $colorLoadingFg);
- height: $waitSpinnerD; width: $waitSpinnerD;
- z-index: 10;
- }
- &:after {
- @include abs();
- background: $colorLoadingBg;
- display: block;
- z-index: 9;
- }
- &.tree-item.t-wait-node {
- $d: $waitSpinnerTreeD;
- $spinnerL: $interiorMargin + 19px + $d/2;
- padding-left: $spinnerL + $d/2 + $interiorMargin;
- .t-title-label {
- font-style: italic;
- opacity: 0.6;
- }
- &:before {
- height: $d;
- width: $d;
- border-width: 4px;
- left: $spinnerL;
- }
- &:after {
- display: none;
- }
- }
-
- &.c-loading--overlay {
- @include abs();
- }
-}
-
/******************************************************************* FLEX STYLES */
.l-flex-row,
.l-flex-col {
@@ -1514,6 +1441,10 @@ body.desktop {
display: contents;
}
+mct-container {
+ display: block;
+}
+
.overlay {
.outer-holder {
background: $colorMenuBg;
@@ -1579,3 +1510,157 @@ body.desktop {
}
}
}
+
+.abs {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: auto;
+ width: auto;
+}
+
+.code {
+ font-family: "Lucida Console", monospace;
+ font-size: 0.7em;
+ line-height: 150%;
+ white-space: pre;
+}
+
+.codehilite {
+ @extend .code;
+ background-color: rgba($colorBodyFg, 0.1);
+ padding: 1em;
+}
+
+.s-status-missing {
+ // Labels. Expects .s-status-missing to be applied to mct-representation that contains
+ .t-object-label .t-item-icon:before {
+ content: $glyph-icon-object-unknown;
+ }
+
+ // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
+ .item .t-item-icon-glyph:before {
+ content: $glyph-icon-object-unknown;
+ }
+
+ // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
+ &.object-header {
+ .type-icon:before {
+ content: $glyph-icon-object-unknown;
+ }
+ }
+
+ // Tree item. Expects .s-status-missing to be applied to .tree-item,
+ // and mct-representation.search-item
+ &.tree-item,
+ &.search-item {
+ > .rep-object-label .t-item-icon:before {
+ content: $glyph-icon-object-unknown;
+ }
+ }
+}
+
+.align-right {
+ text-align: right;
+}
+
+.centered {
+ text-align: center;
+}
+
+.no-selection {
+ // aka selection = "None". Used in palettes and their menu buttons.
+ $c: red;
+ $s: 48%;
+ $e: 52%;
+ background-image: linear-gradient(-45deg,
+ transparent $s - 5%,
+ $c $s,
+ $c $e,
+ transparent $e + 5%
+ );
+ box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+
+.scrolling,
+.scroll {
+ overflow: auto;
+}
+
+.vscroll {
+ overflow-x: hidden;
+ overflow-y: auto;
+ &.scroll-pad {
+ padding-right: $interiorMargin;
+ }
+}
+
+.vscroll--persist {
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+
+.slidable {
+ cursor: move; // Fallback
+ cursor: grab;
+ cursor: -moz-grab;
+ cursor: -webkit-grab;
+ &.horz {
+ cursor: col-resize;
+ }
+ &.vert {
+ cursor: row-resize;
+ }
+}
+
+.no-margin {
+ margin: 0;
+}
+
+.ds {
+ box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
+}
+
+.capitalize {
+ text-transform: capitalize;
+}
+
+.hide,
+.hidden,
+.t-main-view .hide-in-t-main-view {
+ display: none !important;
+}
+
+.hide-nice {
+ opacity: 0;
+ pointer-events: none;
+}
+
+.invisible {
+ display: block;
+ visibility: hidden;
+ height: 0;
+ padding: 0;
+ border: 0;
+ margin: 0 !important;
+ transform: scale(0);
+ pointer-events: none;
+ position: absolute;
+}
+
+.sep {
+ color: rgba(#fff, 0.2);
+}
+
+.comma-list span {
+ &:not(:first-child) {
+ &:before {
+ content: ', ';
+ }
+ }
+}
+
diff --git a/src/styles-new/_table.scss b/src/styles-new/_table.scss
index 302e63ee41..e1735435ba 100644
--- a/src/styles-new/_table.scss
+++ b/src/styles-new/_table.scss
@@ -25,9 +25,12 @@ table {
width: 100%;
thead {
- background: $colorTabHeaderBg;
- th + th {
- border-left: 1px solid $colorTabHeaderBorder;
+ th {
+ background: $colorTabHeaderBg;
+
+ + th {
+ border-left: 1px solid $colorTabHeaderBorder;
+ }
}
}
@@ -46,6 +49,8 @@ table {
td {
vertical-align: top;
}
+
+ a { color: $colorBtnMajorBg; }
}
div.c-table {
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
index dce82cfcbb..dc6c293dfe 100644
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@@ -95,7 +95,7 @@
.l-pane__contents {
display: flex;
flex-flow: column nowrap;
- overflow: auto;
+ overflow-x: hidden;
> * {
flex: 0 0 auto;
@@ -242,7 +242,10 @@
.is-editing {
.l-shell__main-container {
+ $m: 3px;
box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
+ margin-left: $m;
+ margin-right: $m;
&[s-selected] {
// Provide a clearer selection context articulation for the main edit area
diff --git a/src/ui/layout/mct-tree.vue b/src/ui/layout/mct-tree.vue
index d63d41b2e0..bd06151a98 100644
--- a/src/ui/layout/mct-tree.vue
+++ b/src/ui/layout/mct-tree.vue
@@ -9,15 +9,15 @@
-
-
+
No results found
-
+
@@ -41,6 +41,10 @@
flex: 0 0 auto;
}
+ &__loading {
+ flex: 1 1 auto;
+ }
+
&__no-results {
font-style: italic;
opacity: 0.6;
@@ -54,10 +58,16 @@
.c-tree {
@include userSelectNone();
+ height: 100%; // Chrome 73 overflow bug fix
overflow-x: hidden;
overflow-y: auto;
padding-right: $interiorMargin;
+ li {
+ position: relative;
+ &.c-tree__item-h { display: block; }
+ }
+
.c-tree {
margin-left: 15px;
}
diff --git a/src/ui/layout/tree-item.vue b/src/ui/layout/tree-item.vue
index 9ea38f1e4b..51f35662aa 100644
--- a/src/ui/layout/tree-item.vue
+++ b/src/ui/layout/tree-item.vue
@@ -11,14 +11,12 @@