gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-23 17:43:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix problem with user-select: none in root element

Browse Source 
- 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
This commit is contained in:
Mattias Granlund 2024-03-06 22:13:15 +01:00
parent 66fc956a9a
commit 74a906618e
11 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
gitbutler-ui/src/lib/components/Board.svelte
View File

@ -87,7 +87,7 @@
{#each branches.sort((a, b) => a.order - b.order) as branch (branch.id)}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="h-full"
class="draggable-branch h-full"
draggable="true"
on:mousedown={(e) => (dragHandle = e.target)}
on:dragstart={(e) => {
@ -122,7 +122,7 @@
{projectPath}
{user}
{githubService}
></BranchLane>
/>
</div>
{/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:
```
<body style="-webkit-user-select: none; user-select: none">
<div draggable="true">
<p style="-webkit-user-select: text; user-select: text; cursor: text">Hello World</p>
</div>
</body>
``` */
user-select: auto;
}
.empty-board {
user-select: none;

1
gitbutler-ui/src/lib/components/BranchCard.svelte
View File

@ -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 {

1
gitbutler-ui/src/lib/components/BranchLane.svelte
View File

@ -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;

1
gitbutler-ui/src/lib/components/FileCardHeader.svelte
View File

@ -98,6 +98,7 @@
}
.header__filetitle {
width: 100%;
user-select: text;
}
.header__filename {
color: var(--clr-theme-scale-ntrl-0);

1
gitbutler-ui/src/lib/components/HunkViewer.svelte
View File

@ -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);

1
gitbutler-ui/src/lib/components/InfoMessage.svelte
View File

@ -90,6 +90,7 @@
display: flex;
flex-direction: column;
gap: var(--space-8);
user-select: text;
}
.info-message__actions {
display: flex;

1
gitbutler-ui/src/lib/components/Link.svelte
View File

@ -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;

2
gitbutler-ui/src/lib/components/PullRequestCard.svelte
View File

@ -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 {

4
gitbutler-ui/src/lib/components/RemoteBranchPreview.svelte
View File

@ -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;
}
</style>

2
gitbutler-ui/src/lib/components/SectionCard.svelte
View File

@ -81,5 +81,7 @@
.has-bottom-line {
border-bottom: 1px solid var(--clr-theme-container-outline-light);
user-select: text;
cursor: text;
}
</style>

11
gitbutler-ui/src/routes/+layout.svelte
View File

@ -46,10 +46,19 @@
);
</script>
<div data-tauri-drag-region class="flex h-full flex-grow justify-center overflow-hidden">
<div data-tauri-drag-region class="app-root">
<slot />
</div>
<Toaster />
<ShareIssueModal bind:this={shareIssueModal} user={$user$} {cloud} />
<ToastController />
<AppUpdater {updaterService} />
<style lang="postcss">
.app-root {
display: flex;
height: 100%;
user-select: none;
cursor: default;
}
</style>