jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-07 17:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

For consistency align close button to the left in ha-dialog (#23284)

Browse Source
This commit is contained in:
Jan-Philipp Benecke 2024-12-16 14:35:06 +01:00 committed by GitHub
parent 3aaf08ac03
commit ee292f900f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ha-dialog.ts
View File

@ -15,13 +15,13 @@ export const createCloseHeading = (
title: string | TemplateResult title: string | TemplateResult
) => html` ) => html`
<div class="header_title"> <div class="header_title">
<span>${title}</span>
<ha-icon-button <ha-icon-button
.label=${hass?.localize("ui.dialogs.generic.close") ?? "Close"} .label=${hass?.localize("ui.dialogs.generic.close") ?? "Close"}
.path=${mdiClose} .path=${mdiClose}
dialogAction="close" dialogAction="close"
class="header_button" class="header_button"
></ha-icon-button> ></ha-icon-button>
<span>${title}</span>
</div> </div>
`; `;
@ -102,7 +102,10 @@ export class HaDialog extends DialogBase {
align-items: var(--vertical-align-dialog, center); align-items: var(--vertical-align-dialog, center);
} }
.mdc-dialog__title { .mdc-dialog__title {
padding: 24px 24px 0 24px; padding: 12px 12px 0;
}
.mdc-dialog--scrollable .mdc-dialog__title {
padding: 12px;
} }
.mdc-dialog__actions { .mdc-dialog__actions {
padding: 12px 24px 12px 24px; padding: 12px 24px 12px 24px;
@ -138,10 +141,8 @@ export class HaDialog extends DialogBase {
flex-direction: column; flex-direction: column;
} }
.header_title { .header_title {
position: relative; display: flex;
padding-right: 40px; align-items: center;
padding-inline-end: 40px;
padding-inline-start: initial;
direction: var(--direction); direction: var(--direction);
} }
.header_title span { .header_title span {
@ -149,11 +150,9 @@ export class HaDialog extends DialogBase {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: block; display: block;
padding-left: 4px;
} }
.header_button { .header_button {
position: absolute;
right: -12px;
top: -12px;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
inset-inline-start: initial; inset-inline-start: initial;