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

View File

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

View File

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