Skip to content

Compact header #7369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 40 commits into from
Oct 21, 2020
Merged

Compact header #7369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
d25805a
initial styling
maykar Oct 16, 2020
01e50b8
Delete package-lock.json
maykar Oct 16, 2020
e7000a0
fix media browser heading spacing
maykar Oct 16, 2020
d533aba
Add compact header user profile option
maykar Oct 16, 2020
a3e63df
compact mixin/types
maykar Oct 16, 2020
bbdb63c
add mixin to hass-elem
maykar Oct 16, 2020
819e590
cleanup
maykar Oct 16, 2020
4ea3fb3
add compact mode to hui-root and styles
maykar Oct 16, 2020
ea92013
Fix fireEvent
maykar Oct 17, 2020
c8f70d7
Update connection-mixin.ts
maykar Oct 17, 2020
a82e99a
adjust height calc for new app-header height
maykar Oct 17, 2020
d2f40fe
start conversion to UI overhaul
maykar Oct 17, 2020
1160b39
Update ha-panel-profile.ts
maykar Oct 17, 2020
363674a
Update ha-pref-storage.ts
maykar Oct 17, 2020
838d2a0
Update connection-mixin.ts
maykar Oct 17, 2020
1e2e73f
Update provide_hass.ts
maykar Oct 17, 2020
95c6823
Only use tabs div in edit mode
maykar Oct 17, 2020
57aaacc
hui-root styling
maykar Oct 17, 2020
6f7f69f
ha-tabs styling
maykar Oct 17, 2020
9ca219e
Update styles.ts
maykar Oct 17, 2020
2de146d
Header styling
maykar Oct 17, 2020
5abec48
styling tweaks
maykar Oct 17, 2020
73eb69c
set background on ha-app-layout
maykar Oct 19, 2020
74141c6
adjust view height
maykar Oct 20, 2020
0d3897f
center tabs
maykar Oct 20, 2020
bffbc05
Remove .tabs-hidden
maykar Oct 20, 2020
d0635e2
@query app-header, remove unusedentities background, var(--header-hei…
maykar Oct 20, 2020
bf0b087
restore header height
maykar Oct 20, 2020
9f13cf6
Revert sidebar changes
maykar Oct 20, 2020
5cb9e8f
Update ha-sidebar.ts
maykar Oct 20, 2020
e69aaa6
Update header height
bramkragten Oct 20, 2020
7cb3367
remove unnecessary styling
maykar Oct 20, 2020
a25a0d6
edit mode ha-tab styling
maykar Oct 20, 2020
7f53c61
ha-tabs styling & clear background
maykar Oct 20, 2020
5467c64
ha-tabs height as header height
maykar Oct 20, 2020
fafc718
--header-height
maykar Oct 20, 2020
1324b2e
resize on editmode in update
maykar Oct 20, 2020
5443fb0
more --header-height
maykar Oct 20, 2020
becfd8f
Correct height for edit mode
bramkragten Oct 21, 2020
17c88c9
Move voice button to overflow on mobile
bramkragten Oct 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/components/ha-sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -736,8 +736,7 @@ class HaSidebar extends LitElement {
border-left: 1px solid var(--divider-color);
}
.menu {
box-sizing: border-box;
height: 65px;
height: var(--header-height);
display: flex;
padding: 0 8.5px;
border-bottom: 1px solid transparent;
Expand Down Expand Up @@ -794,7 +793,10 @@ class HaSidebar extends LitElement {
display: flex;
flex-direction: column;
box-sizing: border-box;
height: calc(100% - 196px - env(safe-area-inset-bottom));
height: calc(100% - var(--header-height) - 132px);
height: calc(
100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
);
overflow-x: hidden;
background: none;
margin-left: env(safe-area-inset-left);
Expand Down
13 changes: 8 additions & 5 deletions src/components/ha-tabs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,17 @@ export class HaTabs extends PaperTabs {

superStyle!.appendChild(
document.createTextNode(`
:host {
padding-top: .5px;
}
.not-visible {
display: none;
}
:host > paper-icon-button:first-of-type {
padding-left: 0;
}
paper-icon-button {
margin: 0 -8px 0 0;
width: 24px;
height: 48px;
padding: 0;
margin: 0;
}
`)
);
Expand Down Expand Up @@ -85,7 +88,7 @@ export class HaTabs extends PaperTabs {

if (this._lastLeftHiddenState !== this._leftHidden) {
this._lastLeftHiddenState = this._leftHidden;
this.$.tabsContainer.scrollLeft += this._leftHidden ? -46 : 46;
this.$.tabsContainer.scrollLeft += this._leftHidden ? -23 : 23;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/dialogs/notifications/notification-drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export class HuiNotificationDrawer extends EventsMixin(
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);
height: calc(100% - 1px - var(--header-height));
box-sizing: border-box;
background-color: var(--primary-background-color);
color: var(--primary-text-color);
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/hass-error-screen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ class HassErrorScreen extends LitElement {
}
.content {
color: var(--primary-text-color);
height: calc(100% - 64px);
height: calc(100% - var(--header-height));
display: flex;
align-items: center;
justify-content: center;
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/hass-loading-screen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ class HassLoadingScreen extends LitElement {
pointer-events: auto;
}
.content {
height: calc(100% - 64px);
height: calc(100% - var(--header-height));
display: flex;
align-items: center;
justify-content: center;
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/hass-subpage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ class HassSubpage extends LitElement {
.content {
position: relative;
width: 100%;
height: calc(100% - 65px);
height: calc(100% - 1px - var(--header-height));
overflow-y: auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
Expand Down
2 changes: 1 addition & 1 deletion src/layouts/hass-tabs-subpage-data-table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ export class HaTabsSubpageDataTable extends LitElement {
--data-table-border-width: 0;
}
:host(:not([narrow])) ha-data-table {
height: calc(100vh - 65px);
height: calc(100vh - 1px - var(--header-height));
display: block;
}
.table-header {
Expand Down
7 changes: 4 additions & 3 deletions src/layouts/hass-tabs-subpage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,9 +278,10 @@ class HassTabsSubpage extends LitElement {
);
margin-left: env(safe-area-inset-left);
margin-right: env(safe-area-inset-right);
height: calc(100% - 65px);
height: calc(100% - 65px - env(safe-area-inset-bottom));
overflow-y: auto;
height: calc(100% - 1px - var(--header-height));
height: calc(
100% - 1px - var(--header-height) - env(safe-area-inset-bottom)
);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Expand Down
2 changes: 1 addition & 1 deletion src/panels/calendar/ha-panel-calendar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ class PanelCalendar extends LitElement {
}

:host(:not([narrow])) .content {
height: calc(100vh - 64px);
height: calc(100vh - var(--header-height);
}

.calendar-list {
Expand Down
2 changes: 1 addition & 1 deletion src/panels/config/entities/ha-config-entities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -834,7 +834,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
--data-table-border-width: 0;
}
:host(:not([narrow])) ha-data-table {
height: calc(100vh - 65px);
height: calc(100vh - 1px - var(--header-height));
display: block;
}
ha-button-menu {
Expand Down
2 changes: 1 addition & 1 deletion src/panels/iframe/ha-panel-iframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ class HaPanelIframe extends PolymerElement {
border: 0;
width: 100%;
position: absolute;
height: calc(100% - 64px);
height: calc(100% - var(--header-height));
background-color: var(--primary-background-color);
}
</style>
Expand Down
2 changes: 1 addition & 1 deletion src/panels/lovelace/cards/hui-starting-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
return css`
:host {
display: block;
height: calc(100vh - 64px);
height: calc(100vh - var(--header-height));
}
ha-circular-progress {
padding-bottom: 20px;
Expand Down
Loading