Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-02-15 07:25:54 +00:00
Code Activity

Ability to hide section headers from todo card (#26949)

Browse Source 
Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
This commit is contained in:
Aidan Timson
2025-10-09 08:11:03 +01:00
committed by GitHub
parent 1b932ae4a2
commit 31ccf114a6
4 changed files with 64 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/panels/lovelace/cards/hui-todo-list-card.ts
View File

@@ -331,14 +331,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
: nothing}
${!this._reordering && uncheckedItems.length
? html`
<div class="header" role="separator">
<h2>
${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.unchecked_items"
)}
</h2>
${this._renderMenu(this._config, unavailable)}
</div>
${!this._config.hide_section_headers
? html`<div class="header">
<h2>
${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.unchecked_items"
)}
</h2>
${this._renderMenu(this._config, unavailable)}
</div>`
: nothing}
${this._renderItems(uncheckedItems, unavailable)}
`
: nothing}
@@ -366,39 +368,41 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
? html`
<div>
<div class="divider" role="separator"></div>
<div class="header">
<h2>
${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.checked_items"
)}
</h2>
${this._todoListSupportsFeature(
TodoListEntityFeature.DELETE_TODO_ITEM
)
? html`<ha-button-menu
@closed=${stopPropagation}
fixed
@action=${this._handleCompletedMenuAction}
>
<ha-icon-button
slot="trigger"
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-list-item graphic="icon" class="warning">
${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.clear_items"
)}
<ha-svg-icon
class="warning"
slot="graphic"
.path=${mdiDeleteSweep}
.disabled=${unavailable}
${!this._config.hide_section_headers
? html`<div class="header">
<h2>
${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.checked_items"
)}
</h2>
${this._todoListSupportsFeature(
TodoListEntityFeature.DELETE_TODO_ITEM
)
? html`<ha-button-menu
@closed=${stopPropagation}
fixed
@action=${this._handleCompletedMenuAction}
>
</ha-svg-icon>
</ha-list-item>
</ha-button-menu>`
: nothing}
</div>
<ha-icon-button
slot="trigger"
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-list-item graphic="icon" class="warning">
${this.hass!.localize(
"ui.panel.lovelace.cards.todo-list.clear_items"
)}
<ha-svg-icon
class="warning"
slot="graphic"
.path=${mdiDeleteSweep}
.disabled=${unavailable}
>
</ha-svg-icon>
</ha-list-item>
</ha-button-menu>`
: nothing}
</div>`
: nothing}
</div>
${this._renderItems(checkedItems, unavailable)}
`

1
src/panels/lovelace/cards/types.ts
View File

@@ -534,6 +534,7 @@ export interface TodoListCardConfig extends LovelaceCardConfig {
entity?: string;
hide_completed?: boolean;
hide_create?: boolean;
hide_section_headers?: boolean;
sort?: string;
}

17
src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
View File

@@ -32,6 +32,7 @@ const cardConfigStruct = assign(
entity: optional(string()),
hide_completed: optional(boolean()),
hide_create: optional(boolean()),
hide_section_headers: optional(boolean()),
display_order: optional(string()),
item_tap_action: optional(string()),
})
@@ -59,6 +60,7 @@ export class HuiTodoListEditor
{ name: "theme", selector: { theme: {} } },
{ name: "hide_completed", selector: { boolean: {} } },
{ name: "hide_create", selector: { boolean: {} } },
{ name: "hide_section_headers", selector: { boolean: {} } },
{
name: "display_order",
selector: {
@@ -131,6 +133,7 @@ export class HuiTodoListEditor
.data=${this._data(this._config)}
.schema=${this._schema(this.hass.localize, this._todoListSupportsFeature(TodoListEntityFeature.MOVE_TODO_ITEM))}
.computeLabel=${this._computeLabelCallback}
.computeHelper=${this._computeHelperCallback}
@value-changed=${this._valueChanged}
></ha-form>
</div>
@@ -164,6 +167,7 @@ export class HuiTodoListEditor
)})`;
case "hide_completed":
case "hide_create":
case "hide_section_headers":
case "display_order":
case "item_tap_action":
return this.hass!.localize(
@@ -176,6 +180,19 @@ export class HuiTodoListEditor
}
};
private _computeHelperCallback = (
schema: SchemaUnion<ReturnType<typeof this._schema>>
) => {
switch (schema.name) {
case "hide_section_headers":
return this.hass!.localize(
`ui.panel.lovelace.editor.card.todo-list.${schema.name}_helper`
);
default:
return undefined;
}
};
static get styles(): CSSResultGroup {
return configElementStyle;
}

2
src/translations/en.json
View File

@@ -7934,6 +7934,8 @@
"integration_not_loaded": "This card requires the `todo` integration to be set up.",
"hide_completed": "Hide completed items",
"hide_create": "Hide 'Add item' field",
"hide_section_headers": "Hide section headers",
"hide_section_headers_helper": "Removes the 'Active' and 'Completed' sections with the overflow menus.",
"display_order": "Display order",
"item_tap_action": "Item tap behavior",
"actions": {