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

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 PANEL_VIEW_LAYOUT = "panel";
export const SIDEBAR_VIEW_LAYOUT = "sidebar"; export const SIDEBAR_VIEW_LAYOUT = "sidebar";
export const SECTION_VIEW_LAYOUT = "sections"; export const SECTION_VIEW_LAYOUT = "sections";
export const VIEWS_NO_BADGE_SUPPORT = [ export const VIEWS_NO_BADGE_SUPPORT = [PANEL_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT];
PANEL_VIEW_LAYOUT,
SIDEBAR_VIEW_LAYOUT,
SECTION_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; padding-top: 4px;
} }
.badges {
margin: 8px 16px;
font-size: 85%;
text-align: center;
}
#columns { #columns {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

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

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