diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 41d65bc602..36790113f0 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -38,6 +38,7 @@ export class HaDialog extends MwcDialog { } .mdc-dialog__actions { justify-content: var(--justify-action-buttons, flex-end); + padding-bottom: max(env(safe-area-inset-bottom), 8px); } .mdc-dialog__container { align-items: var(--vertial-align-dialog, center); @@ -50,6 +51,12 @@ export class HaDialog extends MwcDialog { position: var(--dialog-content-position, relative); padding: var(--dialog-content-padding, 20px 24px); } + :host([hideactions]) .mdc-dialog .mdc-dialog__content { + padding-bottom: max( + var(--dialog-content-padding, 20px), + env(safe-area-inset-bottom) + ); + } .mdc-dialog .mdc-dialog__surface { position: var(--dialog-surface-position, relative); min-height: var(--mdc-dialog-min-height, auto); diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 41cfb119ca..72bc3cfaa3 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -126,7 +126,7 @@ class HaSidebar extends LitElement { // property used only in css // @ts-ignore - @property({ type: Boolean, reflect: true }) private _rtl = false; + @property({ type: Boolean, reflect: true }) public rtl = false; private _mouseLeaveTimeout?: number; @@ -312,6 +312,7 @@ class HaSidebar extends LitElement { hass.panelUrl !== oldHass.panelUrl || hass.user !== oldHass.user || hass.localize !== oldHass.localize || + hass.language !== oldHass.language || hass.states !== oldHass.states || hass.defaultPanel !== oldHass.defaultPanel ); @@ -339,12 +340,14 @@ class HaSidebar extends LitElement { return; } - this._rtl = computeRTL(this.hass); + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; + if (!oldHass || oldHass.language !== this.hass.language) { + this.rtl = computeRTL(this.hass); + } if (!SUPPORT_SCROLL_IF_NEEDED) { return; } - const oldHass = changedProps.get("hass") as HomeAssistant | undefined; if (!oldHass || oldHass.panelUrl !== this.hass.panelUrl) { const selectedEl = this.shadowRoot!.querySelector(".iron-selected"); if (selectedEl) { @@ -496,9 +499,12 @@ class HaSidebar extends LitElement { width: 64px; } :host([expanded]) { - width: 256px; + width: calc(256px + env(safe-area-inset-left)); + } + :host([rtl]) { + border-right: 0; + border-left: 1px solid var(--divider-color); } - .menu { box-sizing: border-box; height: 65px; @@ -512,18 +518,25 @@ class HaSidebar extends LitElement { background-color: var(--primary-background-color); font-size: 20px; align-items: center; + padding-left: calc(8.5px + env(safe-area-inset-left)); + } + :host([rtl]) .menu { + padding-left: 8.5px; + padding-right: calc(8.5px + env(safe-area-inset-right)); } :host([expanded]) .menu { - width: 256px; + width: calc(256px + env(safe-area-inset-left)); + } + :host([rtl][expanded]) .menu { + width: calc(256px + env(safe-area-inset-right)); } - .menu mwc-icon-button { color: var(--sidebar-icon-color); } :host([expanded]) .menu mwc-icon-button { margin-right: 23px; } - :host([expanded][_rtl]) .menu mwc-icon-button { + :host([expanded][rtl]) .menu mwc-icon-button { margin-right: 0px; margin-left: 23px; } @@ -551,12 +564,18 @@ class HaSidebar extends LitElement { display: flex; flex-direction: column; box-sizing: border-box; - height: calc(100% - 196px); + height: calc(100% - 196px - env(safe-area-inset-bottom)); overflow-y: auto; overflow-x: hidden; scrollbar-color: var(--scrollbar-thumb-color) transparent; scrollbar-width: thin; background: none; + margin-left: env(safe-area-inset-left); + } + + :host([rtl]) paper-listbox { + margin-left: initial; + margin-right: env(safe-area-inset-right); } a { @@ -580,7 +599,7 @@ class HaSidebar extends LitElement { :host([expanded]) paper-icon-item { width: 240px; } - :host([_rtl]) paper-icon-item { + :host([rtl]) paper-icon-item { padding-left: auto; padding-right: 12px; } @@ -656,6 +675,11 @@ class HaSidebar extends LitElement { } .notifications-container { display: flex; + margin-left: env(safe-area-inset-left); + } + :host([rtl]) .notifications-container { + margin-left: initial; + margin-right: env(safe-area-inset-right); } .notifications { cursor: pointer; @@ -664,18 +688,23 @@ class HaSidebar extends LitElement { flex: 1; } .profile { + margin-left: env(safe-area-inset-left); + } + :host([rtl]) .profile { + margin-left: initial; + margin-right: env(safe-area-inset-right); } .profile paper-icon-item { padding-left: 4px; } - :host([_rtl]) .profile paper-icon-item { + :host([rtl]) .profile paper-icon-item { padding-left: auto; padding-right: 4px; } .profile .item-text { margin-left: 8px; } - :host([_rtl]) .profile .item-text { + :host([rtl]) .profile .item-text { margin-right: 8px; } @@ -735,7 +764,7 @@ class HaSidebar extends LitElement { font-weight: 500; } - :host([_rtl]) .menu mwc-icon-button { + :host([rtl]) .menu mwc-icon-button { -webkit-transform: scaleX(-1); transform: scaleX(-1); } diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts index a57abebb7d..d7a2ad6fbc 100644 --- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts +++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts @@ -165,7 +165,6 @@ class DialogConfigEntrySystemOptions extends LitElement { haStyleDialog, css` ha-paper-dialog { - min-width: 400px; max-width: 500px; } .init-spinner { diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js index e0f556274d..927af2f3a9 100644 --- a/src/dialogs/notifications/notification-drawer.js +++ b/src/dialogs/notifications/notification-drawer.js @@ -29,9 +29,17 @@ export class HuiNotificationDrawer extends EventsMixin( width: calc(100% - 32px); } + div[main-title] { + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + } + .notifications { overflow-y: auto; padding-top: 16px; + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + padding-bottom: env(safe-area-inset-bottom); height: calc(100% - 65px); box-sizing: border-box; background-color: var(--primary-background-color); diff --git a/src/html/_style_base.html.template b/src/html/_style_base.html.template index 1c9fd3851e..21d047c1b8 100644 --- a/src/html/_style_base.html.template +++ b/src/html/_style_base.html.template @@ -1,4 +1,4 @@ - + diff --git a/src/html/index.html.template b/src/html/index.html.template index a06641f19b..4930225c3a 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -5,14 +5,16 @@ <%= renderTemplate('_header') %> Home Assistant + - + + - -
- - - ${this.activeFilters - ? html`
- ${this.hass.localize( - "ui.panel.config.filtering.filtering_by" - )} - ${this.activeFilters.join(", ")} - ${this.hass.localize( - "ui.panel.config.filtering.clear" - )} -
` - : ""} -
+
+ + + ${this.activeFilters + ? html`
+ ${this.hass.localize( + "ui.panel.config.filtering.filtering_by" + )} + ${this.activeFilters.join(", ")} + ${this.hass.localize( + "ui.panel.config.filtering.clear" + )} +
` + : ""} +
+ ` : html`
`} +
`; } diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index 44cdf6a4d6..2f35492c5c 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -22,6 +22,7 @@ import "../components/ha-svg-icon"; import "../components/ha-icon"; import "../components/ha-tab"; import { restoreScroll } from "../common/decorators/restore-scroll"; +import { computeRTL } from "../common/util/compute_rtl"; export interface PageNavigation { path: string; @@ -53,6 +54,11 @@ class HassTabsSubpage extends LitElement { @property({ type: Boolean, reflect: true }) public narrow = false; + @property({ type: Boolean, reflect: true, attribute: "is-wide" }) + public isWide = false; + + @property({ type: Boolean, reflect: true }) public rtl = false; + @internalProperty() private _activeTab?: PageNavigation; // @ts-ignore @@ -107,6 +113,14 @@ class HassTabsSubpage extends LitElement { `${this.route.prefix}${this.route.path}`.includes(tab.path) ); } + if (changedProperties.has("hass")) { + const oldHass = changedProperties.get("hass") as + | HomeAssistant + | undefined; + if (!oldHass || oldHass.language !== this.hass.language) { + this.rtl = computeRTL(this.hass); + } + } } protected render(): TemplateResult { @@ -152,6 +166,7 @@ class HassTabsSubpage extends LitElement {
+
`; } @@ -184,6 +199,11 @@ class HassTabsSubpage extends LitElement { background-color: var(--primary-background-color); } + :host([narrow]) { + width: 100%; + position: fixed; + } + ha-menu-button { margin-right: 24px; } @@ -215,9 +235,10 @@ class HassTabsSubpage extends LitElement { background-color: var(--sidebar-background-color); border-top: 1px solid var(--divider-color); justify-content: space-between; - z-index: 1; + z-index: 2; font-size: 12px; width: 100%; + padding-bottom: env(safe-area-inset-bottom); } #tabbar:not(.bottom-bar) { @@ -247,7 +268,11 @@ class HassTabsSubpage extends LitElement { .content { position: relative; - width: 100%; + width: calc( + 100% - env(safe-area-inset-left) - env(safe-area-inset-right) + ); + margin-left: env(safe-area-inset-left); + margin-right: env(safe-area-inset-right); height: calc(100% - 65px); overflow-y: auto; overflow: auto; @@ -256,6 +281,30 @@ class HassTabsSubpage extends LitElement { :host([narrow]) .content { height: calc(100% - 128px); + height: calc(100% - 128px - env(safe-area-inset-bottom)); + } + + #fab { + position: fixed; + right: calc(16px + env(safe-area-inset-right)); + bottom: calc(16px + env(safe-area-inset-bottom)); + z-index: 1; + } + :host([narrow]) #fab { + bottom: calc(84px + env(safe-area-inset-bottom)); + } + #fab[is-wide] { + bottom: 24px; + right: 24px; + } + :host([rtl]) #fab { + right: auto; + left: calc(16px + env(safe-area-inset-left)); + } + :host([rtl][is-wide]) #fab { + bottom: 24px; + left: 24px; + right: auto; } `; } diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index 589f6208b5..94fdef2fc0 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -152,16 +152,13 @@ class HomeAssistantMain extends LitElement { --app-drawer-width: 64px; } :host([expanded]) { - --app-drawer-width: 256px; + --app-drawer-width: calc(256px + env(safe-area-inset-left)); } partial-panel-resolver, ha-sidebar { /* allow a light tap highlight on the actual interface elements */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); } - partial-panel-resolver { - height: 100%; - } `; } } diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts index 8f8133cc76..ea7d2bb69b 100644 --- a/src/panels/calendar/ha-panel-calendar.ts +++ b/src/panels/calendar/ha-panel-calendar.ts @@ -11,7 +11,7 @@ import { } from "lit-element"; import { styleMap } from "lit-html/directives/style-map"; -import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "../../layouts/ha-app-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@material/mwc-checkbox"; @@ -63,7 +63,7 @@ class PanelCalendar extends LitElement { protected render(): TemplateResult { return html` - + - + `; } diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index 6a80eabf20..d5c776baa7 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -38,7 +38,6 @@ import { showAreaRegistryDetailDialog, } from "./show-dialog-area-registry-detail"; import { mdiPlus } from "@mdi/js"; -import { computeRTL } from "../../../common/util/compute_rtl"; @customElement("ha-config-areas-dashboard") export class HaConfigAreasDashboard extends LitElement { @@ -106,6 +105,7 @@ export class HaConfigAreasDashboard extends LitElement { + + + - - - `; } @@ -183,28 +181,6 @@ export class HaConfigAreasDashboard extends LitElement { --app-header-background-color: var(--sidebar-background-color); --app-header-text-color: var(--sidebar-text-color); } - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - mwc-fab[is-wide][rtl] { - bottom: 24px; - left: 24px; - right: auto; - } `; } } diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 5d680aad96..2a935d0f38 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -13,9 +13,7 @@ import { PropertyValues, TemplateResult, } from "lit-element"; -import { classMap } from "lit-html/directives/class-map"; import { navigate } from "../../../common/navigate"; -import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/ha-card"; import "../../../components/ha-svg-icon"; import "@material/mwc-fab"; @@ -46,6 +44,7 @@ import "./trigger/ha-automation-trigger"; import { HaDeviceTrigger } from "./trigger/types/ha-automation-trigger-device"; import { mdiContentSave } from "@mdi/js"; import { PaperListboxElement } from "@polymer/paper-listbox"; +import { classMap } from "lit-html/directives/class-map"; const MODES = ["single", "restart", "queued", "parallel"]; const MODES_MAX = ["queued", "parallel"]; @@ -72,7 +71,7 @@ export class HaAutomationEditor extends LitElement { @internalProperty() private _config?: AutomationConfig; - @internalProperty() private _dirty?: boolean; + @internalProperty() private _dirty = false; @internalProperty() private _errors?: string; @@ -312,16 +311,10 @@ export class HaAutomationEditor extends LitElement { ` : ""} @@ -542,35 +535,12 @@ export class HaAutomationEditor extends LitElement { margin-right: 8px; } mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 3; - margin-bottom: -80px; - transition: margin-bottom 0.3s; + position: relative; + bottom: calc(-80px - env(safe-area-inset-bottom)); + transition: bottom 0.3s; } - - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - margin-bottom: -140px; - } - mwc-fab[dirty] { - margin-bottom: 0; - } - - mwc-fab.rtl { - right: auto; - left: 16px; - } - - mwc-fab[is-wide].rtl { - bottom: 24px; - right: auto; - left: 24px; + mwc-fab.dirty { + bottom: 0; } `, ]; diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index f853558bfb..57286eccd4 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -1,13 +1,12 @@ import "../../../components/ha-icon-button"; import "@polymer/paper-tooltip/paper-tooltip"; import { - css, - CSSResultArray, customElement, html, LitElement, property, TemplateResult, + CSSResult, } from "lit-element"; import { ifDefined } from "lit-html/directives/if-defined"; import memoizeOne from "memoize-one"; @@ -15,7 +14,6 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { formatDateTime } from "../../../common/datetime/format_date_time"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { computeRTL } from "../../../common/util/compute_rtl"; import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; import "../../../components/entity/ha-entity-toggle"; import "@material/mwc-fab"; @@ -169,19 +167,16 @@ class HaAutomationPicker extends LitElement { )} hasFab > + + + - - - `; } @@ -207,37 +202,8 @@ class HaAutomationPicker extends LitElement { }); } - static get styles(): CSSResultArray { - return [ - haStyle, - css` - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - cursor: pointer; - } - - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - - mwc-fab[rtl][is-wide] { - bottom: 24px; - right: auto; - left: 24px; - } - `, - ]; + static get styles(): CSSResult { + return haStyle; } } diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 33b419c6d5..309b9e4c15 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -1,4 +1,4 @@ -import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "../../../layouts/ha-app-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { @@ -127,7 +127,7 @@ class HaConfigDashboard extends LitElement { } return html` - + ${content} - + `; } diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 176d669515..58c9ac7a5c 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -241,6 +241,7 @@ export class EntityRegistrySettings extends LitElement { display: flex; justify-content: space-between; padding: 8px; + padding-bottom: max(env(safe-area-inset-bottom), 8px); background-color: var(--mdc-theme-surface, #fff); } ha-switch { diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index 5297eca681..e03b5463ad 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -5,8 +5,6 @@ import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-tooltip/paper-tooltip"; import { HassEntity } from "home-assistant-js-websocket"; import { - css, - CSSResult, customElement, html, LitElement, @@ -34,7 +32,6 @@ import { HELPER_DOMAINS } from "./const"; import { showHelperDetailDialog } from "./show-dialog-helper-detail"; import "../../../components/ha-svg-icon"; import { mdiPlus } from "@mdi/js"; -import { computeRTL } from "../../../common/util/compute_rtl"; @customElement("ha-config-helpers") export class HaConfigHelpers extends LitElement { @@ -160,18 +157,16 @@ export class HaConfigHelpers extends LitElement { "ui.panel.config.helpers.picker.no_helpers" )} > + + + - - - `; } @@ -215,31 +210,4 @@ export class HaConfigHelpers extends LitElement { private _createHelpler() { showHelperDetailDialog(this); } - - static get styles(): CSSResult { - return css` - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - mwc-fab[is-wide][rtl] { - bottom: 24px; - left: 24px; - right: auto; - } - `; - } } diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 74d48f42e6..dd738133f7 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -21,7 +21,6 @@ import { HASSDomEvent } from "../../../common/dom/fire_event"; import "../../../common/search/search-input"; import { caseInsensitiveCompare } from "../../../common/string/compare"; import { LocalizeFunc } from "../../../common/translations/localize"; -import { computeRTL } from "../../../common/util/compute_rtl"; import { nextRender } from "../../../common/util/render-status"; import "../../../components/entity/ha-state-icon"; import "../../../components/ha-button-menu"; @@ -459,12 +458,10 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { : ""} @@ -714,28 +711,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { h2 { margin-top: 0; } - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - mwc-fab[is-wide][rtl] { - bottom: 24px; - left: 24px; - right: auto; - } `, ]; } 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 67c0cc2a4d..a0d8ff6be4 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 @@ -19,6 +19,7 @@ import { mdiNetwork, mdiFolderMultipleOutline, mdiPlus } from "@mdi/js"; import "../../../../../layouts/hass-tabs-subpage"; import type { PageNavigation } from "../../../../../layouts/hass-tabs-subpage"; import { computeRTL } from "../../../../../common/util/compute_rtl"; +import "@material/mwc-button/mwc-button"; export const zhaTabs: PageNavigation[] = [ { @@ -81,10 +82,8 @@ class ZHAConfigDashboard extends LitElement { ` : ""} - + @@ -104,30 +103,6 @@ class ZHAConfigDashboard extends LitElement { margin-top: 16px; max-width: 500px; } - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - - mwc-fab[rtl][is-wide] { - bottom: 24px; - right: auto; - left: 24px; - } `, ]; } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts index b96eda6de8..566a8207ad 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts @@ -23,7 +23,6 @@ import "../../../../../layouts/hass-tabs-subpage-data-table"; import { HomeAssistant, Route } from "../../../../../types"; import { sortZHAGroups, formatAsPaddedHex } from "./functions"; import { zhaTabs } from "./zha-config-dashboard"; -import { computeRTL } from "../../../../../common/util/compute_rtl"; import { mdiPlus } from "@mdi/js"; import { haStyle } from "../../../../../resources/styles"; @@ -126,17 +125,14 @@ export class ZHAGroupsDashboard extends LitElement { .data=${this._formattedGroups(this._groups)} @row-click=${this._handleRowClicked} > + + + + + - - - - - `; } @@ -153,31 +149,6 @@ export class ZHAGroupsDashboard extends LitElement { return [ haStyle, css` - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - - mwc-fab[rtl][is-wide] { - bottom: 24px; - right: auto; - left: 24px; - } - a { color: var(--primary-color); } diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index 0bb4575ec5..2edb4d0b8e 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -1,8 +1,6 @@ import "@material/mwc-fab"; import "@polymer/paper-tooltip/paper-tooltip"; import { - css, - CSSResult, customElement, html, LitElement, @@ -37,7 +35,6 @@ import { lovelaceTabs } from "../ha-config-lovelace"; import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-detail"; import "../../../../components/ha-svg-icon"; import { mdiPlus } from "@mdi/js"; -import { computeRTL } from "../../../../common/util/compute_rtl"; @customElement("ha-config-lovelace-dashboards") export class HaConfigLovelaceDashboards extends LitElement { @@ -225,18 +222,16 @@ export class HaConfigLovelaceDashboards extends LitElement { id="url_path" hasFab > + + + - - - `; } @@ -311,26 +306,4 @@ export class HaConfigLovelaceDashboards extends LitElement { }, }); } - - static get styles(): CSSResult { - return css` - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - left: 16px; - right: auto; - } - `; - } } diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts index 946164b081..0bfb4d68ca 100644 --- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts +++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts @@ -5,8 +5,6 @@ import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-tooltip/paper-tooltip"; import "@material/mwc-fab"; import { - css, - CSSResult, customElement, html, LitElement, @@ -41,7 +39,6 @@ import { lovelaceTabs } from "../ha-config-lovelace"; import { showResourceDetailDialog } from "./show-dialog-lovelace-resource-detail"; import "../../../../components/ha-svg-icon"; import { mdiPlus } from "@mdi/js"; -import { computeRTL } from "../../../../common/util/compute_rtl"; @customElement("ha-config-lovelace-resources") export class HaConfigLovelaceRescources extends LitElement { @@ -106,18 +103,16 @@ export class HaConfigLovelaceRescources extends LitElement { @row-click=${this._editResource} hasFab > + + + - - - `; } @@ -203,31 +198,4 @@ export class HaConfigLovelaceRescources extends LitElement { }, }); } - - static get styles(): CSSResult { - return css` - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - mwc-fab[is-wide][rtl] { - bottom: 24px; - left: 24px; - right: auto; - } - `; - } } diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 479f477dc1..94934fe200 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -32,7 +32,6 @@ import { } from "./show-dialog-person-detail"; import "../../../components/ha-svg-icon"; import { mdiPlus } from "@mdi/js"; -import { computeRTL } from "../../../common/util/compute_rtl"; class HaConfigPerson extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; @@ -123,17 +122,14 @@ class HaConfigPerson extends LitElement { ` : ""} + + + - - - - `; } @@ -243,28 +239,6 @@ class HaConfigPerson extends LitElement { ha-card.storage paper-item { cursor: pointer; } - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - mwc-fab[is-wide][rtl] { - bottom: 24px; - left: 24px; - right: auto; - } `; } } diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index 8968b324b8..f2835f405b 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -13,7 +13,6 @@ import { ifDefined } from "lit-html/directives/if-defined"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import { computeRTL } from "../../../common/util/compute_rtl"; import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table"; import "@material/mwc-fab"; import { forwardHaptic } from "../../../data/haptics"; @@ -152,17 +151,16 @@ class HaSceneDashboard extends LitElement { icon="hass:help-circle" @click=${this._showHelp} > + + + + + - - - - - `; } @@ -208,31 +206,6 @@ class HaSceneDashboard extends LitElement { return [ haStyle, css` - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - - mwc-fab[rtl][is-wide] { - bottom: 24px; - right: auto; - left: 24px; - } - a { color: var(--primary-color); } diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 246e0c8c1b..77bec1b7db 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -399,14 +399,10 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { : ""} @@ -731,7 +727,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { font-weight: bold; color: var(--error-color); } - .content { + ha-config-section:last-child { padding-bottom: 20px; } .triggers, @@ -778,35 +774,12 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { color: var(--primary-color); } mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - margin-bottom: -80px; - transition: margin-bottom 0.3s; + position: relative; + bottom: calc(-80px - env(safe-area-inset-bottom)); + transition: bottom 0.3s; } - - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - margin-bottom: -140px; - } - mwc-fab[dirty] { - margin-bottom: 0; - } - - mwc-fab.rtl { - right: auto; - left: 16px; - } - - mwc-fab[is-wide].rtl { - bottom: 24px; - right: auto; - left: 24px; + mwc-fab.dirty { + bottom: 0; } `, ]; diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 807e2cbef8..c1c1e69ddd 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -57,7 +57,7 @@ export class HaScriptEditor extends LitElement { @internalProperty() private _idError = false; - @internalProperty() private _dirty?: boolean; + @internalProperty() private _dirty = false; @internalProperty() private _errors?: string; @@ -228,14 +228,12 @@ export class HaScriptEditor extends LitElement { @@ -441,35 +439,12 @@ export class HaScriptEditor extends LitElement { color: var(--primary-color); } mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 3; - margin-bottom: -80px; - transition: margin-bottom 0.3s; + position: relative; + bottom: calc(-80px - env(safe-area-inset-bottom)); + transition: bottom 0.3s; } - - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - margin-bottom: -140px; - } - mwc-fab[dirty] { - margin-bottom: 0; - } - - mwc-fab.rtl { - right: auto; - left: 16px; - } - - mwc-fab[is-wide].rtl { - bottom: 24px; - right: auto; - left: 24px; + mwc-fab.dirty { + bottom: 0; } `, ]; diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index ccfad94f8e..99b6dce17e 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -1,8 +1,7 @@ import "../../../components/ha-icon-button"; import { HassEntity } from "home-assistant-js-websocket"; import { - css, - CSSResultArray, + CSSResult, customElement, html, LitElement, @@ -146,19 +145,19 @@ class HaScriptPicker extends LitElement { icon="hass:help-circle" @click=${this._showHelp} > + + + + + - - - - - `; } @@ -199,36 +198,8 @@ class HaScriptPicker extends LitElement { }); } - static get styles(): CSSResultArray { - return [ - haStyle, - css` - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - - mwc-fab[rtl][is-wide] { - bottom: 24px; - right: auto; - left: 24px; - } - `, - ]; + static get styles(): CSSResult { + return haStyle; } } diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts index cedc36b07f..2e9432b8d1 100644 --- a/src/panels/config/users/ha-config-users.ts +++ b/src/panels/config/users/ha-config-users.ts @@ -1,5 +1,4 @@ import { - css, customElement, LitElement, property, @@ -8,7 +7,6 @@ import { import { html } from "lit-html"; import memoizeOne from "memoize-one"; import { HASSDomEvent } from "../../../common/dom/fire_event"; -import { computeRTL } from "../../../common/util/compute_rtl"; import { DataTableColumnContainer, RowClickedEvent, @@ -98,16 +96,14 @@ export class HaConfigUsers extends LitElement { @row-click=${this._editUser} hasFab > + + + - - - `; } @@ -166,31 +162,4 @@ export class HaConfigUsers extends LitElement { }, }); } - - static get styles() { - return css` - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[rtl] { - right: auto; - left: 16px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl][is-wide] { - bottom: 24px; - right: auto; - left: 24px; - } - `; - } } diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index 4dffc11311..155b3cf153 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -51,7 +51,6 @@ import type { HomeAssistant, Route } from "../../../types"; import "../ha-config-section"; import { configSections } from "../ha-panel-config"; import { showZoneDetailDialog } from "./show-dialog-zone-detail"; -import { computeRTL } from "../../../common/util/compute_rtl"; @customElement("ha-config-zone") export class HaConfigZone extends SubscribeMixin(LitElement) { @@ -255,17 +254,14 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { ` : ""} + + + - - - - `; } @@ -544,23 +540,6 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { ha-card paper-item { cursor: pointer; } - mwc-fab { - position: fixed; - bottom: 16px; - right: 16px; - z-index: 1; - } - mwc-fab[is-wide] { - bottom: 24px; - right: 24px; - } - mwc-fab[narrow] { - bottom: 84px; - } - mwc-fab[rtl] { - left: 24px; - right: auto; - } `; } } diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index 08fabe00bf..1feeeea056 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -1,4 +1,4 @@ -import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "../../layouts/ha-app-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { computeRTL } from "../../common/util/compute_rtl"; @@ -56,7 +56,7 @@ class HaPanelHistory extends LitElement { protected render() { return html` - + `} - + `; } diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts index 36e0823fa5..af57dbc7e6 100644 --- a/src/panels/logbook/ha-panel-logbook.ts +++ b/src/panels/logbook/ha-panel-logbook.ts @@ -1,4 +1,3 @@ -import "@polymer/app-layout/app-header-layout/app-header-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "../../components/ha-icon-button"; @@ -6,6 +5,7 @@ import "../../components/ha-circular-progress"; import { computeRTL } from "../../common/util/compute_rtl"; import "../../components/entity/ha-entity-picker"; import "../../components/ha-menu-button"; +import "../../layouts/ha-app-layout"; import "./ha-logbook"; import { LitElement, @@ -74,7 +74,7 @@ export class HaPanelLogbook extends LitElement { protected render() { return html` - + `} - + `; } diff --git a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts index 27dc450346..5c639b6ad9 100644 --- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts +++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts @@ -137,68 +137,67 @@ export class HuiUnusedEntities extends LitElement { } return html` - ${!this.narrow - ? html` - -
- ${this.hass.localize( - "ui.panel.lovelace.unused_entities.available_entities" - )} - ${this.lovelace.mode === "storage" - ? html` -
${this.hass.localize( - "ui.panel.lovelace.unused_entities.select_to_add" - )} - ` - : ""} -
- - ` - : ""} - { - const stateObj = this.hass!.states[entity]; - return { - icon: "", - entity_id: entity, - stateObj, - name: computeStateName(stateObj), - domain: computeDomain(entity), - last_changed: stateObj!.last_changed, - }; - })} - .id=${"entity_id"} - selectable - @selection-changed=${this._handleSelectionChanged} - .dir=${computeRTLDirection(this.hass)} - .searchLabel=${this.hass.localize( - "ui.panel.lovelace.unused_entities.search" - )} - .noDataText=${this.hass.localize( - "ui.panel.lovelace.unused_entities.no_data" - )} - > - - ${this._selectedEntities.length - ? html` - - - - ` - : ""} +
+ ${!this.narrow + ? html` + +
+ ${this.hass.localize( + "ui.panel.lovelace.unused_entities.available_entities" + )} + ${this.lovelace.mode === "storage" + ? html` +
${this.hass.localize( + "ui.panel.lovelace.unused_entities.select_to_add" + )} + ` + : ""} +
+ + ` + : ""} + { + const stateObj = this.hass!.states[entity]; + return { + icon: "", + entity_id: entity, + stateObj, + name: computeStateName(stateObj), + domain: computeDomain(entity), + last_changed: stateObj!.last_changed, + }; + })} + .id=${"entity_id"} + selectable + @selection-changed=${this._handleSelectionChanged} + .dir=${computeRTLDirection(this.hass)} + .searchLabel=${this.hass.localize( + "ui.panel.lovelace.unused_entities.search" + )} + .noDataText=${this.hass.localize( + "ui.panel.lovelace.unused_entities.no_data" + )} + > +
+
+ + + +
`; } @@ -240,8 +239,11 @@ export class HuiUnusedEntities extends LitElement { return css` :host { background: var(--lovelace-background); + } + .container { display: flex; flex-direction: column; + height: 100%; } ha-card { --ha-card-box-shadow: none; @@ -252,15 +254,30 @@ export class HuiUnusedEntities extends LitElement { flex-grow: 1; margin-top: -20px; } - mwc-fab { + .fab { + overflow: hidden; position: absolute; - right: 16px; - bottom: 16px; + right: 0; + bottom: 0; + padding: 16px; + padding-right: calc(16px + env(safe-area-inset-right)); + padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1; } - mwc-fab.rtl { - left: 16px; - right: auto; + .fab.rtl { + right: initial; + left: 0; + bottom: 0; + padding-right: 16px; + padding-left: calc(16px + env(safe-area-inset-left)); + } + mwc-fab { + position: relative; + bottom: calc(-80px - env(safe-area-inset-bottom)); + transition: bottom 0.3s; + } + .fab.selected mwc-fab { + bottom: 0; } `; } diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index 92480bd999..998b08af3b 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "../../layouts/ha-app-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "../../components/ha-icon-button"; @@ -51,8 +51,8 @@ class LovelaceFullConfigEditor extends LitElement { public render(): TemplateResult | void { return html` - - + + - + `; } @@ -114,7 +114,7 @@ class LovelaceFullConfigEditor extends LitElement { --code-mirror-height: 100%; } - app-header-layout { + ha-app-layout { height: 100vh; } diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 71ad3488e1..370011d55d 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -68,7 +68,7 @@ class HUIRoot extends LitElement { @property() public columns?: number; - @property() public narrow?: boolean; + @property({ type: Boolean }) public narrow = false; @property() public route?: { path: string; prefix: string }; @@ -694,7 +694,8 @@ class HUIRoot extends LitElement { min-height: 100%; } paper-tabs { - margin-left: 12px; + margin-left: max(env(safe-area-inset-left), 12px); + margin-right: env(safe-area-inset-right); --paper-tabs-selection-bar-color: var(--text-primary-color, #fff); text-transform: uppercase; } diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index 49279ef253..cc96bae638 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -350,7 +350,7 @@ export class HUIView extends LitElement { :host { display: block; box-sizing: border-box; - padding: 4px 4px 0; + padding: 4px 4px env(safe-area-inset-bottom); transform: translateZ(0); position: relative; color: var(--primary-text-color); @@ -383,15 +383,15 @@ export class HUIView extends LitElement { mwc-fab { position: sticky; float: right; - bottom: 16px; - right: 16px; + right: calc(16px + env(safe-area-inset-right)); + bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1; } mwc-fab.rtl { float: left; right: auto; - left: 16px; + left: calc(16px + env(safe-area-inset-left)); } @media (max-width: 500px) { diff --git a/src/panels/mailbox/ha-panel-mailbox.js b/src/panels/mailbox/ha-panel-mailbox.js index 21bc6dd6e3..fb9e17acb0 100644 --- a/src/panels/mailbox/ha-panel-mailbox.js +++ b/src/panels/mailbox/ha-panel-mailbox.js @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "../../layouts/ha-app-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/paper-input/paper-textarea"; @@ -76,7 +76,7 @@ class HaPanelMailbox extends EventsMixin(LocalizeMixin(PolymerElement)) { } - + - + `; } diff --git a/src/panels/map/ha-panel-map.js b/src/panels/map/ha-panel-map.js index 3a89207227..2df35f17f9 100644 --- a/src/panels/map/ha-panel-map.js +++ b/src/panels/map/ha-panel-map.js @@ -12,6 +12,7 @@ import { defaultRadiusColor } from "../../data/zone"; import LocalizeMixin from "../../mixins/localize-mixin"; import "./ha-entity-marker"; import "../../styles/polymer-ha-style"; +import "../../layouts/ha-app-layout"; /* * @appliesMixin LocalizeMixin @@ -21,7 +22,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) { return html` - - -
[[localize('panel.map')]]
- - - -
+ + + + +
[[localize('panel.map')]]
+ + + +
+ `; } diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts index d783e37260..3c429e2e31 100644 --- a/src/panels/profile/ha-panel-profile.ts +++ b/src/panels/profile/ha-panel-profile.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "../../layouts/ha-app-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/paper-item/paper-item"; @@ -70,7 +70,7 @@ class HaPanelProfile extends LitElement { protected render(): TemplateResult { return html` - + - + `; } @@ -211,6 +211,7 @@ class HaPanelProfile extends LitElement { display: block; max-width: 600px; margin: 0 auto; + padding-bottom: env(safe-area-inset-bottom); } .content > * { diff --git a/src/panels/shopping-list/ha-panel-shopping-list.js b/src/panels/shopping-list/ha-panel-shopping-list.js index 2ee804a311..2229607672 100644 --- a/src/panels/shopping-list/ha-panel-shopping-list.js +++ b/src/panels/shopping-list/ha-panel-shopping-list.js @@ -1,4 +1,4 @@ -import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "../../layouts/ha-app-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/paper-checkbox/paper-checkbox"; @@ -68,7 +68,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) { } - + - + `; } diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 6cd52a0db8..48cbb59181 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -202,9 +202,10 @@ export const haStyleDialog = css` .paper-dialog-buttons { align-items: flex-end; padding: 8px; + padding-bottom: max(env(safe-area-inset-bottom), 8px); } - @media all and (min-width: 450px) { + @media all and (min-width: 450px) and (min-height: 500px) { ha-paper-dialog { min-width: 400px; } @@ -214,13 +215,21 @@ export const haStyleDialog = css` paper-dialog, ha-paper-dialog { margin: 0; - width: 100% !important; + width: calc( + 100% - env(safe-area-inset-right) - env(safe-area-inset-left) + ) !important; + min-width: calc( + 100% - env(safe-area-inset-right) - env(safe-area-inset-left) + ) !important; + max-width: calc( + 100% - env(safe-area-inset-right) - env(safe-area-inset-left) + ) !important; max-height: calc(100% - 64px); position: fixed !important; bottom: 0px; - left: 0px; - right: 0px; + left: env(safe-area-inset-left); + right: env(safe-area-inset-right); overflow: scroll; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; @@ -244,8 +253,12 @@ export const haStyleDialog = css` /* make dialog fullscreen on small screens */ @media all and (max-width: 450px), all and (max-height: 500px) { ha-dialog { - --mdc-dialog-min-width: 100vw; - --mdc-dialog-max-width: 100vw; + --mdc-dialog-min-width: calc( + 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + ); + --mdc-dialog-max-width: calc( + 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + ); --mdc-dialog-min-height: 100%; --mdc-dialog-max-height: 100%; --mdc-shape-medium: 0px;