mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-10-26 21:19:52 +03:00
Double click branch icon to maximize lane
This is an exploration of easy access to a more detailed view. Limiting to 8 diff rows when full width.
This commit is contained in:
parent
e06211b2d5
commit
a6dddb3a32
@ -39,7 +39,7 @@
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
id="branch-lanes"
|
id="branch-lanes"
|
||||||
class="flex max-w-full flex-shrink flex-grow items-start overflow-x-auto overflow-y-hidden bg-light-200 px-2 dark:bg-dark-1000"
|
class="flex max-w-full flex-shrink flex-grow snap-x items-start overflow-x-auto overflow-y-hidden bg-light-200 px-2 dark:bg-dark-1000"
|
||||||
use:dndzone={{
|
use:dndzone={{
|
||||||
items: branches,
|
items: branches,
|
||||||
types: ['branch'],
|
types: ['branch'],
|
||||||
|
@ -34,6 +34,7 @@
|
|||||||
$: localCommits = commits.filter((c) => !c.isRemote);
|
$: localCommits = commits.filter((c) => !c.isRemote);
|
||||||
|
|
||||||
let allExpanded: boolean | undefined;
|
let allExpanded: boolean | undefined;
|
||||||
|
let maximized = false;
|
||||||
let descriptionHeight = 0;
|
let descriptionHeight = 0;
|
||||||
let textArea: HTMLTextAreaElement;
|
let textArea: HTMLTextAreaElement;
|
||||||
let isPushing = false;
|
let isPushing = false;
|
||||||
@ -144,12 +145,17 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="flex max-h-full w-[22.5rem] shrink-0 flex-col overflow-y-auto py-2 px-3 dark:text-dark-100"
|
class="flex max-h-full min-w-[24rem] max-w-[120ch] shrink-0 snap-center flex-col overflow-y-auto py-2 px-3 transition-width dark:text-dark-100"
|
||||||
|
class:w-full={maximized}
|
||||||
|
class:w-96={!maximized}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="mb-2 flex w-full shrink-0 items-center gap-x-2 rounded-lg bg-light-200 text-lg font-bold text-light-900 dark:bg-dark-1000 dark:font-normal dark:text-dark-100"
|
class="mb-2 flex w-full shrink-0 items-center gap-x-2 rounded-lg bg-light-200 text-lg font-bold text-light-900 dark:bg-dark-1000 dark:font-normal dark:text-dark-100"
|
||||||
>
|
>
|
||||||
<div class="flex-grow-0 text-light-600 dark:text-dark-200">
|
<div
|
||||||
|
on:dblclick={() => (maximized = !maximized)}
|
||||||
|
class="flex-grow-0 cursor-pointer text-light-600 dark:text-dark-200"
|
||||||
|
>
|
||||||
<IconBranch />
|
<IconBranch />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-grow">
|
<div class="flex-grow">
|
||||||
@ -229,6 +235,7 @@
|
|||||||
filepath={file.path}
|
filepath={file.path}
|
||||||
expanded={file.expanded}
|
expanded={file.expanded}
|
||||||
hunks={file.hunks}
|
hunks={file.hunks}
|
||||||
|
{maximized}
|
||||||
on:update={(e) => {
|
on:update={(e) => {
|
||||||
handleFileUpdate(file.id, e.detail);
|
handleFileUpdate(file.id, e.detail);
|
||||||
}}
|
}}
|
||||||
|
@ -14,6 +14,7 @@
|
|||||||
export let projectPath: string;
|
export let projectPath: string;
|
||||||
export let filepath: string;
|
export let filepath: string;
|
||||||
export let hunks: Hunk[];
|
export let hunks: Hunk[];
|
||||||
|
export let maximized: boolean;
|
||||||
|
|
||||||
const dispatch = createEventDispatcher<{
|
const dispatch = createEventDispatcher<{
|
||||||
expanded: boolean;
|
expanded: boolean;
|
||||||
@ -89,7 +90,7 @@
|
|||||||
{#if expanded}
|
{#if expanded}
|
||||||
{#each hunks || [] as hunk (hunk.id)}
|
{#each hunks || [] as hunk (hunk.id)}
|
||||||
<div
|
<div
|
||||||
class="changed-hunk flex w-full flex-col gap-1 rounded-lg border border-light-200 bg-white dark:border-dark-400 dark:bg-dark-900"
|
class="changed-hunk flex w-full flex-col rounded-lg border border-light-200 bg-white dark:border-dark-400 dark:bg-dark-900"
|
||||||
on:contextmenu|preventDefault={(e) => popupMenu.openByMouse(e, hunk)}
|
on:contextmenu|preventDefault={(e) => popupMenu.openByMouse(e, hunk)}
|
||||||
>
|
>
|
||||||
<div class="truncate whitespace-normal p-2">
|
<div class="truncate whitespace-normal p-2">
|
||||||
@ -99,9 +100,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="cursor-pointer overflow-clip text-sm">
|
<div class="cursor-pointer overflow-clip text-sm">
|
||||||
<!-- Disabling syntax highlighting for performance reasons -->
|
<!-- Disabling syntax highlighting for performance reasons -->
|
||||||
<HunkDiffViewer diff={hunk.diff} filePath="foo" linesShown={2} />
|
<HunkDiffViewer diff={hunk.diff} filePath="foo" linesShown={maximized ? 8 : 2} />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex p-2 text-sm">
|
<div class="flex px-2 py-1 text-sm">
|
||||||
<div class="flex flex-grow gap-1">
|
<div class="flex flex-grow gap-1">
|
||||||
<div class="text-green-600">+{hunkSize(hunk.diff)[0]}</div>
|
<div class="text-green-600">+{hunkSize(hunk.diff)[0]}</div>
|
||||||
{#if hunkSize(hunk.diff)[1] > 0}
|
{#if hunkSize(hunk.diff)[1] > 0}
|
||||||
|
@ -115,7 +115,7 @@
|
|||||||
{curNumber}
|
{curNumber}
|
||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
class="pl-1 diff-line-{row.type} overflow-hidden text-ellipsis whitespace-nowrap"
|
class="pl-1 diff-line-{row.type} overflow-hidden whitespace-nowrap"
|
||||||
class:line-changed={row.type === RowType.Addition || row.type === RowType.Deletion}
|
class:line-changed={row.type === RowType.Addition || row.type === RowType.Deletion}
|
||||||
>
|
>
|
||||||
{#each row.render.html as content}
|
{#each row.render.html as content}
|
||||||
|
@ -6,6 +6,11 @@ const config = {
|
|||||||
backgroundOpacity: false
|
backgroundOpacity: false
|
||||||
},
|
},
|
||||||
theme: {
|
theme: {
|
||||||
|
extend: {
|
||||||
|
transitionProperty: {
|
||||||
|
width: 'width'
|
||||||
|
}
|
||||||
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
sans: ['Inter', 'SF Pro', '-apple-system', 'system-ui'],
|
sans: ['Inter', 'SF Pro', '-apple-system', 'system-ui'],
|
||||||
mono: ['SF Mono', 'Consolas', 'Liberation Mono', 'monospace']
|
mono: ['SF Mono', 'Consolas', 'Liberation Mono', 'monospace']
|
||||||
|
Loading…
Reference in New Issue
Block a user