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>
This commit is contained in:
Niels Lyngsø
@@ -13,7 +13,7 @@
|
||||
</umb-editor-header>
|
||||
|
||||
<umb-editor-container>
|
||||
<div class="form-vertical umb-block-grid-block-configuration-layout">
|
||||
<div class="form-vertical">
|
||||
|
||||
<div class="umb-group-panel">
|
||||
|
||||
|
||||
@@ -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.)
|
||||
|
||||
@@ -15,9 +15,9 @@
|
||||
|
||||
<umb-editor-container>
|
||||
|
||||
<div ng-if="vm.activeTab.alias === 'block'" class="form-vertical umb-block-grid-block-configuration-layout">
|
||||
<div ng-if="vm.activeTab.alias === 'block'" class="form-vertical">
|
||||
|
||||
<div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">
|
||||
<div class="umb-group-panel">
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
<localize key="general_General">General</localize>
|
||||
@@ -80,9 +80,59 @@
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="umb-group-panel">
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
<localize key="blockEditor_headlineAllowance">Permissions</localize>
|
||||
</div>
|
||||
|
||||
<div class="umb-group-panel__content">
|
||||
|
||||
<!-- allowAtRoot -->
|
||||
<div class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="allowAtRoot"><localize key="blockEditor_allowBlockInRoot">Allow in root</localize></label>
|
||||
<umb-property-info-button button-title-key="general_readMore">
|
||||
<localize key="blockEditor_allowBlockInRootHelp">Make this block available in the root of the layout.</localize>
|
||||
</umb-property-info-button>
|
||||
<div class="controls">
|
||||
<umb-toggle
|
||||
input-id="allowAtRoot"
|
||||
checked="vm.block.allowAtRoot"
|
||||
on-click="vm.block.allowAtRoot = !vm.block.allowAtRoot || false">
|
||||
</umb-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- allowInAreas -->
|
||||
<div class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="allowInAreas"><localize key="blockEditor_allowBlockInAreas">Allow in areas</localize></label>
|
||||
<umb-property-info-button button-title-key="general_readMore">
|
||||
<localize key="blockEditor_allowBlockInAreasHelp">Make this block available within other Blocks.</localize>
|
||||
</umb-property-info-button>
|
||||
<div class="controls">
|
||||
<umb-toggle
|
||||
input-id="allowInAreas"
|
||||
checked="vm.block.allowInAreas"
|
||||
on-click="vm.block.allowInAreas = !vm.block.allowInAreas || false">
|
||||
</umb-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">
|
||||
<div class="umb-group-panel">
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
<div>
|
||||
@@ -131,7 +181,7 @@
|
||||
|
||||
|
||||
|
||||
<div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">
|
||||
<div class="umb-group-panel">
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
<localize key="blockEditor_headlineCatalogueAppearance">Catalogue appearance</localize>
|
||||
@@ -196,59 +246,11 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
<localize key="blockEditor_headlineAllowance">Permissions</localize>
|
||||
</div>
|
||||
|
||||
<div class="umb-group-panel__content">
|
||||
|
||||
<!-- allowAtRoot -->
|
||||
<div class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="allowAtRoot"><localize key="blockEditor_allowBlockInRoot">Allow in root</localize></label>
|
||||
<umb-property-info-button button-title-key="general_readMore">
|
||||
<localize key="blockEditor_allowBlockInRootHelp">Make this block available in the root of the layout.</localize>
|
||||
</umb-property-info-button>
|
||||
<div class="controls">
|
||||
<umb-toggle
|
||||
input-id="allowAtRoot"
|
||||
checked="vm.block.allowAtRoot"
|
||||
on-click="vm.block.allowAtRoot = !vm.block.allowAtRoot || false">
|
||||
</umb-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- allowInAreas -->
|
||||
<div class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="allowInAreas"><localize key="blockEditor_allowBlockInAreas">Allow in areas</localize></label>
|
||||
<umb-property-info-button button-title-key="general_readMore">
|
||||
<localize key="blockEditor_allowBlockInAreasHelp">Make this block available within other Blocks.</localize>
|
||||
</umb-property-info-button>
|
||||
<div class="controls">
|
||||
<umb-toggle
|
||||
input-id="allowInAreas"
|
||||
checked="vm.block.allowInAreas"
|
||||
on-click="vm.block.allowInAreas = !vm.block.allowInAreas || false">
|
||||
</umb-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div ng-if="vm.activeTab.alias === 'areas'">
|
||||
|
||||
<div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel --span-two-cols">
|
||||
<div class="umb-group-panel">
|
||||
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
@@ -288,7 +290,7 @@
|
||||
</div>
|
||||
|
||||
<div ng-if="vm.activeTab.alias === 'advance'">
|
||||
<div class="umb-group-panel umb-block-grid-block-configuration__umb-group-panel">
|
||||
<div class="umb-group-panel">
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
<localize key="blockEditor_headlineAdvanced">Advanced</localize>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user