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

polishing

Browse Source
This commit is contained in:
Niels Lyngsø
2024-04-30 23:34:45 +02:00
parent 8ad2aced4e
commit 2684002421
2 changed files with 46 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-group.element.ts
View File

@@ -161,14 +161,19 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
// TODO: impl UMB_EDIT_DOCUMENT_TYPE_PATH_PATTERN // TODO: impl UMB_EDIT_DOCUMENT_TYPE_PATH_PATTERN
#renderContainerHeader() { #renderContainerHeader() {
return html`<div slot="header"> return html`<div slot="header">
<uui-input <div>
label=${this.localize.term('contentTypeEditor_group')} ${this.sortModeActive && this._hasOwnerContainer ? html`<uui-icon name="icon-navigation"></uui-icon>` : null}
placeholder=${this.localize.term('placeholders_entername')} <uui-input
.value=${this._group!.name} label=${this.localize.term('contentTypeEditor_group')}
?disabled=${!this._hasOwnerContainer} placeholder=${this.localize.term('placeholders_entername')}
@change=${this.#renameGroup} .value=${this._group!.name}
@blur=${this.#blurGroup} ?disabled=${!this._hasOwnerContainer}
${this._group!.name === '' ? umbFocus() : nothing}></uui-input> @change=${this.#renameGroup}
@blur=${this.#blurGroup}
${this._group!.name === '' ? umbFocus() : nothing}></uui-input>
</div>
</div>
<div slot="header-actions">
${this._hasOwnerContainer === false && this._inheritedFrom ${this._hasOwnerContainer === false && this._inheritedFrom
? html`<uui-tag look="default" class="inherited"> ? html`<uui-tag look="default" class="inherited">
<uui-icon name="icon-merge"></uui-icon> <uui-icon name="icon-merge"></uui-icon>
@@ -184,13 +189,11 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
</span> </span>
</uui-tag>` </uui-tag>`
: null} : null}
</div> ${!this._inherited && !this.sortModeActive
<div slot="header-actions"> ? html`<uui-button compact label="${this.localize.term('actions_delete')}" @click="${this.#requestRemove}">
${this._inherited
? null
: html`<uui-button compact label="${this.localize.term('actions_delete')}" @click="${this.#requestRemove}">
<uui-icon name="delete"></uui-icon> <uui-icon name="delete"></uui-icon>
</uui-button>`} </uui-button>`
: nothing}
${this.sortModeActive ${this.sortModeActive
? html` <uui-input ? html` <uui-input
type="number" type="number"
@@ -199,7 +202,7 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
this._singleValueUpdate('sortOrder', parseInt(e.target.value as string) || 0)} this._singleValueUpdate('sortOrder', parseInt(e.target.value as string) || 0)}
.value=${this.group!.sortOrder ?? 0} .value=${this.group!.sortOrder ?? 0}
?disabled=${!this._hasOwnerContainer}></uui-input>` ?disabled=${!this._hasOwnerContainer}></uui-input>`
: ''} : nothing}
</div> `; </div> `;
} }
@@ -231,6 +234,10 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
max-width: 75px; max-width: 75px;
} }
.inherited uui-icon {
vertical-align: sub;
}
:host([sort-mode-active]) div[slot='header'] { :host([sort-mode-active]) div[slot='header'] {
cursor: grab; cursor: grab;
} }

40
src/Umbraco.Web.UI.Client/src/packages/core/content-type/workspace/views/design/content-type-design-editor-property.element.ts
View File

@@ -65,10 +65,10 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
@property({ type: Boolean, reflect: true, attribute: 'sort-mode-active' }) @property({ type: Boolean, reflect: true, attribute: 'sort-mode-active' })
public sortModeActive = false; public sortModeActive = false;
@property({ type: String, attribute: 'edit-content-type-path' }) @property({ attribute: false })
public editContentTypePath?: string; public editContentTypePath?: string;
@state() @property({ type: Boolean, reflect: true, attribute: '_inherited' })
public _inherited?: boolean; public _inherited?: boolean;
@state() @state()
@@ -213,15 +213,17 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
</div> </div>
<div id="editor"> <div id="editor">
${this.renderPropertyTags()} ${this.renderPropertyTags()}
<uui-tag look="default" class="inherited"> ${this._inherited
<uui-icon name="icon-merge"></uui-icon> ? html`<uui-tag look="default" class="inherited">
<span <uui-icon name="icon-merge"></uui-icon>
>${this.localize.term('contentTypeEditor_inheritedFrom')} <span
<a href=${this.editContentTypePath + 'edit/' + this._inheritedContentTypeId}> >${this.localize.term('contentTypeEditor_inheritedFrom')}
${this._inheritedContentTypeName ?? '??'} <a href=${this.editContentTypePath + 'edit/' + this._inheritedContentTypeId}>
</a> ${this._inheritedContentTypeName ?? '??'}
</span> </a>
</uui-tag> </span>
</uui-tag>`
: nothing}
</div> </div>
`; `;
} }
@@ -276,12 +278,13 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
if (!this.property) return; if (!this.property) return;
return html` return html`
<div class="sortable"> <div class="sortable">
<uui-icon name="${this._inherited ? 'icon-merge' : 'icon-navigation'}"></uui-icon> <uui-icon name="icon-navigation"></uui-icon>
${this.property.name} <span style="color: var(--uui-color-disabled-contrast)">(${this.property.alias})</span> <span>${this.property.name}</span>
<span style="color: var(--uui-color-disabled-contrast)">(${this.property.alias})</span>
</div> </div>
<uui-input <uui-input
type="number" type="number"
?readonly=${this._inherited} ?disabled=${this._inherited}
label="sort order" label="sort order"
@change=${(e: UUIInputEvent) => @change=${(e: UUIInputEvent) =>
this.#partialUpdate({ sortOrder: parseInt(e.target.value as string) ?? 0 } as UmbPropertyTypeModel)} this.#partialUpdate({ sortOrder: parseInt(e.target.value as string) ?? 0 } as UmbPropertyTypeModel)}
@@ -373,18 +376,23 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
margin-bottom: 0; margin-bottom: 0;
} }
:host([sort-mode-active]:not([inherited])) { :host([sort-mode-active]:not([_inherited])) {
cursor: grab; cursor: grab;
} }
:host([sort-mode-active]) .sortable { :host([sort-mode-active]) .sortable {
flex: 1; flex: 1;
display: flex; display: flex;
background-color: var(--uui-color-divider);
align-items: center; align-items: center;
padding: 0 var(--uui-size-3); padding: 0 var(--uui-size-3);
gap: var(--uui-size-3); gap: var(--uui-size-3);
} }
:host([sort-mode-active][_inherited]) .sortable {
color: var(--uui-color-disabled-contrast);
}
:host([sort-mode-active]:not([_inherited])) .sortable {
background-color: var(--uui-color-divider);
}
:host([sort-mode-active]) uui-input { :host([sort-mode-active]) uui-input {
max-width: 75px; max-width: 75px;