From c64850572b697e1dbd20f1e8a3163fbf0937f76a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Mon, 21 Nov 2022 14:17:47 +0100 Subject: [PATCH] Block Grid Editor - make prevalue overlay medium sized (#13443) * 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 Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> --- ...kgrid.blockconfiguration.area.overlay.html | 2 +- ...blockgrid.blockconfiguration.controller.js | 2 +- .../blockgrid.blockconfiguration.overlay.html | 110 +++++++++--------- .../blockgrid.blockconfiguration.overlay.less | 23 ---- 4 files changed, 58 insertions(+), 79 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.area.overlay.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.area.overlay.html index 90918d71e1..a4ba0db72e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.area.overlay.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.area.overlay.html @@ -13,7 +13,7 @@ -
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js index 3c005663e8..993088e2eb 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.controller.js @@ -287,7 +287,7 @@ title: data, openAreas: openAreas, view: "views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.html", - size: "large", + size: "medium", submit: function(overlayModel) { loadElementTypes()// lets load elementType again, to ensure we are up to date. TransferProperties(overlayModel.block, block);// transfer properties back to block object. (Doing this cause we dont know if block object is added to model jet, therefor we cant use index or replace the object.) 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 4d398844ed..9a1acda843 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 @@ -15,9 +15,9 @@ -
+
-
+
General @@ -80,9 +80,59 @@
+ + +
+ +
+ Permissions +
+ +
+ + +
+
+ + + Make this block available in the root of the layout. + +
+ + +
+
+
+ + + +
+
+ + + Make this block available within other Blocks. + +
+ + +
+
+
+ +
+ +
+ + -
+
@@ -131,7 +181,7 @@ -
+
Catalogue appearance @@ -196,59 +246,11 @@
- -
- -
- Permissions -
- -
- - -
-
- - - Make this block available in the root of the layout. - -
- - -
-
-
- - - -
-
- - - Make this block available within other Blocks. - -
- - -
-
-
- -
- -
-
-
+
@@ -288,7 +290,7 @@
-
+
Advanced diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.less index 57507f8044..5861cfdda5 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.less +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/prevalue/blockgrid.blockconfiguration.overlay.less @@ -1,28 +1,5 @@ .umb-block-grid-block-configuration-overlay { - .umb-block-grid-block-configuration-layout { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - - grid-gap: 0 20px; - grid-auto-flow: row; - grid-auto-rows: minmax(50px, auto); - - - } - - - .umb-block-grid-block-configuration__umb-group-panel { - @media (max-width: 1024px) { - grid-column: span 2; - } - &.--span-two-cols { - grid-column: span 2; - } - &.--span-two-rows { - grid-row: span 2; - } - } .umb-node-preview { flex-grow: 1;