jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add haStyleScrollbar to hass-subpage (#16745)

Browse Source
This commit is contained in:
Joakim Sørensen 2023-06-21 11:35:17 +02:00 committed by GitHub
parent 5aa6ffe2e4
commit b46c74fe76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 84 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/layouts/hass-subpage.ts
View File

@ -13,6 +13,7 @@ import { computeRTL } from "../common/util/compute_rtl";
import "../components/ha-icon-button-arrow-prev"; import "../components/ha-icon-button-arrow-prev";
import "../components/ha-menu-button"; import "../components/ha-menu-button";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
import { haStyleScrollbar } from "../resources/styles";
@customElement("hass-subpage") @customElement("hass-subpage")
class HassSubpage extends LitElement { class HassSubpage extends LitElement {
@ -73,7 +74,9 @@ class HassSubpage extends LitElement {
<div class="main-title"><slot name="header">${this.header}</slot></div> <div class="main-title"><slot name="header">${this.header}</slot></div>
<slot name="toolbar-icon"></slot> <slot name="toolbar-icon"></slot>
</div> </div>
<div class="content" @scroll=${this._saveScrollPos}><slot></slot></div> <div class="content ha-scrollbar" @scroll=${this._saveScrollPos}>
<slot></slot>
</div>
<div id="fab"> <div id="fab">
<slot name="fab"></slot> <slot name="fab"></slot>
</div> </div>
@ -94,88 +97,91 @@ class HassSubpage extends LitElement {
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return [
:host { haStyleScrollbar,
display: block; css`
height: 100%; :host {
background-color: var(--primary-background-color); display: block;
overflow: hidden; height: 100%;
position: relative; background-color: var(--primary-background-color);
} overflow: hidden;
position: relative;
:host([narrow]) {
width: 100%;
position: fixed;
}
.toolbar {
display: flex;
align-items: center;
font-size: 20px;
height: var(--header-height);
padding: 8px 12px;
pointer-events: none;
background-color: var(--app-header-background-color);
font-weight: 400;
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;
}
@media (max-width: 599px) {
.toolbar {
padding: 4px;
} }
}
.toolbar a {
color: var(--sidebar-text-color);
text-decoration: none;
}
ha-menu-button, :host([narrow]) {
ha-icon-button-arrow-prev, width: 100%;
::slotted([slot="toolbar-icon"]) { position: fixed;
pointer-events: auto; }
color: var(--sidebar-icon-color);
}
.main-title { .toolbar {
margin: 0 0 0 24px; display: flex;
line-height: 20px; align-items: center;
flex-grow: 1; font-size: 20px;
} height: var(--header-height);
padding: 8px 12px;
pointer-events: none;
background-color: var(--app-header-background-color);
font-weight: 400;
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
box-sizing: border-box;
}
@media (max-width: 599px) {
.toolbar {
padding: 4px;
}
}
.toolbar a {
color: var(--sidebar-text-color);
text-decoration: none;
}
.content { ha-menu-button,
position: relative; ha-icon-button-arrow-prev,
width: 100%; ::slotted([slot="toolbar-icon"]) {
height: calc(100% - 1px - var(--header-height)); pointer-events: auto;
overflow-y: auto; color: var(--sidebar-icon-color);
overflow: auto; }
-webkit-overflow-scrolling: touch;
}
#fab { .main-title {
position: absolute; margin: 0 0 0 24px;
right: calc(16px + env(safe-area-inset-right)); line-height: 20px;
bottom: calc(16px + env(safe-area-inset-bottom)); flex-grow: 1;
z-index: 1; }
}
:host([narrow]) #fab.tabs { .content {
bottom: calc(84px + env(safe-area-inset-bottom)); position: relative;
} width: 100%;
#fab[is-wide] { height: calc(100% - 1px - var(--header-height));
bottom: 24px; overflow-y: auto;
right: 24px; overflow: auto;
} -webkit-overflow-scrolling: touch;
:host([rtl]) #fab { }
right: auto;
left: calc(16px + env(safe-area-inset-left)); #fab {
} position: absolute;
:host([rtl][is-wide]) #fab { right: calc(16px + env(safe-area-inset-right));
bottom: 24px; bottom: calc(16px + env(safe-area-inset-bottom));
left: 24px; z-index: 1;
right: auto; }
} :host([narrow]) #fab.tabs {
`; 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;
}
`,
];
} }
} }