mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-10-26 13:12:25 +03:00
cmdk
This commit is contained in:
Kiril Videlov
parent
f5ee199043
commit
bdcc39c494
@ -47,7 +47,8 @@
|
||||
"nanoid": "^4.0.1",
|
||||
"posthog-js": "^1.46.1",
|
||||
"svelte-french-toast": "^1.0.3",
|
||||
"tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log"
|
||||
"tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log",
|
||||
"tinykeys": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-static": "next",
|
||||
|
||||
@ -55,6 +55,7 @@ specifiers:
|
||||
svelte-french-toast: ^1.0.3
|
||||
tailwindcss: ^3.1.5
|
||||
tauri-plugin-log-api: github:tauri-apps/tauri-plugin-log
|
||||
tinykeys: ^1.4.0
|
||||
tslib: ^2.4.1
|
||||
typescript: ^4.8.4
|
||||
vite: ^4.0.0
|
||||
@ -95,6 +96,7 @@ dependencies:
|
||||
posthog-js: 1.46.1
|
||||
svelte-french-toast: 1.0.3_svelte@3.55.1
|
||||
tauri-plugin-log-api: github.com/tauri-apps/tauri-plugin-log/05a9bfd9edb9b5f4ab95412bb607691708b65a25
|
||||
tinykeys: 1.4.0
|
||||
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-static': 1.0.0-next.50_l5ueyfihz3gpzzvvyo2ean5u3e
|
||||
@ -2526,6 +2528,10 @@ packages:
|
||||
globrex: 0.1.2
|
||||
dev: true
|
||||
|
||||
/tinykeys/1.4.0:
|
||||
resolution: {integrity: sha512-ysnVd2E4nWbNXIbHaUidcKGLTmNimqP0hdpsD0Ph5hPJ84ntCF6PHj+Jg3im9nZt9/hNsBg/E6m1psHc2KaPnQ==}
|
||||
dev: false
|
||||
|
||||
/to-regex-range/5.0.1:
|
||||
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
|
||||
engines: {node: '>=8.0'}
|
||||
|
||||
81
src/lib/components/CommandPalette/CommandPalette.svelte
Normal file
81
src/lib/components/CommandPalette/CommandPalette.svelte
Normal file
@ -0,0 +1,81 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy, onMount, afterUpdate } from 'svelte';
|
||||
import { currentProject } from '$lib/current_project';
|
||||
import { IconCircleCancel } from '$lib/components/icons';
|
||||
import tinykeys from 'tinykeys';
|
||||
|
||||
$: scopeToProject = $currentProject ? true : false;
|
||||
|
||||
let showingCommandPalette = false;
|
||||
let dialog: HTMLDialogElement;
|
||||
let userInput: string;
|
||||
|
||||
const toggleCommandPalette = () => {
|
||||
if (dialog && dialog.open) {
|
||||
dialog.close();
|
||||
showingCommandPalette = false;
|
||||
} else {
|
||||
dialog.showModal();
|
||||
showingCommandPalette = true;
|
||||
}
|
||||
};
|
||||
|
||||
let unsubscribeKeyboardHandler: () => void;
|
||||
|
||||
onMount(() => {
|
||||
toggleCommandPalette();
|
||||
unsubscribeKeyboardHandler = tinykeys(window, {
|
||||
'Meta+k': () => {
|
||||
toggleCommandPalette();
|
||||
},
|
||||
Backspace: () => {
|
||||
if (!userInput) {
|
||||
scopeToProject = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribeKeyboardHandler?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<dialog
|
||||
class="rounded-lg
|
||||
border border-zinc-400/40
|
||||
bg-zinc-900/70 p-0 backdrop-blur-xl
|
||||
"
|
||||
bind:this={dialog}
|
||||
on:click|self={() => toggleCommandPalette()}
|
||||
>
|
||||
<div class="min-h-[640px] w-[640px] rounded text-zinc-400" on:click|stopPropagation>
|
||||
<!-- Search input area -->
|
||||
<div class="flex h-14 items-center border-b border-zinc-400/20">
|
||||
<div class="ml-4 flex flex-grow items-center">
|
||||
<!-- Project scope -->
|
||||
{#if scopeToProject}
|
||||
<div class="flex items-center">
|
||||
<span class="font-semibold text-zinc-300">{$currentProject?.title}</span>
|
||||
<span class="ml-1 text-lg">/</span>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Search input -->
|
||||
<div class="mx-1 flex-grow">
|
||||
<input
|
||||
class="w-full bg-transparent text-zinc-300 focus:outline-none"
|
||||
bind:value={userInput}
|
||||
type="text"
|
||||
placeholder={scopeToProject
|
||||
? 'Search for commands, files and code changes...'
|
||||
: 'Search for projects'}
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-4 text-red-50">
|
||||
<IconCircleCancel class="fill-zinc-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
3
src/lib/components/CommandPalette/index.ts
Normal file
3
src/lib/components/CommandPalette/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { default as CommandPaletteNext } from './CommandPalette.svelte';
|
||||
|
||||
export default CommandPaletteNext;
|
||||
14
src/lib/components/icons/IconCircleCancel.svelte
Normal file
14
src/lib/components/icons/IconCircleCancel.svelte
Normal file
@ -0,0 +1,14 @@
|
||||
<svg
|
||||
{...$$restProps}
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M0 10C0 4.486 4.486 0 10 0C15.514 0 20 4.486 20 10C20 15.514 15.514 20 10 20C4.486 20 0 15.514 0 10ZM7.70711 6.29289C7.31658 5.90237 6.68342 5.90237 6.29289 6.29289C5.90237 6.68342 5.90237 7.31658 6.29289 7.70711L8.58579 10L6.29289 12.2929C5.90237 12.6834 5.90237 13.3166 6.29289 13.7071C6.68342 14.0976 7.31658 14.0976 7.70711 13.7071L10 11.4142L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L11.4142 10L13.7071 7.70711C14.0976 7.31658 14.0976 6.68342 13.7071 6.29289C13.3166 5.90237 12.6834 5.90237 12.2929 6.29289L10 8.58579L7.70711 6.29289Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 806 B |
@ -13,3 +13,4 @@ export { default as IconCircleHalf } from './IconCircleHalf.svelte';
|
||||
export { default as IconSquareRoundedFilled } from './IconSquareRoundedFilled.svelte';
|
||||
export { default as IconMapPinFilled } from './IconMapPinFilled.svelte';
|
||||
export { default as IconCircleFilled } from './IconCircleFilled.svelte';
|
||||
export { default as IconCircleCancel } from './IconCircleCancel.svelte';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user