+
@@ -22,6 +23,11 @@ import TabContent from './TabContent.svelte';
+ {#if $visibleCommandPalette}
+
+
+
+ {/if}
diff --git a/packages/web/src/commands/CommandPalette.svelte b/packages/web/src/commands/CommandPalette.svelte
new file mode 100644
index 00000000..a5c94634
--- /dev/null
+++ b/packages/web/src/commands/CommandPalette.svelte
@@ -0,0 +1,84 @@
+
+
+
+
+
($visibleCommandPalette = false)}>
+
+
+
+ {#each filteredItems as command, index}
+
handleCommand(command)}>
+ {command.text}
+
+ {/each}
+
+
+
diff --git a/packages/web/src/commands/registerCommand.ts b/packages/web/src/commands/registerCommand.ts
new file mode 100644
index 00000000..90cca00f
--- /dev/null
+++ b/packages/web/src/commands/registerCommand.ts
@@ -0,0 +1,39 @@
+import { commands } from '../stores';
+
+export interface SubCommand {
+ text: string;
+ onClick: Function;
+}
+
+export interface GlobalCommand {
+ id: string;
+ text: string;
+ getSubCommands?: () => SubCommand[];
+ onClick?: Function;
+ enabledStore?: any;
+ icon?: string;
+ toolbar?: boolean;
+ enabled?: boolean;
+}
+
+export default function registerCommand(command: GlobalCommand) {
+ const { enabledStore } = command;
+ commands.update(x => ({
+ ...x,
+ [command.id]: {
+ ...command,
+ enabled: !enabledStore,
+ },
+ }));
+ if (enabledStore) {
+ enabledStore.subscribe(value => {
+ commands.update(x => ({
+ ...x,
+ [command.id]: {
+ ...x[command.id],
+ enabled: value,
+ },
+ }));
+ });
+ }
+}
diff --git a/packages/web/src/commands/runCommand.ts b/packages/web/src/commands/runCommand.ts
new file mode 100644
index 00000000..26251c21
--- /dev/null
+++ b/packages/web/src/commands/runCommand.ts
@@ -0,0 +1,9 @@
+import { get } from 'svelte/store';
+import { commands } from '../stores';
+import { GlobalCommand } from './registerCommand';
+
+export default function runCommand(commandId: string) {
+ const commandsValue = get(commands);
+ const command: GlobalCommand = commandsValue[commandId];
+ if (command.enabled) command.onClick();
+}
diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts
new file mode 100644
index 00000000..a145d8f9
--- /dev/null
+++ b/packages/web/src/commands/stdCommands.ts
@@ -0,0 +1,17 @@
+import { currentTheme } from '../stores';
+import registerCommand from './registerCommand';
+
+registerCommand({
+ id: 'theme.changeTheme',
+ text: 'Theme: Change',
+ getSubCommands: () => [
+ {
+ text: 'Light',
+ onClick: () => currentTheme.set('theme-light'),
+ },
+ {
+ text: 'Dark',
+ onClick: () => currentTheme.set('theme-dark'),
+ },
+ ],
+});
diff --git a/packages/web/src/main.ts b/packages/web/src/main.ts
index 4d5a7685..9f4a3a23 100644
--- a/packages/web/src/main.ts
+++ b/packages/web/src/main.ts
@@ -1,5 +1,6 @@
import App from './App.svelte';
import './utility/connectionsPinger';
+import './commands/stdCommands';
const app = new App({
target: document.body,
diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index 15f9e542..895f5081 100644
--- a/packages/web/src/stores.ts
+++ b/packages/web/src/stores.ts
@@ -25,5 +25,8 @@ export const openedConnections = writable([]);
export const currentDatabase = writable(null);
export const openedTabs = writableWithStorage
([], 'openedTabs');
export const extensions = writable(null);
+export const visibleCommandPalette = writable(false);
+export const commands = writable({});
+export const currentTheme = writableWithStorage('theme-light', 'currentTheme');
// export const leftPanelWidth = writable(300);
diff --git a/packages/web/src/utility/clickOutside.ts b/packages/web/src/utility/clickOutside.ts
new file mode 100644
index 00000000..0e694f06
--- /dev/null
+++ b/packages/web/src/utility/clickOutside.ts
@@ -0,0 +1,15 @@
+export function clickOutside(node) {
+ const handleClick = event => {
+ if (node && !node.contains(event.target) && !event.defaultPrevented) {
+ node.dispatchEvent(new CustomEvent('clickOutside', node));
+ }
+ };
+
+ document.addEventListener('click', handleClick, true);
+
+ return {
+ destroy() {
+ document.removeEventListener('click', handleClick, true);
+ },
+ };
+}
diff --git a/packages/web/src/utility/keycodes.js b/packages/web/src/utility/keycodes.js
new file mode 100644
index 00000000..4c02d1af
--- /dev/null
+++ b/packages/web/src/utility/keycodes.js
@@ -0,0 +1,99 @@
+export default {
+ backspace: 8,
+ tab: 9,
+ enter: 13,
+ shift: 16,
+ ctrl: 17,
+ alt: 18,
+ pauseBreak: 19,
+ capsLock: 20,
+ escape: 27,
+ pageUp: 33,
+ pageDown: 34,
+ end: 35,
+ home: 36,
+ leftArrow: 37,
+ upArrow: 38,
+ rightArrow: 39,
+ downArrow: 40,
+ insert: 45,
+ delete: 46,
+ n0: 48,
+ n1: 49,
+ n2: 50,
+ n3: 51,
+ n4: 52,
+ n5: 53,
+ n6: 54,
+ n7: 55,
+ n8: 56,
+ n9: 57,
+ a: 65,
+ b: 66,
+ c: 67,
+ d: 68,
+ e: 69,
+ f: 70,
+ g: 71,
+ h: 72,
+ i: 73,
+ j: 74,
+ k: 75,
+ l: 76,
+ m: 77,
+ n: 78,
+ o: 79,
+ p: 80,
+ q: 81,
+ r: 82,
+ s: 83,
+ t: 84,
+ u: 85,
+ v: 86,
+ w: 87,
+ x: 88,
+ y: 89,
+ z: 90,
+ leftWindowKey: 91,
+ rightWindowKey: 92,
+ selectKey: 93,
+ numPad0: 96,
+ numPad1: 97,
+ numPad2: 98,
+ numPad3: 99,
+ numPad4: 100,
+ numPad5: 101,
+ numPad6: 102,
+ numPad7: 103,
+ numPad8: 104,
+ numPad9: 105,
+ multiply: 106,
+ add: 107,
+ subtract: 109,
+ decimalPoint: 110,
+ divide: 111,
+ f1: 112,
+ f2: 113,
+ f3: 114,
+ f4: 115,
+ f5: 116,
+ f6: 117,
+ f7: 118,
+ f8: 119,
+ f9: 120,
+ f10: 121,
+ f12: 123,
+ numLock: 144,
+ scrollLock: 145,
+ semiColon: 186,
+ equalSign: 187,
+ comma: 188,
+ dash: 189,
+ period: 190,
+ forwardSlash: 191,
+ graveAccent: 192,
+ openBracket: 219,
+ backSlash: 220,
+ closeBracket: 221,
+ singleQuote: 222,
+};
diff --git a/packages/web/src/widgets/WidgetIconPanel.svelte b/packages/web/src/widgets/WidgetIconPanel.svelte
index 19415f4a..0a6be95a 100644
--- a/packages/web/src/widgets/WidgetIconPanel.svelte
+++ b/packages/web/src/widgets/WidgetIconPanel.svelte
@@ -1,6 +1,6 @@
+ ($visibleCommandPalette = true)}>
+
+
{#each widgets as item}
handleChangeWidget(item.name)}>
diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json
index 265a2590..e7506e66 100644
--- a/packages/web/tsconfig.json
+++ b/packages/web/tsconfig.json
@@ -5,6 +5,7 @@
"exclude": ["node_modules/*", "public/*"],
"compilerOptions": {
+ "moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"skipLibCheck": true,