+
+
{{ 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..c9d58c85bc 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.domainObject.status === 'missing'}"
+ ng-repeat="series in series track by $index"
+ >
-
+
{{ series.get('name') }}
-
+
+
Cursor locked to point
@@ -76,12 +84,15 @@
-
-
+
+
+
{{ series.get('name') }}
@@ -134,7 +145,7 @@
{{option.name}}
-
+
@@ -22,14 +22,21 @@
- {{ tab.domainObject.name }}
+
+
+
+ {{ tab.domainObject.name }}
-
-
- {{ currentTab.domainObject.name }}
-
-
import ObjectView from '../../../ui/components/ObjectView.vue';
+import {
+ getSearchParam,
+ setSearchParam,
+ deleteSearchParam
+} from 'utils/openmctLocation';
+
var unknownObjectType = {
definition: {
@@ -71,26 +75,45 @@ export default {
components: {
ObjectView
},
+ props: {
+ isEditing: {
+ type: Boolean,
+ required: true
+ }
+ },
data: function () {
+ let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
return {
internalDomainObject: this.domainObject,
currentTab: {},
+ currentTabIndex: undefined,
tabsList: [],
setCurrentTab: true,
isDragging: false,
- allowDrop: false
+ allowDrop: false,
+ searchTabKey: `tabs.pos.${keyString}`
};
},
+ computed: {
+ allowEditing() {
+ return !this.internalDomainObject.locked && this.isEditing;
+ }
+ },
mounted() {
if (this.composition) {
this.composition.on('add', this.addItem);
this.composition.on('remove', this.removeItem);
this.composition.on('reorder', this.onReorder);
this.composition.load().then(() => {
- let currentTabIndex = this.domainObject.currentTabIndex;
+ let currentTabIndexFromURL = getSearchParam(this.searchTabKey);
+ let currentTabIndexFromDomainObject = this.internalDomainObject.currentTabIndex;
- if (currentTabIndex !== undefined && this.tabsList.length > currentTabIndex) {
- this.currentTab = this.tabsList[currentTabIndex];
+ if (currentTabIndexFromURL !== null) {
+ this.setCurrentTabByIndex(currentTabIndexFromURL);
+ } else if (currentTabIndexFromDomainObject !== undefined) {
+ this.setCurrentTabByIndex(currentTabIndexFromDomainObject);
+ this.storeCurrentTabIndexInURL(currentTabIndexFromDomainObject);
}
});
}
@@ -100,20 +123,29 @@ export default {
document.addEventListener('dragstart', this.dragstart);
document.addEventListener('dragend', this.dragend);
},
+ beforeDestroy() {
+ this.persistCurrentTabIndex(this.currentTabIndex);
+ },
destroyed() {
this.composition.off('add', this.addItem);
this.composition.off('remove', this.removeItem);
this.composition.off('reorder', this.onReorder);
this.unsubscribe();
+ this.clearCurrentTabIndexFromURL();
document.removeEventListener('dragstart', this.dragstart);
document.removeEventListener('dragend', this.dragend);
},
methods:{
+ setCurrentTabByIndex(index) {
+ if (this.tabsList[index]) {
+ this.currentTab = this.tabsList[index];
+ }
+ },
showTab(tab, index) {
if (index !== undefined) {
- this.storeCurrentTabIndex(index);
+ this.storeCurrentTabIndexInURL(index);
}
this.currentTab = tab;
@@ -133,6 +165,10 @@ export default {
this.setCurrentTab = false;
}
},
+ reset() {
+ this.currentTab = {};
+ this.setCurrentTab = true;
+ },
removeItem(identifier) {
let pos = this.tabsList.findIndex(tab =>
tab.domainObject.identifier.namespace === identifier.namespace && tab.domainObject.identifier.key === identifier.key
@@ -144,6 +180,10 @@ export default {
if (this.isCurrent(tabToBeRemoved)) {
this.showTab(this.tabsList[this.tabsList.length - 1], this.tabsList.length - 1);
}
+
+ if (!this.tabsList.length) {
+ this.reset();
+ }
},
onReorder(reorderPlan) {
let oldTabs = this.tabsList.slice();
@@ -154,7 +194,7 @@ export default {
},
onDrop(e) {
this.setCurrentTab = true;
- this.storeCurrentTabIndex(this.tabsList.length);
+ this.storeCurrentTabIndexInURL(this.tabsList.length);
},
dragstart(e) {
if (e.dataTransfer.types.includes('openmct/domain-object-path')) {
@@ -177,8 +217,19 @@ export default {
updateInternalDomainObject(domainObject) {
this.internalDomainObject = domainObject;
},
- storeCurrentTabIndex(index) {
+ persistCurrentTabIndex(index) {
this.openmct.objects.mutate(this.internalDomainObject, 'currentTabIndex', index);
+ },
+ storeCurrentTabIndexInURL(index) {
+ let currentTabIndexInURL = getSearchParam(this.searchTabKey);
+
+ if (index !== currentTabIndexInURL) {
+ setSearchParam(this.searchTabKey, index);
+ this.currentTabIndex = index;
+ }
+ },
+ clearCurrentTabIndexFromURL() {
+ deleteSearchParam(this.searchTabKey);
}
}
}
diff --git a/src/plugins/tabs/tabs.js b/src/plugins/tabs/tabs.js
index 83f41d9f6b..2c6ff70d78 100644
--- a/src/plugins/tabs/tabs.js
+++ b/src/plugins/tabs/tabs.js
@@ -42,20 +42,28 @@ define([
let component;
return {
- show: function (element) {
+ show: function (element, editMode) {
component = new Vue({
el: element,
components: {
TabsComponent: TabsComponent.default
},
+ data() {
+ return {
+ isEditing: editMode
+ };
+ },
provide: {
openmct,
domainObject,
composition: openmct.composition.get(domainObject)
},
- template: ' '
+ template: ' '
});
},
+ onEditModeChange(editMode) {
+ component.isEditing = editMode;
+ },
destroy: function (element) {
component.$destroy();
component = undefined;
diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
index 3e3bbaf2db..d8d5253562 100644
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -151,6 +151,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(1.2) contrast(1.1);
+$filterItemMissing: brightness(0.6) grayscale(1);
+$opacityMissing: 0.5;
+$borderMissing: 1px dashed $colorAlert !important;
/************************************************** EDITING */
$editUIColor: $uiColor; // Base color
diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss
index d72abb7f8e..6604c0b987 100644
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -155,6 +155,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(1.2) contrast(1.1);
+$filterItemMissing: contrast(0.2);
+$opacityMissing: 0.5;
+$borderMissing: 1px dashed $colorAlert !important;
/************************************************** EDITING */
$editUIColor: $uiColor; // Base color
diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss
index 7f44128019..df0078b317 100644
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -151,6 +151,10 @@ $browseFrameColor: pullForward($colorBodyBg, 10%);
$browseFrameBorder: 1px solid $browseFrameColor; // Frames in Disp and Flex Layouts when frame is showing
$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
+$filterItemHoverFg: brightness(0.9);
+$filterItemMissing: contrast(0.2);
+$opacityMissing: 0.4;
+$borderMissing: 1px dashed $colorAlert !important;
/************************************************** EDITING */
$editUIColor: $uiColor; // Base color
diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss
index 414b77c205..98b4e517e9 100755
--- a/src/styles/_constants.scss
+++ b/src/styles/_constants.scss
@@ -61,7 +61,7 @@ $plotXBarH: 35px;
$plotLegendH: 20px;
$plotLegendWidthCollapsed: 20%;
$plotLegendWidthExpanded: 50%;
-$plotSwatchD: 10px;
+$plotSwatchD: 12px;
$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
$plotMinH: 95px;
$controlBarH: 25px;
diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
index 565295d6dd..f31fb39c62 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -420,9 +420,7 @@ select {
margin: 1px 1px 0 0;
padding: $interiorMargin $interiorMarginLg;
white-space: nowrap;
-
--notchSize: 7px;
-
clip-path:
polygon(
0% 0%,
@@ -433,8 +431,12 @@ select {
0% 100%
);
+ > * + * {
+ 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'
}"
>
- {{ observedObject.name }}
+ >
+
+
+
+ {{ observedObject.name }}
+
diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue
index ab6777e37b..870cc34d4d 100644
--- a/src/ui/components/ObjectView.vue
+++ b/src/ui/components/ObjectView.vue
@@ -301,7 +301,7 @@ export default {
objectPath= this.currentObjectPath || this.objectPath,
parentObject = objectPath[1];
- return [browseObject, parentObject, this.currentObject].every(object => !object.locked);
+ return [browseObject, parentObject, this.currentObject].every(object => object && !object.locked);
}
}
}
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 @@