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

Merge branch 'main' into dependabot/npm_and_yarn/eslint-9.6.0

Browse Source
This commit is contained in:
Jacob Overgaard
2024-07-02 14:13:23 +02:00
committed by GitHub
parent 64ad87a4d0 8b0ccd4e71
commit 422a3b1fa4
7 changed files with 154 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts
View File

@@ -35,7 +35,10 @@ export class UmbArrayState<T> extends UmbDeepState<T[]> {
*/
sortBy(sortMethod?: (a: T, b: T) => number) {
this.#sortMethod = sortMethod;
super.setValue(this.getValue().sort(this.#sortMethod));
const value = this.getValue();
if(value) {
super.setValue([...value].sort(this.#sortMethod));
}
return this;
}
@@ -51,7 +54,7 @@ export class UmbArrayState<T> extends UmbDeepState<T[]> {
*/
override setValue(value: T[]) {
if (this.#sortMethod) {
super.setValue(value.sort(this.#sortMethod));
super.setValue([...value].sort(this.#sortMethod));
} else {
super.setValue(value);
}

2
src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts
View File

@@ -1,5 +1,5 @@
import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js';
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js';
export const UMB_BLOCK_LIST_PROPERTY_EDITOR_ALIAS = 'Umbraco.BlockList';

2
src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts
View File

@@ -294,7 +294,7 @@ export class UmbSplitPanelElement extends LitElement {
#divider-touch-area {
position: absolute;
top: 0;
left: 0;
left: 5px;
height: 100%;
width: var(--umb-split-panel-divider-touch-area-width);
transform: translateX(-50%);

107
src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts
View File

@@ -1,5 +1,3 @@
import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import {
css,
customElement,
@@ -11,6 +9,8 @@ import {
when,
LitElement,
} from '@umbraco-cms/backoffice/external/lit';
import type { UmbUfmRenderElement } from '../../../ufm/components/ufm-render/index.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
// TODO: move to UI Library - entity actions should NOT be moved to UI Library but stay in an UmbTable element
export interface UmbTableItem {
@@ -163,17 +163,19 @@ export class UmbTableElement extends LitElement {
}
override render() {
return html`<uui-table class="uui-text">
<uui-table-column
.style=${when(
!(this.config.allowSelection === false && this.config.hideIcon === true),
() => 'width: 60px',
)}></uui-table-column>
<uui-table-head>
${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
</uui-table-head>
${repeat(this.items, (item) => item.id, this._renderRow)}
</uui-table>`;
return html`
<uui-table class="uui-text">
<uui-table-column
.style=${when(
!(this.config.allowSelection === false && this.config.hideIcon === true),
() => 'width: 60px',
)}></uui-table-column>
<uui-table-head>
${this._renderHeaderCheckboxCell()} ${this.columns.map((column) => this._renderHeaderCell(column))}
</uui-table-head>
${repeat(this.items, (item) => item.id, this._renderRow)}
</uui-table>
`;
}
private _renderHeaderCell(column: UmbTableColumn) {
@@ -201,48 +203,54 @@ export class UmbTableElement extends LitElement {
private _renderHeaderCheckboxCell() {
if (this.config.hideIcon && !this.config.allowSelection) return;
return html` <uui-table-head-cell style="--uui-table-cell-padding: 0">
${when(
this.config.allowSelection,
() =>
html` <uui-checkbox
label="Select All"
style="padding: var(--uui-size-4) var(--uui-size-5);"
@change="${this._handleAllRowsCheckboxChange}"
?checked="${this.selection.length === this.items.length}">
</uui-checkbox>`,
)}
</uui-table-head-cell>`;
return html`
<uui-table-head-cell style="--uui-table-cell-padding: 0">
${when(
this.config.allowSelection,
() =>
html` <uui-checkbox
label="Select All"
style="padding: var(--uui-size-4) var(--uui-size-5);"
@change="${this._handleAllRowsCheckboxChange}"
?checked="${this.selection.length === this.items.length}">
</uui-checkbox>`,
)}
</uui-table-head-cell>
`;
}
private _renderRow = (item: UmbTableItem) => {
return html`<uui-table-row
?selectable="${this.config.allowSelection}"
?select-only=${this._selectionMode}
?selected=${this._isSelected(item.id)}
@selected=${() => this._selectRow(item.id)}
@deselected=${() => this._deselectRow(item.id)}>
${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
</uui-table-row>`;
return html`
<uui-table-row
?selectable="${this.config.allowSelection}"
?select-only=${this._selectionMode}
?selected=${this._isSelected(item.id)}
@selected=${() => this._selectRow(item.id)}
@deselected=${() => this._deselectRow(item.id)}>
${this._renderRowCheckboxCell(item)} ${this.columns.map((column) => this._renderRowCell(column, item))}
</uui-table-row>
`;
};
private _renderRowCheckboxCell(item: UmbTableItem) {
if (this.config.hideIcon && !this.config.allowSelection) return;
return html`<uui-table-cell>
${when(!this.config.hideIcon, () => html`<umb-icon name="${ifDefined(item.icon ?? undefined)}"></umb-icon>`)}
${when(
this.config.allowSelection,
() => html`
<uui-checkbox
label="Select Row"
@click=${(e: PointerEvent) => e.stopPropagation()}
@change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
?checked="${this._isSelected(item.id)}">
</uui-checkbox>
`,
)}
</uui-table-cell>`;
return html`
<uui-table-cell>
${when(!this.config.hideIcon, () => html`<umb-icon name="${ifDefined(item.icon ?? undefined)}"></umb-icon>`)}
${when(
this.config.allowSelection,
() => html`
<uui-checkbox
label="Select Row"
@click=${(e: PointerEvent) => e.stopPropagation()}
@change=${(event: Event) => this._handleRowCheckboxChange(event, item)}
?checked="${this._isSelected(item.id)}">
</uui-checkbox>
`,
)}
</uui-table-cell>
`;
}
private _renderRowCell(column: UmbTableColumn, item: UmbTableItem) {
@@ -251,7 +259,8 @@ export class UmbTableElement extends LitElement {
style="--uui-table-cell-padding: 0 var(--uui-size-5); text-align:${column.align ?? 'left'}; width: ${column.width || 'auto'};">
${this._renderCellContent(column, item)}
</uui-table-cell>
</uui-table-cell>`;
</uui-table-cell>
`;
}
private _renderCellContent(column: UmbTableColumn, item: UmbTableItem) {
@@ -292,6 +301,7 @@ export class UmbTableElement extends LitElement {
position: sticky;
top: 0;
z-index: 1;
background-color: var(--uui-color-surface, #fff);
}
uui-table-row uui-checkbox {
@@ -331,6 +341,7 @@ export class UmbTableElement extends LitElement {
justify-content: space-between;
width: 100%;
}
uui-table-head-cell button > span {
flex: 1 0 auto;
}

60
src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts
View File

@@ -1,9 +1,9 @@
import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
import { css, html, nothing, customElement, state, classMap } from '@umbraco-cms/backoffice/external/lit';
import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbTreeItemElementBase } from '@umbraco-cms/backoffice/tree';
import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
@customElement('umb-document-tree-item')
export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocumentTreeItemModel> {
@@ -74,11 +74,7 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
${this.item?.documentType.icon
? html`
<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
${this.item.isProtected ? this.#renderIsProtectedIcon() : nothing}
<!--
// TODO: implement correct status symbol
<span id="status-symbol"></span>
-->
${this.#renderStateIcon()}
`
: nothing}
</span>
@@ -91,8 +87,24 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
> `;
}
#renderStateIcon() {
if (this.item?.isProtected) {
return this.#renderIsProtectedIcon();
}
if (this.item?.documentType.collection) {
return this.#renderIsCollectionIcon();
}
return nothing;
}
#renderIsCollectionIcon() {
return html`<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
}
#renderIsProtectedIcon() {
return html`<umb-icon id="icon-lock" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
return html`<umb-icon id="state-icon" slot="icon" name="icon-lock" title="Protected"></umb-icon>`;
}
static override styles = [
@@ -106,19 +118,13 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
vertical-align: middle;
}
#status-symbol {
width: 5px;
height: 5px;
border: 1px solid white;
background-color: blue;
display: block;
position: absolute;
bottom: 0;
right: 0;
border-radius: 100%;
#label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#icon-lock {
#state-icon {
position: absolute;
bottom: -5px;
right: -5px;
@@ -130,36 +136,30 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
line-height: 14px;
}
#label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:hover #icon-lock {
:hover #state-icon {
background: var(--uui-color-surface-emphasis);
}
/** Active */
[active] #icon-lock {
[active] #state-icon {
background: var(--uui-color-current);
}
[active]:hover #icon-lock {
[active]:hover #state-icon {
background: var(--uui-color-current-emphasis);
}
/** Selected */
[selected] #icon-lock {
[selected] #state-icon {
background-color: var(--uui-color-selected);
}
[selected]:hover #icon-lock {
[selected]:hover #state-icon {
background-color: var(--uui-color-selected-emphasis);
}
/** Disabled */
[disabled] #icon-lock {
[disabled] #state-icon {
background-color: var(--uui-color-disabled);
}

56
src/Umbraco.Web.UI.Client/src/packages/media/media/tree/tree-item/media-tree-item.element.ts
View File

@@ -10,7 +10,10 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
return html`
<span id="icon-container" slot="icon">
${this.item?.mediaType.icon
? html` <umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon> `
? html`
<umb-icon id="icon" slot="icon" name="${this.item.mediaType.icon}"></umb-icon>
${this.#renderStateIcon()}
`
: nothing}
</span>
`;
@@ -20,6 +23,18 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
return html`<span id="label" slot="label">${this._item?.variants[0].name}</span> `;
}
#renderStateIcon() {
if (this.item?.mediaType.collection) {
return this.#renderIsCollectionIcon();
}
return nothing;
}
#renderIsCollectionIcon() {
return html`<umb-icon id="state-icon" slot="icon" name="icon-grid" title="Collection"></umb-icon>`;
}
static override styles = [
UmbTextStyles,
css`
@@ -36,6 +51,45 @@ export class UmbMediaTreeItemElement extends UmbTreeItemElementBase<UmbMediaTree
overflow: hidden;
text-overflow: ellipsis;
}
#state-icon {
position: absolute;
bottom: -5px;
right: -5px;
font-size: 10px;
background: var(--uui-color-surface);
width: 14px;
height: 14px;
border-radius: 100%;
line-height: 14px;
}
:hover #state-icon {
background: var(--uui-color-surface-emphasis);
}
/** Active */
[active] #state-icon {
background: var(--uui-color-current);
}
[active]:hover #state-icon {
background: var(--uui-color-current-emphasis);
}
/** Selected */
[selected] #state-icon {
background-color: var(--uui-color-selected);
}
[selected]:hover #state-icon {
background-color: var(--uui-color-selected-emphasis);
}
/** Disabled */
[disabled] #state-icon {
background-color: var(--uui-color-disabled);
}
`,
];
}

3
src/Umbraco.Web.UI.Client/src/packages/user/current-user/modals/current-user/current-user-modal.element.ts
View File

@@ -84,6 +84,9 @@ export class UmbCurrentUserModalElement extends UmbLitElement {
static override styles: CSSResultGroup = [
UmbTextStyles,
css`
:host {
color: var(--uui-color-text);
}
#main {
display: flex;
flex-direction: column;