From 690ef6babcc1f0212cb85e27a41f489a44b3afba Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Fri, 8 Mar 2024 00:57:30 +0100 Subject: [PATCH 1/9] refactor: Remove unused code and update styles for scrollbar - fixed horizontal mode - Removed `alwaysVisible`, `margin`, `opacity` variables as they are no longer needed. - Updated `thickness` variable to use CSS custom property. - Refactored styles for scrollbar track and thumb elements to improve visibility and responsiveness. - Added event listeners for mouse enter and leave on viewport to control visibility based on hover state. --- .../src/lib/components/HunkViewer.svelte | 103 ++++++++++-------- .../src/lib/components/Navigation.svelte | 1 - .../lib/components/ScrollableContainer.svelte | 2 +- .../src/lib/components/Scrollbar.svelte | 94 +++++++++++----- .../src/routes/[projectId]/board/+page.svelte | 15 ++- gitbutler-ui/src/styles/main.postcss | 31 ------ 6 files changed, 143 insertions(+), 103 deletions(-) diff --git a/gitbutler-ui/src/lib/components/HunkViewer.svelte b/gitbutler-ui/src/lib/components/HunkViewer.svelte index 257551386..ac8d723e8 100644 --- a/gitbutler-ui/src/lib/components/HunkViewer.svelte +++ b/gitbutler-ui/src/lib/components/HunkViewer.svelte @@ -2,6 +2,7 @@ import Button from './Button.svelte'; import HunkContextMenu from './HunkContextMenu.svelte'; import HunkLine from './HunkLine.svelte'; + import Scrollbar from './Scrollbar.svelte'; import { draggable } from '$lib/dragging/draggable'; import { draggableHunk } from '$lib/dragging/draggables'; import { onDestroy } from 'svelte'; @@ -11,6 +12,9 @@ import type { Hunk } from '$lib/vbranches/types'; import type { Writable } from 'svelte/store'; + export let viewport: HTMLDivElement | undefined = undefined; + export let contents: HTMLDivElement | undefined = undefined; + export let filePath: string; export let section: HunkSection; export let branchId: string | undefined; @@ -56,54 +60,67 @@ let alwaysShow = false; -
-
- {#if linesModified > 1000 && !alwaysShow} -
- Change hidden as large diffs may slow down the UI - -
- {:else} - {#each section.subSections as subsection} - {@const hunk = section.hunk} - {#each subsection.lines.slice(0, subsection.expanded ? subsection.lines.length : 0) as line} - onHunkSelected(hunk, e.detail)} - sectionType={subsection.sectionType} - on:contextmenu={(e) => - popupMenu.openByMouse(e, { - hunk, - section: subsection, - lineNumber: line.afterLineNumber ? line.afterLineNumber : line.beforeLineNumber - })} - /> +
+
+
+ {#if linesModified > 1000 && !alwaysShow} +
+ Change hidden as large diffs may slow down the UI + +
+ {:else} + {#each section.subSections as subsection} + {@const hunk = section.hunk} + {#each subsection.lines.slice(0, subsection.expanded ? subsection.lines.length : 0) as line} + onHunkSelected(hunk, e.detail)} + sectionType={subsection.sectionType} + on:contextmenu={(e) => + popupMenu.openByMouse(e, { + hunk, + section: subsection, + lineNumber: line.afterLineNumber + ? line.afterLineNumber + : line.beforeLineNumber + })} + /> + {/each} {/each} - {/each} - {/if} + {/if} +
+
diff --git a/gitbutler-ui/src/routes/[projectId]/board/+page.svelte b/gitbutler-ui/src/routes/[projectId]/board/+page.svelte index a2a878018..3ff7550f0 100644 --- a/gitbutler-ui/src/routes/[projectId]/board/+page.svelte +++ b/gitbutler-ui/src/routes/[projectId]/board/+page.svelte @@ -48,7 +48,7 @@
{/if} -
+
+
-
@@ -78,5 +78,16 @@ .scroll-contents { display: flex; height: 100%; + min-width: 100%; + width: fit-content; + } + + /* BOARD */ + .board-wrapper { + position: relative; + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; } diff --git a/gitbutler-ui/src/styles/main.postcss b/gitbutler-ui/src/styles/main.postcss index 719491ef4..a839e6365 100644 --- a/gitbutler-ui/src/styles/main.postcss +++ b/gitbutler-ui/src/styles/main.postcss @@ -72,37 +72,6 @@ button { -webkit-app-region: no-drag; } -/* SCROLL BAR STYLING */ -/* We don't use REM here becasue we don't want -the scrollbar to scale with the font size */ -.custom-scrollbar { - /* width */ - &::-webkit-scrollbar { - width: 16px; - height: 16px; - } - - /* Track */ - &::-webkit-scrollbar-track { - background: transaparent; - } - - /* Handle */ - &::-webkit-scrollbar-thumb { - border-radius: 26px; - background: color-mix(in srgb, var(--clr-theme-scale-ntrl-0) 20%, transparent); - background-clip: content-box; - border: 5px solid rgba(0, 0, 0, 0); - } - - /* Handle on hover */ - &::-webkit-scrollbar-thumb:hover { - background: color-mix(in srgb, var(--clr-theme-scale-ntrl-0) 30%, transparent); - background-clip: content-box; - border: 5px solid rgba(0, 0, 0, 0); - } -} - /* scrollbar helpers */ .hide-native-scrollbar { -ms-overflow-style: none; From 40b4702d1ab252cdfbfacd3b65c47c94d6684ff2 Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Fri, 8 Mar 2024 01:14:38 +0100 Subject: [PATCH 2/9] scrollbar updates - added `zIndex` prop in case of overlapping with other elements - track height was changed to procentage units from fixed pixel units --- gitbutler-ui/src/lib/components/Scrollbar.svelte | 13 ++++++++----- .../src/routes/[projectId]/board/+page.svelte | 2 +- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/gitbutler-ui/src/lib/components/Scrollbar.svelte b/gitbutler-ui/src/lib/components/Scrollbar.svelte index 4f874fc51..a481f124b 100644 --- a/gitbutler-ui/src/lib/components/Scrollbar.svelte +++ b/gitbutler-ui/src/lib/components/Scrollbar.svelte @@ -4,11 +4,14 @@ export let viewport: Element; export let contents: Element; export let hideAfter = 1000; - // export let alwaysVisible = false; export let initiallyVisible = false; export let thickness = 'var(--space-8)'; + export let horz = false; + // Custom z-index in case of overlapping with other elements + export let zIndex = 20; + $: vert = !horz; let thumb: Element; @@ -20,7 +23,7 @@ let timer = 0; let interacted = false; - let alwaysVisible = true; + let alwaysVisible = false; let isViewportHovered = false; $: teardownViewport = setupViewport(viewport); @@ -240,8 +243,9 @@ style:top={vert ? 0 : undefined} style:bottom={horz ? 0 : undefined} style:left={horz ? 0 : undefined} - style:width={vert ? thickness : `${trackWidth}px`} - style:height={vert ? `${trackHeight}px` : thickness} + style:width={vert ? thickness : `100%`} + style:height={vert ? `100%` : thickness} + style:z-index={zIndex} >
.scrollbar-track { - z-index: 2; position: absolute; transition: opacity 0.2s, diff --git a/gitbutler-ui/src/routes/[projectId]/board/+page.svelte b/gitbutler-ui/src/routes/[projectId]/board/+page.svelte index 3ff7550f0..adfd41dfd 100644 --- a/gitbutler-ui/src/routes/[projectId]/board/+page.svelte +++ b/gitbutler-ui/src/routes/[projectId]/board/+page.svelte @@ -64,7 +64,7 @@ {githubService} />
- +
From 205ffacc7cfbde17fa120ea9a4daedabdf412df0 Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Fri, 8 Mar 2024 17:53:38 +0100 Subject: [PATCH 3/9] style updates: scrolbar and navigation fold button - Updated style of the fold button in order to make more space for the scrollbar - Scale scrollbar when it's hovered --- .../src/lib/components/HunkViewer.svelte | 4 +- .../src/lib/components/Navigation.svelte | 37 +++++----- .../src/lib/components/Scrollbar.svelte | 73 ++++++++++++++++--- 3 files changed, 81 insertions(+), 33 deletions(-) diff --git a/gitbutler-ui/src/lib/components/HunkViewer.svelte b/gitbutler-ui/src/lib/components/HunkViewer.svelte index ac8d723e8..db8d24ccc 100644 --- a/gitbutler-ui/src/lib/components/HunkViewer.svelte +++ b/gitbutler-ui/src/lib/components/HunkViewer.svelte @@ -100,9 +100,7 @@ popupMenu.openByMouse(e, { hunk, section: subsection, - lineNumber: line.afterLineNumber - ? line.afterLineNumber - : line.beforeLineNumber + lineNumber: line.afterLineNumber ? line.afterLineNumber : line.beforeLineNumber })} /> {/each} diff --git a/gitbutler-ui/src/lib/components/Navigation.svelte b/gitbutler-ui/src/lib/components/Navigation.svelte index e31fbf8ba..ad9ca89b5 100644 --- a/gitbutler-ui/src/lib/components/Navigation.svelte +++ b/gitbutler-ui/src/lib/components/Navigation.svelte @@ -64,18 +64,13 @@ on:mousedown={toggleNavCollapse} class:folding-button_folded={$isNavCollapsed} > - + + vector-effect="non-scaling-stroke" + /> + - import { onDestroy } from 'svelte'; + import { onDestroy, createEventDispatcher } from 'svelte'; export let viewport: Element; export let contents: Element; @@ -25,6 +25,7 @@ let alwaysVisible = false; let isViewportHovered = false; + let isDragging = false; $: teardownViewport = setupViewport(viewport); $: teardownThumb = setupThumb(thumb); @@ -48,6 +49,10 @@ ((scrollableY || scrollableX) && initiallyVisible) || (alwaysVisible && isViewportHovered && (scrollableY || scrollableX)); + const dispatch = createEventDispatcher<{ + dragging: boolean; + }>(); + function setupViewport(viewport: Element) { if (!viewport) return; teardownViewport?.(); @@ -196,6 +201,8 @@ event.stopPropagation(); event.preventDefault(); + isDragging = true; + startTop = viewport.scrollTop; startLeft = viewport.scrollLeft; if (event instanceof MouseEvent) { @@ -225,6 +232,8 @@ startLeft = 0; startX = 0; + isDragging = false; + document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); } @@ -234,23 +243,30 @@ teardownContents?.(); teardownThumb?.(); }); + + $: { + dispatch('dragging', isDragging); + }
From d23e3ff2e63244d787ba79dffd20b59487fe97a6 Mon Sep 17 00:00:00 2001 From: Pavel Laptev Date: Fri, 8 Mar 2024 18:22:38 +0100 Subject: [PATCH 4/9] Enhanced Navigation UX - Implemented a feature where, during the dragging of the scrollbar in the branches view, the fold button now dynamically hides to prevent overlap with the scrollbar. --- .../src/lib/components/Branches.svelte | 9 +++++++- .../src/lib/components/Navigation.svelte | 22 ++++++++++++++----- .../lib/components/ScrollableContainer.svelte | 11 ++++++++-- 3 files changed, 34 insertions(+), 8 deletions(-) diff --git a/gitbutler-ui/src/lib/components/Branches.svelte b/gitbutler-ui/src/lib/components/Branches.svelte index bb4068519..9a3093bf0 100644 --- a/gitbutler-ui/src/lib/components/Branches.svelte +++ b/gitbutler-ui/src/lib/components/Branches.svelte @@ -9,12 +9,15 @@ import { storeToObservable } from '$lib/rxjs/store'; import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/settings/userSettings'; import { BehaviorSubject, combineLatest } from 'rxjs'; + import { createEventDispatcher } from 'svelte'; import { getContext, onDestroy, onMount } from 'svelte'; import { derived } from 'svelte/store'; import type { BranchService } from '$lib/branches/service'; import type { CombinedBranch } from '$lib/branches/types'; import type { GitHubService } from '$lib/github/service'; + const dispatch = createEventDispatcher<{ scrollbarDragging: boolean }>(); + export let branchService: BranchService; export let githubService: GitHubService; export let projectId: string; @@ -151,7 +154,11 @@ /> {#if $branches$?.length > 0} - + dispatch('scrollbarDragging', e.detail)} + >
(false, 'projectNavCollapsed_' + project.id); @@ -56,13 +57,17 @@ ); -