gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-01 04:14:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

Commit palette model looks a little more modern

Browse Source
This commit is contained in:
Ian Donahue 2023-03-13 00:19:48 +01:00
parent 558bb72b20
commit 062fc665b9
3 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/lib/components/Breadcrumbs.svelte
View File

@ -12,13 +12,14 @@
</script>
<div class="flex flex-row items-center text-zinc-400">
<a class="rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200" href="/">
<a class="button-home group rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200" href="/">
<div class="flex h-4 w-4 items-center justify-center">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
class="group-hover:fill-zinc-50"
xmlns="http://www.w3.org/2000/svg"
>
<path

25
src/lib/components/CommandPalette.svelte
View File

@ -328,11 +328,13 @@
out:fade={{ duration: 100 }}
class="mx-auto max-w-2xl transform divide-y divide-zinc-500 divide-opacity-20 overflow-hidden rounded-xl bg-zinc-900 shadow-2xl transition-all border border-zinc-700"
style="
border-width: 0.5px;
-webkit-backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
background-color: rgba(24, 24, 27, 0.60);
border: 0.5px solid rgba(63, 63, 70, 0.50);"
height: auto;
max-height: 420px;
border-width: 0.5px;
-webkit-backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
background-color: rgba(24, 24, 27, 0.60);
border: 0.5px solid rgba(63, 63, 70, 0.50);"
>
<div class="relative">
<svg
@ -360,7 +362,7 @@
<!-- Default state, show/hide based on command palette state. -->
<ul
class="max-h-80 scroll-py-2 divide-y divide-zinc-500 divide-opacity-20 overflow-y-auto"
class="scroll-py-2 divide-y divide-zinc-500 divide-opacity-20 overflow-y-auto"
>
<li class="p-1">
<ul id="commandMenu" class="text-sm text-zinc-400">
@ -381,9 +383,7 @@
<svelte:component this={item.icon} />
<span class="ml-3 flex-auto truncate">{item.text}</span>
{#if item.key}
<span
class="ml-3 flex-none text-xs font-semibold text-zinc-400 px-1 py-1 bg-zinc-800 border-b border-black rounded"
>
<span class="ml-3 flex-none text-xs font-semibold text-zinc-400 px-1 py-1 bg-zinc-800 border-b border-black rounded">
<kbd class="font-sans">⌘</kbd><kbd class="font-sans">{item.key}</kbd>
</span>
{/if}
@ -405,8 +405,11 @@
bind:this={commitPalette}
class="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-zinc-900 shadow-2xl transition-all border border-zinc-700"
style="
border-width: 0.5px;
border: 0.5px solid rgba(63, 63, 70, 0.50);"
border-width: 0.5px;
border: 0.5px solid rgba(63, 63, 70, 0.50);
-webkit-backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
background-color: rgba(24, 24, 27, 0.6);
"
>
<div class="w-full border-b border-zinc-700 text-lg text-white mb-4 p-4">
Commit Your Changes

6
src/routes/projects/[projectId]/+page.svelte
View File

@ -182,10 +182,16 @@
<li class="list-disc ">
{activity.status.slice(0, 1)}
{shortPath(activity.path)}
</li>
{/each}
</ul>
</div>
<!-- TODO: Button needs to be hooked up -->
<div class="flex flex-row-reverse w-100">
<button class="button mt-2 rounded bg-blue-600 py-2 px-3 text-white">Commit changes</button>
</div>
{/if}
</div>
<div