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

Aligned header cosmetics

Browse Source 
from Document Type workspace to Media Type,
Member Type and User Group workspaces.
This commit is contained in:
leekelleher
2024-05-29 17:50:07 +01:00
parent 4d714ca6c2
commit 51fa631abf
3 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/media-type-workspace-editor.element.ts
View File

@@ -80,32 +80,34 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
}
render() {
return html`<umb-workspace-editor alias="Umb.Workspace.MediaType">
<div id="header" slot="header">
<uui-button id="icon" @click=${this._handleIconClick} label="icon" compact>
<umb-icon name=${ifDefined(this._icon)}></umb-icon>
</uui-button>
return html`
<umb-workspace-editor alias="Umb.Workspace.MediaType">
<div id="header" slot="header">
<uui-button id="icon" compact label="icon" look="outline" @click=${this._handleIconClick}>
<umb-icon name=${ifDefined(this._icon)}></umb-icon>
</uui-button>
<div id="editors">
<umb-input-with-alias
id="name"
label=${this.localize.term('placeholders_entername')}
value=${this._name}
alias=${this._alias}
?auto-generate-alias=${this._isNew}
@change="${this.#onNameAndAliasChange}"
${umbFocus()}>
</umb-input-with-alias>
<div id="editors">
<umb-input-with-alias
id="name"
label=${this.localize.term('placeholders_entername')}
value=${this._name}
alias=${this._alias}
?auto-generate-alias=${this._isNew}
@change="${this.#onNameAndAliasChange}"
${umbFocus()}>
</umb-input-with-alias>
<uui-input
id="description"
.label=${this.localize.term('placeholders_enterDescription')}
.value=${this._description}
.placeholder=${this.localize.term('placeholders_enterDescription')}
@input=${this.#onDescriptionChange}></uui-input>
<uui-input
id="description"
.label=${this.localize.term('placeholders_enterDescription')}
.value=${this._description}
.placeholder=${this.localize.term('placeholders_enterDescription')}
@input=${this.#onDescriptionChange}></uui-input>
</div>
</div>
</div>
</umb-workspace-editor>`;
</umb-workspace-editor>
`;
}
static styles = [
@@ -119,6 +121,7 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
#header {
display: flex;
flex: 1 1 auto;
gap: var(--uui-size-space-2);
}
#editors {
@@ -143,9 +146,9 @@ export class UmbMediaTypeWorkspaceEditorElement extends UmbLitElement {
}
#icon {
font-size: calc(var(--uui-size-layout-3) / 2);
margin-right: var(--uui-size-space-2);
margin-left: calc(var(--uui-size-space-4) * -1);
font-size: var(--uui-size-8);
height: 60px;
width: 60px;
}
`,
];

15
src/Umbraco.Web.UI.Client/src/packages/members/member-type/workspace/member-type-workspace-editor.element.ts
View File

@@ -22,10 +22,6 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
@state()
private _isNew?: boolean;
@state()
private _iconColorAlias?: string;
// TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors.
#workspaceContext?: typeof UMB_MEMBER_TYPE_WORKSPACE_CONTEXT.TYPE;
constructor() {
@@ -82,8 +78,8 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
return html`
<umb-workspace-editor alias="Umb.Workspace.MemberType">
<div id="header" slot="header">
<uui-button id="icon" @click=${this._handleIconClick} label="icon" compact>
<uui-icon name="${ifDefined(this._icon)}" style="color: ${this._iconColorAlias}"></uui-icon>
<uui-button id="icon" compact label="icon" look="outline" @click=${this._handleIconClick}>
<umb-icon name=${ifDefined(this._icon)}></umb-icon>
</uui-button>
<div id="editors">
@@ -120,6 +116,7 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
#header {
display: flex;
flex: 1 1 auto;
gap: var(--uui-size-space-2);
}
#editors {
@@ -156,9 +153,9 @@ export class UmbMemberTypeWorkspaceEditorElement extends UmbLitElement {
}
#icon {
font-size: calc(var(--uui-size-layout-3) / 2);
margin-right: var(--uui-size-space-2);
margin-left: calc(var(--uui-size-space-4) * -1);
font-size: var(--uui-size-8);
height: 60px;
width: 60px;
}
`,
];

18
src/Umbraco.Web.UI.Client/src/packages/user/user-group/workspace/user-group-workspace-editor.element.ts
View File

@@ -210,7 +210,7 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
#renderHeader() {
return html`
<div id="header" slot="header">
<uui-button id="icon" @click=${this.#onIconClick} label="icon" compact>
<uui-button id="icon" compact label="icon" look="outline" @click=${this.#onIconClick}>
<umb-icon name=${this._icon || ''}></umb-icon>
</uui-button>
@@ -339,9 +339,12 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
}
#renderRightColumn() {
return html` <uui-box headline="Actions">
<umb-entity-action-list .entityType=${UMB_USER_GROUP_ENTITY_TYPE} .unique=${this._unique}></umb-entity-action-list
></uui-box>`;
return html`
<uui-box headline="Actions">
<umb-entity-action-list .entityType=${UMB_USER_GROUP_ENTITY_TYPE} .unique=${this._unique}>
</umb-entity-action-list>
</uui-box>
`;
}
static styles = [
@@ -355,11 +358,14 @@ export class UmbUserGroupWorkspaceEditorElement extends UmbLitElement {
#header {
display: flex;
flex: 1 1 auto;
gap: var(--uui-size-space-3);
gap: var(--uui-size-space-2);
align-items: center;
}
#icon {
font-size: calc(var(--uui-size-layout-3) / 2);
font-size: var(--uui-size-5);
height: 30px;
width: 30px;
}
#name {