mirror of
https://github.com/nasa/openmct.git
synced 2025-06-22 00:57:11 +00:00
Toolbar in Fixed Position (#2194)
* Initial attempt at getting the toolbar for the fixed position working with the Vue toolbar controls. * Set title for controls * Significant mods to support legacy Fixed Position - Moved selection and editing styles into _global.scss; - Changed class naming in legacy fixed.html to map to newer CSS styles; * Pass in the color value * Do not show the toolbar container if structure is empty. * Use a plugin for fixed position to get access to openmct. Show the toolbar only if the object is being edited. * Ensure fixedController is on the selection context when editing * Add listener for a domain object with the same id only once. Update the toolbar value after the object mutation. Remove editor isEditing listener on destroyed. * Remove space between the size and px. If newObject exists, update the toolbar value. * Remove --nwse class name which seems to be a typo * use modifier convention
This commit is contained in:
Pegah Sarram
committed by
Pete Richards
Pete Richards
parent
67883519ee
commit
4374a6fa28
@ -53,14 +53,8 @@
|
||||
<style lang="scss">
|
||||
@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;
|
||||
</style>
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@ -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());
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user