@import "~styles/sass-base";
- .l-layout,
- .c-grid,
- .c-grid__x,
- .c-grid__y {
- @include abs();
- }
-
.l-layout {
+ @include abs();
display: flex;
flex-direction: column;
@@ -78,34 +72,15 @@
}
}
- .c-grid {
- pointer-events: none;
-
- &__x { @include bgTicks($colorGridLines, 'x'); }
- &__y { @include bgTicks($colorGridLines, 'y'); }
- }
-
- .is-editing {
- .l-shell__main-container > .l-layout {
- // Target the top-most layout container and color its background
- background: rgba($editColor, 0.1);
- }
-
- [s-selected],
- [s-selected-parent] {
- .l-layout {
- // Show the layout grid for the top-most child of the current selection,
- // and hide the grid for deeper nested levels.
- [class*="__grid-holder"] {
- display: block;
- }
-
- .l-layout [class*="__grid-holder"] {
- display: none;
- }
+ .l-shell__main-container {
+ > .l-layout {
+ [s-selected] {
+ border: $browseBorderSelected;
}
}
}
+
+ // Styles moved to _global.scss;
@@ -237,22 +212,17 @@
return;
}
- let domainObject = selection[0].context.item;
- if (domainObject && domainObject === this.selectedObject) {
- return;
- }
-
- this.selectedObject = domainObject;
this.removeListeners();
+ let domainObject = selection[0].context.item;
- if (selection[1]) {
- this.attachSelectionListeners();
+ if (selection[1] && domainObject) {
+ this.attachSelectionListeners(domainObject.identifier);
}
this.updateDrilledInState();
},
- attachSelectionListeners() {
- let id = this.openmct.objects.makeKeyString(this.selectedObject.identifier);
+ attachSelectionListeners(identifier) {
+ let id = this.openmct.objects.makeKeyString(identifier);
let path = "configuration.layout.panels[" + id + "]";
this.listeners.push(this.openmct.objects.observe(this.newDomainObject, path + ".hasFrame", function (newValue) {
this.frameItems.forEach(function (item) {
diff --git a/src/plugins/displayLayout/LayoutFrame.vue b/src/plugins/displayLayout/LayoutFrame.vue
index c4368838fc..9494cde4e8 100644
--- a/src/plugins/displayLayout/LayoutFrame.vue
+++ b/src/plugins/displayLayout/LayoutFrame.vue
@@ -132,110 +132,8 @@
padding: $interiorMargin;
}
- /*************************** SELECTION */
- &.is-selectable {
- &:hover {
- box-shadow: $browseShdwSelectableHov;
- }
- }
-
- &[s-selected], // LEGACY
- &.is-selected {
- border: $browseBorderSelected;
- }
+ // Styles moved to _global.scss;
}
-
- /*************************** EDITING */
- .is-editing {
- .c-frame {
- &:not(.is-drilled-in).is-selectable {
- border: $editBorderSelectable;
-
- &:hover {
- border: $editBorderSelectableHov;
- }
-
- &[s-selected],
- &.is-selected {
- border: $editBorderSelected;
-
- > .c-frame-edit {
- display: block; // Show the editing rect and handles
- }
- }
- }
-
- &.is-drilled-in {
- border: $editBorderDrilledIn;
- }
-
- .u-links {
- // Applied in markup to objects that provide links. Disable while editing.
- pointer-events: none;
- }
- }
- }
-
- .c-frame-edit {
- // The editing rect and handles
- $z: 10;
-
- @include abs();
- box-shadow: rgba($editColor, 0.5) 0 0 10px;
- display: none;
-
- &__move {
- @include abs();
- cursor: move;
- z-index: $z;
- }
-
- &__handle {
- $d: 8px;
- $o: floor($d * -0.5);
- background: rgba($editColor, 0.3);
- border: 1px solid $editColor;
- position: absolute;
- width: $d; height: $d;
- top: auto; right: auto; bottom: auto; left: auto;
- z-index: $z + 1;
-
- &:before {
- // Extended hit area
- $m: -5px;
- content: '';
- display: block;
- position: absolute;
- top: $m; right: $m; bottom: $m; left: $m;
- z-index: -1;
- }
-
- &:hover {
- background: $editColor;
- }
-
- &.--nw {
- cursor: nw-resize;
- left: $o; top: $o;
- }
-
- &.--ne {
- cursor: ne-resize;
- right: $o; top: $o;
- }
-
- &.--se {
- cursor: se-resize;
- right: $o; bottom: $o;
- }
-
- &.--sw {
- cursor: sw-resize;
- left: $o; bottom: $o;
- }
- }
- }
-
diff --git a/src/plugins/displayLayout/plugin.js b/src/plugins/displayLayout/plugin.js
index 6e7fb53324..a9bdbe19de 100644
--- a/src/plugins/displayLayout/plugin.js
+++ b/src/plugins/displayLayout/plugin.js
@@ -72,6 +72,7 @@ export default function () {
// and in edit mode.
return (selection &&
selection[1] &&
+ selection[1].context.item &&
selection[1].context.item.type === 'layout' &&
openmct.editor.isEditing());
},
diff --git a/src/plugins/plugins.js b/src/plugins/plugins.js
index 17e2c17752..7efb3da0c2 100644
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -36,7 +36,8 @@ define([
'./staticRootPlugin/plugin',
'./notebook/plugin',
'./displayLayout/plugin',
- './folderView/plugin'
+ './folderView/plugin',
+ '../../platform/features/fixed/plugin'
], function (
_,
UTCTimeSystem,
@@ -53,7 +54,8 @@ define([
StaticRootPlugin,
Notebook,
DisplayLayoutPlugin,
- FolderView
+ FolderView,
+ FixedView
) {
var bundleMap = {
LocalStorage: 'platform/persistence/local',
@@ -165,6 +167,7 @@ define([
plugins.Notebook = Notebook;
plugins.DisplayLayout = DisplayLayoutPlugin.default;
plugins.FolderView = FolderView;
+ plugins.FixedView = FixedView;
return plugins;
});
diff --git a/src/plugins/telemetryTable/TableConfigurationViewProvider.js b/src/plugins/telemetryTable/TableConfigurationViewProvider.js
index 1460be1262..1ece6d5e6e 100644
--- a/src/plugins/telemetryTable/TableConfigurationViewProvider.js
+++ b/src/plugins/telemetryTable/TableConfigurationViewProvider.js
@@ -41,7 +41,7 @@ define([
return false;
}
let object = selection[0].context.item;
- return object.type === 'table';
+ return object && object.type === 'table';
},
view: function (selection) {
let component;
diff --git a/src/styles-new/_global.scss b/src/styles-new/_global.scss
index e939fb74a8..2d40142acc 100644
--- a/src/styles-new/_global.scss
+++ b/src/styles-new/_global.scss
@@ -229,6 +229,157 @@ 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 {
+ @include abs();
+}
+
+.c-grid {
+ pointer-events: none;
+
+ &__x { @include bgTicks($colorGridLines, 'x'); }
+ &__y { @include bgTicks($colorGridLines, 'y'); }
+}
+
+/*************************** SELECTION */
+.is-selectable {
+ &:hover {
+ box-shadow: $browseShdwSelectableHov;
+ }
+}
+
+/**************************** EDITING */
+.is-editing {
+ *:not(.is-drilled-in).is-selectable {
+ border: $editBorderSelectable;
+
+ &:hover {
+ border: $editBorderSelectableHov;
+ }
+
+ &[s-selected],
+ &.is-selected {
+ border: $editBorderSelected;
+
+ > .c-frame-edit {
+ display: block; // Show the editing rect and handles
+ }
+ }
+ }
+
+ *.is-drilled-in {
+ border: $editBorderDrilledIn;
+ }
+
+ .u-links {
+ // Applied in markup to objects that provide links. Disable while editing.
+ pointer-events: none;
+ }
+
+ .c-frame-edit {
+ // In Layouts, this is the editing rect and handles
+ // In Fixed Position, this is a wrapper element
+ $z: 10;
+
+ @include abs();
+ display: none;
+
+ &__move {
+ @include abs();
+ box-shadow: rgba($editColor, 0.5) 0 0 10px;
+ cursor: move;
+ z-index: $z;
+ }
+
+ &__handle {
+ $d: 8px;
+ $o: floor($d * -0.5);
+ background: rgba($editColor, 0.3);
+ border: 1px solid $editColor;
+ position: absolute;
+ width: $d; height: $d;
+ top: auto; right: auto; bottom: auto; left: auto;
+ z-index: $z + 1;
+
+ &:before {
+ // Extended hit area
+ $m: -5px;
+ content: '';
+ display: block;
+ position: absolute;
+ top: $m; right: $m; bottom: $m; left: $m;
+ z-index: -1;
+ }
+
+ &:hover {
+ background: $editColor;
+ }
+
+ &--nwse {
+ cursor: nwse-resize;
+ }
+
+ &--nw {
+ cursor: nw-resize;
+ left: $o; top: $o;
+ }
+
+ &--ne {
+ cursor: ne-resize;
+ right: $o; top: $o;
+ }
+
+ &--se {
+ cursor: se-resize;
+ right: $o; bottom: $o;
+ }
+
+ &--sw {
+ cursor: sw-resize;
+ left: $o; bottom: $o;
+ }
+ }
+ }
+
+ .l-shell__main-container > .l-layout,
+ .l-shell__main-container > .c-object-view .l-fixed-position {
+ // Target the top-most layout container and color its background
+ background: rgba($editColor, 0.1);
+ }
+
+ // Layouts
+ [s-selected],
+ [s-selected-parent] {
+ .l-layout {
+ // Show the layout grid for the top-most child of the current selection,
+ // and hide the grid for deeper nested levels.
+ [class*="__grid-holder"] {
+ display: block;
+ }
+
+ .l-layout [class*="__grid-holder"] {
+ display: none;
+ }
+ }
+ }
+
+ // Fixed position
+ .l-fixed-position {
+ &__grid-holder {
+ display: block;
+ }
+
+ .c-frame-edit {
+ display: block;
+ }
+ }
+}
+
+
/************************** LEGACY */
mct-container {
diff --git a/src/ui/components/inspector/Properties.vue b/src/ui/components/inspector/Properties.vue
index 6a2a493809..47af06b73d 100644
--- a/src/ui/components/inspector/Properties.vue
+++ b/src/ui/components/inspector/Properties.vue
@@ -4,19 +4,19 @@