From 2a22cece7e39e753e0ad6997d1d722bd6af555e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 21 Nov 2022 16:22:49 +0100 Subject: [PATCH] block grid editor visual adjustments (#13446) * make sure area border is on top of block views. * rename class to avoid confusion * change witch UI goes on top on hover * Description informing all blocks are allowed when none is configured. * add 'When empty' * Sort mode * ability to switch out property actions * enter and exit sortmode from property actions * gridsortblock * rename block class to use sortblock * Sort mode styling * remove unused css selector * fixing style for inline-creat button to appear above and not when hovering contextbar * work on block grid inline editor * use uui-button + enable installing demo blocks when its not the first dataType of this kind. * improvements to inline editing POC * update title of area config overlay editor * reset columnSpan if no column span options is defined. * Inline editing * remove html comment * remove code for transfer of stylesheets * ability to hide label from directive * inline editing using slots to render the umb-property in light dom * remove property editor proxies when moving a block to a new area/block/context * minor adjustments to custom views * use individual slots for each area. * Inline editing * a little smaller rte min-height * fire Custom focus/blur event for Block Grid Editor to catch for focus imitation * disable inline editing prevalue field when custom view is set * Fix scroll parent block into view * initial work on sorter directive * remove mediaBlock controller * initial notes and structure * further concept work * remove consol log * CSS for getting bigger areas * removal of the forceLeft/forceRight code * proven concept * fix grid space detection. vertical/horizontal * clean up and notes * move into inner containers as well * use last available index pr default * boundary selector, for improved choise of dropping into an area * hide last inline create button when dragging around * remove console.log * removal of forced placement in css * default config and clean up * notes * bring back removed code * show area ui when in dragging mode * more specific selector * drop allowance + clean up * notes and clean up * auto scroll * turn --umb-block-grid--dragging-mode into conditional CSS Custom Property * auto scroll * refactoring * fix condition mistake * scope.config.resolveVerticalDirection * wrap up simple setDragImage solution * bring back vm.notifyVisualUpdate and clean up * make draggableSelector optional, fallback to element * implement umb-block-grid-sorter for Area PreValue editor * remove sortableJS dependency * remove sortableJs from dependencies * wups, bring back the comma * removed sortablejs from package-lock * finished implementation of sorter for PreValue Block Areas * fix for FireFox shadowDom issue, contains temprorary code. * stop auto scroll * make full thing dragable * fix firefox issue (applying translateZ) * comment * make block fit in context columns * revert element to where it came from if sync could not succeed + clean up * ensure block does not push the amount of columns, this occourse when dragging item around. * take horizontalPlaceAfter into account * implement horizontalPlaceAfter in Areas Prevalue editor * clean up dependencies * Shift related el to first in row or last in row when there is no horizontal room * clean up and correct calculation * remove unused attribute * revert to using el.getBoundingClientRect(), as the config.draggableSelector is not available for the placeholder item. * bind model via dedicated binding to ensure it stay connected with the source model * Update src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/umb-block-grid-area-editor.html Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> * fix eslint issues * ensure missingColumnWidth is above 0 * Do not allow dragging something thats not found in the model. * remove as this is not an error. * update to Flexbox solution * as the complex model does not change we can use single way binding * Adjust columnSpan to context container, keep start columnSpan as the target for the calculation. * make prevalue editor overlay medium size * more white borders on UI * move Catalogue appearance to Advanced Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> --- .../blockgrid/blockgridui.less | 8 +- .../blockgrid.blockconfiguration.overlay.html | 131 +++++++++--------- 2 files changed, 70 insertions(+), 69 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less index c037631d46..d66a6bf5c5 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/blockgridui.less @@ -223,8 +223,8 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl .umb-block-grid__block--context { position: absolute; - top: -20px; - right: 0; + top: -21px; + right: -1px; font-size: 12px; z-index: 4; display: var(--umb-block-grid--block-ui-display, flex); @@ -245,6 +245,9 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl padding-top: 1px; background-color: #3544B1; color: white; + border-top: rgba(255, 255, 255, .7) 1px solid; + border-left: rgba(255, 255, 255, .7) 1px solid; + border-right: rgba(255, 255, 255, .7) 1px solid; border-top-left-radius: 3px; border-top-right-radius: 3px; display: inline-block; @@ -367,6 +370,7 @@ ng-form.ng-invalid > .umb-block-grid__block:not(.--active) > .umb-block-grid__bl padding: 0; background-color: white; border: @blueDark solid 1px; + box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); opacity: 0; transition: opacity 120ms; } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html index 9a1acda843..cfc288c3b8 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html @@ -179,73 +179,6 @@ - - -
- -
- Catalogue appearance -
- -
- - - - -
-
- -
- - -
-
-
- - -
-
- -
- - -
-
-
- - -
-
- -
-
- - -
- -
-
- -
-
-
- -
- -
-
@@ -386,6 +319,70 @@
+
+ +
+ Catalogue appearance +
+ +
+ + + + +
+
+ +
+ + +
+
+
+ + +
+
+ +
+ + +
+
+
+ + +
+
+ +
+
+ + +
+ +
+
+ +
+
+
+ +
+ +