diff --git a/packages/web/src/commands/CommandListener.svelte b/packages/web/src/commands/CommandListener.svelte index 39ef89e4..54f58346 100644 --- a/packages/web/src/commands/CommandListener.svelte +++ b/packages/web/src/commands/CommandListener.svelte @@ -1,5 +1,5 @@ + + + + Configure commmand + + + + + + + { + closeCurrentModal(); + customKeyboardShortcuts.update(list => ({ + ...list, + [command.id]: { + keyText: e.detail.keyText, + customKeyboardShortcut: true, + }, + })); + }} + /> + { + closeCurrentModal(); + customKeyboardShortcuts.update(list => _.omit(list, [command.id])); + }} + /> + + + + diff --git a/packages/web/src/modals/DropDownMenu.svelte b/packages/web/src/modals/DropDownMenu.svelte index 22b4ea76..982ae692 100644 --- a/packages/web/src/modals/DropDownMenu.svelte +++ b/packages/web/src/modals/DropDownMenu.svelte @@ -48,7 +48,7 @@ import clickOutside from '../utility/clickOutside'; import { createEventDispatcher } from 'svelte'; import { onMount } from 'svelte'; - import { commands } from '../stores'; + import { commands, commandsCustomized } from '../stores'; import { extractMenuItems } from '../utility/contextMenu'; export let items; @@ -70,7 +70,7 @@ }); $: extracted = extractMenuItems(items); - $: compacted = _.compact(extracted.map(x => mapItem(x, $commands))); + $: compacted = _.compact(extracted.map(x => mapItem(x, $commandsCustomized))); $: filtered = compacted.filter(x => !x.disabled || !x.hideDisabled); diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts index b847936e..d2f8f6de 100644 --- a/packages/web/src/stores.ts +++ b/packages/web/src/stores.ts @@ -41,6 +41,16 @@ export const currentTheme = writableWithStorage('theme-light', 'currentTheme'); export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid); export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)); export const recentDatabases = writableWithStorage([], 'recentDatabases'); +export const customKeyboardShortcuts = writableWithStorage({}, 'customKeyboardShortcuts'); +export const commandsCustomized = derived( + [commands, customKeyboardShortcuts], + ([$commands, $customKeyboardShortcuts]) => + _.mapValues($commands, (v, k) => ({ + // @ts-ignore + ...v, + ...$customKeyboardShortcuts[k], + })) +); export const visibleToolbar = writableWithStorage(1, 'visibleToolbar'); export const leftPanelWidth = writable(300); diff --git a/packages/web/src/tabs/CommandListTab.svelte b/packages/web/src/tabs/CommandListTab.svelte new file mode 100644 index 00000000..046dd48b --- /dev/null +++ b/packages/web/src/tabs/CommandListTab.svelte @@ -0,0 +1,35 @@ + + + + +
+ row.customKeyboardShortcut }, + { header: 'commandId', fieldName: 'id' }, + ]} + on:clickrow={e => showModal(CommandModal, { command: e.detail })} + /> +
+ + diff --git a/packages/web/src/tabs/index.js b/packages/web/src/tabs/index.js index 89e920a1..d9cc41ab 100644 --- a/packages/web/src/tabs/index.js +++ b/packages/web/src/tabs/index.js @@ -13,6 +13,7 @@ import * as MarkdownViewTab from './MarkdownViewTab.svelte'; import * as MarkdownPreviewTab from './MarkdownPreviewTab.svelte'; import * as FavoriteEditorTab from './FavoriteEditorTab.svelte'; import * as QueryDesignTab from './QueryDesignTab.svelte'; +import * as CommandListTab from './CommandListTab.svelte'; export default { TableDataTab, @@ -30,4 +31,5 @@ export default { MarkdownPreviewTab, FavoriteEditorTab, QueryDesignTab, + CommandListTab, }; diff --git a/packages/web/src/utility/openNewTab.ts b/packages/web/src/utility/openNewTab.ts index c4b45113..928afbb9 100644 --- a/packages/web/src/utility/openNewTab.ts +++ b/packages/web/src/utility/openNewTab.ts @@ -20,7 +20,6 @@ export default async function openNewTab(newTab, initialData = undefined, option let existing = null; - const { savedFile, savedFolder, savedFilePath } = newTab.props || {}; if (savedFile || savedFilePath) { existing = oldTabs.find( diff --git a/packages/web/src/widgets/ConnectionList.svelte b/packages/web/src/widgets/ConnectionList.svelte index 1aceab4e..043ec6ed 100644 --- a/packages/web/src/widgets/ConnectionList.svelte +++ b/packages/web/src/widgets/ConnectionList.svelte @@ -8,7 +8,7 @@ import AppObjectList from '../appobj/AppObjectList.svelte'; import * as connectionAppObject from '../appobj/ConnectionAppObject.svelte'; import SubDatabaseList from '../appobj/SubDatabaseList.svelte'; - import { commands, openedConnections } from '../stores'; + import { commands, commandsCustomized, openedConnections } from '../stores'; import axiosInstance from '../utility/axiosInstance'; import ToolbarButton from './ToolbarButton.svelte'; import runCommand from '../commands/runCommand'; @@ -43,7 +43,7 @@ isExpandable={data => $openedConnections.includes(data._id)} {filter} /> - {#if $connections && $connections.length == 0 && $commands['new.connection']?.enabled} + {#if $connections && $connections.length == 0 && $commandsCustomized['new.connection']?.enabled} runCommand('new.connection')}> Add new connection diff --git a/packages/web/src/widgets/Toolbar.svelte b/packages/web/src/widgets/Toolbar.svelte index a51e1f08..1b5c95d6 100644 --- a/packages/web/src/widgets/Toolbar.svelte +++ b/packages/web/src/widgets/Toolbar.svelte @@ -10,7 +10,7 @@ import _ from 'lodash'; import { openFavorite } from '../appobj/FavoriteFileAppObject.svelte'; import runCommand from '../commands/runCommand'; - import { commands } from '../stores'; + import { commands, commandsCustomized } from '../stores'; import getElectron from '../utility/getElectron'; import { useFavorites } from '../utility/metadataLoaders'; import ToolbarButton from './ToolbarButton.svelte'; @@ -20,7 +20,7 @@ $: favorites = useFavorites(); $: list = _.sortBy( - Object.values($commands).filter(x => (x.enabled || x.showDisabled) && x.toolbar && x.onClick), + Object.values($commandsCustomized).filter(x => (x.enabled || x.showDisabled) && x.toolbar && x.onClick), x => (x.toolbarOrder == null ? 100 : x.toolbarOrder) );