mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Ha dialog header (#16485)
This commit is contained in:
Paul Bottein
GitHub
parent
3325cbfa28
commit
3838d76094
81
src/components/ha-dialog-header.ts
Normal file
81
src/components/ha-dialog-header.ts
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -63,6 +63,10 @@ export class HaDialog extends DialogBase {
|
||||
static override styles = [
|
||||
styles,
|
||||
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-scroll-divider-color: var(
|
||||
--dialog-scroll-divider-color,
|
||||
@ -119,13 +123,6 @@ export class HaDialog extends DialogBase {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header_button {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 14px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.header_title {
|
||||
margin-right: 32px;
|
||||
margin-inline-end: 32px;
|
||||
@ -133,6 +130,11 @@ export class HaDialog extends DialogBase {
|
||||
direction: var(--direction);
|
||||
}
|
||||
.header_button {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 14px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
inset-inline-start: initial;
|
||||
inset-inline-end: 16px;
|
||||
direction: var(--direction);
|
||||
|
||||
@ -78,6 +78,12 @@ export class HaTextField extends TextFieldBase {
|
||||
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__affix--suffix {
|
||||
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-floating-label {
|
||||
max-width: calc(100% - 48px);
|
||||
inset-inline-start: 48px !important;
|
||||
max-width: calc(
|
||||
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;
|
||||
direction: var(--direction);
|
||||
}
|
||||
|
||||
@ -18,10 +18,11 @@ import {
|
||||
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import "../ha-button";
|
||||
import "../ha-check-list-item";
|
||||
import "../ha-circular-progress";
|
||||
import "../ha-dialog";
|
||||
import "../ha-header-bar";
|
||||
import "../ha-dialog-header";
|
||||
import "../ha-svg-icon";
|
||||
import "./ha-media-player-browse";
|
||||
import "./ha-media-upload-button";
|
||||
@ -80,7 +81,7 @@ class DialogMediaManage extends LitElement {
|
||||
.heading=${this._params.currentItem.title}
|
||||
@closed=${this.closeDialog}
|
||||
>
|
||||
<ha-header-bar slot="heading">
|
||||
<ha-dialog-header slot="heading">
|
||||
${this._selected.size === 0
|
||||
? html`
|
||||
<span slot="title">
|
||||
@ -104,14 +105,13 @@ class DialogMediaManage extends LitElement {
|
||||
.label=${this.hass.localize("ui.dialogs.generic.close")}
|
||||
.path=${mdiClose}
|
||||
dialogAction="close"
|
||||
slot="actionItems"
|
||||
class="header_button"
|
||||
slot="navigationIcon"
|
||||
dir=${computeRTLDirection(this.hass)}
|
||||
></ha-icon-button>
|
||||
`}
|
||||
`
|
||||
: html`
|
||||
<mwc-button
|
||||
<ha-button
|
||||
class="danger"
|
||||
slot="title"
|
||||
.disabled=${this._deleting}
|
||||
@ -124,12 +124,12 @@ class DialogMediaManage extends LitElement {
|
||||
@click=${this._handleDelete}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
|
||||
</mwc-button>
|
||||
</ha-button>
|
||||
|
||||
${this._deleting
|
||||
? ""
|
||||
: html`
|
||||
<mwc-button
|
||||
<ha-button
|
||||
slot="actionItems"
|
||||
.label=${`Deselect all`}
|
||||
@click=${this._handleDeselectAll}
|
||||
@ -138,10 +138,10 @@ class DialogMediaManage extends LitElement {
|
||||
.path=${mdiClose}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
</mwc-button>
|
||||
</ha-button>
|
||||
`}
|
||||
`}
|
||||
</ha-header-bar>
|
||||
</ha-dialog-header>
|
||||
${!this._currentItem
|
||||
? html`
|
||||
<div class="refresh">
|
||||
@ -290,16 +290,11 @@ class DialogMediaManage extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
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(--divider-color, rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
ha-media-upload-button,
|
||||
mwc-button {
|
||||
--mdc-theme-primary: var(--mdc-theme-on-primary);
|
||||
ha-dialog-header ha-media-upload-button,
|
||||
ha-dialog-header ha-button {
|
||||
--mdc-theme-primary: var(--primary-text-color);
|
||||
margin: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
mwc-list {
|
||||
|
||||
@ -2,7 +2,6 @@ import { mdiArrowLeft, mdiClose } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
|
||||
import { computeRTLDirection } from "../../common/util/compute_rtl";
|
||||
import type {
|
||||
MediaPickedEvent,
|
||||
MediaPlayerBrowseAction,
|
||||
@ -11,7 +10,7 @@ import type {
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import "../ha-dialog";
|
||||
import "../ha-header-bar";
|
||||
import "../ha-dialog-header";
|
||||
import "./ha-media-manage-button";
|
||||
import "./ha-media-player-browse";
|
||||
import type {
|
||||
@ -68,7 +67,7 @@ class DialogMediaPlayerBrowse extends LitElement {
|
||||
: this._currentItem.title}
|
||||
@closed=${this.closeDialog}
|
||||
>
|
||||
<ha-header-bar slot="heading">
|
||||
<ha-dialog-header show-border slot="heading">
|
||||
${this._navigateIds.length > 1
|
||||
? html`
|
||||
<ha-icon-button
|
||||
@ -77,7 +76,7 @@ class DialogMediaPlayerBrowse extends LitElement {
|
||||
@click=${this._goBack}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: ""}
|
||||
: nothing}
|
||||
<span slot="title">
|
||||
${!this._currentItem
|
||||
? this.hass.localize(
|
||||
@ -97,10 +96,8 @@ class DialogMediaPlayerBrowse extends LitElement {
|
||||
.path=${mdiClose}
|
||||
dialogAction="close"
|
||||
slot="actionItems"
|
||||
class="header_button"
|
||||
dir=${computeRTLDirection(this.hass)}
|
||||
></ha-icon-button>
|
||||
</ha-header-bar>
|
||||
</ha-dialog-header>
|
||||
<ha-media-player-browse
|
||||
dialog
|
||||
.hass=${this.hass}
|
||||
@ -170,15 +167,10 @@ class DialogMediaPlayerBrowse extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
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(--divider-color, rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
ha-media-manage-button {
|
||||
--mdc-theme-primary: var(--mdc-theme-on-primary);
|
||||
ha-dialog-header ha-media-manage-button {
|
||||
--mdc-theme-primary: var(--primary-text-color);
|
||||
margin: 6px;
|
||||
display: block;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@ -20,7 +20,7 @@ import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-reques
|
||||
import { navigate } from "../../common/navigate";
|
||||
import "../../components/ha-button-menu";
|
||||
import "../../components/ha-dialog";
|
||||
import "../../components/ha-header-bar";
|
||||
import "../../components/ha-dialog-header";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-icon-button-prev";
|
||||
import "../../components/ha-list-item";
|
||||
@ -244,126 +244,121 @@ export class MoreInfoDialog extends LitElement {
|
||||
|
||||
return html`
|
||||
<ha-dialog open @closed=${this.closeDialog} .heading=${title} hideActions>
|
||||
<div slot="heading" class="heading">
|
||||
<ha-header-bar>
|
||||
${isInfoView
|
||||
? html`
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.dismiss"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: html`
|
||||
<ha-icon-button-prev
|
||||
slot="navigationIcon"
|
||||
@click=${this._goBack}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.back_to_info"
|
||||
)}
|
||||
></ha-icon-button-prev>
|
||||
`}
|
||||
${!isInfoView || !isNewMoreInfo
|
||||
? html`<div
|
||||
slot="title"
|
||||
class="main-title"
|
||||
.title=${title}
|
||||
@click=${this._enlarge}
|
||||
>
|
||||
<ha-dialog-header slot="heading">
|
||||
${isInfoView
|
||||
? html`
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.dismiss"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: html`
|
||||
<ha-icon-button-prev
|
||||
slot="navigationIcon"
|
||||
@click=${this._goBack}
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.back_to_info"
|
||||
)}
|
||||
></ha-icon-button-prev>
|
||||
`}
|
||||
${!isInfoView || !isNewMoreInfo
|
||||
? html`
|
||||
<span slot="title" .title=${title} @click=${this._enlarge}>
|
||||
${title}
|
||||
</div>`
|
||||
: nothing}
|
||||
${isInfoView
|
||||
? html`
|
||||
${this.shouldShowHistory(domain)
|
||||
? html`
|
||||
</span>
|
||||
`
|
||||
: nothing}
|
||||
${isInfoView
|
||||
? 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
|
||||
slot="actionItems"
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.history"
|
||||
)}
|
||||
.path=${mdiChartBoxOutline}
|
||||
@click=${this._goToHistory}
|
||||
slot="trigger"
|
||||
.label=${this.hass.localize("ui.common.menu")}
|
||||
.path=${mdiDotsVertical}
|
||||
></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
|
||||
? html`
|
||||
<ha-list-item
|
||||
graphic="icon"
|
||||
@request-selected=${this._goToDevice}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.device_info"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiDevices}
|
||||
></ha-svg-icon>
|
||||
</ha-list-item>
|
||||
`
|
||||
: nothing}
|
||||
${this.shouldShowEditIcon(domain, stateObj)
|
||||
? html`
|
||||
<ha-list-item
|
||||
graphic="icon"
|
||||
@request-selected=${this._goToEdit}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.edit"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiPencilOutline}
|
||||
></ha-svg-icon>
|
||||
</ha-list-item>
|
||||
`
|
||||
: nothing}
|
||||
<ha-list-item
|
||||
graphic="icon"
|
||||
@request-selected=${this._goToRelated}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.related"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiInformationOutline}
|
||||
></ha-svg-icon>
|
||||
</ha-list-item>
|
||||
</ha-button-menu>
|
||||
`
|
||||
: nothing}
|
||||
`
|
||||
: nothing}
|
||||
</ha-header-bar>
|
||||
</div>
|
||||
${deviceId
|
||||
? html`
|
||||
<ha-list-item
|
||||
graphic="icon"
|
||||
@request-selected=${this._goToDevice}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.device_info"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiDevices}
|
||||
></ha-svg-icon>
|
||||
</ha-list-item>
|
||||
`
|
||||
: nothing}
|
||||
${this.shouldShowEditIcon(domain, stateObj)
|
||||
? html`
|
||||
<ha-list-item
|
||||
graphic="icon"
|
||||
@request-selected=${this._goToEdit}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.edit"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiPencilOutline}
|
||||
></ha-svg-icon>
|
||||
</ha-list-item>
|
||||
`
|
||||
: nothing}
|
||||
<ha-list-item
|
||||
graphic="icon"
|
||||
@request-selected=${this._goToRelated}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.related"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.path=${mdiInformationOutline}
|
||||
></ha-svg-icon>
|
||||
</ha-list-item>
|
||||
</ha-button-menu>
|
||||
`
|
||||
: nothing}
|
||||
`
|
||||
: nothing}
|
||||
</ha-dialog-header>
|
||||
<div
|
||||
class="content"
|
||||
tabindex="-1"
|
||||
@ -455,23 +450,10 @@ export class MoreInfoDialog extends LitElement {
|
||||
--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 {
|
||||
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-more-info-history-and-logbook {
|
||||
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) {
|
||||
/* When in fullscreen dialog should be attached to top */
|
||||
ha-dialog {
|
||||
|
||||
@ -24,10 +24,10 @@ import { stopPropagation } from "../../common/dom/stop_propagation";
|
||||
import "../../components/ha-button";
|
||||
import "../../components/ha-button-menu";
|
||||
import "../../components/ha-dialog";
|
||||
import "../../components/ha-header-bar";
|
||||
import "../../components/ha-icon-button";
|
||||
import "../../components/ha-list-item";
|
||||
import "../../components/ha-textfield";
|
||||
import "../../components/ha-dialog-header";
|
||||
import type { HaTextField } from "../../components/ha-textfield";
|
||||
import {
|
||||
AssistPipeline,
|
||||
@ -122,73 +122,68 @@ export class HaVoiceCommandDialog extends LitElement {
|
||||
.heading=${this.hass.localize("ui.dialogs.voice_command.title")}
|
||||
flexContent
|
||||
>
|
||||
<div slot="heading">
|
||||
<ha-header-bar>
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<div slot="title">
|
||||
${this.hass.localize("ui.dialogs.voice_command.title")}
|
||||
<ha-button-menu
|
||||
@opened=${this._loadPipelines}
|
||||
@closed=${stopPropagation}
|
||||
activatable
|
||||
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-dialog-header slot="heading">
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<div slot="title">
|
||||
${this.hass.localize("ui.dialogs.voice_command.title")}
|
||||
<ha-button-menu
|
||||
@opened=${this._loadPipelines}
|
||||
@closed=${stopPropagation}
|
||||
activatable
|
||||
fixed
|
||||
>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.common.help")}
|
||||
.path=${mdiHelpCircleOutline}
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
</ha-header-bar>
|
||||
</div>
|
||||
<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
|
||||
.label=${this.hass.localize("ui.common.help")}
|
||||
.path=${mdiHelpCircleOutline}
|
||||
></ha-icon-button>
|
||||
</a>
|
||||
</ha-dialog-header>
|
||||
<div class="messages">
|
||||
<div class="messages-container" id="scroll-container">
|
||||
${this._conversation!.map(
|
||||
@ -645,18 +640,13 @@ export class HaVoiceCommandDialog extends LitElement {
|
||||
--mdc-dialog-max-height: 500px;
|
||||
--dialog-content-padding: 0;
|
||||
}
|
||||
ha-header-bar {
|
||||
--mdc-theme-on-primary: var(--primary-text-color);
|
||||
--mdc-theme-primary: var(--mdc-theme-surface);
|
||||
--header-height: 64px;
|
||||
}
|
||||
ha-header-bar a {
|
||||
ha-dialog-header a {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
div[slot="title"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 8px;
|
||||
margin: -4px 0;
|
||||
}
|
||||
ha-button-menu {
|
||||
--mdc-theme-on-primary: var(--text-primary-color);
|
||||
|
||||
@ -6,16 +6,16 @@ import {
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
nothing,
|
||||
PropertyValues,
|
||||
} from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { cache } from "lit/directives/cache";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent } from "../../../../../common/dom/fire_event";
|
||||
import "../../../../../components/ha-code-editor";
|
||||
import { createCloseHeading } from "../../../../../components/ha-dialog";
|
||||
import "../../../../../components/ha-header-bar";
|
||||
import "../../../../../components/ha-dialog";
|
||||
import "../../../../../components/ha-dialog-header";
|
||||
import {
|
||||
fetchBindableDevices,
|
||||
fetchGroups,
|
||||
@ -99,32 +99,22 @@ class DialogZHAManageZigbeeDevice extends LitElement {
|
||||
open
|
||||
hideActions
|
||||
@closed=${this.closeDialog}
|
||||
.heading=${createCloseHeading(
|
||||
this.hass,
|
||||
this.hass.localize("ui.dialogs.zha_manage_device.heading")
|
||||
)}
|
||||
.heading=${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
|
||||
>
|
||||
<div slot="heading" class="heading">
|
||||
<ha-header-bar>
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize(
|
||||
"ui.dialogs.more_info_control.dismiss"
|
||||
)}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<div
|
||||
slot="title"
|
||||
class="main-title"
|
||||
.title=${this.hass.localize(
|
||||
"ui.dialogs.zha_manage_device.heading"
|
||||
)}
|
||||
@click=${this._enlarge}
|
||||
>
|
||||
${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
|
||||
</div>
|
||||
</ha-header-bar>
|
||||
<ha-dialog-header show-border slot="heading">
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize("ui.dialogs.more_info_control.dismiss")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<span
|
||||
slot="title"
|
||||
.title=${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
|
||||
@click=${this._enlarge}
|
||||
>
|
||||
${this.hass.localize("ui.dialogs.zha_manage_device.heading")}
|
||||
</span>
|
||||
<mwc-tab-bar
|
||||
.activeIndex=${tabs.indexOf(this._currTab)}
|
||||
@MDCTabBar:activated=${this._handleTabChanged}
|
||||
@ -139,8 +129,7 @@ class DialogZHAManageZigbeeDevice extends LitElement {
|
||||
`
|
||||
)}
|
||||
</mwc-tab-bar>
|
||||
</div>
|
||||
|
||||
</ha-dialog-header>
|
||||
<div class="content" tabindex="-1" dialogInitialFocus>
|
||||
${cache(
|
||||
this._currTab === "clusters"
|
||||
@ -238,27 +227,9 @@ class DialogZHAManageZigbeeDevice extends LitElement {
|
||||
--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 {
|
||||
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) {
|
||||
ha-dialog {
|
||||
@ -267,18 +238,6 @@ class DialogZHAManageZigbeeDevice extends LitElement {
|
||||
--dialog-surface-margin-top: 40px;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { mdiClose, mdiContentCopy } from "@mdi/js";
|
||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
||||
import { mdiClose, mdiContentCopy } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
|
||||
import { property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { copyToClipboard } from "../../../common/util/copy-clipboard";
|
||||
import "../../../components/ha-alert";
|
||||
import "../../../components/ha-dialog";
|
||||
import "../../../components/ha-header-bar";
|
||||
import "../../../components/ha-dialog-header";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import {
|
||||
@ -79,14 +79,14 @@ class DialogSystemLogDetail extends LitElement {
|
||||
|
||||
return html`
|
||||
<ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}>
|
||||
<ha-header-bar slot="heading">
|
||||
<ha-dialog-header slot="heading">
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<span slot="title"> ${title} </span>
|
||||
<span slot="title">${title}</span>
|
||||
<ha-icon-button
|
||||
id="copy"
|
||||
@click=${this._copyLog}
|
||||
@ -94,7 +94,7 @@ class DialogSystemLogDetail extends LitElement {
|
||||
.label=${this.hass.localize("ui.panel.config.logs.copy")}
|
||||
.path=${mdiContentCopy}
|
||||
></ha-icon-button>
|
||||
</ha-header-bar>
|
||||
</ha-dialog-header>
|
||||
${this.isCustomIntegration
|
||||
? html`<ha-alert alert-type="warning">
|
||||
${this.hass.localize(
|
||||
@ -235,14 +235,6 @@ class DialogSystemLogDetail extends LitElement {
|
||||
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) {
|
||||
ha-dialog {
|
||||
--mdc-dialog-max-width: 90vw;
|
||||
|
||||
@ -53,31 +53,32 @@ class DialogExposeEntity extends LitElement {
|
||||
|
||||
return html`
|
||||
<ha-dialog open @closed=${this.closeDialog} .heading=${header}>
|
||||
<div slot="heading">
|
||||
<h2 class="header">
|
||||
${header}<span class="subtitle"
|
||||
>${this.hass.localize(
|
||||
<ha-dialog-header slot="heading" show-border>
|
||||
<h2 class="header" slot="title">
|
||||
${header}
|
||||
<span class="subtitle">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.voice_assistants.expose.expose_dialog.expose_to",
|
||||
{
|
||||
assistants: this._params.filterAssistants
|
||||
.map((ass) => voiceAssistants[ass].name)
|
||||
.join(", "),
|
||||
}
|
||||
)}</span
|
||||
>
|
||||
)}
|
||||
</span>
|
||||
</h2>
|
||||
<ha-icon-button
|
||||
.label=${this.hass.localize("ui.dialogs.generic.close")}
|
||||
.path=${mdiClose}
|
||||
dialogAction="close"
|
||||
class="header_button"
|
||||
slot="navigationIcon"
|
||||
></ha-icon-button>
|
||||
<search-input
|
||||
.hass=${this.hass}
|
||||
.filter=${this._filter}
|
||||
@value-changed=${this._filterChanged}
|
||||
></search-input>
|
||||
</div>
|
||||
</ha-dialog-header>
|
||||
<mwc-list multi>
|
||||
<lit-virtualizer
|
||||
scroller
|
||||
@ -176,6 +177,41 @@ class DialogExposeEntity extends LitElement {
|
||||
lit-virtualizer {
|
||||
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) {
|
||||
lit-virtualizer {
|
||||
height: 334px;
|
||||
@ -200,84 +236,16 @@ class DialogExposeEntity extends LitElement {
|
||||
--ha-dialog-border-radius: 0px;
|
||||
}
|
||||
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);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@ -12,8 +12,8 @@ import { stopPropagation } from "../../../common/dom/stop_propagation";
|
||||
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
|
||||
import { navigate } from "../../../common/navigate";
|
||||
import "../../../components/ha-button";
|
||||
import "../../../components/ha-dialog-header";
|
||||
import "../../../components/ha-form/ha-form";
|
||||
import "../../../components/ha-header-bar";
|
||||
import {
|
||||
AssistPipeline,
|
||||
AssistPipelineMutableParams,
|
||||
@ -98,14 +98,14 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
|
||||
escapeKeyAction
|
||||
.heading=${title}
|
||||
>
|
||||
<ha-header-bar slot="heading">
|
||||
<ha-dialog-header slot="heading">
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<div slot="title" class="main-title" .title=${title}>${title}</div>
|
||||
<span slot="title" .title=${title}>${title}</span>
|
||||
${this._params.pipeline?.id
|
||||
? html`
|
||||
<ha-icon-button
|
||||
@ -139,7 +139,7 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
|
||||
</ha-button-menu>
|
||||
`
|
||||
: nothing}
|
||||
</ha-header-bar>
|
||||
</ha-dialog-header>
|
||||
<div class="content">
|
||||
${this._error
|
||||
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
|
||||
@ -298,15 +298,6 @@ export class DialogVoiceAssistantPipelineDetail extends LitElement {
|
||||
return [
|
||||
haStyleDialog,
|
||||
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-conversation,
|
||||
assist-pipeline-detail-stt {
|
||||
|
||||
@ -4,6 +4,7 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
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 { haStyle, haStyleDialog } from "../../../resources/styles";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
@ -43,14 +44,14 @@ class DialogVoiceSettings extends LitElement {
|
||||
|
||||
return html`
|
||||
<ha-dialog open @closed=${this.closeDialog} hideActions .heading=${title}>
|
||||
<ha-header-bar slot="heading">
|
||||
<ha-dialog-header slot="heading">
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<div slot="title" class="main-title" .title=${title}>${title}</div>
|
||||
<span slot="title" .title=${title}>${title}</span>
|
||||
<ha-icon-button
|
||||
slot="actionItems"
|
||||
.label=${this.hass.localize(
|
||||
@ -59,7 +60,7 @@ class DialogVoiceSettings extends LitElement {
|
||||
.path=${mdiTuneVertical}
|
||||
@click=${this._viewMoreInfo}
|
||||
></ha-icon-button>
|
||||
</ha-header-bar>
|
||||
</ha-dialog-header>
|
||||
<div>
|
||||
<entity-voice-settings
|
||||
.hass=${this.hass}
|
||||
@ -87,15 +88,6 @@ class DialogVoiceSettings extends LitElement {
|
||||
haStyle,
|
||||
haStyleDialog,
|
||||
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 {
|
||||
--dialog-content-padding: 0;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import "@material/mwc-tab-bar/mwc-tab-bar";
|
||||
import "@material/mwc-tab/mwc-tab";
|
||||
import { mdiClose } from "@mdi/js";
|
||||
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
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 { DataTableRowData } from "../../../../components/data-table/ha-data-table";
|
||||
import "../../../../components/ha-dialog";
|
||||
import "../../../../components/ha-header-bar";
|
||||
import "../../../../components/ha-dialog-header";
|
||||
import type { LovelaceViewConfig } from "../../../../data/lovelace";
|
||||
import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
|
||||
import { haStyleDialog } from "../../../../resources/styles";
|
||||
@ -82,10 +83,14 @@ export class HuiCreateDialogCard
|
||||
.heading=${title}
|
||||
class=${classMap({ table: this._currTabIndex === 1 })}
|
||||
>
|
||||
<div slot="heading">
|
||||
<ha-header-bar>
|
||||
<span slot="title"> ${title} </span>
|
||||
</ha-header-bar>
|
||||
<ha-dialog-header show-border slot="heading">
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<span slot="title"> ${title} </span>
|
||||
<mwc-tab-bar
|
||||
.activeIndex=${this._currTabIndex}
|
||||
@MDCTabBar:activated=${this._handleTabChanged}
|
||||
@ -102,7 +107,7 @@ export class HuiCreateDialogCard
|
||||
)}
|
||||
></mwc-tab>
|
||||
</mwc-tab-bar>
|
||||
</div>
|
||||
</ha-dialog-header>
|
||||
${cache(
|
||||
this._currTabIndex === 0
|
||||
? html`
|
||||
@ -171,14 +176,6 @@ export class HuiCreateDialogCard
|
||||
--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) {
|
||||
ha-dialog {
|
||||
--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 {
|
||||
--card-picker-search-shape: 0;
|
||||
--card-picker-search-margin: -2px -24px 0;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import { mdiHelpCircle } from "@mdi/js";
|
||||
import { mdiClose, mdiHelpCircle } from "@mdi/js";
|
||||
import deepFreeze from "deep-freeze";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
nothing,
|
||||
PropertyValues,
|
||||
} from "lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
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 "../../../../components/ha-circular-progress";
|
||||
import "../../../../components/ha-dialog";
|
||||
import "../../../../components/ha-header-bar";
|
||||
import "../../../../components/ha-dialog-header";
|
||||
import "../../../../components/ha-icon-button";
|
||||
import type {
|
||||
LovelaceCardConfig,
|
||||
@ -178,26 +178,30 @@ export class HuiDialogEditCard
|
||||
@opened=${this._opened}
|
||||
.heading=${heading}
|
||||
>
|
||||
<div slot="heading">
|
||||
<ha-header-bar>
|
||||
<div slot="title" @click=${this._enlarge}>${heading}</div>
|
||||
${this._documentationURL !== undefined
|
||||
? html`
|
||||
<a
|
||||
slot="actionItems"
|
||||
class="header_button"
|
||||
href=${this._documentationURL}
|
||||
title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
dir=${computeRTLDirection(this.hass)}
|
||||
>
|
||||
<ha-icon-button .path=${mdiHelpCircle}></ha-icon-button>
|
||||
</a>
|
||||
`
|
||||
: ""}
|
||||
</ha-header-bar>
|
||||
</div>
|
||||
<ha-dialog-header slot="heading">
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
dialogAction="cancel"
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<span slot="title" @click=${this._enlarge}>${heading}</span>
|
||||
${this._documentationURL !== undefined
|
||||
? html`
|
||||
<a
|
||||
slot="actionItems"
|
||||
class="header_button"
|
||||
href=${this._documentationURL}
|
||||
title=${this.hass!.localize("ui.panel.lovelace.menu.help")}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
dir=${computeRTLDirection(this.hass)}
|
||||
>
|
||||
<ha-icon-button .path=${mdiHelpCircle}></ha-icon-button>
|
||||
</a>
|
||||
`
|
||||
: nothing}
|
||||
</ha-dialog-header>
|
||||
<div class="content">
|
||||
<div class="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 {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import "@material/mwc-button";
|
||||
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-tabs";
|
||||
import {
|
||||
@ -8,8 +8,8 @@ import {
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
nothing,
|
||||
PropertyValues,
|
||||
} from "lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
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-circular-progress";
|
||||
import "../../../../components/ha-dialog";
|
||||
import "../../../../components/ha-dialog-header";
|
||||
import { HaYamlEditor } from "../../../../components/ha-yaml-editor";
|
||||
import type {
|
||||
LovelaceBadgeConfig,
|
||||
@ -217,10 +218,16 @@ export class HuiDialogEditView extends LitElement {
|
||||
"yaml-mode": this._yamlMode,
|
||||
})}
|
||||
>
|
||||
<div slot="heading">
|
||||
<h2>${this._viewConfigTitle}</h2>
|
||||
<ha-dialog-header show-border slot="heading">
|
||||
<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
|
||||
slot="icons"
|
||||
slot="actionItems"
|
||||
fixed
|
||||
corner="BOTTOM_END"
|
||||
menuCorner="END"
|
||||
@ -282,7 +289,7 @@ export class HuiDialogEditView extends LitElement {
|
||||
>
|
||||
</paper-tabs>`
|
||||
: ""}
|
||||
</div>
|
||||
</ha-dialog-header>
|
||||
${content}
|
||||
${this._params.viewIndex !== undefined
|
||||
? html`
|
||||
@ -473,53 +480,30 @@ export class HuiDialogEditView extends LitElement {
|
||||
return [
|
||||
haStyleDialog,
|
||||
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 {
|
||||
--dialog-content-padding: 0;
|
||||
}
|
||||
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;
|
||||
padding: 20px 24px 9px;
|
||||
border-bottom: 1px solid transparent;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
paper-tabs {
|
||||
--paper-tabs-selection-bar-color: var(--primary-color);
|
||||
color: var(--primary-text-color);
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 0 20px;
|
||||
}
|
||||
mwc-button.warning {
|
||||
@ -531,19 +515,6 @@ export class HuiDialogEditView extends LitElement {
|
||||
ha-circular-progress[active] {
|
||||
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 {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user