mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-04 08:29:52 +00:00
254ee8568b
* Add integration name to repairs * Improve dialog-repairs-issue aria and translations * Fix type in dialog-repairs-issue * Remove unused slots in dialog-repairs-issue * Fix ha-config-repairs avoid nested css * Fix ha-config-repairs to use ha-md-list * Add subtitle slot to ha-dialog-header * Move close icon to left in dialog-data-entry-flow * Move severity and reportedBy to dialog subtitle in repair-dialog * Add md buttons to dialog-repairs-issue * Revert dialog-repairs-issue to use normal ha-buttons * Revert dialog-entry-flow close icon position * Improve buttons for dialog-repairs-issue * Add subtitle to all show-dialog-repair-flow headers * Fix integration names for repair dialogs * Fix subtitle title repair dialogs --------- Co-authored-by: Bram Kragten <mail@bramkragten.nl>
94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
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-content">
|
|
<div class="header-title">
|
|
<slot name="title"></slot>
|
|
</div>
|
|
<div class="header-subtitle">
|
|
<slot name="subtitle"></slot>
|
|
</div>
|
|
</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-content {
|
|
flex: 1;
|
|
padding: 10px 4px;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.header-title {
|
|
font-size: 22px;
|
|
line-height: 28px;
|
|
font-weight: 400;
|
|
}
|
|
.header-subtitle {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: var(--secondary-text-color);
|
|
}
|
|
@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;
|
|
}
|
|
}
|