mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-12-24 18:12:48 +03:00
Merge pull request #191 from gitbutlerapp/ian/prettify-2023-04-17-1437
Ian/prettify 2023 04 17 1437
This commit is contained in:
Ian Donahue
GitHub
commit
3b01711536
@ -1,3 +1,9 @@
|
||||
.lineContext,
|
||||
.lineSplit,
|
||||
.lineDiff {
|
||||
@apply pl-2 pr-2;
|
||||
}
|
||||
|
||||
.diff-line-marker-addition,
|
||||
.diff-line-addition {
|
||||
--override-addition-background-color: hsl(144deg 55% 49% / 20%);
|
||||
@ -7,19 +13,19 @@
|
||||
|
||||
.diff-line-marker-deletion,
|
||||
.diff-line-deletion {
|
||||
--override-deletion-background-color: rgb(255 0 0 / 20%);
|
||||
--override-deletion-background-color: rgba(220, 38, 38, 0.2);
|
||||
|
||||
background-color: var(--override-deletion-background-color);
|
||||
}
|
||||
|
||||
.diff-line-addition .inner-diff {
|
||||
--override-addition-inner-diff-background-color: hsl(144deg 55% 49% / 30%);
|
||||
|
||||
--override-addition-inner-diff-background-color: hsl(144deg 55% 49% / 60%);
|
||||
color: white;
|
||||
background-color: var(--override-addition-inner-diff-background-color);
|
||||
}
|
||||
|
||||
.diff-line-deletion .inner-diff {
|
||||
--override-deletion-inner-diff-background-color: rgb(255 0 0 / 30%);
|
||||
--override-deletion-inner-diff-background-color: rgba(220, 38, 38, 0.3);
|
||||
|
||||
background-color: var(--override-deletion-inner-diff-background-color);
|
||||
}
|
||||
|
||||
@ -29,19 +29,20 @@
|
||||
|
||||
let diffLines = middleDiff.split('<br>');
|
||||
diffLines.forEach((line, index) => {
|
||||
lineClass = 'lineContext bg-zinc-800';
|
||||
lineClass = 'lineContext ';
|
||||
let firstChar = line.replace(htmlTagRegex, '').slice(0, 1);
|
||||
if (index < 4) {
|
||||
lineClass = 'lineDiff bg-zinc-900 text-zinc-500';
|
||||
lineClass = 'lineDiff bg-zinc-800 text-zinc-500';
|
||||
} else if (line.slice(0, 2) == '@@') {
|
||||
lineClass = 'lineSplit bg-blue-900';
|
||||
lineClass =
|
||||
'lineSplit bg-zinc-900 bg-opacity-60 pt-1 pb-1 border-t border-b border-zinc-700 mt-1 mb-1';
|
||||
} else if (firstChar == '+') {
|
||||
if (!line.includes('+++')) {
|
||||
lineClass = 'lineSplit bg-green-900';
|
||||
lineClass = 'lineSplit bg-green-500 bg-opacity-20';
|
||||
}
|
||||
} else if (firstChar == '-') {
|
||||
if (!line.includes('---')) {
|
||||
lineClass = 'lineSplit bg-red-900';
|
||||
lineClass = 'lineSplit bg-red-600 bg-opacity-20';
|
||||
}
|
||||
}
|
||||
currentDiff += `<div class="${lineClass}">`;
|
||||
|
||||
@ -59,26 +59,7 @@
|
||||
</script>
|
||||
|
||||
<div id="project-overview" class="flex h-full w-full">
|
||||
<div class="flex w-2/3 flex-col gap-4">
|
||||
<h1 class="flex px-8 pt-4 text-xl text-zinc-300">
|
||||
<span>{$project?.title}</span>
|
||||
<span class="ml-2 text-zinc-600">Project</span>
|
||||
</h1>
|
||||
|
||||
<h2 class="px-8 text-lg font-bold text-zinc-300">Recently changed files</h2>
|
||||
|
||||
<ul class="mr-1 flex flex-col space-y-4 overflow-y-auto pl-8 pr-5 pb-8">
|
||||
{#await fileDeltas.load()}
|
||||
<li>
|
||||
<IconRotateClockwise class="animate-spin" />
|
||||
</li>
|
||||
{:then}
|
||||
<FileSummaries projectId={$project?.id} fileDeltas={$fileDeltas} />
|
||||
{/await}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="work-in-progress-sidebar flex w-1/3 flex-col border-l border-l-zinc-700">
|
||||
<div class="work-in-progress-sidebar side-panel flex w-1/3 flex-col border-r border-zinc-700">
|
||||
<div class="recent-changes flex flex-col gap-4 border-b border-b-zinc-700 p-4">
|
||||
<h2 class="text-lg font-bold text-zinc-300">Work in Progress</h2>
|
||||
|
||||
@ -162,4 +143,23 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-2/3 flex-col gap-4">
|
||||
<h1 class="flex px-8 pt-4 text-xl text-zinc-300">
|
||||
<span>{$project?.title}</span>
|
||||
<span class="ml-2 text-zinc-600">Project</span>
|
||||
</h1>
|
||||
|
||||
<h2 class="px-8 text-lg font-bold text-zinc-300">Recently changed files</h2>
|
||||
|
||||
<ul class="mr-1 flex flex-col space-y-4 overflow-y-auto pl-8 pr-5 pb-8">
|
||||
{#await fileDeltas.load()}
|
||||
<li>
|
||||
<IconRotateClockwise class="animate-spin" />
|
||||
</li>
|
||||
{:then}
|
||||
<FileSummaries projectId={$project?.id} fileDeltas={$fileDeltas} />
|
||||
{/await}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
style="
|
||||
height: {Math.round((bucket.length / largestBucketSize) * 100)}%;
|
||||
background: #3b82f6;
|
||||
background: linear-gradient(0deg, #3b82f6 0%, #eab308 {100 -
|
||||
background: linear-gradient(0deg, #3b82f6 0%, #9565FF {100 -
|
||||
Math.round((bucket.length / largestBucketSize) * 100) +
|
||||
100}%);
|
||||
"
|
||||
|
||||
@ -194,8 +194,8 @@
|
||||
<h1 class="px-2 py-1 text-xl font-bold">Commit</h1>
|
||||
|
||||
<form on:submit|preventDefault={onCommit} class="flex w-1/3 min-w-[500px] flex-col gap-4">
|
||||
<ul class="flex w-full flex-col rounded border border-gb-700 bg-card-default pb-1">
|
||||
<header class="flex w-full items-center bg-card-active p-2">
|
||||
<ul class="flex w-full flex-col rounded border border-gb-700 bg-card-default pb-1">
|
||||
<header class="flex w-full items-center rounded-tl rounded-tr bg-card-active p-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="h-[15px] w-[15px] cursor-default disabled:opacity-50"
|
||||
@ -345,7 +345,7 @@
|
||||
|
||||
<div
|
||||
id="preview"
|
||||
class="m-4 flex flex-auto cursor-text select-text overflow-auto rounded border border-gb-700 bg-card-default p-4"
|
||||
class="m-4 flex flex-auto cursor-text select-text overflow-auto rounded border border-gb-700 bg-card-default"
|
||||
>
|
||||
{#if $selectedDiffPath !== undefined}
|
||||
{#if $selectedDiff !== undefined}
|
||||
|
||||
@ -505,7 +505,10 @@
|
||||
</label>
|
||||
</button>
|
||||
{#if !fullContext}
|
||||
<input type="number" bind:value={context} class="w-14 rounded py-1 pl-2 pr-1" />
|
||||
<div class="hunk-controller-container flex items-center gap-2">
|
||||
<p>Context:</p>
|
||||
<input type="number" bind:value={context} class="w-14 rounded py-1 pl-2 pr-1" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -193,9 +193,9 @@
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<footer>
|
||||
<footer class="flex justify-end">
|
||||
<Button disabled={!canTriggerUpdate} loading={saving} role="primary" type="submit"
|
||||
>Update profile</Button
|
||||
>Update project</Button
|
||||
>
|
||||
</footer>
|
||||
</form>
|
||||
|
||||
@ -32,23 +32,16 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="terminal-page flex flex h-full w-full flex-row">
|
||||
<div class="main-content h-full w-2/3">
|
||||
<div class="flex h-full w-full flex-row">
|
||||
<div class="h-full w-full" use:terminal={{ project: $project }} />
|
||||
<ResizeObserver on:resize={handleTerminalResize} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-panel h-full w-1/3 p-2">
|
||||
<h2 class="p-2 pb-4 text-lg font-bold text-zinc-300">Git Status</h2>
|
||||
<div class="terminal-page flex h-full w-full flex-row">
|
||||
<div class="side-panel h-full w-1/3 p-4">
|
||||
<h2 class="pb-4 text-lg font-bold text-zinc-300">Git Status</h2>
|
||||
{#if $statuses.length == 0}
|
||||
<div class="rounded border border-green-400 bg-green-600 p-2 font-mono text-green-900">
|
||||
No changes
|
||||
</div>
|
||||
{:else}
|
||||
<ul
|
||||
class="mx-2 rounded border border-yellow-400 bg-yellow-500 p-2 font-mono text-sm text-yellow-900"
|
||||
class="rounded border border-yellow-400 bg-yellow-500 p-2 font-mono text-sm text-yellow-900"
|
||||
>
|
||||
{#each $statuses as activity}
|
||||
<li class="flex w-full gap-2">
|
||||
@ -62,11 +55,18 @@
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
<div class="mt-4 p-2 font-bold">Commands</div>
|
||||
<ul class="px-2 ">
|
||||
<div class="mt-4 font-bold">Commands</div>
|
||||
<ul class="py-2">
|
||||
<Button role="primary" width="full-width" on:click={() => runCommand('git push')}>
|
||||
Push Commit
|
||||
</Button>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="main-content h-full w-2/3">
|
||||
<div class="flex h-full w-full flex-row">
|
||||
<div class="h-full w-full" use:terminal={{ project: $project }} />
|
||||
<ResizeObserver on:resize={handleTerminalResize} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -55,12 +55,14 @@ const config = {
|
||||
900: '#713f12'
|
||||
},
|
||||
red: {
|
||||
500: '#ef4444',
|
||||
600: '#dc2626',
|
||||
700: '#b91c1c',
|
||||
900: '#7c2d12'
|
||||
},
|
||||
green: {
|
||||
400: '#4ade80',
|
||||
500: '#22c55e',
|
||||
600: '#16a34a',
|
||||
700: '#15803d',
|
||||
900: '#14532d'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user