mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-09-11 12:25:42 +03:00
Fixing up the command palette
This commit is contained in:
parent
a48e22dd2d
commit
8b02470b9c
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user