From 4ecad97e2bf2c5ad3dcc45dc8fda4ad055be3e13 Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Fri, 23 Oct 2020 11:40:58 -0400
Subject: [PATCH 01/13] Fix sidebar title
---
src/components/ha-sidebar.ts | 52 ++++++++++++++++++------------------
1 file changed, 26 insertions(+), 26 deletions(-)
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 717d376544b3..7a4791b96748 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -320,13 +320,11 @@ class HaSidebar extends LitElement {
`
: ""}
-
- ${this.editMode
- ? html`
- ${this.hass.localize("ui.sidebar.done")}
- `
- : "Home Assistant"}
-
+ ${this.editMode
+ ? html`
+ ${this.hass.localize("ui.sidebar.done")}
+ `
+ : html`Home Assistant
`}
`;
}
@@ -756,7 +754,7 @@ class HaSidebar extends LitElement {
-moz-user-select: none;
border-right: 1px solid var(--divider-color);
background-color: var(--sidebar-background-color);
- width: 64px;
+ width: 56px;
}
:host([expanded]) {
width: 256px;
@@ -768,8 +766,9 @@ class HaSidebar extends LitElement {
}
.menu {
height: var(--header-height);
+ box-sizing: border-box;
display: flex;
- padding: 0 8.5px;
+ padding: 0 4px;
border-bottom: 1px solid transparent;
white-space: nowrap;
font-weight: 400;
@@ -778,11 +777,11 @@ 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));
+ padding-left: calc(4px + env(safe-area-inset-left));
}
:host([rtl]) .menu {
- padding-left: 8.5px;
- padding-right: calc(8.5px + env(safe-area-inset-right));
+ padding-left: 4px;
+ padding-right: calc(4px + env(safe-area-inset-right));
}
:host([expanded]) .menu {
width: calc(256px + env(safe-area-inset-left));
@@ -793,26 +792,27 @@ class HaSidebar extends LitElement {
.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 {
- margin-right: 0px;
- margin-left: 23px;
- }
-
.title {
+ margin-left: 19px;
width: 100%;
display: none;
}
+ :host([rtl]) .title {
+ margin-left: 0;
+ margin-right: 19px;
+ }
:host([narrow]) .title {
+ margin: 0;
padding: 0 16px;
}
:host([expanded]) .title {
display: initial;
}
- .title mwc-button {
- width: 90%;
+ :host([expanded]) .menu mwc-button {
+ margin: 0 8px;
+ }
+ .menu mwc-button {
+ width: 100%;
}
#sortable,
.hidden-panel {
@@ -850,14 +850,14 @@ class HaSidebar extends LitElement {
paper-icon-item {
box-sizing: border-box;
- margin: 4px 8px;
+ margin: 4px;
padding-left: 12px;
border-radius: 4px;
--paper-item-min-height: 40px;
width: 48px;
}
:host([expanded]) paper-icon-item {
- width: 240px;
+ width: 248px;
}
:host([rtl]) paper-icon-item {
padding-left: auto;
@@ -874,9 +874,9 @@ class HaSidebar extends LitElement {
border-radius: 4px;
position: absolute;
top: 0;
- right: 0;
+ right: 2px;
bottom: 0;
- left: 0;
+ left: 2px;
pointer-events: none;
content: "";
transition: opacity 15ms linear;
From a77ba883766cabc9db3b2b4a523c2c7c5d6f6fcb Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Fri, 23 Oct 2020 13:33:46 -0400
Subject: [PATCH 02/13] Fix header margin
---
src/components/ha-sidebar.ts | 8 ++++++++
1 file changed, 8 insertions(+)
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 7a4791b96748..0e960dc2f45b 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -792,6 +792,14 @@ class HaSidebar extends LitElement {
.menu mwc-icon-button {
color: var(--sidebar-icon-color);
}
+ :host([expanded]) .menu mwc-icon-button {
+ margin-right: 19px;
+ }
+ :host([expanded][rtl]) .menu mwc-icon-button {
+ margin-right: 0px;
+ margin-left: 19px;
+ }
+
.title {
margin-left: 19px;
width: 100%;
From d7d65a9152b2371385a271ec803bbb9bc43557d0 Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Fri, 23 Oct 2020 13:52:45 -0400
Subject: [PATCH 03/13] Add tooltip to title if truncated
---
src/components/ha-sidebar.ts | 8 --------
1 file changed, 8 deletions(-)
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 0e960dc2f45b..7a4791b96748 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -792,14 +792,6 @@ class HaSidebar extends LitElement {
.menu mwc-icon-button {
color: var(--sidebar-icon-color);
}
- :host([expanded]) .menu mwc-icon-button {
- margin-right: 19px;
- }
- :host([expanded][rtl]) .menu mwc-icon-button {
- margin-right: 0px;
- margin-left: 19px;
- }
-
.title {
margin-left: 19px;
width: 100%;
From 48fd679440827aba73574d547e0a67d86da2b16b Mon Sep 17 00:00:00 2001
From: maykar <25127328+maykar@users.noreply.github.com>
Date: Sun, 25 Oct 2020 18:07:06 +0000
Subject: [PATCH 04/13] notification header height
---
src/dialogs/notifications/notification-drawer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js
index 81a45156d2a0..c4f666ec53ed 100644
--- a/src/dialogs/notifications/notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@@ -25,7 +25,7 @@ export class HuiNotificationDrawer extends EventsMixin(
color: var(--primary-text-color);
border-bottom: 1px solid var(--divider-color);
background-color: var(--primary-background-color);
- min-height: 64px;
+ height: var(--header-height);
width: calc(100% - 32px);
}
From efef6efe3c3c1d959dd020bcdcd5f0fe99a37ea7 Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Sun, 25 Oct 2020 14:13:32 -0400
Subject: [PATCH 05/13] Account for border - Notifications header
---
src/dialogs/notifications/notification-drawer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js
index c4f666ec53ed..918f12861555 100644
--- a/src/dialogs/notifications/notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@@ -25,7 +25,7 @@ export class HuiNotificationDrawer extends EventsMixin(
color: var(--primary-text-color);
border-bottom: 1px solid var(--divider-color);
background-color: var(--primary-background-color);
- height: var(--header-height);
+ height: calc(var(--header-height) - 1px);
width: calc(100% - 32px);
}
From 9cffe63cb1197f132290d9d60da917df920ad583 Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Mon, 26 Oct 2020 10:40:57 -0400
Subject: [PATCH 06/13] border box on notification app-header
Co-authored-by: Zack Barett
---
src/dialogs/notifications/notification-drawer.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js
index 918f12861555..729f317ee5c9 100644
--- a/src/dialogs/notifications/notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@@ -25,7 +25,8 @@ export class HuiNotificationDrawer extends EventsMixin(
color: var(--primary-text-color);
border-bottom: 1px solid var(--divider-color);
background-color: var(--primary-background-color);
- height: calc(var(--header-height) - 1px);
+ height: var(--header-height);
+ box-sizing: border-box;
width: calc(100% - 32px);
}
From 9f49e70aaa9fff812ebab40c561fd181924f1ec9 Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Mon, 26 Oct 2020 10:41:50 -0400
Subject: [PATCH 07/13] Remove width calc on app-toolbar
---
src/dialogs/notifications/notification-drawer.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js
index 729f317ee5c9..cc3dc592e34b 100644
--- a/src/dialogs/notifications/notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@@ -27,7 +27,6 @@ export class HuiNotificationDrawer extends EventsMixin(
background-color: var(--primary-background-color);
height: var(--header-height);
box-sizing: border-box;
- width: calc(100% - 32px);
}
div[main-title] {
From a880d8773943cf93588d8d7beadc201911b7a3ef Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Tue, 10 Nov 2020 07:17:41 -0500
Subject: [PATCH 08/13] Loading screen header height
---
src/layouts/hass-loading-screen.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts
index 7d0e9037692b..8683d7863000 100644
--- a/src/layouts/hass-loading-screen.ts
+++ b/src/layouts/hass-loading-screen.ts
@@ -67,7 +67,7 @@ class HassLoadingScreen extends LitElement {
display: flex;
align-items: center;
font-size: 20px;
- height: 65px;
+ height: var(--header-height);
padding: 0 16px;
pointer-events: none;
background-color: var(--app-header-background-color);
From 2f2873d5c9a4da5a1664e311bae00ebda1d4cfd3 Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Tue, 10 Nov 2020 07:30:07 -0500
Subject: [PATCH 09/13] error screen header height
---
src/layouts/hass-error-screen.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts
index 5a4702329dd1..fafa6e6fd348 100644
--- a/src/layouts/hass-error-screen.ts
+++ b/src/layouts/hass-error-screen.ts
@@ -54,7 +54,7 @@ class HassErrorScreen extends LitElement {
display: flex;
align-items: center;
font-size: 20px;
- height: 65px;
+ height: var(--header-height);
padding: 0 16px;
pointer-events: none;
background-color: var(--app-header-background-color);
From 7aa69ffacb71903bccf6957c9d8b10a089f7a5da Mon Sep 17 00:00:00 2001
From: Bram Kragten
Date: Tue, 10 Nov 2020 13:57:02 +0100
Subject: [PATCH 10/13] Style fixes
---
src/resources/ha-sortable-style.ts | 12 +++++++++++-
1 file changed, 11 insertions(+), 1 deletion(-)
diff --git a/src/resources/ha-sortable-style.ts b/src/resources/ha-sortable-style.ts
index cda10ed99e02..5979f986e266 100644
--- a/src/resources/ha-sortable-style.ts
+++ b/src/resources/ha-sortable-style.ts
@@ -73,15 +73,25 @@ export const sortableStyles = css`
display: none;
position: absolute;
top: 0;
- right: 0;
+ right: 4px;
--mdc-icon-button-size: 40px;
}
+ :host([rtl]) .show-panel {
+ right: initial;
+ left: 4px;
+ }
+
.hide-panel {
top: 4px;
right: 8px;
}
+ :host([rtl]) .hide-panel {
+ right: initial;
+ left: 8px;
+ }
+
:host([expanded]) .hide-panel {
display: block;
}
From 2affb21e39ed428933d10df3e1822e96c0a748ba Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Tue, 10 Nov 2020 13:41:52 -0500
Subject: [PATCH 11/13] Remove padding. No longer needed.
---
src/components/ha-tabs.ts | 3 ---
1 file changed, 3 deletions(-)
diff --git a/src/components/ha-tabs.ts b/src/components/ha-tabs.ts
index b6dc45dcf121..510e0a0ffd99 100644
--- a/src/components/ha-tabs.ts
+++ b/src/components/ha-tabs.ts
@@ -34,9 +34,6 @@ export class HaTabs extends PaperTabs {
superStyle!.appendChild(
document.createTextNode(`
- :host {
- padding-top: .5px;
- }
.not-visible {
display: none;
}
From 919f471477dbadd00801761a696fd385a6837d4e Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Tue, 10 Nov 2020 14:14:01 -0500
Subject: [PATCH 12/13] styling
---
src/components/ha-tabs.ts | 3 +++
1 file changed, 3 insertions(+)
diff --git a/src/components/ha-tabs.ts b/src/components/ha-tabs.ts
index 510e0a0ffd99..f28f8d77668b 100644
--- a/src/components/ha-tabs.ts
+++ b/src/components/ha-tabs.ts
@@ -34,6 +34,9 @@ export class HaTabs extends PaperTabs {
superStyle!.appendChild(
document.createTextNode(`
+ #selectionBar {
+ box-sizing: border-box;
+ }
.not-visible {
display: none;
}
From cdf315310f38543b00162426c2e2135c09622534 Mon Sep 17 00:00:00 2001
From: maykar <25127328+maykar@users.noreply.github.com>
Date: Wed, 11 Nov 2020 03:19:41 +0000
Subject: [PATCH 13/13] missing commits from rebase
---
src/components/ha-tab.ts | 3 +--
src/layouts/hass-subpage.ts | 2 +-
src/layouts/hass-tabs-subpage.ts | 2 +-
src/layouts/home-assistant-main.ts | 2 +-
src/resources/ha-style.ts | 2 +-
5 files changed, 5 insertions(+), 6 deletions(-)
diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts
index cc052052d9e3..42583e898683 100644
--- a/src/components/ha-tab.ts
+++ b/src/components/ha-tab.ts
@@ -101,11 +101,10 @@ export class HaTab extends LitElement {
text-align: center;
align-items: center;
justify-content: center;
- height: 64px;
+ height: var(--header-height);
cursor: pointer;
position: relative;
outline: none;
- box-sizing: border-box;
}
.name {
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index d9a9f55d2d04..69a42f2fff1b 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -69,7 +69,7 @@ class HassSubpage extends LitElement {
display: flex;
align-items: center;
font-size: 20px;
- height: 65px;
+ height: var(--header-height);
padding: 0 16px;
pointer-events: none;
background-color: var(--app-header-background-color);
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index e33bbb61a701..f7072e795c6c 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -217,7 +217,7 @@ class HassTabsSubpage extends LitElement {
display: flex;
align-items: center;
font-size: 20px;
- height: 65px;
+ height: var(--header-height);
background-color: var(--sidebar-background-color);
font-weight: 400;
color: var(--sidebar-text-color);
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index a144b837a171..f7a95bcd1e1b 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -192,7 +192,7 @@ class HomeAssistantMain extends LitElement {
color: var(--primary-text-color);
/* remove the grey tap highlights in iOS on the fullscreen touch targets */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- --app-drawer-width: 64px;
+ --app-drawer-width: 56px;
}
:host([expanded]) {
--app-drawer-width: calc(256px + env(safe-area-inset-left));
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 7167bde06120..1e308b9aada1 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -49,7 +49,7 @@ documentContainer.innerHTML = `
--secondary-background-color: #e5e5e5; /* behind the cards on state */
/* for header */
- --header-height: 64px;
+ --header-height: 56px;
/* for label-badge */
--label-badge-red: #DF4C1E;