Create shortcuts to go directly to specific category in command palette

This commit is contained in:
Donnie 2020-11-14 15:14:45 -08:00
parent 75e5d66966
commit 0527fac2ce
3 changed files with 29 additions and 15 deletions

View File

@ -45,9 +45,8 @@ import { navigate } from "../../common/navigate";
import { configSections } from "../../panels/config/ha-panel-config";
import { PageNavigation } from "../../layouts/hass-tabs-subpage";
import { canShowPage } from "../../common/config/can_show_page";
import { getPanelIcon, getPanelNameTranslationKey } from "../../data/panel";
import { getPanelNameTranslationKey } from "../../data/panel";
const DEFAULT_NAVIGATION_ICON = "hass:arrow-right-circle";
const DEFAULT_SERVER_ICON = "hass:server";
interface QuickBarItem extends ScorableTextItem {
@ -57,7 +56,7 @@ interface QuickBarItem extends ScorableTextItem {
action(data?: any): void;
}
interface CommandItem extends QuickBarItem {
export interface CommandItem extends QuickBarItem {
categoryKey: "reload" | "navigation" | "server_control";
categoryText: string;
}
@ -96,6 +95,8 @@ export class QuickBar extends LitElement {
@internalProperty() private _commandMode = false;
@internalProperty() private _commandType?: CommandItem["categoryKey"];
@internalProperty() private _done = false;
@query("search-input", false) private _filterInputField?: HTMLElement;
@ -104,6 +105,10 @@ export class QuickBar extends LitElement {
public async showDialog(params: QuickBarParams) {
this._commandMode = params.commandMode || this._toggleIfAlreadyOpened();
this._commandType = params.commandType;
this._search = this._commandType
? `${this._getCommandCategoryLabel(this._commandType).toLowerCase()} `
: "";
this._initializeItemsIfNeeded();
this._opened = true;
}
@ -385,9 +390,8 @@ export class QuickBar extends LitElement {
const reloadableDomains = componentsWithService(this.hass, "reload").sort();
return reloadableDomains.map((domain) => {
const categoryText = this.hass.localize(
`ui.dialogs.quick-bar.commands.types.reload`
);
const categoryKey = "reload";
const categoryText = this._getCommandCategoryLabel(categoryKey);
const primaryText =
this.hass.localize(`ui.dialogs.quick-bar.commands.reload.${domain}`) ||
this.hass.localize(
@ -401,7 +405,7 @@ export class QuickBar extends LitElement {
filterText: `${categoryText} ${primaryText}`,
icon: domainIcon(domain),
action: () => this.hass.callService(domain, "reload"),
categoryKey: "reload",
categoryKey,
categoryText,
};
});
@ -412,9 +416,7 @@ export class QuickBar extends LitElement {
return serverActions.map((action) => {
const categoryKey = "server_control";
const categoryText = this.hass.localize(
`ui.dialogs.quick-bar.commands.types.${categoryKey}`
);
const categoryText = this._getCommandCategoryLabel(categoryKey);
const primaryText = this.hass.localize(
"ui.dialogs.quick-bar.commands.server_control.perform_action",
"action",
@ -512,9 +514,7 @@ export class QuickBar extends LitElement {
): CommandItem[] {
return items.map((item) => {
const categoryKey = "navigation";
const categoryText = this.hass.localize(
`ui.dialogs.quick-bar.commands.types.${categoryKey}`
);
const categoryText = this._getCommandCategoryLabel(categoryKey);
return {
...item,
@ -542,6 +542,10 @@ export class QuickBar extends LitElement {
fuzzyFilterSort<QuickBarItem>(filter.trimLeft(), items)
);
private _getCommandCategoryLabel = (
categoryKey: CommandItem["categoryKey"]
) => this.hass.localize(`ui.dialogs.quick-bar.commands.types.${categoryKey}`);
static get styles() {
return [
haStyleDialog,

View File

@ -1,8 +1,10 @@
import { fireEvent } from "../../common/dom/fire_event";
import { CommandItem } from "./ha-quick-bar";
export interface QuickBarParams {
entityFilter?: string;
commandMode?: boolean;
commandType?: CommandItem["categoryKey"];
}
export const loadQuickBar = () =>

View File

@ -7,6 +7,7 @@ import {
} from "../dialogs/quick-bar/show-dialog-quick-bar";
import { HomeAssistant } from "../types";
import { storeState } from "../util/ha-pref-storage";
import { CommandItem } from "../dialogs/quick-bar/ha-quick-bar";
declare global {
interface HASSDomEvents {
@ -32,15 +33,22 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
tinykeys(window, {
e: (ev) => this._showQuickBar(ev),
c: (ev) => this._showQuickBar(ev, true),
g: (ev) => this._showQuickBar(ev, true, "navigation"),
r: (ev) => this._showQuickBar(ev, true, "reload"),
s: (ev) => this._showQuickBar(ev, true, "server_control"),
});
}
private _showQuickBar(e: KeyboardEvent, commandMode = false) {
private _showQuickBar(
e: KeyboardEvent,
commandMode = false,
commandType?: CommandItem["categoryKey"]
) {
if (!this._canShowQuickBar(e)) {
return;
}
showQuickBar(this, { commandMode });
showQuickBar(this, { commandMode, commandType });
}
private _canShowQuickBar(e: KeyboardEvent) {