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

Add badges support to sections view (#19929)

Browse Source
This commit is contained in:
Paul Bottein 2024-03-01 13:09:10 +01:00
parent ca7e257e95
commit 67d8765624
No known key found for this signature in database
3 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/panels/lovelace/views/const.ts
View File

@ -2,8 +2,4 @@ export const DEFAULT_VIEW_LAYOUT = "masonry";
export const PANEL_VIEW_LAYOUT = "panel";
export const SIDEBAR_VIEW_LAYOUT = "sidebar";
export const SECTION_VIEW_LAYOUT = "sections";
export const VIEWS_NO_BADGE_SUPPORT = [
PANEL_VIEW_LAYOUT,
SIDEBAR_VIEW_LAYOUT,
SECTION_VIEW_LAYOUT,
];
export const VIEWS_NO_BADGE_SUPPORT = [PANEL_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT];

6
src/panels/lovelace/views/hui-masonry-view.ts
View File

@ -291,12 +291,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
padding-top: 4px;
}
.badges {
margin: 8px 16px;
font-size: 85%;
text-align: center;
}
#columns {
display: flex;
flex-direction: row;

13
src/panels/lovelace/views/hui-sections-view.ts
View File

@ -20,7 +20,7 @@ import {
updateLovelaceContainer,
} from "../editor/lovelace-path";
import { HuiSection } from "../sections/hui-section";
import type { Lovelace } from "../types";
import type { Lovelace, LovelaceBadge } from "../types";
@customElement("hui-sections-view")
export class SectionsView extends LitElement implements LovelaceViewElement {
@ -34,6 +34,8 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
@property({ attribute: false }) public sections: HuiSection[] = [];
@property({ attribute: false }) public badges: LovelaceBadge[] = [];
@state() private _config?: LovelaceViewConfig;
public setConfig(config: LovelaceViewConfig): void {
@ -57,6 +59,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
const editMode = this.lovelace.editMode;
return html`
${this.badges.length > 0
? html`<div class="badges">${this.badges}</div>`
: ""}
<ha-sortable
.disabled=${!editMode}
@item-moved=${this._sectionMoved}
@ -232,6 +237,12 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
display: block;
}
.badges {
margin: 12px 8px 16px 8px;
font-size: 85%;
text-align: center;
}
.section {
position: relative;
border-radius: var(--ha-card-border-radius, 12px);