[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:
David Tsay 2020-10-23 12:19:16 -07:00 committed by GitHub
parent 1a6369c2b9
commit 84d21a3695
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 79 additions and 2 deletions

View File

@ -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
} }
] ]
}; };

View File

@ -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

View File

@ -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;
} }

View File

@ -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

View File

@ -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

View File

@ -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