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

Ha dialog header (#16485)

Browse Source
This commit is contained in:
Paul Bottein 2023-05-10 14:34:19 +02:00 committed by GitHub
parent 3325cbfa28
commit 3838d76094
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 450 additions and 547 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/ha-dialog-header.ts Normal file
View File

@ -0,0 +1,81 @@
import { css, html, LitElement } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-dialog-header")
export class HaDialogHeader extends LitElement {
protected render() {
return html`
<header class="header">
<div class="header-bar">
<section class="header-navigation-icon">
<slot name="navigationIcon"></slot>
</section>
<section class="header-title">
<slot name="title"></slot>
</section>
<section class="header-action-items">
<slot name="actionItems"></slot>
</section>
</div>
<slot></slot>
</header>
`;
}
static get styles() {
return [
css`
:host {
display: block;
}
:host([show-border]) {
border-bottom: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
.header-bar {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 4px;
box-sizing: border-box;
}
.header-title {
flex: 1;
font-size: 22px;
line-height: 28px;
font-weight: 400;
padding: 10px 4px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media all and (min-width: 450px) and (min-height: 500px) {
.header-bar {
padding: 12px;
}
}
.header-navigation-icon {
flex: none;
min-width: 8px;
height: 100%;
display: flex;
flex-direction: row;
}
.header-action-items {
flex: none;
min-width: 8px;
height: 100%;
display: flex;
flex-direction: row;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-dialog-header": HaDialogHeader;
}
}

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

@ -63,6 +63,10 @@ export class HaDialog extends DialogBase {
static override styles = [ static override styles = [
styles, styles,
css` css`
:host([scrolled]) ::slotted(ha-dialog-header) {
border-bottom: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
.mdc-dialog { .mdc-dialog {
--mdc-dialog-scroll-divider-color: var( --mdc-dialog-scroll-divider-color: var(
--dialog-scroll-divider-color, --dialog-scroll-divider-color,
@ -119,13 +123,6 @@ export class HaDialog extends DialogBase {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.header_button {
position: absolute;
right: 16px;
top: 14px;
text-decoration: none;
color: inherit;
}
.header_title { .header_title {
margin-right: 32px; margin-right: 32px;
margin-inline-end: 32px; margin-inline-end: 32px;
@ -133,6 +130,11 @@ export class HaDialog extends DialogBase {
direction: var(--direction); direction: var(--direction);
} }
.header_button { .header_button {
position: absolute;
right: 16px;
top: 14px;
text-decoration: none;
color: inherit;
inset-inline-start: initial; inset-inline-start: initial;
inset-inline-end: 16px; inset-inline-end: 16px;
direction: var(--direction); direction: var(--direction);

14
src/components/ha-textfield.ts
View File

@ -78,6 +78,12 @@ export class HaTextField extends TextFieldBase {
direction: var(--direction); direction: var(--direction);
} }
.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
padding-left: var(--text-field-suffix-padding-left, 0px);
padding-right: var(--text-field-suffix-padding-right, 0px);
padding-inline-start: var(--text-field-suffix-padding-left, 0px);
padding-inline-end: var(--text-field-suffix-padding-right, 0px);
}
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field:not(.mdc-text-field--disabled)
.mdc-text-field__affix--suffix { .mdc-text-field__affix--suffix {
color: var(--secondary-text-color); color: var(--secondary-text-color);
@ -137,8 +143,12 @@ export class HaTextField extends TextFieldBase {
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-text-field--with-leading-icon.mdc-text-field--filled
.mdc-floating-label { .mdc-floating-label {
max-width: calc(100% - 48px); max-width: calc(
inset-inline-start: 48px !important; 100% - 48px - var(--text-field-suffix-padding-left, 0px)
);
inset-inline-start: calc(
48px + var(--text-field-suffix-padding-left, 0px)
) !important;
inset-inline-end: initial !important; inset-inline-end: initial !important;
direction: var(--direction); direction: var(--direction);
} }

33
src/components/media-player/dialog-media-manage.ts
View File

@ -18,10 +18,11 @@ import {
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box"; import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
import { haStyleDialog } from "../../resources/styles"; import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import "../ha-button";
import "../ha-check-list-item"; import "../ha-check-list-item";
import "../ha-circular-progress"; import "../ha-circular-progress";
import "../ha-dialog"; import "../ha-dialog";
import "../ha-header-bar"; import "../ha-dialog-header";
import "../ha-svg-icon"; import "../ha-svg-icon";
import "./ha-media-player-browse"; import "./ha-media-player-browse";
import "./ha-media-upload-button"; import "./ha-media-upload-button";
@ -80,7 +81,7 @@ class DialogMediaManage extends LitElement {
.heading=${this._params.currentItem.title} .heading=${this._params.currentItem.title}
@closed=${this.closeDialog} @closed=${this.closeDialog}
> >
<ha-header-bar slot="heading"> <ha-dialog-header slot="heading">
${this._selected.size === 0 ${this._selected.size === 0
? html` ? html`
<span slot="title"> <span slot="title">
@ -104,14 +105,13 @@ class DialogMediaManage extends LitElement {
.label=${this.hass.localize("ui.dialogs.generic.close")} .label=${this.hass.localize("ui.dialogs.generic.close")}
.path=${mdiClose} .path=${mdiClose}
dialogAction="close" dialogAction="close"
slot="actionItems" slot="navigationIcon"
class="header_button"
dir=${computeRTLDirection(this.hass)} dir=${computeRTLDirection(this.hass)}
></ha-icon-button> ></ha-icon-button>
`} `}
` `
: html` : html`
<mwc-button <ha-button
class="danger" class="danger"
slot="title" slot="title"
.disabled=${this._deleting} .disabled=${this._deleting}
@ -124,12 +124,12 @@ class DialogMediaManage extends LitElement {
@click=${this._handleDelete} @click=${this._handleDelete}
> >
<ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon> <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
</mwc-button> </ha-button>
${this._deleting ${this._deleting
? "" ? ""
: html` : html`
<mwc-button <ha-button
slot="actionItems" slot="actionItems"
.label=${`Deselect all`} .label=${`Deselect all`}
@click=${this._handleDeselectAll} @click=${this._handleDeselectAll}
@ -138,10 +138,10 @@ class DialogMediaManage extends LitElement {
.path=${mdiClose} .path=${mdiClose}
slot="icon" slot="icon"
></ha-svg-icon> ></ha-svg-icon>
</mwc-button> </ha-button>
`} `}
`} `}
</ha-header-bar> </ha-dialog-header>
${!this._currentItem ${!this._currentItem
? html` ? html`
<div class="refresh"> <div class="refresh">
@ -290,16 +290,11 @@ class DialogMediaManage extends LitElement {
} }
} }
ha-header-bar { ha-dialog-header ha-media-upload-button,
--mdc-theme-on-primary: var(--primary-text-color); ha-dialog-header ha-button {
--mdc-theme-primary: var(--mdc-theme-surface); --mdc-theme-primary: var(--primary-text-color);
flex-shrink: 0; margin: 6px;
border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12)); display: block;
}
ha-media-upload-button,
mwc-button {
--mdc-theme-primary: var(--mdc-theme-on-primary);
} }
mwc-list { mwc-list {

24
src/components/media-player/dialog-media-player-browse.ts
View File

@ -2,7 +2,6 @@ import { mdiArrowLeft, mdiClose } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event"; import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
import { computeRTLDirection } from "../../common/util/compute_rtl";
import type { import type {
MediaPickedEvent, MediaPickedEvent,
MediaPlayerBrowseAction, MediaPlayerBrowseAction,
@ -11,7 +10,7 @@ import type {
import { haStyleDialog } from "../../resources/styles"; import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types"; import type { HomeAssistant } from "../../types";
import "../ha-dialog"; import "../ha-dialog";
import "../ha-header-bar"; import "../ha-dialog-header";
import "./ha-media-manage-button"; import "./ha-media-manage-button";
import "./ha-media-player-browse"; import "./ha-media-player-browse";
import type { import type {
@ -68,7 +67,7 @@ class DialogMediaPlayerBrowse extends LitElement {
: this._currentItem.title} : this._currentItem.title}
@closed=${this.closeDialog} @closed=${this.closeDialog}
> >
<ha-header-bar slot="heading"> <ha-dialog-header show-border slot="heading">
${this._navigateIds.length > 1 ${this._navigateIds.length > 1
? html` ? html`
<ha-icon-button <ha-icon-button
@ -77,7 +76,7 @@ class DialogMediaPlayerBrowse extends LitElement {
@click=${this._goBack} @click=${this._goBack}
></ha-icon-button> ></ha-icon-button>
` `
: ""} : nothing}
<span slot="title"> <span slot="title">
${!this._currentItem ${!this._currentItem
? this.hass.localize( ? this.hass.localize(
@ -97,10 +96,8 @@ class DialogMediaPlayerBrowse extends LitElement {
.path=${mdiClose} .path=${mdiClose}
dialogAction="close" dialogAction="close"
slot="actionItems" slot="actionItems"
class="header_button"
dir=${computeRTLDirection(this.hass)}
></ha-icon-button> ></ha-icon-button>
</ha-header-bar> </ha-dialog-header>
<ha-media-player-browse <ha-media-player-browse
dialog dialog
.hass=${this.hass} .hass=${this.hass}
@ -170,15 +167,10 @@ class DialogMediaPlayerBrowse extends LitElement {
} }
} }
ha-header-bar { ha-dialog-header ha-media-manage-button {
--mdc-theme-on-primary: var(--primary-text-color); --mdc-theme-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface); margin: 6px;
flex-shrink: 0; display: block;
border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
}
ha-media-manage-button {
--mdc-theme-primary: var(--mdc-theme-on-primary);
} }
`, `,
]; ];

247
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@ -20,7 +20,7 @@ import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-reques
import { navigate } from "../../common/navigate"; import { navigate } from "../../common/navigate";
import "../../components/ha-button-menu"; import "../../components/ha-button-menu";
import "../../components/ha-dialog"; import "../../components/ha-dialog";
import "../../components/ha-header-bar"; import "../../components/ha-dialog-header";
import "../../components/ha-icon-button"; import "../../components/ha-icon-button";
import "../../components/ha-icon-button-prev"; import "../../components/ha-icon-button-prev";
import "../../components/ha-list-item"; import "../../components/ha-list-item";
@ -244,126 +244,121 @@ export class MoreInfoDialog extends LitElement {
return html` return html`
<ha-dialog open @closed=${this.closeDialog} .heading=${title} hideActions> <ha-dialog open @closed=${this.closeDialog} .heading=${title} hideActions>
<div slot="heading" class="heading"> <ha-dialog-header slot="heading">
<ha-header-bar> ${isInfoView
${isInfoView ? html`
? html` <ha-icon-button
<ha-icon-button slot="navigationIcon"
slot="navigationIcon" dialogAction="cancel"
dialogAction="cancel" .label=${this.hass.localize(
.label=${this.hass.localize( "ui.dialogs.more_info_control.dismiss"
"ui.dialogs.more_info_control.dismiss" )}
)} .path=${mdiClose}
.path=${mdiClose} ></ha-icon-button>
></ha-icon-button> `
` : html`
: html` <ha-icon-button-prev
<ha-icon-button-prev slot="navigationIcon"
slot="navigationIcon" @click=${this._goBack}
@click=${this._goBack} .label=${this.hass.localize(
.label=${this.hass.localize( "ui.dialogs.more_info_control.back_to_info"
"ui.dialogs.more_info_control.back_to_info" )}
)} ></ha-icon-button-prev>
></ha-icon-button-prev> `}
`} ${!isInfoView || !isNewMoreInfo
${!isInfoView || !isNewMoreInfo ? html`
? html`<div <span slot="title" .title=${title} @click=${this._enlarge}>
slot="title"
class="main-title"
.title=${title}
@click=${this._enlarge}
>
${title} ${title}
</div>` </span>
: nothing} `
${isInfoView : nothing}
? html` ${isInfoView
${this.shouldShowHistory(domain) ? html`
? html` ${this.shouldShowHistory(domain)
? html`
<ha-icon-button
slot="actionItems"
.label=${this.hass.localize(
"ui.dialogs.more_info_control.history"
)}
.path=${mdiChartBoxOutline}
@click=${this._goToHistory}
></ha-icon-button>
`
: nothing}
${isAdmin
? html`
<ha-icon-button
slot="actionItems"
.label=${this.hass.localize(
"ui.dialogs.more_info_control.settings"
)}
.path=${mdiCogOutline}
@click=${this._goToSettings}
></ha-icon-button>
<ha-button-menu
corner="BOTTOM_END"
menuCorner="END"
slot="actionItems"
@closed=${stopPropagation}
fixed
>
<ha-icon-button <ha-icon-button
slot="actionItems" slot="trigger"
.label=${this.hass.localize( .label=${this.hass.localize("ui.common.menu")}
"ui.dialogs.more_info_control.history" .path=${mdiDotsVertical}
)}
.path=${mdiChartBoxOutline}
@click=${this._goToHistory}
></ha-icon-button> ></ha-icon-button>
`
: nothing}
${isAdmin
? html`
<ha-icon-button
slot="actionItems"
.label=${this.hass.localize(
"ui.dialogs.more_info_control.settings"
)}
.path=${mdiCogOutline}
@click=${this._goToSettings}
></ha-icon-button>
<ha-button-menu
corner="BOTTOM_END"
menuCorner="END"
slot="actionItems"
@closed=${stopPropagation}
fixed
>
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
${deviceId ${deviceId
? html` ? html`
<ha-list-item <ha-list-item
graphic="icon" graphic="icon"
@request-selected=${this._goToDevice} @request-selected=${this._goToDevice}
> >
${this.hass.localize( ${this.hass.localize(
"ui.dialogs.more_info_control.device_info" "ui.dialogs.more_info_control.device_info"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="graphic"
.path=${mdiDevices} .path=${mdiDevices}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-list-item>
` `
: nothing} : nothing}
${this.shouldShowEditIcon(domain, stateObj) ${this.shouldShowEditIcon(domain, stateObj)
? html` ? html`
<ha-list-item <ha-list-item
graphic="icon" graphic="icon"
@request-selected=${this._goToEdit} @request-selected=${this._goToEdit}
> >
${this.hass.localize( ${this.hass.localize(
"ui.dialogs.more_info_control.edit" "ui.dialogs.more_info_control.edit"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="graphic"
.path=${mdiPencilOutline} .path=${mdiPencilOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-list-item>
` `
: nothing} : nothing}
<ha-list-item <ha-list-item
graphic="icon" graphic="icon"
@request-selected=${this._goToRelated} @request-selected=${this._goToRelated}
> >
${this.hass.localize( ${this.hass.localize(
"ui.dialogs.more_info_control.related" "ui.dialogs.more_info_control.related"
)} )}
<ha-svg-icon <ha-svg-icon
slot="graphic" slot="graphic"
.path=${mdiInformationOutline} .path=${mdiInformationOutline}
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-list-item>
</ha-button-menu> </ha-button-menu>
` `
: nothing} : nothing}
` `
: nothing} : nothing}
</ha-header-bar> </ha-dialog-header>
</div>
<div <div
class="content" class="content"
tabindex="-1" tabindex="-1"
@ -455,23 +450,10 @@ export class MoreInfoDialog extends LitElement {
--chart-base-position: static; --chart-base-position: static;
} }
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
flex-shrink: 0;
display: block;
border-bottom: none;
}
.content { .content {
outline: none; outline: none;
} }
ha-dialog[scrolled] .heading {
border-bottom: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
ha-related-items, ha-related-items,
ha-more-info-history-and-logbook { ha-more-info-history-and-logbook {
padding: 8px 24px 24px 24px; padding: 8px 24px 24px 24px;
@ -484,11 +466,6 @@ export class MoreInfoDialog extends LitElement {
} }
} }
.main-title {
overflow: hidden;
text-overflow: ellipsis;
}
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
/* When in fullscreen dialog should be attached to top */ /* When in fullscreen dialog should be attached to top */
ha-dialog { ha-dialog {

138
src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
View File

@ -24,10 +24,10 @@ import { stopPropagation } from "../../common/dom/stop_propagation";
import "../../components/ha-button"; import "../../components/ha-button";
import "../../components/ha-button-menu"; import "../../components/ha-button-menu";
import "../../components/ha-dialog"; import "../../components/ha-dialog";
import "../../components/ha-header-bar";
import "../../components/ha-icon-button"; import "../../components/ha-icon-button";
import "../../components/ha-list-item"; import "../../components/ha-list-item";
import "../../components/ha-textfield"; import "../../components/ha-textfield";
import "../../components/ha-dialog-header";
import type { HaTextField } from "../../components/ha-textfield"; import type { HaTextField } from "../../components/ha-textfield";
import { import {
AssistPipeline, AssistPipeline,
@ -122,73 +122,68 @@ export class HaVoiceCommandDialog extends LitElement {
.heading=${this.hass.localize("ui.dialogs.voice_command.title")} .heading=${this.hass.localize("ui.dialogs.voice_command.title")}
flexContent flexContent
> >
<div slot="heading"> <ha-dialog-header slot="heading">
<ha-header-bar> <ha-icon-button
<ha-icon-button slot="navigationIcon"
slot="navigationIcon" dialogAction="cancel"
dialogAction="cancel" .label=${this.hass.localize("ui.common.close")}
.label=${this.hass.localize("ui.common.close")} .path=${mdiClose}
.path=${mdiClose} ></ha-icon-button>
></ha-icon-button> <div slot="title">
<div slot="title"> ${this.hass.localize("ui.dialogs.voice_command.title")}
${this.hass.localize("ui.dialogs.voice_command.title")} <ha-button-menu
<ha-button-menu @opened=${this._loadPipelines}
@opened=${this._loadPipelines} @closed=${stopPropagation}
@closed=${stopPropagation} activatable
activatable fixed
fixed
>
<ha-button slot="trigger">
${this._pipeline?.name}
<ha-svg-icon
slot="trailingIcon"
.path=${mdiChevronDown}
></ha-svg-icon>
</ha-button>
${this._pipelines?.map(
(pipeline) => html`<ha-list-item
?selected=${pipeline.id === this._pipelineId ||
(!this._pipelineId &&
pipeline.id === this._preferredPipeline)}
.pipeline=${pipeline.id}
@click=${this._selectPipeline}
.hasMeta=${pipeline.id === this._preferredPipeline}
>
${pipeline.name}${pipeline.id === this._preferredPipeline
? html`
<ha-svg-icon
slot="meta"
.path=${mdiStar}
></ha-svg-icon>
`
: nothing}
</ha-list-item>`
)}
${this.hass.user?.is_admin
? html`<li divider role="separator"></li>
<a href="/config/voice-assistants/assistants"
><ha-list-item @click=${this.closeDialog}
>${this.hass.localize(
"ui.dialogs.voice_command.manage_assistants"
)}</ha-list-item
></a
>`
: nothing}
</ha-button-menu>
</div>
<a
href=${documentationUrl(this.hass, "/docs/assist/")}
slot="actionItems"
target="_blank"
rel="noopener noreferer"
> >
<ha-icon-button <ha-button slot="trigger">
.label=${this.hass.localize("ui.common.help")} ${this._pipeline?.name}
.path=${mdiHelpCircleOutline} <ha-svg-icon
></ha-icon-button> slot="trailingIcon"
</a> .path=${mdiChevronDown}
</ha-header-bar> ></ha-svg-icon>
</div> </ha-button>
${this._pipelines?.map(
(pipeline) => html`<ha-list-item
?selected=${pipeline.id === this._pipelineId ||
(!this._pipelineId &&
pipeline.id === this._preferredPipeline)}
.pipeline=${pipeline.id}
@click=${this._selectPipeline}
.hasMeta=${pipeline.id === this._preferredPipeline}
>
${pipeline.name}${pipeline.id === this._preferredPipeline
? html`
<ha-svg-icon slot="meta" .path=${mdiStar}></ha-svg-icon>
`
: nothing}
</ha-list-item>`
)}
${this.hass.user?.is_admin
? html`<li divider role="separator"></li>
<a href="/config/voice-assistants/assistants"
><ha-list-item @click=${this.closeDialog}
>${this.hass.localize(
"ui.dialogs.voice_command.manage_assistants"
)}</ha-list-item
></a
>`
: nothing}
</ha-button-menu>
</div>
<a
href=${documentationUrl(this.hass, "/docs/assist/")}
slot="actionItems"
target="_blank"
rel="noopener noreferer"
>
<ha-icon-button
.label=${this.hass.localize("ui.common.help")}
.path=${mdiHelpCircleOutline}
></ha-icon-button>
</a>
</ha-dialog-header>
<div class="messages"> <div class="messages">
<div class="messages-container" id="scroll-container"> <div class="messages-container" id="scroll-container">
${this._conversation!.map( ${this._conversation!.map(
@ -645,18 +640,13 @@ export class HaVoiceCommandDialog extends LitElement {
--mdc-dialog-max-height: 500px; --mdc-dialog-max-height: 500px;
--dialog-content-padding: 0; --dialog-content-padding: 0;
} }
ha-header-bar { ha-dialog-header a {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
--header-height: 64px;
}
ha-header-bar a {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
div[slot="title"] { div[slot="title"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 8px; margin: -4px 0;
} }
ha-button-menu { ha-button-menu {
--mdc-theme-on-primary: var(--text-primary-color); --mdc-theme-on-primary: var(--text-primary-color);

79
src/panels/config/integrations/integration-panels/zha/dialog-zha-manage-zigbee-device.ts
View File

@ -6,16 +6,16 @@ import {
CSSResultGroup, CSSResultGroup,
html, html,
LitElement, LitElement,
PropertyValues,
nothing, nothing,
PropertyValues,
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { cache } from "lit/directives/cache"; import { cache } from "lit/directives/cache";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../../common/dom/fire_event"; import { fireEvent } from "../../../../../common/dom/fire_event";
import "../../../../../components/ha-code-editor"; import "../../../../../components/ha-code-editor";
import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-dialog";
import "../../../../../components/ha-header-bar"; import "../../../../../components/ha-dialog-header";
import { import {
fetchBindableDevices, fetchBindableDevices,
fetchGroups, fetchGroups,
@ -99,32 +99,22 @@ class DialogZHAManageZigbeeDevice extends LitElement {
open open
hideActions hideActions
@closed=${this.closeDialog} @closed=${this.closeDialog}
.heading=${createCloseHeading( .heading=${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
this.hass,
this.hass.localize("ui.dialogs.zha_manage_device.heading")
)}
> >
<div slot="heading" class="heading"> <ha-dialog-header show-border slot="heading">
<ha-header-bar> <ha-icon-button
<ha-icon-button slot="navigationIcon"
slot="navigationIcon" dialogAction="cancel"
dialogAction="cancel" .label=${this.hass.localize("ui.dialogs.more_info_control.dismiss")}
.label=${this.hass.localize( .path=${mdiClose}
"ui.dialogs.more_info_control.dismiss" ></ha-icon-button>
)} <span
.path=${mdiClose} slot="title"
></ha-icon-button> .title=${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
<div @click=${this._enlarge}
slot="title" >
class="main-title" ${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
.title=${this.hass.localize( </span>
"ui.dialogs.zha_manage_device.heading"
)}
@click=${this._enlarge}
>
${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
</div>
</ha-header-bar>
<mwc-tab-bar <mwc-tab-bar
.activeIndex=${tabs.indexOf(this._currTab)} .activeIndex=${tabs.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged} @MDCTabBar:activated=${this._handleTabChanged}
@ -139,8 +129,7 @@ class DialogZHAManageZigbeeDevice extends LitElement {
` `
)} )}
</mwc-tab-bar> </mwc-tab-bar>
</div> </ha-dialog-header>
<div class="content" tabindex="-1" dialogInitialFocus> <div class="content" tabindex="-1" dialogInitialFocus>
${cache( ${cache(
this._currTab === "clusters" this._currTab === "clusters"
@ -238,27 +227,9 @@ class DialogZHAManageZigbeeDevice extends LitElement {
--vertical-align-dialog: flex-start; --vertical-align-dialog: flex-start;
} }
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
flex-shrink: 0;
display: block;
}
.content { .content {
outline: none; outline: none;
} }
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-header-bar {
--mdc-theme-primary: var(--app-header-background-color);
--mdc-theme-on-primary: var(--app-header-text-color, white);
border-bottom: none;
}
}
.heading {
border-bottom: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
@media all and (min-width: 600px) and (min-height: 501px) { @media all and (min-width: 600px) and (min-height: 501px) {
ha-dialog { ha-dialog {
@ -267,18 +238,6 @@ class DialogZHAManageZigbeeDevice extends LitElement {
--dialog-surface-margin-top: 40px; --dialog-surface-margin-top: 40px;
--mdc-dialog-max-height: calc(100% - 72px); --mdc-dialog-max-height: calc(100% - 72px);
} }
.main-title {
overflow: hidden;
text-overflow: ellipsis;
cursor: default;
}
:host([large]) ha-dialog,
ha-dialog[data-domain="camera"] {
--mdc-dialog-min-width: 90vw;
--mdc-dialog-max-width: 90vw;
}
} }
`, `,
]; ];

18
src/panels/config/logs/dialog-system-log-detail.ts
View File

@ -1,12 +1,12 @@
import { mdiClose, mdiContentCopy } from "@mdi/js";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiClose, mdiContentCopy } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators"; import { property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { copyToClipboard } from "../../../common/util/copy-clipboard"; import { copyToClipboard } from "../../../common/util/copy-clipboard";
import "../../../components/ha-alert"; import "../../../components/ha-alert";
import "../../../components/ha-dialog"; import "../../../components/ha-dialog";
import "../../../components/ha-header-bar"; import "../../../components/ha-dialog-header";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import { import {
@ -79,14 +79,14 @@ class DialogSystemLogDetail extends LitElement {
return html` return html`
<ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}> <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}>
<ha-header-bar slot="heading"> <ha-dialog-header slot="heading">
<ha-icon-button <ha-icon-button
slot="navigationIcon" slot="navigationIcon"
dialogAction="cancel" dialogAction="cancel"
.label=${this.hass.localize("ui.common.close")} .label=${this.hass.localize("ui.common.close")}
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button> ></ha-icon-button>
<span slot="title"> ${title} </span> <span slot="title">${title}</span>
<ha-icon-button <ha-icon-button
id="copy" id="copy"
@click=${this._copyLog} @click=${this._copyLog}
@ -94,7 +94,7 @@ class DialogSystemLogDetail extends LitElement {
.label=${this.hass.localize("ui.panel.config.logs.copy")} .label=${this.hass.localize("ui.panel.config.logs.copy")}
.path=${mdiContentCopy} .path=${mdiContentCopy}
></ha-icon-button> ></ha-icon-button>
</ha-header-bar> </ha-dialog-header>
${this.isCustomIntegration ${this.isCustomIntegration
? html`<ha-alert alert-type="warning"> ? html`<ha-alert alert-type="warning">
${this.hass.localize( ${this.hass.localize(
@ -235,14 +235,6 @@ class DialogSystemLogDetail extends LitElement {
color: var(--warning-color); color: var(--warning-color);
} }
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
flex-shrink: 0;
border-bottom: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
@media all and (min-width: 451px) and (min-height: 501px) { @media all and (min-width: 451px) and (min-height: 501px) {
ha-dialog { ha-dialog {
--mdc-dialog-max-width: 90vw; --mdc-dialog-max-width: 90vw;

138
src/panels/config/voice-assistants/dialog-expose-entity.ts
View File

@ -53,31 +53,32 @@ class DialogExposeEntity extends LitElement {
return html` return html`
<ha-dialog open @closed=${this.closeDialog} .heading=${header}> <ha-dialog open @closed=${this.closeDialog} .heading=${header}>
<div slot="heading"> <ha-dialog-header slot="heading" show-border>
<h2 class="header"> <h2 class="header" slot="title">
${header}<span class="subtitle" ${header}
>${this.hass.localize( <span class="subtitle">
${this.hass.localize(
"ui.panel.config.voice_assistants.expose.expose_dialog.expose_to", "ui.panel.config.voice_assistants.expose.expose_dialog.expose_to",
{ {
assistants: this._params.filterAssistants assistants: this._params.filterAssistants
.map((ass) => voiceAssistants[ass].name) .map((ass) => voiceAssistants[ass].name)
.join(", "), .join(", "),
} }
)}</span )}
> </span>
</h2> </h2>
<ha-icon-button <ha-icon-button
.label=${this.hass.localize("ui.dialogs.generic.close")} .label=${this.hass.localize("ui.dialogs.generic.close")}
.path=${mdiClose} .path=${mdiClose}
dialogAction="close" dialogAction="close"
class="header_button" slot="navigationIcon"
></ha-icon-button> ></ha-icon-button>
<search-input <search-input
.hass=${this.hass} .hass=${this.hass}
.filter=${this._filter} .filter=${this._filter}
@value-changed=${this._filterChanged} @value-changed=${this._filterChanged}
></search-input> ></search-input>
</div> </ha-dialog-header>
<mwc-list multi> <mwc-list multi>
<lit-virtualizer <lit-virtualizer
scroller scroller
@ -176,6 +177,41 @@ class DialogExposeEntity extends LitElement {
lit-virtualizer { lit-virtualizer {
height: 500px; height: 500px;
} }
search-input {
width: 100%;
display: block;
box-sizing: border-box;
--text-field-suffix-padding-left: 8px;
}
.header {
margin: 0;
pointer-events: auto;
-webkit-font-smoothing: antialiased;
font-weight: inherit;
font-size: inherit;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin: -4px 0;
}
.subtitle {
color: var(--secondary-text-color);
font-size: 1rem;
line-height: normal;
}
lit-virtualizer {
width: 100%;
contain: size layout !important;
}
ha-check-list-item {
width: 100%;
height: 72px;
}
ha-check-list-item ha-state-icon {
margin-left: 24px;
margin-inline-start: 24px;
margin-inline-end: initial;
}
@media all and (max-height: 800px) { @media all and (max-height: 800px) {
lit-virtualizer { lit-virtualizer {
height: 334px; height: 334px;
@ -200,84 +236,16 @@ class DialogExposeEntity extends LitElement {
--ha-dialog-border-radius: 0px; --ha-dialog-border-radius: 0px;
} }
lit-virtualizer { lit-virtualizer {
height: calc(100vh - 234px); height: calc(100vh - 198px);
}
search-input {
--text-field-suffix-padding-left: unset;
}
ha-check-list-item ha-state-icon {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
} }
}
search-input {
width: 100%;
display: block;
padding: 16px 16px 0;
box-sizing: border-box;
}
.header {
pointer-events: auto;
-webkit-font-smoothing: antialiased;
font-family: var(
--mdc-typography-headline6-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif)
);
font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
line-height: var(--mdc-typography-headline6-line-height, 2rem);
font-weight: var(--mdc-typography-headline6-font-weight, 500);
letter-spacing: var(
--mdc-typography-headline6-letter-spacing,
0.0125em
);
text-decoration: var(
--mdc-typography-headline6-text-decoration,
inherit
);
text-transform: var(
--mdc-typography-headline6-text-transform,
inherit
);
display: block;
position: relative;
flex-shrink: 0;
box-sizing: border-box;
margin: 0 0 1px;
padding: 24px 24px 0 24px;
padding-bottom: 15px;
color: var(--mdc-dialog-heading-ink-color, rgba(0, 0, 0, 0.87));
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
margin-bottom: 0;
border-color: var(
--mdc-dialog-scroll-divider-color,
rgba(0, 0, 0, 0.12)
);
display: flex;
flex-direction: column;
}
.subtitle {
color: var(--secondary-text-color);
font-size: 1rem;
line-height: normal;
}
.header_button {
position: absolute;
right: 16px;
top: 14px;
text-decoration: none;
color: inherit;
}
.header_button {
inset-inline-start: initial;
inset-inline-end: 16px;
direction: var(--direction);
}
lit-virtualizer {
width: 100%;
contain: size layout !important;
}
ha-check-list-item {
width: 100%;
height: 72px;
}
ha-check-list-item ha-state-icon {
margin-left: 24px;
margin-inline-start: 24;
margin-inline-end: initial;
direction: var(--direction);
} }
`, `,
]; ];

17
src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts
View File

@ -12,8 +12,8 @@ import { stopPropagation } from "../../../common/dom/stop_propagation";
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event"; import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
import { navigate } from "../../../common/navigate"; import { navigate } from "../../../common/navigate";
import "../../../components/ha-button"; import "../../../components/ha-button";
import "../../../components/ha-dialog-header";
import "../../../components/ha-form/ha-form"; import "../../../components/ha-form/ha-form";
import "../../../components/ha-header-bar";
import { import {
AssistPipeline, AssistPipeline,
AssistPipelineMutableParams, AssistPipelineMutableParams,
@ -98,14 +98,14 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
escapeKeyAction escapeKeyAction
.heading=${title} .heading=${title}
> >
<ha-header-bar slot="heading"> <ha-dialog-header slot="heading">
<ha-icon-button <ha-icon-button
slot="navigationIcon" slot="navigationIcon"
dialogAction="cancel" dialogAction="cancel"
.label=${this.hass.localize("ui.common.close")} .label=${this.hass.localize("ui.common.close")}
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button> ></ha-icon-button>
<div slot="title" class="main-title" .title=${title}>${title}</div> <span slot="title" .title=${title}>${title}</span>
${this._params.pipeline?.id ${this._params.pipeline?.id
? html` ? html`
<ha-icon-button <ha-icon-button
@ -139,7 +139,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
</ha-button-menu> </ha-button-menu>
` `
: nothing} : nothing}
</ha-header-bar> </ha-dialog-header>
<div class="content"> <div class="content">
${this._error ${this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>` ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
@ -298,15 +298,6 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
return [ return [
haStyleDialog, haStyleDialog,
css` css`
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
display: block;
}
.main-title {
overflow: hidden;
text-overflow: ellipsis;
}
assist-pipeline-detail-config, assist-pipeline-detail-config,
assist-pipeline-detail-conversation, assist-pipeline-detail-conversation,
assist-pipeline-detail-stt { assist-pipeline-detail-stt {

16
src/panels/config/voice-assistants/dialog-voice-settings.ts
View File

@ -4,6 +4,7 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/ha-dialog-header";
import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog"; import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
import { haStyle, haStyleDialog } from "../../../resources/styles"; import { haStyle, haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
@ -43,14 +44,14 @@ class DialogVoiceSettings extends LitElement {
return html` return html`
<ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}> <ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}>
<ha-header-bar slot="heading"> <ha-dialog-header slot="heading">
<ha-icon-button <ha-icon-button
slot="navigationIcon" slot="navigationIcon"
dialogAction="cancel" dialogAction="cancel"
.label=${this.hass.localize("ui.common.close")} .label=${this.hass.localize("ui.common.close")}
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button> ></ha-icon-button>
<div slot="title" class="main-title" .title=${title}>${title}</div> <span slot="title" .title=${title}>${title}</span>
<ha-icon-button <ha-icon-button
slot="actionItems" slot="actionItems"
.label=${this.hass.localize( .label=${this.hass.localize(
@ -59,7 +60,7 @@ class DialogVoiceSettings extends LitElement {
.path=${mdiTuneVertical} .path=${mdiTuneVertical}
@click=${this._viewMoreInfo} @click=${this._viewMoreInfo}
></ha-icon-button> ></ha-icon-button>
</ha-header-bar> </ha-dialog-header>
<div> <div>
<entity-voice-settings <entity-voice-settings
.hass=${this.hass} .hass=${this.hass}
@ -87,15 +88,6 @@ class DialogVoiceSettings extends LitElement {
haStyle, haStyle,
haStyleDialog, haStyleDialog,
css` css`
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
display: block;
}
.main-title {
overflow: hidden;
text-overflow: ellipsis;
}
ha-dialog { ha-dialog {
--dialog-content-padding: 0; --dialog-content-padding: 0;
} }

35
src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
View File

@ -1,5 +1,6 @@
import "@material/mwc-tab-bar/mwc-tab-bar"; import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab"; import "@material/mwc-tab/mwc-tab";
import { mdiClose } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { cache } from "lit/directives/cache"; import { cache } from "lit/directives/cache";
@ -10,7 +11,7 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
import { computeStateName } from "../../../../common/entity/compute_state_name"; import { computeStateName } from "../../../../common/entity/compute_state_name";
import { DataTableRowData } from "../../../../components/data-table/ha-data-table"; import { DataTableRowData } from "../../../../components/data-table/ha-data-table";
import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog";
import "../../../../components/ha-header-bar"; import "../../../../components/ha-dialog-header";
import type { LovelaceViewConfig } from "../../../../data/lovelace"; import type { LovelaceViewConfig } from "../../../../data/lovelace";
import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles"; import { haStyleDialog } from "../../../../resources/styles";
@ -82,10 +83,14 @@ export class HuiCreateDialogCard
.heading=${title} .heading=${title}
class=${classMap({ table: this._currTabIndex === 1 })} class=${classMap({ table: this._currTabIndex === 1 })}
> >
<div slot="heading"> <ha-dialog-header show-border slot="heading">
<ha-header-bar> <ha-icon-button
<span slot="title"> ${title} </span> slot="navigationIcon"
</ha-header-bar> dialogAction="cancel"
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
></ha-icon-button>
<span slot="title"> ${title} </span>
<mwc-tab-bar <mwc-tab-bar
.activeIndex=${this._currTabIndex} .activeIndex=${this._currTabIndex}
@MDCTabBar:activated=${this._handleTabChanged} @MDCTabBar:activated=${this._handleTabChanged}
@ -102,7 +107,7 @@ export class HuiCreateDialogCard
)} )}
></mwc-tab> ></mwc-tab>
</mwc-tab-bar> </mwc-tab-bar>
</div> </ha-dialog-header>
${cache( ${cache(
this._currTabIndex === 0 this._currTabIndex === 0
? html` ? html`
@ -171,14 +176,6 @@ export class HuiCreateDialogCard
--dialog-content-padding: 0; --dialog-content-padding: 0;
} }
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
flex-shrink: 0;
border-bottom: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
@media (min-width: 1200px) { @media (min-width: 1200px) {
ha-dialog { ha-dialog {
--mdc-dialog-max-width: calc(100% - 32px); --mdc-dialog-max-width: calc(100% - 32px);
@ -186,16 +183,6 @@ export class HuiCreateDialogCard
} }
} }
.header_button {
color: inherit;
text-decoration: none;
}
mwc-tab-bar {
border-bottom: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
hui-card-picker { hui-card-picker {
--card-picker-search-shape: 0; --card-picker-search-shape: 0;
--card-picker-search-margin: -2px -24px 0; --card-picker-search-margin: -2px -24px 0;

58
src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View File

@ -1,12 +1,12 @@
import { mdiHelpCircle } from "@mdi/js"; import { mdiClose, mdiHelpCircle } from "@mdi/js";
import deepFreeze from "deep-freeze"; import deepFreeze from "deep-freeze";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
html, html,
LitElement, LitElement,
PropertyValues,
nothing, nothing,
PropertyValues,
} from "lit"; } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import type { HASSDomEvent } from "../../../../common/dom/fire_event"; import type { HASSDomEvent } from "../../../../common/dom/fire_event";
@ -14,7 +14,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { computeRTLDirection } from "../../../../common/util/compute_rtl"; import { computeRTLDirection } from "../../../../common/util/compute_rtl";
import "../../../../components/ha-circular-progress"; import "../../../../components/ha-circular-progress";
import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog";
import "../../../../components/ha-header-bar"; import "../../../../components/ha-dialog-header";
import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-button";
import type { import type {
LovelaceCardConfig, LovelaceCardConfig,
@ -178,26 +178,30 @@ export class HuiDialogEditCard
@opened=${this._opened} @opened=${this._opened}
.heading=${heading} .heading=${heading}
> >
<div slot="heading"> <ha-dialog-header slot="heading">
<ha-header-bar> <ha-icon-button
<div slot="title" @click=${this._enlarge}>${heading}</div> slot="navigationIcon"
${this._documentationURL !== undefined dialogAction="cancel"
? html` .label=${this.hass.localize("ui.common.close")}
<a .path=${mdiClose}
slot="actionItems" ></ha-icon-button>
class="header_button" <span slot="title" @click=${this._enlarge}>${heading}</span>
href=${this._documentationURL} ${this._documentationURL !== undefined
title=${this.hass!.localize("ui.panel.lovelace.menu.help")} ? html`
target="_blank" <a
rel="noreferrer" slot="actionItems"
dir=${computeRTLDirection(this.hass)} class="header_button"
> href=${this._documentationURL}
<ha-icon-button .path=${mdiHelpCircle}></ha-icon-button> title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
</a> target="_blank"
` rel="noreferrer"
: ""} dir=${computeRTLDirection(this.hass)}
</ha-header-bar> >
</div> <ha-icon-button .path=${mdiHelpCircle}></ha-icon-button>
</a>
`
: nothing}
</ha-dialog-header>
<div class="content"> <div class="content">
<div class="element-editor"> <div class="element-editor">
<hui-card-element-editor <hui-card-element-editor
@ -406,14 +410,6 @@ export class HuiDialogEditCard
} }
} }
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
flex-shrink: 0;
border-bottom: 1px solid
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
.center { .center {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;

83
src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
View File

@ -1,6 +1,6 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { ActionDetail } from "@material/mwc-list"; import { ActionDetail } from "@material/mwc-list";
import { mdiCheck, mdiDotsVertical } from "@mdi/js"; import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tab";
import "@polymer/paper-tabs/paper-tabs"; import "@polymer/paper-tabs/paper-tabs";
import { import {
@ -8,8 +8,8 @@ import {
CSSResultGroup, CSSResultGroup,
html, html,
LitElement, LitElement,
PropertyValues,
nothing, nothing,
PropertyValues,
} from "lit"; } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
@ -20,6 +20,7 @@ import { deepEqual } from "../../../../common/util/deep-equal";
import "../../../../components/ha-alert"; import "../../../../components/ha-alert";
import "../../../../components/ha-circular-progress"; import "../../../../components/ha-circular-progress";
import "../../../../components/ha-dialog"; import "../../../../components/ha-dialog";
import "../../../../components/ha-dialog-header";
import { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import type { import type {
LovelaceBadgeConfig, LovelaceBadgeConfig,
@ -217,10 +218,16 @@ export class HuiDialogEditView extends LitElement {
"yaml-mode": this._yamlMode, "yaml-mode": this._yamlMode,
})} })}
> >
<div slot="heading"> <ha-dialog-header show-border slot="heading">
<h2>${this._viewConfigTitle}</h2> <ha-icon-button
slot="navigationIcon"
dialogAction="cancel"
.label=${this.hass!.localize("ui.common.close")}
.path=${mdiClose}
></ha-icon-button>
<h2 slot="title">${this._viewConfigTitle}</h2>
<ha-button-menu <ha-button-menu
slot="icons" slot="actionItems"
fixed fixed
corner="BOTTOM_END" corner="BOTTOM_END"
menuCorner="END" menuCorner="END"
@ -282,7 +289,7 @@ export class HuiDialogEditView extends LitElement {
> >
</paper-tabs>` </paper-tabs>`
: ""} : ""}
</div> </ha-dialog-header>
${content} ${content}
${this._params.viewIndex !== undefined ${this._params.viewIndex !== undefined
? html` ? html`
@ -473,53 +480,30 @@ export class HuiDialogEditView extends LitElement {
return [ return [
haStyleDialog, haStyleDialog,
css` css`
ha-dialog {
/* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
--vertical-align-dialog: flex-start;
--dialog-surface-margin-top: 40px;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
/* When in fullscreen dialog should be attached to top */
ha-dialog {
--dialog-surface-margin-top: 0px;
}
}
ha-dialog.yaml-mode { ha-dialog.yaml-mode {
--dialog-content-padding: 0; --dialog-content-padding: 0;
} }
h2 { h2 {
display: block;
color: var(--primary-text-color);
line-height: normal;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: Roboto, sans-serif;
font-family: var(
--mdc-typography-headline6-font-family,
var(--mdc-typography-font-family, Roboto, sans-serif)
);
font-size: 1.25rem;
font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
line-height: 2rem;
line-height: var(--mdc-typography-headline6-line-height, 2rem);
font-weight: 500;
font-weight: var(--mdc-typography-headline6-font-weight, 500);
letter-spacing: 0.0125em;
letter-spacing: var(
--mdc-typography-headline6-letter-spacing,
0.0125em
);
text-decoration: inherit;
text-decoration: var(
--mdc-typography-headline6-text-decoration,
inherit
);
text-transform: inherit;
text-transform: var(
--mdc-typography-headline6-text-transform,
inherit
);
position: relative;
flex-shrink: 0;
box-sizing: border-box;
margin: 0; margin: 0;
padding: 20px 24px 9px; font-size: inherit;
border-bottom: 1px solid transparent; font-weight: inherit;
} }
paper-tabs { paper-tabs {
--paper-tabs-selection-bar-color: var(--primary-color); --paper-tabs-selection-bar-color: var(--primary-color);
color: var(--primary-text-color); color: var(--primary-text-color);
text-transform: uppercase; text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 20px; padding: 0 20px;
} }
mwc-button.warning { mwc-button.warning {
@ -531,19 +515,6 @@ export class HuiDialogEditView extends LitElement {
ha-circular-progress[active] { ha-circular-progress[active] {
display: block; display: block;
} }
ha-button-menu {
color: var(--secondary-text-color);
position: absolute;
right: 16px;
top: 14px;
inset-inline-end: 16px;
inset-inline-start: initial;
direction: var(--direction);
}
ha-button-menu,
ha-icon-button {
--mdc-theme-text-primary-on-background: var(--primary-text-color);
}
.selected_menu_item { .selected_menu_item {
color: var(--primary-color); color: var(--primary-color);
} }