Skip to content

Commit

Permalink
Ha dialog header (#16485)
Browse files Browse the repository at this point in the history
  • Loading branch information
@piitaya
piitaya committed May 10, 2023
1 parent 3325cbf commit 3838d76
Show file tree
Hide file tree
Showing 15 changed files with 446 additions and 543 deletions.
81 changes: 81 additions & 0 deletions src/components/ha-dialog-header.ts
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 changes: 9 additions & 7 deletions src/components/ha-dialog.ts
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -119,20 +123,18 @@ 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;
margin-inline-start: initial;
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);
Expand Down
14 changes: 12 additions & 2 deletions src/components/ha-textfield.ts
View file
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}
Expand Down
33 changes: 14 additions & 19 deletions src/components/media-player/dialog-media-manage.ts
View file
Expand Up @@ -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";
Expand Down Expand Up @@ -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">
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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">
Expand Down Expand Up @@ -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 {
Expand Down
24 changes: 8 additions & 16 deletions src/components/media-player/dialog-media-player-browse.ts
View file
Expand Up @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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
Expand All @@ -77,7 +76,7 @@ class DialogMediaPlayerBrowse extends LitElement {
@click=${this._goBack}
></ha-icon-button>
`
: ""}
: nothing}
<span slot="title">
${!this._currentItem
? this.hass.localize(
Expand All @@ -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}
Expand Down Expand Up @@ -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;
}
`,
];
Expand Down

0 comments on commit 3838d76

Please sign in to comment.