mirror of
https://github.com/nasa/openmct.git
synced 2024-12-22 06:27:48 +00:00
[Display Layout] User should be able to set outer dimensions (#3333)
* Display Layout grid toggle and dimensions - Added toggle grid button; - Added Layout 'size' properties; - Very WIP! * Display Layout grid toggle and dimensions - Cleanup toolbar; * new configuration layoutDimensions * add outer dimensions * content dimensions not needed * show/hide layout dimensions based on selection * push non-dynamic styles to class definition * remove grid code for other display layout feature * reorder to match master * layoutDimensionsStyle computed prop should return an object * Styling for Display Layout dimensions box - Mods to markup and SCSS; - New ``$editDimensionsColor` theme constant; * Styling for Display Layout dimensions box - Refined styling; - Fixed selector for nested sub-layouts; * Styling for Display Layout dimensions box - Added v-if that now only displays the dimensions indicator if both width and height are greater than 0; * fix lint issues * fix merge issues * fix display layout dimensions logic * fix display layout dimensions check Co-authored-by: charlesh88 <charlesh88@gmail.com> Co-authored-by: Shefali Joshi <simplyrender@gmail.com> Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
This commit is contained in:
parent
1a6369c2b9
commit
84d21a3695
@ -56,6 +56,28 @@ define(function () {
|
|||||||
1
|
1
|
||||||
],
|
],
|
||||||
required: true
|
required: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Horizontal size (px)",
|
||||||
|
control: "numberfield",
|
||||||
|
cssClass: "l-input-sm l-numeric",
|
||||||
|
property: [
|
||||||
|
"configuration",
|
||||||
|
"layoutDimensions",
|
||||||
|
0
|
||||||
|
],
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Vertical size (px)",
|
||||||
|
control: "numberfield",
|
||||||
|
cssClass: "l-input-sm l-numeric",
|
||||||
|
property: [
|
||||||
|
"configuration",
|
||||||
|
"layoutDimensions",
|
||||||
|
1
|
||||||
|
],
|
||||||
|
required: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
@ -36,7 +36,15 @@
|
|||||||
:grid-size="gridSize"
|
:grid-size="gridSize"
|
||||||
:show-grid="showGrid"
|
:show-grid="showGrid"
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
v-if="shouldDisplayLayoutDimensions"
|
||||||
|
class="l-layout__dimensions"
|
||||||
|
:style="layoutDimensionsStyle"
|
||||||
|
>
|
||||||
|
<div class="l-layout__dimensions-vals">
|
||||||
|
{{ layoutDimensions[0] }},{{ layoutDimensions[1] }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<component
|
<component
|
||||||
:is="item.type"
|
:is="item.type"
|
||||||
v-for="(item, index) in layoutItems"
|
v-for="(item, index) in layoutItems"
|
||||||
@ -165,6 +173,23 @@ export default {
|
|||||||
return this.itemIsInCurrentSelection(item);
|
return this.itemIsInCurrentSelection(item);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
layoutDimensions() {
|
||||||
|
return this.internalDomainObject.configuration.layoutDimensions;
|
||||||
|
},
|
||||||
|
shouldDisplayLayoutDimensions() {
|
||||||
|
return this.layoutDimensions
|
||||||
|
&& this.layoutDimensions[0] > 0
|
||||||
|
&& this.layoutDimensions[1] > 0;
|
||||||
|
},
|
||||||
|
layoutDimensionsStyle() {
|
||||||
|
const width = `${this.layoutDimensions[0]}px`;
|
||||||
|
const height = `${this.layoutDimensions[1]}px`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
width,
|
||||||
|
height
|
||||||
|
};
|
||||||
|
},
|
||||||
showMarquee() {
|
showMarquee() {
|
||||||
let selectionPath = this.selection[0];
|
let selectionPath = this.selection[0];
|
||||||
let singleSelectedLine = this.selection.length === 1
|
let singleSelectedLine = this.selection.length === 1
|
||||||
|
@ -17,10 +17,29 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
||||||
&__grid-holder {
|
&__grid-holder,
|
||||||
|
&__dimensions {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__dimensions {
|
||||||
|
$b: 1px dashed $editDimensionsColor;
|
||||||
|
border-right: $b;
|
||||||
|
border-bottom: $b;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
&-vals {
|
||||||
|
$p: 2px;
|
||||||
|
color: $editDimensionsColor;
|
||||||
|
display: inline-block;
|
||||||
|
font-style: italic;
|
||||||
|
position: absolute;
|
||||||
|
bottom: $p; right: $p;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__frame {
|
&__frame {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
@ -34,6 +53,10 @@
|
|||||||
> .l-layout {
|
> .l-layout {
|
||||||
background: $editUIGridColorBg;
|
background: $editUIGridColorBg;
|
||||||
|
|
||||||
|
> [class*="__dimensions"] {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
> [class*="__grid-holder"] {
|
> [class*="__grid-holder"] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@ -48,6 +71,10 @@
|
|||||||
> * > * > .l-layout.allow-editing {
|
> * > * > .l-layout.allow-editing {
|
||||||
box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
|
box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
|
||||||
|
|
||||||
|
> [class*="__dimensions"] {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
> [class*='grid-holder'] {
|
> [class*='grid-holder'] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -173,6 +173,7 @@ $editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
|
|||||||
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
|
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
|
||||||
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
|
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
|
||||||
$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
|
$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
|
||||||
|
$editDimensionsColor: #6a5ea6;
|
||||||
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
|
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
|
||||||
$editFrameBorder: 1px dotted $editFrameColor;
|
$editFrameBorder: 1px dotted $editFrameColor;
|
||||||
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
|
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
|
||||||
|
@ -177,6 +177,7 @@ $editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
|
|||||||
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
|
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
|
||||||
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
|
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
|
||||||
$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
|
$editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
|
||||||
|
$editDimensionsColor: #6a5ea6;
|
||||||
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
|
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
|
||||||
$editFrameBorder: 1px dotted $editFrameColor;
|
$editFrameBorder: 1px dotted $editFrameColor;
|
||||||
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
|
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
|
||||||
|
@ -173,6 +173,7 @@ $editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
|
|||||||
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
|
$editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
|
||||||
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
|
$editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
|
||||||
$editUIGridColorFg: rgba($editUIBaseColor, 0.3); // Grid lines in layout editing area
|
$editUIGridColorFg: rgba($editUIBaseColor, 0.3); // Grid lines in layout editing area
|
||||||
|
$editDimensionsColor: #d7aeff;
|
||||||
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
|
$editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
|
||||||
$editFrameBorder: 1px dotted $editFrameColor;
|
$editFrameBorder: 1px dotted $editFrameColor;
|
||||||
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
|
$editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects
|
||||||
|
Loading…
Reference in New Issue
Block a user