styling

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

@@ -1,33 +1,139 @@
-import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, css, repeat, state, queryAll } 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;
+
+	@queryAll('div')
+	private _divs!: Array<HTMLElement>;
 
 	@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;
+		}
+	}
 
 	private _onChange(event: CustomEvent) {
 		this.dispatchEvent(new CustomEvent('property-value-change'));
 	}
 
-	render() {
-		return html`Column span TODO `;
+	#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 }];
+		}
 	}
 
-	static styles = [UmbTextStyles];
+	render() {
+		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,
+		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;

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

@@ -11,7 +11,7 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
 	#labelOnTopSetting = { alias: 'labelOnTop', value: true };
 
 	@state()
-	private _showSizeOptions = false;
+	private _showSizeOptions = true;
 
 	@state()
 	private _backgroundColor?: string;