From 9ec689382b216e3e5407cbc7a9396d1de1f1e35b Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Tue, 20 May 2025 13:00:27 +0200 Subject: [PATCH] Add has-fab to hass-tabs-subpage (#25536) --- src/layouts/hass-tabs-subpage.ts | 19 +++++++- .../config/areas/ha-config-areas-dashboard.ts | 1 + .../ha-config-integrations-dashboard.ts | 4 +- .../zha/zha-config-dashboard.ts | 43 ++++++++++--------- .../zwave_js/zwave_js-config-dashboard.ts | 3 +- src/panels/config/person/ha-config-person.ts | 1 + src/panels/config/zone/ha-config-zone.ts | 4 +- 7 files changed, 45 insertions(+), 30 deletions(-) diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index 3f52ea4ed1..c5955570a0 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -3,15 +3,15 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, eventOptions, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; +import { canShowPage } from "../common/config/can_show_page"; import { restoreScroll } from "../common/decorators/restore-scroll"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-icon-button-arrow-prev"; import "../components/ha-menu-button"; import "../components/ha-svg-icon"; import "../components/ha-tab"; -import type { HomeAssistant, Route } from "../types"; import { haStyleScrollbar } from "../resources/styles"; -import { canShowPage } from "../common/config/can_show_page"; +import type { HomeAssistant, Route } from "../types"; export interface PageNavigation { path: string; @@ -52,6 +52,12 @@ class HassTabsSubpage extends LitElement { @property({ type: Boolean }) public pane = false; + /** + * Do we need to add padding for a fab. + * @type {Boolean} + */ + @property({ type: Boolean, attribute: "has-fab" }) public hasFab = false; + @state() private _activeTab?: PageNavigation; // @ts-ignore @@ -178,6 +184,7 @@ class HassTabsSubpage extends LitElement { @scroll=${this._saveScrollPos} > + ${this.hasFab ? html`
` : nothing}
@@ -336,6 +343,14 @@ class HassTabsSubpage extends LitElement { ); } + .content .fab-bottom-space { + height: calc(64px + env(safe-area-inset-bottom)); + } + + :host([narrow]) .content.tabs .fab-bottom-space { + height: calc(80px + env(safe-area-inset-bottom)); + } + #fab { position: fixed; right: calc(16px + env(safe-area-inset-right)); diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index 8313c9489e..0947757068 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -148,6 +148,7 @@ export class HaConfigAreasDashboard extends LitElement { back-path="/config" .tabs=${configSections.areas} .route=${this.route} + has-fab > ${this.narrow ? html` @@ -984,9 +985,6 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( grid-gap: 8px 8px; padding: 8px 16px 16px; } - .container:last-of-type { - margin-bottom: 64px; - } .empty-message { margin: auto; text-align: center; diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts index 02e5444ac2..08dea39813 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts @@ -1,48 +1,48 @@ import "@material/mwc-button/mwc-button"; import { + mdiAlertCircle, + mdiCheckCircle, mdiFolderMultipleOutline, mdiLan, mdiNetwork, - mdiPlus, mdiPencil, - mdiCheckCircle, - mdiAlertCircle, + mdiPlus, } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; -import type { ConfigEntry } from "../../../../../data/config_entries"; -import { getConfigEntries } from "../../../../../data/config_entries"; +import "../../../../../components/buttons/ha-progress-button"; +import "../../../../../components/ha-alert"; import "../../../../../components/ha-card"; import "../../../../../components/ha-fab"; -import "../../../../../components/ha-icon-button"; -import { fileDownload } from "../../../../../util/file_download"; -import "../../../../../components/ha-icon-next"; -import "../../../../../layouts/hass-tabs-subpage"; -import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage"; -import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow"; -import { haStyle } from "../../../../../resources/styles"; -import type { HomeAssistant, Route } from "../../../../../types"; -import "../../../ha-config-section"; import "../../../../../components/ha-form/ha-form"; -import "../../../../../components/buttons/ha-progress-button"; +import "../../../../../components/ha-icon-button"; +import "../../../../../components/ha-icon-next"; import "../../../../../components/ha-settings-row"; import "../../../../../components/ha-svg-icon"; -import "../../../../../components/ha-alert"; -import { showZHAChangeChannelDialog } from "./show-dialog-zha-change-channel"; +import type { ConfigEntry } from "../../../../../data/config_entries"; +import { getConfigEntries } from "../../../../../data/config_entries"; import type { ZHAConfiguration, - ZHANetworkSettings, ZHANetworkBackupAndMetadata, + ZHANetworkSettings, } from "../../../../../data/zha"; import { - fetchZHAConfiguration, - updateZHAConfiguration, - fetchZHANetworkSettings, createZHANetworkBackup, fetchDevices, + fetchZHAConfiguration, + fetchZHANetworkSettings, + updateZHAConfiguration, } from "../../../../../data/zha"; +import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow"; import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box"; +import "../../../../../layouts/hass-tabs-subpage"; +import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage"; +import { haStyle } from "../../../../../resources/styles"; +import type { HomeAssistant, Route } from "../../../../../types"; +import { fileDownload } from "../../../../../util/file_download"; +import "../../../ha-config-section"; +import { showZHAChangeChannelDialog } from "./show-dialog-zha-change-channel"; const MULTIPROTOCOL_ADDON_URL = "socket://core-silabs-multiprotocol:9999"; @@ -108,6 +108,7 @@ class ZHAConfigDashboard extends LitElement { .route=${this.route} .tabs=${zhaTabs} back-path="/config/integrations" + has-fab > ${this._error diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts index 7aac93f4cf..15d2cf7926 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts @@ -43,6 +43,7 @@ import { subscribeZwaveControllerStatistics, subscribeZwaveNVMBackup, } from "../../../../../data/zwave_js"; +import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow"; import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box"; import "../../../../../layouts/hass-tabs-subpage"; import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin"; @@ -53,7 +54,6 @@ import { showZWaveJSAddNodeDialog } from "./add-node/show-dialog-zwave_js-add-no import { showZWaveJSRebuildNetworkRoutesDialog } from "./show-dialog-zwave_js-rebuild-network-routes"; import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node"; import { configTabs } from "./zwave_js-config-router"; -import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow"; @customElement("zwave_js-config-dashboard") class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { @@ -142,6 +142,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { .narrow=${this.narrow} .route=${this.route} .tabs=${configTabs} + has-fab > ${this.narrow ? html` @@ -581,9 +582,6 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { min-height: 100%; box-sizing: border-box; } - ha-card { - margin-bottom: 100px; - } ha-tooltip { display: block; }