yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/feature/block-grid-column-span-editor' into feature/block-editor-type-workspace

Browse Source 
# Conflicts:
#	src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
This commit is contained in:
Niels Lyngsø
2024-01-05 12:40:56 +01:00
parent 0df3e394ee 33b09e70c9
commit e52326774a
7 changed files with 128 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts
View File

@@ -1,33 +1,134 @@
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { html, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
type BlockGridColumn = {
columnSpan: number;
};
@customElement('umb-property-editor-ui-block-grid-column-span')
export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement implements UmbPropertyEditorUiElement {
private _value: Array<string> = [];
@property({ type: Array })
public get value(): Array<string> {
return this._value;
}
public set value(value: Array<string>) {
this._value = value || [];
}
value: Array<BlockGridColumn> = [];
@state()
private _maxColumns = 12;
@property({ attribute: false })
public set config(config: UmbPropertyEditorConfigCollection | undefined) {}
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
const maxColumns = config?.getValueByAlias('gridColumns');
if (typeof maxColumns === 'number') {
this._maxColumns = maxColumns;
}
}
#pickColumn(index: number) {
const value = this.value ?? [];
const exists = value.find((column) => column.columnSpan === index);
if (exists) {
this.value = value.filter((column) => column.columnSpan !== index);
} else {
this.value = [...value, { columnSpan: index }];
}
private _onChange(event: CustomEvent) {
this.dispatchEvent(new CustomEvent('property-value-change'));
}
render() {
return html`Column span TODO `;
const template = Array.from({ length: this._maxColumns }, (_, index) => {
const number = index + 1;
let classes = 'default';
if (this.value && this.value.length > 0) {
const applied = this.value.find((column) => column.columnSpan >= index);
const picked = this.value.find((column) => column.columnSpan === index);
classes = picked ? 'picked applied' : applied ? 'applied' : 'default';
}
return html`<div class="${classes}" data-index=${index}>
<span>${number}</span>
<button type="button" aria-label=${number} @click=${() => this.#pickColumn(index)}></button>
</div>`;
});
return html`<div id="wrapper">${template}</div>`;
}
static styles = [UmbTextStyles];
static styles = [
UmbTextStyles,
css`
#wrapper {
box-sizing: border-box;
display: flex;
flex-wrap: nowrap;
border: 1px solid var(--uui-color-divider-emphasis);
}
#wrapper div {
color: var(--uui-color-divider-emphasis);
position: relative;
flex-grow: 1;
min-height: 35px;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
padding-left: 5px;
border-right: 1px solid transparent;
}
#wrapper div:not(.picked) {
border-right: 1px solid var(--uui-color-divider-standalone);
}
#wrapper div.picked,
#wrapper div:has(button:hover) {
color: var(--uui-color-interactive);
}
#wrapper div:last-child {
border-right: 1px solid transparent;
}
#wrapper:has(button:hover) div:not(:has(button:hover) ~ div) {
background-color: var(--uui-color-interactive-emphasis);
}
#wrapper div span {
user-select: none;
position: absolute;
padding: var(--uui-size-6);
transform: translate(50%, -75%);
}
#wrapper div button {
border: none;
position: absolute;
z-index: 1;
transform: translateX(50%);
inset: -1px;
opacity: 0;
}
#wrapper .picked::after {
content: '';
position: absolute;
transform: translateX(50%);
width: 4px;
border-right: 1px solid var(--uui-color-interactive);
background-color: var(--uui-color-surface);
top: 0;
right: 0;
bottom: 0;
}
#wrapper .applied {
background-color: var(--uui-color-interactive);
}
`,
];
}
export default UmbPropertyEditorUIBlockGridColumnSpanElement;

7
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
View File

@@ -50,13 +50,12 @@ export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement
UmbTextStyles,
css`
:host {
display: block;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
gap: var(--uui-size-layout-1);
margin: var(--uui-size-layout-1);
padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
}
uui-box {
margin-top: var(--uui-size-layout-1);
}
`,
];
}

7
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
View File

@@ -24,13 +24,12 @@ export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement imp
UmbTextStyles,
css`
:host {
display: block;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
gap: var(--uui-size-layout-1);
margin: var(--uui-size-layout-1);
padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
}
uui-box {
margin-top: var(--uui-size-layout-1);
}
`,
];
}

10
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
View File

@@ -2,6 +2,8 @@ import { css, html, customElement, state } from '@umbraco-cms/backoffice/externa
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
import { UmbInputNumberRangeElement } from '@umbraco-cms/backoffice/components';
@customElement('umb-block-grid-type-workspace-view')
export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -122,15 +124,13 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
UmbTextStyles,
css`
:host {
display: block;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
gap: var(--uui-size-layout-1);
margin: var(--uui-size-layout-1);
padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
}
uui-box {
margin-top: var(--uui-size-layout-1);
}
#showOptions {
display: flex;
height: 100px;

2
src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts
View File

@@ -34,7 +34,7 @@ export class UmbInputBlockTypeElement<BlockType extends UmbBlockTypeBase = UmbBl
this.#blockTypeWorkspaceModalRegistration = new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
.addAdditionalPath(entityType)
.onSetup(() => {
return { data: { entityType: entityType, preset: {} } };
return { data: { entityType: entityType, preset: {} }, modal: { size: 'large' } };
})
.observeRouteBuilder((routeBuilder) => {
const newpath = routeBuilder({});

2
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/components/input-document-type/input-document-type.element.ts
View File

@@ -13,7 +13,7 @@ export class UmbInputDocumentTypeElement extends FormControlMixin(UmbLitElement)
* @attr
* @default false
*/
@property({ type: Boolean, attribute: 'element-types-only' })
@property({ type: Boolean })
elementTypesOnly: boolean = false;
/**

2
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts
View File

@@ -56,7 +56,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement
: []}
.min=${this._limitMin ?? 0}
.max=${this._limitMax ?? Infinity}
.element-types-only=${this._onlyElementTypes}
.elementTypesOnly=${this._onlyElementTypes ?? false}
>Add</umb-input-document-type
>
`