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>
This commit is contained in:
Niels Lyngsø
@@ -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;
|
||||
}
|
||||
|
||||
@@ -179,73 +179,6 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="umb-group-panel">
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
<localize key="blockEditor_headlineCatalogueAppearance">Catalogue appearance</localize>
|
||||
</div>
|
||||
|
||||
<div class="umb-group-panel__content">
|
||||
|
||||
<button ng-if="!vm.showAppearanceOptions" type="button" class="btn-reset __settings-input --noValue umb-outline" style="height: 80px;" ng-click="vm.showAppearanceOptions = true">
|
||||
<localize key="blockEditor_showAppearanceOptions">Show catalogue appearance</localize>
|
||||
</button>
|
||||
|
||||
<!-- backgroundColor -->
|
||||
<div ng-if="vm.showAppearanceOptions" class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="backgroundColor"><localize key="blockEditor_labelBackgroundColor">Background Color</localize></label>
|
||||
<div class="controls">
|
||||
<umb-color-picker
|
||||
ng-model="vm.block.backgroundColor"
|
||||
options="vm.colorPickerOptions"
|
||||
on-change="vm.changeBackgroundColor(color)">
|
||||
</umb-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- iconColor -->
|
||||
<div ng-if="vm.showAppearanceOptions" class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="iconColor"><localize key="blockEditor_labelIconColor">Icon Color</localize></label>
|
||||
<div class="controls">
|
||||
<umb-color-picker
|
||||
ng-model="vm.block.iconColor"
|
||||
options="vm.colorPickerOptions"
|
||||
on-change="vm.changeIconColor(color)">
|
||||
</umb-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- thumbnail -->
|
||||
<div ng-if="vm.showAppearanceOptions" class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="iconcolor"><localize key="blockEditor_thumbnail">Thumbnail</localize></label>
|
||||
<div class="controls">
|
||||
<div class="__settings-input --hasValue" ng-if="vm.block.thumbnail !== null" >
|
||||
|
||||
<umb-node-preview icon="'icon-document'" name="vm.block.thumbnail"></umb-node-preview>
|
||||
<div class="__control-actions">
|
||||
<button type="button" class="btn-reset __control-actions-btn --remove umb-outline" ng-click="vm.removeThumbnailForBlock(vm.block)">
|
||||
<umb-icon icon="icon-wrong" class="icon"></umb-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn-reset __settings-input --noValue --hideText umb-outline" ng-if="vm.block.thumbnail === null" ng-click="vm.addThumbnailForBlock(vm.block)">
|
||||
<localize key="blockEditor_addThumbnail">Add thumbnail</localize>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div ng-if="vm.activeTab.alias === 'areas'">
|
||||
@@ -386,6 +319,70 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="umb-group-panel">
|
||||
|
||||
<div class="umb-group-panel__header">
|
||||
<localize key="blockEditor_headlineCatalogueAppearance">Catalogue appearance</localize>
|
||||
</div>
|
||||
|
||||
<div class="umb-group-panel__content">
|
||||
|
||||
<button ng-if="!vm.showAppearanceOptions" type="button" class="btn-reset __settings-input --noValue umb-outline" style="height: 80px;" ng-click="vm.showAppearanceOptions = true">
|
||||
<localize key="blockEditor_showAppearanceOptions">Show catalogue appearance</localize>
|
||||
</button>
|
||||
|
||||
<!-- backgroundColor -->
|
||||
<div ng-if="vm.showAppearanceOptions" class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="backgroundColor"><localize key="blockEditor_labelBackgroundColor">Background Color</localize></label>
|
||||
<div class="controls">
|
||||
<umb-color-picker
|
||||
ng-model="vm.block.backgroundColor"
|
||||
options="vm.colorPickerOptions"
|
||||
on-change="vm.changeBackgroundColor(color)">
|
||||
</umb-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- iconColor -->
|
||||
<div ng-if="vm.showAppearanceOptions" class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="iconColor"><localize key="blockEditor_labelIconColor">Icon Color</localize></label>
|
||||
<div class="controls">
|
||||
<umb-color-picker
|
||||
ng-model="vm.block.iconColor"
|
||||
options="vm.colorPickerOptions"
|
||||
on-change="vm.changeIconColor(color)">
|
||||
</umb-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- thumbnail -->
|
||||
<div ng-if="vm.showAppearanceOptions" class="control-group umb-control-group -no-border">
|
||||
<div class="umb-el-wrap">
|
||||
<label class="control-label" for="iconcolor"><localize key="blockEditor_thumbnail">Thumbnail</localize></label>
|
||||
<div class="controls">
|
||||
<div class="__settings-input --hasValue" ng-if="vm.block.thumbnail !== null" >
|
||||
|
||||
<umb-node-preview icon="'icon-document'" name="vm.block.thumbnail"></umb-node-preview>
|
||||
<div class="__control-actions">
|
||||
<button type="button" class="btn-reset __control-actions-btn --remove umb-outline" ng-click="vm.removeThumbnailForBlock(vm.block)">
|
||||
<umb-icon icon="icon-wrong" class="icon"></umb-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn-reset __settings-input --noValue --hideText umb-outline" ng-if="vm.block.thumbnail === null" ng-click="vm.addThumbnailForBlock(vm.block)">
|
||||
<localize key="blockEditor_addThumbnail">Add thumbnail</localize>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</umb-editor-container>
|
||||
|
||||
Reference in New Issue
Block a user