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" class="changed-files-list flex flex-col rounded border border-[0.5px] border-gb-700 bg-gb-900 font-mono text-zinc-900"
> >
<div <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> <h3 class="text-base font-semibold">Changed files</h3>
<button class="text-yellow-200" on:click={toggleAllOn}>all</button> <div>
<button class="text-yellow-200" on:click={toggleAllOff}>none</button> <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>
</div> </div>
<ul class="truncate px-2 pb-2"> <ul class="truncate px-2 py-2 min-h-[35px]">
{#each $filesStatus as activity} {#each $filesStatus as activity}
<li class="list-none text-zinc-300"> <li class="list-none text-zinc-300">
<div class="flex flex-row align-middle"> <div class="flex flex-row align-middle">
@ -212,7 +224,8 @@
/> />
<div class="w-4">{activity.status.slice(0, 1)}</div> <div class="w-4">{activity.status.slice(0, 1)}</div>
<button <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' ? 'text-white'
: ''}" : ''}"
on:click={() => selectPath(activity.path)} on:click={() => selectPath(activity.path)}
@ -260,10 +273,13 @@
> >
{/if} {/if}
{#if !generatedMessage} {#if !generatedMessage}
<a <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" 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'} {:else if generatedMessage == 'loading'}
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-zinc-400">Let me take a look at these changes...</div> <div class="text-zinc-400">Let me take a look at these changes...</div>
@ -283,7 +299,8 @@
<DiffViewer diff={currentDiff} path={currentPath} /> <DiffViewer diff={currentDiff} path={currentPath} />
{:else if fileContents} {:else if fileContents}
<pre <pre
class={fileContentsStatus == 'added' ? 'bg-green-900' : 'bg-red-900'}>{fileContents}</pre> class={fileContentsStatus == 'added' ? 'bg-green-900' : 'bg-red-900'}>{fileContents}
</pre>
{:else} {:else}
<div class="p-20 text-center text-lg text-zinc-400">Select a file to view changes.</div> <div class="p-20 text-center text-lg text-zinc-400">Select a file to view changes.</div>
{/if} {/if}