From 74a906618e21b9c946c41fa6b42cf8d3f9a3e2c8 Mon Sep 17 00:00:00 2001 From: Mattias Granlund Date: Wed, 6 Mar 2024 22:13:15 +0100 Subject: [PATCH] Fix problem with `user-select: none` in root element - webkit bug related to draggable=true - left descendants without ability to set user-select: text - unclear why it only affected draggable lanes and not e.g. hunks --- gitbutler-ui/src/lib/components/Board.svelte | 22 ++++++++++++++++--- .../src/lib/components/BranchCard.svelte | 1 + .../src/lib/components/BranchLane.svelte | 1 + .../src/lib/components/FileCardHeader.svelte | 1 + .../src/lib/components/HunkViewer.svelte | 1 + .../src/lib/components/InfoMessage.svelte | 1 + gitbutler-ui/src/lib/components/Link.svelte | 1 + .../src/lib/components/PullRequestCard.svelte | 2 ++ .../lib/components/RemoteBranchPreview.svelte | 4 ++++ .../src/lib/components/SectionCard.svelte | 2 ++ gitbutler-ui/src/routes/+layout.svelte | 11 +++++++++- 11 files changed, 43 insertions(+), 4 deletions(-) diff --git a/gitbutler-ui/src/lib/components/Board.svelte b/gitbutler-ui/src/lib/components/Board.svelte index 9dbd2ec06..5bbe732b9 100644 --- a/gitbutler-ui/src/lib/components/Board.svelte +++ b/gitbutler-ui/src/lib/components/Board.svelte @@ -87,7 +87,7 @@ {#each branches.sort((a, b) => a.order - b.order) as branch (branch.id)}
(dragHandle = e.target)} on:dragstart={(e) => { @@ -122,7 +122,7 @@ {projectPath} {user} {githubService} - > + />
{/each} @@ -214,7 +214,23 @@ height: 100%; } - /* Empty board */ + .draggable-branch { + /* When draggable="true" we need this to not break user-select: text in descendants. + + It has been confirmed this bug is webkit only, so for GitButler this means macos and + most linux distributions. Why it happens we don't know, and it's somewhat unclear + why the other draggable items don't seem suffer similar breakage. + + The problem is reproducable with the following html: + ``` + +
+

Hello World

+
+ + ``` */ + user-select: auto; + } .empty-board { user-select: none; diff --git a/gitbutler-ui/src/lib/components/BranchCard.svelte b/gitbutler-ui/src/lib/components/BranchCard.svelte index 3e28ffeae..fb9f9622c 100644 --- a/gitbutler-ui/src/lib/components/BranchCard.svelte +++ b/gitbutler-ui/src/lib/components/BranchCard.svelte @@ -444,6 +444,7 @@ justify-content: center; padding: var(--space-48) 0; border-radius: var(--radius-m); + cursor: default; /* was defaulting to text cursor */ } .no-changes { diff --git a/gitbutler-ui/src/lib/components/BranchLane.svelte b/gitbutler-ui/src/lib/components/BranchLane.svelte index 661bd597e..cd51da4d9 100644 --- a/gitbutler-ui/src/lib/components/BranchLane.svelte +++ b/gitbutler-ui/src/lib/components/BranchLane.svelte @@ -134,6 +134,7 @@ height: 100%; align-items: self-start; flex-shrink: 0; + user-select: none; /* here because of user-select draggable interference in board */ position: relative; --target-branch-background: var(--clr-theme-container-pale); --selected-resize-shift: 0; diff --git a/gitbutler-ui/src/lib/components/FileCardHeader.svelte b/gitbutler-ui/src/lib/components/FileCardHeader.svelte index fc058fb71..4092bcab4 100644 --- a/gitbutler-ui/src/lib/components/FileCardHeader.svelte +++ b/gitbutler-ui/src/lib/components/FileCardHeader.svelte @@ -98,6 +98,7 @@ } .header__filetitle { width: 100%; + user-select: text; } .header__filename { color: var(--clr-theme-scale-ntrl-0); diff --git a/gitbutler-ui/src/lib/components/HunkViewer.svelte b/gitbutler-ui/src/lib/components/HunkViewer.svelte index 112ac6e35..257551386 100644 --- a/gitbutler-ui/src/lib/components/HunkViewer.svelte +++ b/gitbutler-ui/src/lib/components/HunkViewer.svelte @@ -108,6 +108,7 @@ display: flex; flex-direction: column; overflow-x: auto; + user-select: text; background: var(--clr-theme-container-light); border-radius: var(--radius-s); diff --git a/gitbutler-ui/src/lib/components/InfoMessage.svelte b/gitbutler-ui/src/lib/components/InfoMessage.svelte index 5690df67c..412b3c590 100644 --- a/gitbutler-ui/src/lib/components/InfoMessage.svelte +++ b/gitbutler-ui/src/lib/components/InfoMessage.svelte @@ -90,6 +90,7 @@ display: flex; flex-direction: column; gap: var(--space-8); + user-select: text; } .info-message__actions { display: flex; diff --git a/gitbutler-ui/src/lib/components/Link.svelte b/gitbutler-ui/src/lib/components/Link.svelte index 57846f7cf..48454d290 100644 --- a/gitbutler-ui/src/lib/components/Link.svelte +++ b/gitbutler-ui/src/lib/components/Link.svelte @@ -56,6 +56,7 @@ border-radius: var(--radius-m); transition: background-color var(--transition-fast); text-decoration: underline; + user-select: text; &:hover { text-decoration: none; diff --git a/gitbutler-ui/src/lib/components/PullRequestCard.svelte b/gitbutler-ui/src/lib/components/PullRequestCard.svelte index 0e5574e5e..9bb33cf9f 100644 --- a/gitbutler-ui/src/lib/components/PullRequestCard.svelte +++ b/gitbutler-ui/src/lib/components/PullRequestCard.svelte @@ -245,6 +245,8 @@ .pr-title { color: var(--clr-theme-scale-ntrl-0); margin-bottom: var(--space-12); + user-select: text; + cursor: text; } .pr-tags { diff --git a/gitbutler-ui/src/lib/components/RemoteBranchPreview.svelte b/gitbutler-ui/src/lib/components/RemoteBranchPreview.svelte index c6f1568c4..e85929d41 100644 --- a/gitbutler-ui/src/lib/components/RemoteBranchPreview.svelte +++ b/gitbutler-ui/src/lib/components/RemoteBranchPreview.svelte @@ -142,4 +142,8 @@ gap: var(--space-8); margin: var(--space-12) var(--space-6) var(--space-12) var(--space-12); } + + .card__content { + user-select: text; + } diff --git a/gitbutler-ui/src/lib/components/SectionCard.svelte b/gitbutler-ui/src/lib/components/SectionCard.svelte index d289d11af..bc668e66e 100644 --- a/gitbutler-ui/src/lib/components/SectionCard.svelte +++ b/gitbutler-ui/src/lib/components/SectionCard.svelte @@ -81,5 +81,7 @@ .has-bottom-line { border-bottom: 1px solid var(--clr-theme-container-outline-light); + user-select: text; + cursor: text; } diff --git a/gitbutler-ui/src/routes/+layout.svelte b/gitbutler-ui/src/routes/+layout.svelte index 370792297..cd063a1e7 100644 --- a/gitbutler-ui/src/routes/+layout.svelte +++ b/gitbutler-ui/src/routes/+layout.svelte @@ -46,10 +46,19 @@ ); -
+
+ +