Add support for safe area insets (#6473)

home-assistant · Jul 30, 2020 · ca4f573 · ca4f573
1 parent 07fceea
commit ca4f573
Show file tree

Hide file tree

Showing 41 changed files with 443 additions and 749 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,4 +1,4 @@
-<meta name='viewport' content='width=device-width, user-scalable=no'>
+<meta name='viewport' content='width=device-width, user-scalable=no, viewport-fit=cover'>
 <style>
   body {
     font-family: Roboto, sans-serif;
@@ -7,6 +7,6 @@
     font-weight: 400;
     margin: 0;
     padding: 0;
-    height: 100vh;
+    height: 100%;
   }
 </style>
diff --git a/src/html/index.html.template b/src/html/index.html.template
@@ -5,14 +5,16 @@
     <link rel="preload" href="<%= latestAppJS %>" as="script" crossorigin="use-credentials" />
     <%= renderTemplate('_header') %>
     <title>Home Assistant</title>
+    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <link
       rel="apple-touch-icon"
       sizes="180x180"
       href="/static/icons/favicon-apple-180x180.png"
     />
-    <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <meta name="apple-itunes-app" content="app-id=1099568401" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="apple-mobile-web-app-title" content="Home Assistant">
     <meta
       name="msapplication-square70x70logo"
       content="/static/icons/tile-win-70x70.png"

diff --git a/src/layouts/ha-app-layout.js b/src/layouts/ha-app-layout.js
@@ -77,6 +77,8 @@ class HaAppLayout extends customElements.get("app-header-layout") {
           /* Using 'transform' will cause 'position: fixed' elements to behave like
            'position: absolute' relative to this element. */
           transform: translate(0);
+          margin-left: env(safe-area-inset-left);
+          margin-right: env(safe-area-inset-right);
         }
 
         @media print {

diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
@@ -60,6 +60,11 @@ class HassSubpage extends LitElement {
         background-color: var(--primary-background-color);
       }
 
+      :host([narrow]) {
+        width: 100%;
+        position: fixed;
+      }
+
       .toolbar {
         display: flex;
         align-items: center;

diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -26,9 +26,9 @@ import { computeRTLDirection } from "../common/util/compute_rtl";
 export class HaTabsSubpageDataTable extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public isWide!: boolean;
+  @property({ type: Boolean }) public isWide = false;
 
-  @property({ type: Boolean, reflect: true }) public narrow!: boolean;
+  @property({ type: Boolean, reflect: true }) public narrow = false;
 
   /**
    * Object with the columns.
@@ -110,6 +110,7 @@ export class HaTabsSubpageDataTable extends LitElement {
       <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
+        .isWide=${this.isWide}
         .backPath=${this.backPath}
         .backCallback=${this.backCallback}
         .route=${this.route}
@@ -168,38 +169,37 @@ export class HaTabsSubpageDataTable extends LitElement {
             ? html`
                 <div slot="header">
                   <slot name="header">
-                    <slot name="header">
-                      <div class="table-header">
-                        <search-input
-                          .filter=${this.filter}
-                          no-label-float
-                          no-underline
-                          @value-changed=${this._handleSearchChange}
-                          .label=${this.hass.localize(
-                            "ui.components.data-table.search"
-                          )}
-                        >
-                        </search-input>
-                        ${this.activeFilters
-                          ? html`<div class="active-filters">
-                              ${this.hass.localize(
-                                "ui.panel.config.filtering.filtering_by"
-                              )}
-                              ${this.activeFilters.join(", ")}
-                              <mwc-button @click=${this._clearFilter}
-                                >${this.hass.localize(
-                                  "ui.panel.config.filtering.clear"
-                                )}</mwc-button
-                              >
-                            </div>`
-                          : ""}
-                      </div></slot
-                    ></slot
-                  >
+                    <div class="table-header">
+                      <search-input
+                        .filter=${this.filter}
+                        no-label-float
+                        no-underline
+                        @value-changed=${this._handleSearchChange}
+                        .label=${this.hass.localize(
+                          "ui.components.data-table.search"
+                        )}
+                      >
+                      </search-input>
+                      ${this.activeFilters
+                        ? html`<div class="active-filters">
+                            ${this.hass.localize(
+                              "ui.panel.config.filtering.filtering_by"
+                            )}
+                            ${this.activeFilters.join(", ")}
+                            <mwc-button @click=${this._clearFilter}
+                              >${this.hass.localize(
+                                "ui.panel.config.filtering.clear"
+                              )}</mwc-button
+                            >
+                          </div>`
+                        : ""}
+                    </div>
+                  </slot>
                 </div>
               `
             : html` <div slot="header"></div> `}
         </ha-data-table>
+        <div slot="fab"><slot name="fab"></slot></div>
       </hass-tabs-subpage>
     `;
   }