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

Fix quick bar dark mode contrast, filter returning all items, no primary text (#7430)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Donnie 2020-10-22 15:06:36 -07:00 committed by GitHub
parent edc2a03d1c
commit a78c00fb41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/common/string/filter/sequence-matching.ts
View File

@ -59,7 +59,7 @@ export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
: fuzzySequentialMatch(filter, item.text); : fuzzySequentialMatch(filter, item.text);
return item; return item;
}) })
.filter((item) => item.score === undefined || item.score > 0) .filter((item) => item.score !== undefined && item.score > 0)
.sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) => .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0 scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
); );

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

@ -61,8 +61,6 @@ export class QuickBar extends LitElement {
@internalProperty() private _commandMode = false; @internalProperty() private _commandMode = false;
@internalProperty() private _commandTriggered = -1;
@internalProperty() private _done = false; @internalProperty() private _done = false;
@query("search-input", false) private _filterInputField?: HTMLElement; @query("search-input", false) private _filterInputField?: HTMLElement;
@ -82,7 +80,6 @@ export class QuickBar extends LitElement {
this._focusSet = false; this._focusSet = false;
this._filter = ""; this._filter = "";
this._search = ""; this._search = "";
this._commandTriggered = -1;
this._items = []; this._items = [];
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
@ -137,7 +134,6 @@ export class QuickBar extends LitElement {
active active
></ha-circular-progress>` ></ha-circular-progress>`
: html`<mwc-list : html`<mwc-list
activatable
@rangechange=${this._handleRangeChanged} @rangechange=${this._handleRangeChanged}
@keydown=${this._handleListItemKeyDown} @keydown=${this._handleListItemKeyDown}
@selected=${this._handleSelected} @selected=${this._handleSelected}
@ -192,19 +188,12 @@ export class QuickBar extends LitElement {
<span slot="secondary" class="secondary">${item.altText}</span> <span slot="secondary" class="secondary">${item.altText}</span>
` `
: null} : null}
${this._commandTriggered === index
? html`<ha-circular-progress
size="small"
active
slot="meta"
></ha-circular-progress>`
: null}
</mwc-list-item> </mwc-list-item>
`; `;
} }
private async processItemAndCloseDialog(item: QuickBarItem, index: number) { private async processItemAndCloseDialog(item: QuickBarItem, index: number) {
this._commandTriggered = index; this._addSpinnerToCommandItem(index);
await item.action(); await item.action();
this.closeDialog(); this.closeDialog();
@ -234,6 +223,14 @@ export class QuickBar extends LitElement {
return this.renderRoot.querySelector(`mwc-list-item[index="${index}"]`); return this.renderRoot.querySelector(`mwc-list-item[index="${index}"]`);
} }
private _addSpinnerToCommandItem(index: number): void {
const spinner = document.createElement("ha-circular-progress");
spinner.size = "small";
spinner.slot = "meta";
spinner.active = true;
this._getItemAtIndex(index)?.appendChild(spinner);
}
private _handleSearchChange(ev: CustomEvent): void { private _handleSearchChange(ev: CustomEvent): void {
const newFilter = ev.detail.value; const newFilter = ev.detail.value;
const oldCommandMode = this._commandMode; const oldCommandMode = this._commandMode;
@ -303,7 +300,7 @@ export class QuickBar extends LitElement {
private _generateEntityItems(): QuickBarItem[] { private _generateEntityItems(): QuickBarItem[] {
return Object.keys(this.hass.states) return Object.keys(this.hass.states)
.map((entityId) => ({ .map((entityId) => ({
text: computeStateName(this.hass.states[entityId]), text: computeStateName(this.hass.states[entityId]) || entityId,
altText: entityId, altText: entityId,
icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]), icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]),
action: () => fireEvent(this, "hass-more-info", { entityId }), action: () => fireEvent(this, "hass-more-info", { entityId }),

1
src/resources/styles.ts
View File

@ -12,6 +12,7 @@ export const darkStyles = {
"switch-unchecked-button-color": "#999999", "switch-unchecked-button-color": "#999999",
"switch-unchecked-track-color": "#9b9b9b", "switch-unchecked-track-color": "#9b9b9b",
"divider-color": "rgba(225, 225, 225, .12)", "divider-color": "rgba(225, 225, 225, .12)",
"mdc-ripple-color": "#AAAAAA",
"codemirror-keyword": "#C792EA", "codemirror-keyword": "#C792EA",
"codemirror-operator": "#89DDFF", "codemirror-operator": "#89DDFF",
"codemirror-variable": "#f07178", "codemirror-variable": "#f07178",