gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-18 06:22:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixing up the command palette

Browse Source
This commit is contained in:
Ian Donahue 2023-03-31 17:45:59 +02:00
parent a48e22dd2d
commit 8b02470b9c
5 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.postcss
View File

@ -56,7 +56,7 @@ button {
/* COMMAND PALETTE */
.result-section-header {
.commnand-palette-section-header {
@apply mx-2 mb-2 mt-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300;
}

6
src/lib/components/CommandPalette/CmdK.svelte
View File

@ -214,11 +214,11 @@
</div>
</div>
<!-- Main part -->
<div class="search-results flex-auto overflow-y-auto">
<div class="command-pallete-content-container flex-auto overflow-y-auto pb-2">
{#each commandGroups as group, groupIdx}
{#if group.visible}
<div class="mx-2 cursor-default select-none">
<p class="result-section-header">
<div class="px-2 cursor-default select-none w-full">
<p class="commnand-palette-section-header result-section-header">
<span>{group.name}</span>
{#if group.description}
<span class="ml-2 font-light italic text-zinc-300/70">({group.description})</span>

2
src/lib/components/CommandPalette/Commit.svelte
View File

@ -83,7 +83,7 @@
</script>
<Modal on:close bind:this={modal}>
<form class="flex flex-col gap-4 rounded p-4" on:submit|preventDefault={onCommit}>
<form class="command-palette-commit flex flex-col gap-4 rounded p-4 w-full" on:submit|preventDefault={onCommit}>
<header class="w-full border-b border-zinc-700 text-lg font-semibold text-white">
Commit Your Changes
</header>

12
src/lib/components/CommandPalette/Replay.svelte
View File

@ -75,9 +75,9 @@
</script>
<Modal on:close bind:this={modal}>
<div class="mx-2 cursor-default select-none">
<p class="mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300">
Replay working history from...
<div class="w-full mx-2 mb-2 cursor-default select-none">
<p class="commnand-palette-section-header mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300">
Replay working history
</p>
<ul class="quick-command-list">
@ -91,6 +91,12 @@
: ''} quick-command-item flex cursor-default items-center"
href="/"
>
<span class="command-palette-icon icon-replay">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.35741 9.89998L8.89997 13.6466L8.89997 6.15333L4.35741 9.89998ZM2.93531 9.12852C2.45036 9.52851 2.45036 10.2715 2.93531 10.6714L8.76369 15.4786C9.41593 16.0166 10.4 15.5526 10.4 14.7071L10.4 5.09281C10.4 4.24735 9.41592 3.7834 8.76368 4.32136L2.93531 9.12852Z" fill="#71717A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1633 9.89999L15.7 13.3032L15.7 6.49683L12.1633 9.89999ZM10.7488 9.17942C10.34 9.57282 10.34 10.2272 10.7488 10.6206L15.5066 15.1987C16.1419 15.8101 17.2 15.3598 17.2 14.4782L17.2 5.32182C17.2 4.44016 16.1419 3.98992 15.5066 4.60124L10.7488 9.17942Z" fill="#71717A"/>
</svg>
</span>
<span class="quick-command flex-grow">{listItem.label}</span>
<span class="quick-command-key">{idx + 1}</span>
</a>

6
src/lib/components/Modal.svelte
View File

@ -26,7 +26,7 @@ It does minimal styling. A close event is fired when the modal is closed.
<!-- svelte-ignore a11y-click-events-have-key-events -->
<dialog
class="modal flex p-0 shadow-lg"
class="modal "
in:scale={{ duration: 150 }}
bind:this={dialog}
on:click|self={hide}
@ -37,9 +37,7 @@ It does minimal styling. A close event is fired when the modal is closed.
<style>
.modal {
background: rgba(60, 60, 68, 0.6);
border: 1px solid rgba(63, 63, 63, 0.5);
@apply w-[640px] flex p-0 shadow-lg overflow-hidden rounded-lg border-[0.5px] border-[#3F3F3f] bg-zinc-900/70 p-0 shadow-lg ;
backdrop-filter: blur(10px);
border-radius: 8px;
}
</style>