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

Fix mobile styling quickbar (#11459)

Browse Source
This commit is contained in:
Bram Kragten 2022-01-27 18:58:41 +01:00 committed by GitHub
parent b8d3eb76ac
commit 815a2a07ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/dialogs/quick-bar/ha-quick-bar.ts
View File

@ -108,7 +108,9 @@ export class QuickBar extends LitElement {
public async showDialog(params: QuickBarParams) { public async showDialog(params: QuickBarParams) {
this._commandMode = params.commandMode || this._toggleIfAlreadyOpened(); this._commandMode = params.commandMode || this._toggleIfAlreadyOpened();
this._hint = params.hint; this._hint = params.hint;
this._narrow = matchMedia("(max-width: 600px)").matches; this._narrow = matchMedia(
"all and (max-width: 450px), all and (max-height: 500px)"
).matches;
this._initializeItemsIfNeeded(); this._initializeItemsIfNeeded();
this._opened = true; this._opened = true;
} }
@ -154,7 +156,7 @@ export class QuickBar extends LitElement {
)} )}
.value=${this._commandMode ? `>${this._search}` : this._search} .value=${this._commandMode ? `>${this._search}` : this._search}
.icon=${true} .icon=${true}
.iconTrailing=${this._search !== undefined} .iconTrailing=${this._search !== undefined || this._narrow}
@input=${this._handleSearchChange} @input=${this._handleSearchChange}
@keydown=${this._handleInputKeyDown} @keydown=${this._handleInputKeyDown}
@focus=${this._setFocusFirstListItem} @focus=${this._setFocusFirstListItem}
@ -174,24 +176,26 @@ export class QuickBar extends LitElement {
.path=${mdiMagnify} .path=${mdiMagnify}
></ha-svg-icon> ></ha-svg-icon>
`} `}
${this._search || this._narrow
? html`
<div slot="trailingIcon">
${this._search && ${this._search &&
html` html`<ha-icon-button
<ha-icon-button
slot="trailingIcon"
@click=${this._clearSearch} @click=${this._clearSearch}
.label=${this.hass!.localize("ui.common.clear")} .label=${this.hass!.localize("ui.common.clear")}
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button> ></ha-icon-button>`}
`} ${this._narrow &&
</ha-textfield> html`
${this._narrow
? html`
<mwc-button <mwc-button
.label=${this.hass!.localize("ui.common.close")} .label=${this.hass!.localize("ui.common.close")}
@click=${this.closeDialog} @click=${this.closeDialog}
></mwc-button> ></mwc-button>
`}
</div>
` `
: ""} : ""}
</ha-textfield>
</div> </div>
${!items ${!items
? html`<ha-circular-progress ? html`<ha-circular-progress
@ -210,7 +214,9 @@ export class QuickBar extends LitElement {
@keydown=${this._handleListItemKeyDown} @keydown=${this._handleListItemKeyDown}
@selected=${this._handleSelected} @selected=${this._handleSelected}
style=${styleMap({ style=${styleMap({
height: `${Math.min( height: this._narrow
? "calc(100vh - 56px)"
: `${Math.min(
items.length * (this._commandMode ? 56 : 72) + 26, items.length * (this._commandMode ? 56 : 72) + 26,
this._done ? 500 : 0 this._done ? 500 : 0
)}px`, )}px`,
@ -705,6 +711,12 @@ export class QuickBar extends LitElement {
} }
} }
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-textfield {
--mdc-shape-small: 0;
}
}
ha-icon.entity, ha-icon.entity,
ha-svg-icon.entity { ha-svg-icon.entity {
margin-left: 20px; margin-left: 20px;
@ -758,6 +770,11 @@ export class QuickBar extends LitElement {
padding: 16px 0px; padding: 16px 0px;
text-align: center; text-align: center;
} }
div[slot="trailingIcon"] {
display: flex;
align-items: center;
}
`, `,
]; ];
} }