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
#renderContainerHeader() {
return html`<div slot="header">
<uui-input
label=${this.localize.term('contentTypeEditor_group')}
placeholder=${this.localize.term('placeholders_entername')}
.value=${this._group!.name}
?disabled=${!this._hasOwnerContainer}
@change=${this.#renameGroup}
@blur=${this.#blurGroup}
${this._group!.name === '' ? umbFocus() : nothing}></uui-input>
<div>
${this.sortModeActive && this._hasOwnerContainer ? html`<uui-icon name="icon-navigation"></uui-icon>` : null}
<uui-input
label=${this.localize.term('contentTypeEditor_group')}
placeholder=${this.localize.term('placeholders_entername')}
.value=${this._group!.name}
?disabled=${!this._hasOwnerContainer}
@change=${this.#renameGroup}
@blur=${this.#blurGroup}
${this._group!.name === '' ? umbFocus() : nothing}></uui-input>
</div>
</div>
<div slot="header-actions">
${this._hasOwnerContainer === false && this._inheritedFrom
? html`<uui-tag look="default" class="inherited">
<uui-icon name="icon-merge"></uui-icon>
@@ -184,13 +189,11 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
</span>
</uui-tag>`
: null}
</div>
<div slot="header-actions">
${this._inherited
? null
: html`<uui-button compact label="${this.localize.term('actions_delete')}" @click="${this.#requestRemove}">
${!this._inherited && !this.sortModeActive
? html`<uui-button compact label="${this.localize.term('actions_delete')}" @click="${this.#requestRemove}">
<uui-icon name="delete"></uui-icon>
</uui-button>`}
</uui-button>`
: nothing}
${this.sortModeActive
? html` <uui-input
type="number"
@@ -199,7 +202,7 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
this._singleValueUpdate('sortOrder', parseInt(e.target.value as string) || 0)}
.value=${this.group!.sortOrder ?? 0}
?disabled=${!this._hasOwnerContainer}></uui-input>`
: ''}
: nothing}
</div> `;
}
@@ -231,6 +234,10 @@ export class UmbContentTypeWorkspaceViewEditGroupElement extends UmbLitElement {
max-width: 75px;
}
.inherited uui-icon {
vertical-align: sub;
}
:host([sort-mode-active]) div[slot='header'] {
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' })
public sortModeActive = false;
@property({ type: String, attribute: 'edit-content-type-path' })
@property({ attribute: false })
public editContentTypePath?: string;
@state()
@property({ type: Boolean, reflect: true, attribute: '_inherited' })
public _inherited?: boolean;
@state()
@@ -213,15 +213,17 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
</div>
<div id="editor">
${this.renderPropertyTags()}
<uui-tag look="default" class="inherited">
<uui-icon name="icon-merge"></uui-icon>
<span
>${this.localize.term('contentTypeEditor_inheritedFrom')}
<a href=${this.editContentTypePath + 'edit/' + this._inheritedContentTypeId}>
${this._inheritedContentTypeName ?? '??'}
</a>
</span>
</uui-tag>
${this._inherited
? html`<uui-tag look="default" class="inherited">
<uui-icon name="icon-merge"></uui-icon>
<span
>${this.localize.term('contentTypeEditor_inheritedFrom')}
<a href=${this.editContentTypePath + 'edit/' + this._inheritedContentTypeId}>
${this._inheritedContentTypeName ?? '??'}
</a>
</span>
</uui-tag>`
: nothing}
</div>
`;
}
@@ -276,12 +278,13 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
if (!this.property) return;
return html`
<div class="sortable">
<uui-icon name="${this._inherited ? 'icon-merge' : 'icon-navigation'}"></uui-icon>
${this.property.name} <span style="color: var(--uui-color-disabled-contrast)">(${this.property.alias})</span>
<uui-icon name="icon-navigation"></uui-icon>
<span>${this.property.name}</span>
<span style="color: var(--uui-color-disabled-contrast)">(${this.property.alias})</span>
</div>
<uui-input
type="number"
?readonly=${this._inherited}
?disabled=${this._inherited}
label="sort order"
@change=${(e: UUIInputEvent) =>
this.#partialUpdate({ sortOrder: parseInt(e.target.value as string) ?? 0 } as UmbPropertyTypeModel)}
@@ -373,18 +376,23 @@ export class UmbContentTypeDesignEditorPropertyElement extends UmbLitElement {
margin-bottom: 0;
}
:host([sort-mode-active]:not([inherited])) {
:host([sort-mode-active]:not([_inherited])) {
cursor: grab;
}
:host([sort-mode-active]) .sortable {
flex: 1;
display: flex;
background-color: var(--uui-color-divider);
align-items: center;
padding: 0 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 {
max-width: 75px;