diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts
index b36e99cf3a..9721e67a1d 100644
--- a/src/panels/lovelace/cards/hui-todo-list-card.ts
+++ b/src/panels/lovelace/cards/hui-todo-list-card.ts
@@ -331,14 +331,16 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
: nothing}
${!this._reordering && uncheckedItems.length
? html`
-
+ ${!this._config.hide_section_headers
+ ? html``
+ : nothing}
${this._renderItems(uncheckedItems, unavailable)}
`
: nothing}
@@ -366,39 +368,41 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
? html`
-
+
+
+ ${this.hass!.localize(
+ "ui.panel.lovelace.cards.todo-list.clear_items"
+ )}
+
+
+
+ `
+ : nothing}
+
`
+ : nothing}
${this._renderItems(checkedItems, unavailable)}
`
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 77da461bf2..b651c173a8 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -534,6 +534,7 @@ export interface TodoListCardConfig extends LovelaceCardConfig {
entity?: string;
hide_completed?: boolean;
hide_create?: boolean;
+ hide_section_headers?: boolean;
sort?: string;
}
diff --git a/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
index f2cb361fea..c976e75d69 100644
--- a/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-todo-list-editor.ts
@@ -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}
>
@@ -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>
+ ) => {
+ 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;
}
diff --git a/src/translations/en.json b/src/translations/en.json
index 65c427f32f..1f080f0c9d 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -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": {