From 84d21a36956effb7f68771a8e4d2a726f3dfd42d Mon Sep 17 00:00:00 2001 From: David Tsay <3614296+davetsay@users.noreply.github.com> Date: Fri, 23 Oct 2020 12:19:16 -0700 Subject: [PATCH] [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 Co-authored-by: Shefali Joshi Co-authored-by: Deep Tailor --- .../displayLayout/DisplayLayoutType.js | 22 ++++++++++++++ .../components/DisplayLayout.vue | 27 ++++++++++++++++- .../components/display-layout.scss | 29 ++++++++++++++++++- src/styles/_constants-espresso.scss | 1 + src/styles/_constants-maelstrom.scss | 1 + src/styles/_constants-snow.scss | 1 + 6 files changed, 79 insertions(+), 2 deletions(-) diff --git a/src/plugins/displayLayout/DisplayLayoutType.js b/src/plugins/displayLayout/DisplayLayoutType.js index f7762a37ac..bbde427b07 100644 --- a/src/plugins/displayLayout/DisplayLayoutType.js +++ b/src/plugins/displayLayout/DisplayLayoutType.js @@ -56,6 +56,28 @@ define(function () { 1 ], 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 } ] }; diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue index ee99a4eb10..c2c69f331d 100644 --- a/src/plugins/displayLayout/components/DisplayLayout.vue +++ b/src/plugins/displayLayout/components/DisplayLayout.vue @@ -36,7 +36,15 @@ :grid-size="gridSize" :show-grid="showGrid" /> - +
+
+ {{ layoutDimensions[0] }},{{ layoutDimensions[1] }} +
+
0 + && this.layoutDimensions[1] > 0; + }, + layoutDimensionsStyle() { + const width = `${this.layoutDimensions[0]}px`; + const height = `${this.layoutDimensions[1]}px`; + + return { + width, + height + }; + }, showMarquee() { let selectionPath = this.selection[0]; let singleSelectedLine = this.selection.length === 1 diff --git a/src/plugins/displayLayout/components/display-layout.scss b/src/plugins/displayLayout/components/display-layout.scss index 426cbff607..93366d5492 100644 --- a/src/plugins/displayLayout/components/display-layout.scss +++ b/src/plugins/displayLayout/components/display-layout.scss @@ -17,10 +17,29 @@ flex-direction: column; overflow: auto; - &__grid-holder { + &__grid-holder, + &__dimensions { 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 { position: absolute; } @@ -34,6 +53,10 @@ > .l-layout { background: $editUIGridColorBg; + > [class*="__dimensions"] { + display: block; + } + > [class*="__grid-holder"] { display: block; } @@ -48,6 +71,10 @@ > * > * > .l-layout.allow-editing { box-shadow: inset $editUIGridColorFg 0 0 2px 1px; + > [class*="__dimensions"] { + display: block; + } + > [class*='grid-holder'] { display: block; } diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss index 6963c8837e..cbc315db2a 100644 --- a/src/styles/_constants-espresso.scss +++ b/src/styles/_constants-espresso.scss @@ -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 $editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of 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 $editFrameBorder: 1px dotted $editFrameColor; $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss index e85b741dac..415d7c5969 100644 --- a/src/styles/_constants-maelstrom.scss +++ b/src/styles/_constants-maelstrom.scss @@ -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 $editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of 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 $editFrameBorder: 1px dotted $editFrameColor; $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss index fde8c6edd7..ccaf0246be 100644 --- a/src/styles/_constants-snow.scss +++ b/src/styles/_constants-snow.scss @@ -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 $editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of 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 $editFrameBorder: 1px dotted $editFrameColor; $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects