jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-04-20 09:34:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve area cleaning view

Browse Source
This commit is contained in:
Paul Bottein
2026-04-07 11:54:02 +02:00
parent f19c98580f
commit 27c89903e8
4 changed files with 78 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/dialogs/more-info/components/vacuum/ha-more-info-view-vacuum-clean-areas-header-action.ts Normal file
View File

@@ -0,0 +1,38 @@
import { mdiCogOutline } from "@mdi/js";
import { html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../../components/ha-icon-button";
import type { HomeAssistant } from "../../../../types";
import { showVacuumSegmentMappingView } from "./show-view-vacuum-segment-mapping";
@customElement("ha-more-info-view-vacuum-clean-areas-header-action")
export class HaMoreInfoViewVacuumCleanAreasHeaderAction extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public entityId!: string;
protected render() {
if (!this.hass.user?.is_admin) {
return nothing;
}
return html`
<ha-icon-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.vacuum.configure_area_mapping"
)}
.path=${mdiCogOutline}
@click=${this._handleClick}
></ha-icon-button>
`;
}
private _handleClick() {
showVacuumSegmentMappingView(this, this.hass.localize, this.entityId);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-view-vacuum-clean-areas-header-action": HaMoreInfoViewVacuumCleanAreasHeaderAction;
}
}

34
src/dialogs/more-info/components/vacuum/ha-more-info-view-vacuum-clean-areas.ts
View File

@@ -263,26 +263,40 @@ export class HaMoreInfoViewVacuumCleanAreas extends LitElement {
align-items: center;
justify-content: center;
padding: var(--ha-space-3) var(--ha-space-2);
border-radius: var(--ha-border-radius-xl);
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
background: var(--card-background-color, #fff);
border: 1.5px solid var(--divider-color);
border: 1px solid var(--divider-color);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
border-color 180ms ease,
background-color 180ms ease;
overflow: hidden;
transition: border-color 180ms ease-in-out;
min-height: 80px;
}
.area-card:hover {
background: var(--secondary-background-color);
.area-card::before {
content: "";
position: absolute;
inset: 0;
background-color: transparent;
pointer-events: none;
opacity: 0.2;
transition:
background-color 180ms ease-in-out,
opacity 180ms ease-in-out;
}
.area-card:hover::before {
background-color: var(--divider-color);
}
.area-card.selected {
border-color: var(--primary-color);
background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}
.area-card.selected::before {
background-color: var(--primary-color);
}
.area-card .check {
@@ -296,7 +310,7 @@ export class HaMoreInfoViewVacuumCleanAreas extends LitElement {
.area-icon {
--mdc-icon-size: 28px;
color: var(--secondary-text-color);
margin-bottom: var(--ha-space-1);
margin: var(--ha-space-2) 0;
}
.area-card.selected .area-icon {
@@ -304,8 +318,8 @@ export class HaMoreInfoViewVacuumCleanAreas extends LitElement {
}
.area-name {
flex: 1;
display: flex;
height: var(--ha-space-8);
align-items: center;
font-size: var(--ha-font-size-s);
text-align: center;

10
src/dialogs/more-info/components/vacuum/show-view-vacuum-clean-areas.ts
View File

@@ -1,5 +1,8 @@
import { html } from "lit";
import { fireEvent } from "../../../../common/dom/fire_event";
import type { LocalizeFunc } from "../../../../common/translations/localize";
import type { HomeAssistant } from "../../../../types";
import "./ha-more-info-view-vacuum-clean-areas-header-action";
export const loadVacuumCleanAreasView = () =>
import("./ha-more-info-view-vacuum-clean-areas");
@@ -14,5 +17,12 @@ export const showVacuumCleanAreasView = (
viewImport: loadVacuumCleanAreasView,
viewTitle: localize("ui.dialogs.more_info_control.vacuum.clean_areas"),
viewParams: { entityId },
viewHeaderAction: (hass: HomeAssistant) => html`
<ha-more-info-view-vacuum-clean-areas-header-action
slot="headerActionItems"
.hass=${hass}
.entityId=${entityId}
></ha-more-info-view-vacuum-clean-areas-header-action>
`,
});
};

50
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@@ -16,7 +16,7 @@ import {
mdiTransitConnectionVariant,
} from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit";
import type { PropertyValues, TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { cache } from "lit/directives/cache";
@@ -79,7 +79,6 @@ import {
import "./controls/more-info-default";
import type { FavoritesDialogContext } from "./favorites";
import { getFavoritesDialogHandler } from "./favorites";
import { loadVacuumSegmentMappingView } from "./components/vacuum/show-view-vacuum-segment-mapping";
import "./ha-more-info-add-to";
import "./ha-more-info-details";
import "./ha-more-info-history-and-logbook";
@@ -102,6 +101,7 @@ interface ChildView {
viewTitle?: string;
viewImport?: () => Promise<unknown>;
viewParams?: any;
viewHeaderAction?: (hass: HomeAssistant) => TemplateResult | typeof nothing;
}
declare global {
@@ -319,21 +319,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
this._setView("settings");
}
private get _hasVacuumAreaMapping(): boolean {
const areaMapping = this._entry?.options?.vacuum?.area_mapping;
return !!areaMapping && Object.keys(areaMapping).length > 0;
}
private _goToVacuumSegmentMapping(): void {
if (!this._entityId) return;
this._pushChildView({
viewTag: "ha-more-info-view-vacuum-segment-mapping",
viewImport: loadVacuumSegmentMappingView,
viewTitle: this.hass.localize("ui.dialogs.vacuum_segment_mapping.title"),
viewParams: { entityId: this._entityId },
});
}
private _showChildView(ev: CustomEvent): void {
this._pushChildView(ev.detail as ChildView);
}
@@ -610,6 +595,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
.width=${this._fill ? "full" : this.large ? "large" : "medium"}
@closed=${this._dialogClosed}
@opened=${this._handleOpened}
@show-child-view=${this._showChildView}
.preventScrimClose=${this._currView === "settings" ||
!this._isEscapeEnabled}
flexcontent
@@ -812,32 +798,9 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
@click=${this._toggleDetailsYamlMode}
></ha-icon-button>
`
: this._childView?.viewTag === "ha-more-info-details"
? html`
<ha-icon-button
slot="headerActionItems"
.label=${this.hass.localize(
"ui.dialogs.more_info_control.toggle_yaml_mode"
)}
.path=${mdiCodeBraces}
@click=${this._toggleDetailsYamlMode}
></ha-icon-button>
`
: this._childView?.viewTag ===
"ha-more-info-view-vacuum-clean-areas" &&
this._hasVacuumAreaMapping &&
isAdmin
? html`
<ha-icon-button
slot="headerActionItems"
.label=${this.hass.localize(
"ui.dialogs.more_info_control.vacuum.configure_area_mapping"
)}
.path=${mdiCogOutline}
@click=${this._goToVacuumSegmentMapping}
></ha-icon-button>
`
: nothing}
: this._childView?.viewHeaderAction
? this._childView.viewHeaderAction(this.hass)
: nothing}
<div
class=${classMap({
"content-wrapper": true,
@@ -850,7 +813,6 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
<div
class="content ha-scrollbar"
tabindex="-1"
@show-child-view=${this._showChildView}
@entity-entry-updated=${this._entryUpdated}
@toggle-edit-mode=${this._handleToggleInfoEditModeEvent}
@hass-more-info=${this._handleMoreInfoEvent}