jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add profile settings for device sidebar

Browse Source
This commit is contained in:
Wendelin 2025-02-17 15:16:34 +01:00
parent 7d7f8a9bc2
commit a3dcf77f2a
No known key found for this signature in database
3 changed files with 205 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/ha-sidebar.ts
View File

@ -52,6 +52,7 @@ import { preventDefault } from "../common/dom/prevent_default";
import {
saveSidebarPreferences,
subscribeSidebarPreferences,
type SidebarPreferences,
} from "../data/sidebar";
const SHOW_AFTER_SPACER = ["config", "developer-tools"];
@ -231,19 +232,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
@state()
private _userHiddenPanels: string[] = [];
@state()
private _tempPanelOrder?: string[];
@state()
private _tempHiddenPanels?: string[];
public hassSubscribe(): UnsubscribeFunc[] {
const subscribeFunctions = [
subscribeSidebarPreferences(this.hass, (sidebar) => {
if (!this._devicePanelOrder && !this._deviceHiddenPanels && sidebar) {
this._userPanelOrder = sidebar.panelOrder || [];
this._userHiddenPanels = sidebar.hiddenPanels || [];
}
this._userPanelOrder = sidebar?.panelOrder || [];
this._userHiddenPanels = sidebar?.hiddenPanels || [];
}),
];
if (this.hass.user?.is_admin) {
@ -289,9 +282,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
changedProps.has("_devicePanelOrder") ||
changedProps.has("_deviceHiddenPanels") ||
changedProps.has("_userPanelOrder") ||
changedProps.has("_userHiddenPanels") ||
changedProps.has("_tempPanelOrder") ||
changedProps.has("_tempHiddenPanels")
changedProps.has("_userHiddenPanels")
) {
return true;
}
@ -411,13 +402,35 @@ class HaSidebar extends SubscribeMixin(LitElement) {
</div>`;
}
private _getPanelPreferencesMemoized = memoizeOne((userPreferences: SidebarPreferences, devicePreferences: SidebarPreferences): { panelOrder: string[], hiddenPanels: string[] } => {
let panelOrder = userPreferences.panelOrder ?? [];
let hiddenPanels = userPreferences.hiddenPanels ?? [];
if (devicePreferences.panelOrder || devicePreferences.hiddenPanels) {
panelOrder = devicePreferences.panelOrder ?? [];
hiddenPanels = devicePreferences.hiddenPanels ?? [];
}
return { panelOrder, hiddenPanels }
})
private _getPanelPreferences() {
return this._getPanelPreferencesMemoized(
{
panelOrder: this._userPanelOrder,
hiddenPanels: this._userHiddenPanels
},
{
panelOrder: this._devicePanelOrder,
hiddenPanels: this._deviceHiddenPanels
}
)
}
private _renderAllPanels() {
const panelOrder =
this._tempPanelOrder || this._devicePanelOrder || this._userPanelOrder;
const hiddenPanels =
this._tempHiddenPanels ||
this._deviceHiddenPanels ||
this._userHiddenPanels;
// TODO render skeleton loading if panels are not loaded yet
const { panelOrder, hiddenPanels } = this._getPanelPreferences();
const [beforeSpacer, afterSpacer] = computePanels(
this.hass.panels,
@ -511,23 +524,49 @@ class HaSidebar extends SubscribeMixin(LitElement) {
`;
}
private async _setPanelOrder(panelOrder: string[]) {
if (this._devicePanelOrder || this._deviceHiddenPanels) {
this._devicePanelOrder = [...panelOrder];
} else {
this._userPanelOrder = [...panelOrder];
await saveSidebarPreferences(this.hass, {
panelOrder: panelOrder,
hiddenPanels: this._userHiddenPanels,
});
}
}
private async _setHiddenPanels(hiddenPanels: string[]) {
if (this._devicePanelOrder || this._deviceHiddenPanels) {
this._deviceHiddenPanels = hiddenPanels;
} else {
this._userHiddenPanels = hiddenPanels;
await saveSidebarPreferences(this.hass, {
panelOrder: this._userPanelOrder,
hiddenPanels: hiddenPanels,
});
}
}
private _panelMoved(ev: CustomEvent) {
ev.stopPropagation();
const { oldIndex, newIndex } = ev.detail;
const { panelOrder, hiddenPanels } = this._getPanelPreferences();
const [beforeSpacer] = computePanels(
this.hass.panels,
this.hass.defaultPanel,
this._tempPanelOrder!,
this._tempHiddenPanels!,
panelOrder,
hiddenPanels!,
this.hass.locale
);
const panelOrder = beforeSpacer.map((panel) => panel.url_path);
const panel = panelOrder.splice(oldIndex, 1)[0];
panelOrder.splice(newIndex, 0, panel);
const panelOrderNew = beforeSpacer.map((panel) => panel.url_path);
const panel = panelOrderNew.splice(oldIndex, 1)[0];
panelOrderNew.splice(newIndex, 0, panel);
this._tempPanelOrder = panelOrder;
this._setPanelOrder(panelOrderNew);
}
private _renderPanelsEdit(beforeSpacer: PanelInfo[]) {
@ -544,10 +583,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
private _renderHiddenPanels() {
const hiddenPanels =
this._tempHiddenPanels ||
this._deviceHiddenPanels ||
this._userHiddenPanels;
const { hiddenPanels } = this._getPanelPreferences();
return html`${hiddenPanels.length
? html`${hiddenPanels.map((url) => {
@ -751,13 +787,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
private async _editModeActivated() {
await this._loadEditStyle();
this._tempPanelOrder = [
...(this._devicePanelOrder || this._userPanelOrder),
];
this._tempHiddenPanels = [
...(this._deviceHiddenPanels || this._userHiddenPanels),
];
}
private async _loadEditStyle() {
@ -773,21 +802,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
private _closeEditMode() {
// TODO confirm dialog if changes and radio if device or user
if (this._devicePanelOrder || this._deviceHiddenPanels) {
this._devicePanelOrder = this._tempPanelOrder;
this._deviceHiddenPanels = this._tempHiddenPanels;
} else {
this._userPanelOrder = this._tempPanelOrder!;
this._userHiddenPanels = this._tempHiddenPanels!;
saveSidebarPreferences(this.hass, {
panelOrder: this._userPanelOrder,
hiddenPanels: this._userHiddenPanels,
});
}
this._tempPanelOrder = undefined;
this._tempHiddenPanels = undefined;
fireEvent(this, "hass-edit-sidebar", { editMode: false });
}
@ -797,20 +811,24 @@ class HaSidebar extends SubscribeMixin(LitElement) {
if ((this._deviceHiddenPanels || this._userHiddenPanels).includes(panel)) {
return;
}
const { panelOrder, hiddenPanels } = this._getPanelPreferences();
// Make a copy for Memoize
this._tempHiddenPanels = [...this._tempHiddenPanels!, panel];
this._setHiddenPanels([...hiddenPanels, panel]);
// Remove it from the panel order
this._tempPanelOrder = this._tempPanelOrder!.filter(
this._setPanelOrder(panelOrder.filter(
(order) => order !== panel
);
));
}
private async _unhidePanel(ev: Event) {
ev.preventDefault();
const panel = (ev.currentTarget as any).panel;
this._tempHiddenPanels = this._tempHiddenPanels!.filter(
(hidden) => hidden !== panel
);
const { hiddenPanels } = this._getPanelPreferences();
this._setHiddenPanels(hiddenPanels.filter((hidden) => hidden !== panel));
}
private _itemMouseEnter(ev: MouseEvent) {

134
src/panels/profile/ha-profile-section-general.ts
View File

@ -1,10 +1,11 @@
import "@material/mwc-button";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import type { CSSResultGroup, TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-card";
import "../../components/ha-button";
import "../../components/ha-expansion-panel";
import "../../layouts/hass-tabs-subpage";
import { profileSections } from "./ha-panel-profile";
import { isExternal } from "../../data/external";
@ -27,6 +28,9 @@ import "./ha-pick-time-zone-row";
import "./ha-push-notifications-row";
import "./ha-set-suspend-row";
import "./ha-set-vibrate-row";
import { storage } from "../../common/decorators/storage";
import type { HaSwitch } from "../../components/ha-switch";
import { fetchSidebarPreferences } from "../../data/sidebar";
@customElement("ha-profile-section-general")
class HaProfileSectionGeneral extends LitElement {
@ -38,6 +42,20 @@ class HaProfileSectionGeneral extends LitElement {
@property({ attribute: false }) public route!: Route;
@storage({
key: "sidebarPanelOrder",
state: true,
subscribe: true,
})
private _devicePanelOrder?: string[];
@storage({
key: "sidebarHiddenPanels",
state: true,
subscribe: true,
})
private _deviceHiddenPanels?: string[];
private _unsubCoreData?: UnsubscribeFunc;
private _getCoreData() {
@ -71,6 +89,9 @@ class HaProfileSectionGeneral extends LitElement {
}
protected render(): TemplateResult {
const deviceSidebarSettingsEnabled =
!!this._devicePanelOrder || !!this._deviceHiddenPanels;
return html`
<hass-tabs-subpage
main-page
@ -91,9 +112,9 @@ class HaProfileSectionGeneral extends LitElement {
: ""}
</div>
<div class="card-actions">
<mwc-button class="warning" @click=${this._handleLogOut}>
<ha-button class="warning" @click=${this._handleLogOut}>
${this.hass.localize("ui.panel.profile.logout")}
</mwc-button>
</ha-button>
</div>
</ha-card>
<ha-card
@ -128,6 +149,29 @@ class HaProfileSectionGeneral extends LitElement {
.narrow=${this.narrow}
.hass=${this.hass}
></ha-pick-first-weekday-row>
<ha-settings-row .narrow=${this.narrow}>
<span slot="heading">
${this.hass.localize(
"ui.panel.profile.customize_sidebar.header"
)}
</span>
<span
slot="description"
class=${deviceSidebarSettingsEnabled ? "device-info" : ""}
>
${this.hass.localize(
`ui.panel.profile.customize_sidebar.${!deviceSidebarSettingsEnabled ? "description" : "overwritten_by_device"}`
)}
</span>
<ha-button
.disabled=${deviceSidebarSettingsEnabled}
@click=${this._customizeSidebar}
>
${this.hass.localize(
"ui.panel.profile.customize_sidebar.button"
)}
</ha-button>
</ha-settings-row>
${this.hass.user!.is_admin
? html`
<ha-advanced-mode-row
@ -159,20 +203,48 @@ class HaProfileSectionGeneral extends LitElement {
<ha-settings-row .narrow=${this.narrow}>
<span slot="heading">
${this.hass.localize(
"ui.panel.profile.customize_sidebar.header"
"ui.panel.profile.customize_sidebar.device_specific_header"
)}
</span>
<span slot="description">
${this.hass.localize(
"ui.panel.profile.customize_sidebar.description"
"ui.panel.profile.customize_sidebar.device_description"
)}
</span>
<mwc-button @click=${this._customizeSidebar}>
${this.hass.localize(
"ui.panel.profile.customize_sidebar.button"
)}
</mwc-button>
<ha-switch
.checked=${deviceSidebarSettingsEnabled}
@change=${this._toggleDeviceSidebarPreferences}
></ha-switch>
</ha-settings-row>
${deviceSidebarSettingsEnabled
? html`
<ha-expansion-panel
outlined
.header=${this.hass.localize(
"ui.panel.profile.customize_sidebar.device_specific_header"
)}
expanded
>
<ha-settings-row .narrow=${this.narrow}>
<span slot="heading">
${this.hass.localize(
"ui.panel.profile.customize_sidebar.header"
)}
</span>
<span slot="description">
${this.hass.localize(
"ui.panel.profile.customize_sidebar.description"
)}
</span>
<ha-button @click=${this._customizeSidebar}>
${this.hass.localize(
"ui.panel.profile.customize_sidebar.button"
)}
</ha-button>
</ha-settings-row>
</ha-expansion-panel>
`
: nothing}
${this.hass.dockedSidebar !== "auto" || !this.narrow
? html`
<ha-force-narrow-row
@ -215,6 +287,38 @@ class HaProfileSectionGeneral extends LitElement {
fireEvent(this, "hass-edit-sidebar", { editMode: true });
}
private async _toggleDeviceSidebarPreferences(ev: Event) {
const switchElement = ev.target as HaSwitch;
const enabled = switchElement.checked;
if (!enabled) {
if (this._devicePanelOrder || this._deviceHiddenPanels) {
const confirm = await showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.profile.customize_sidebar.delete_device_preferences_header"
),
text: this.hass.localize(
"ui.panel.profile.customize_sidebar.delete_device_preferences_description"
),
confirmText: this.hass.localize("ui.common.delete"),
destructive: true,
});
if (confirm) {
this._devicePanelOrder = undefined;
this._deviceHiddenPanels = undefined;
} else {
// revert switch
switchElement.click();
}
}
} else {
const sidebarPreferences = await fetchSidebarPreferences(this.hass);
this._devicePanelOrder = sidebarPreferences?.panelOrder ?? [];
this._deviceHiddenPanels = sidebarPreferences?.hiddenPanels ?? [];
}
}
private _handleLogOut() {
showConfirmationDialog(this, {
title: this.hass.localize("ui.panel.profile.logout_title"),
@ -251,6 +355,14 @@ class HaProfileSectionGeneral extends LitElement {
text-align: center;
color: var(--secondary-text-color);
}
ha-expansion-panel {
margin: 0 8px 8px;
}
.device-info {
color: var(--warning-color);
}
`,
];
}

9
src/translations/en.json
View File

@ -7477,9 +7477,14 @@
"description": "This will hide the sidebar by default, similar to the mobile experience."
},
"customize_sidebar": {
"header": "Change the order and hide items from the sidebar",
"header": "Edit sidebar",
"description": "You can also press and hold the header of the sidebar to activate edit mode.",
"button": "Edit"
"overwritten_by_device": "Your user sidebar preferences are overwritten by specific device preferences.",
"device_description": "Enable specific sidebar preferences for this device.",
"button": "Edit",
"delete_device_preferences_header": "Delete device preferences",
"delete_device_preferences_description": "This will delete sidebar order and hidden items this device and will show again the user defined preferences.",
"device_specific_header": "Device specific sidebar"
},
"vibrate": {
"header": "Vibrate",