Some visual updates to the commit page’s changed file section

This commit is contained in:
Ian Donahue 2023-03-28 17:55:46 +02:00
parent 4ce203b355
commit b2f5f28d93

View File

@ -193,13 +193,25 @@
class="changed-files-list flex flex-col rounded border border-[0.5px] border-gb-700 bg-gb-900 font-mono text-zinc-900"
>
<div
class="mb-2 flex flex-row space-x-2 rounded-t border-b border-b-gb-750 bg-gb-800 p-2 text-zinc-200"
class="flex flex-row space-x-2 justify-between rounded-t border-b border-b-gb-750 bg-gb-800 p-2 text-zinc-200"
>
<h3 class="text-base font-semibold ">File Changes</h3>
<button class="text-yellow-200" on:click={toggleAllOn}>all</button>
<button class="text-yellow-200" on:click={toggleAllOff}>none</button>
<h3 class="text-base font-semibold">Changed files</h3>
<div>
<button
title="Select all"
class="text-yellow-200"
on:click={toggleAllOn}>
all
</button>
<button
title="Deselect all"
class="text-yellow-200"
on:click={toggleAllOff}>
none
</button>
</div>
<ul class="truncate px-2 pb-2">
</div>
<ul class="truncate px-2 py-2 min-h-[35px]">
{#each $filesStatus as activity}
<li class="list-none text-zinc-300">
<div class="flex flex-row align-middle">
@ -212,7 +224,8 @@
/>
<div class="w-4">{activity.status.slice(0, 1)}</div>
<button
class="w-[100%] cursor-pointer truncate {currentPath == activity.path
title="{activity.path}"
class="text-left w-[100%] cursor-pointer truncate {currentPath == activity.path
? 'text-white'
: ''}"
on:click={() => selectPath(activity.path)}
@ -260,10 +273,13 @@
>
{/if}
{#if !generatedMessage}
<a
title="Generate commit message"
class="cursor-pointer rounded bg-green-800 bg-gradient-to-b from-[#623871] to-[#502E5C] p-2 text-zinc-50 shadow"
on:click={fetchCommitMessage}>✨ Generate commit message</a
>
on:click={fetchCommitMessage}>
✨ Generate commit message
</a>
{:else if generatedMessage == 'loading'}
<div class="flex flex-col">
<div class="text-zinc-400">Let me take a look at these changes...</div>
@ -283,7 +299,8 @@
<DiffViewer diff={currentDiff} path={currentPath} />
{:else if fileContents}
<pre
class={fileContentsStatus == 'added' ? 'bg-green-900' : 'bg-red-900'}>{fileContents}</pre>
class={fileContentsStatus == 'added' ? 'bg-green-900' : 'bg-red-900'}>{fileContents}
</pre>
{:else}
<div class="p-20 text-center text-lg text-zinc-400">Select a file to view changes.</div>
{/if}