mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-09-20 00:27:17 +03:00
Fix shift selecting files after rebasing Pavel's work
- works but will need more love
This commit is contained in:
parent
6c8544acd8
commit
a0d30e8f43
@ -29,7 +29,7 @@
|
||||
{readonly}
|
||||
{isUnapplied}
|
||||
showCheckbox={showCheckboxes}
|
||||
selected={$selectedFileIds && $fileSelection.has(file.id, $commit?.id)}
|
||||
selected={$selectedFileIds && $selectedFileIds.includes(file.id + '|' + $commit?.id)}
|
||||
on:click={(e) => {
|
||||
selectFilesInList(e, file, $fileSelection, sortedFiles, allowMultiple, $commit);
|
||||
}}
|
||||
|
@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import BranchCard from './BranchCard.svelte';
|
||||
import FileCard from './FileCard.svelte';
|
||||
import { Project } from '$lib/backend/projects';
|
||||
import Resizer from '$lib/components/Resizer.svelte';
|
||||
@ -50,10 +51,13 @@
|
||||
const selectedFileIds = $fileSelection.fileIds;
|
||||
|
||||
const selectedFiles = createSelectedFiles([]);
|
||||
$: if ($selectedFileIds.length > 0 && $fileSelection.toOnly().context === undefined)
|
||||
$: if ($selectedFileIds.length > 0 && $fileSelection.toOnly().context == 'undefined') {
|
||||
selectedFiles.set(
|
||||
$selectedFileIds.map((fileId) => branch.files.find((f) => f.id == fileId)).filter(isDefined)
|
||||
$selectedFileIds
|
||||
.map((fileId) => branch.files.find((f) => f.id + '|' + undefined == fileId))
|
||||
.filter(isDefined)
|
||||
);
|
||||
}
|
||||
|
||||
$: displayedFile = $selectedFiles.length == 1 ? $selectedFiles[0] : undefined;
|
||||
|
||||
|
@ -84,7 +84,7 @@
|
||||
on:keydown
|
||||
on:dragstart={() => {
|
||||
// Reset selection if the file being dragged is not in the selected list
|
||||
if ($selectedFileIds.length > 0 && !$selectedFileIds.includes(file.id)) {
|
||||
if ($selectedFileIds.length > 0 && !$fileSelection.has(file.id, $commit?.id)) {
|
||||
$fileSelection.clear();
|
||||
$fileSelection.add(file.id, $commit?.id);
|
||||
}
|
||||
@ -139,15 +139,11 @@
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
outline: none;
|
||||
background: var(--clr-theme-container-light);
|
||||
background: var(--clr-container-light);
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:not(.selected-draggable):hover {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--clr-theme-container-light),
|
||||
var(--darken-tint-light)
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--clr-container-light), var(--darken-tint-light));
|
||||
}
|
||||
}
|
||||
|
||||
@ -190,15 +186,11 @@
|
||||
}
|
||||
|
||||
.selected-draggable {
|
||||
background-color: var(--clr-theme-scale-pop-80);
|
||||
border: 1px solid var(--clr-theme-container-light);
|
||||
background-color: var(--clr-scale-pop-80);
|
||||
border: 1px solid var(--clr-container-light);
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--clr-theme-scale-pop-80),
|
||||
var(--darken-tint-extralight)
|
||||
);
|
||||
background-color: color-mix(in srgb, var(--clr-scale-pop-80), var(--darken-tint-extralight));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -223,11 +223,14 @@ export function draggable(node: HTMLElement, opts: DraggableConfig) {
|
||||
}
|
||||
|
||||
const viewport = opts.viewportId ? document.getElementById(opts.viewportId) : null;
|
||||
const triggerRange = 100;
|
||||
const scrollSpeed = 5;
|
||||
const triggerRange = (viewport?.clientWidth || 500) / 4;
|
||||
const scrollSpeed = (viewport?.clientWidth || 500) / 2;
|
||||
let lastDrag = new Date().getTime();
|
||||
|
||||
function handleDrag(e: DragEvent) {
|
||||
if (!viewport) return;
|
||||
if (new Date().getTime() - lastDrag < 500) return;
|
||||
lastDrag = new Date().getTime();
|
||||
|
||||
const viewportWidth = viewport.clientWidth;
|
||||
const relativeX = e.clientX - viewport.getBoundingClientRect().left;
|
||||
|
@ -14,22 +14,22 @@ export function selectFilesInList(
|
||||
e.stopPropagation();
|
||||
const isAlreadySelected = selectedFileIds && fileSelection.has(file.id, commit?.id);
|
||||
|
||||
// Ctrl + Click or Cmd + Click to select multiple files
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
// if file is already selected, unselect it
|
||||
if (isAlreadySelected) {
|
||||
fileSelection.remove(file.id, commit?.id);
|
||||
} else {
|
||||
fileSelection.add(file.id, commit?.id);
|
||||
}
|
||||
}
|
||||
// Shift + Click to select range
|
||||
else if (e.shiftKey && allowMultiple) {
|
||||
const initiallySelectedIndex = sortedFiles.findIndex((f) => f.id == selectedFileIds[0]);
|
||||
} else if (e.shiftKey && allowMultiple) {
|
||||
const initiallySelectedIndex = sortedFiles.findIndex(
|
||||
(f) => f.id + '|' + undefined == selectedFileIds[0]
|
||||
);
|
||||
|
||||
// detect the direction of the selection
|
||||
const selectionDirection =
|
||||
initiallySelectedIndex < sortedFiles.findIndex((f) => f.id == file.id) ? 'down' : 'up';
|
||||
initiallySelectedIndex < sortedFiles.findIndex((f) => f.id == file.id + '|' + commit?.id)
|
||||
? 'down'
|
||||
: 'up';
|
||||
|
||||
const updatedSelection = sortedFiles.slice(
|
||||
Math.min(
|
||||
@ -42,20 +42,18 @@ export function selectFilesInList(
|
||||
) + 1
|
||||
);
|
||||
|
||||
selectedFileIds = updatedSelection.map((f) => f.id);
|
||||
selectedFileIds = updatedSelection.map((f) => f.id + '|' + commit?.id);
|
||||
|
||||
if (selectionDirection === 'down') {
|
||||
selectedFileIds = selectedFileIds.reverse();
|
||||
}
|
||||
}
|
||||
// select only one file
|
||||
else {
|
||||
fileSelection.set(selectedFileIds);
|
||||
} else {
|
||||
// if only one file is selected and it is already selected, unselect it
|
||||
if (selectedFileIds.length == 1 && isAlreadySelected) {
|
||||
selectedFileIds = [];
|
||||
fileSelection.clear();
|
||||
} else {
|
||||
selectedFileIds = [file.id];
|
||||
fileSelection.set([file.id + '|' + commit?.id]);
|
||||
}
|
||||
}
|
||||
fileSelection.set(selectedFileIds);
|
||||
}
|
||||
|
@ -11,16 +11,16 @@ export class FileSelection {
|
||||
constructor() {}
|
||||
|
||||
add(fileId: string, context?: string) {
|
||||
this._fileIds.add(context ? fileId + '|' + context : fileId);
|
||||
this._fileIds.add(fileId + '|' + context);
|
||||
this.fileIds.set([...this._fileIds.values()]);
|
||||
}
|
||||
|
||||
has(fileId: string, context?: string) {
|
||||
return this._fileIds.has(context ? fileId + '|' + context : fileId);
|
||||
return this._fileIds.has(fileId + '|' + context);
|
||||
}
|
||||
|
||||
remove(fileId: string, context?: string) {
|
||||
this._fileIds.delete(context ? fileId + '|' + context : fileId);
|
||||
this._fileIds.delete(fileId + '|' + context);
|
||||
this.fileIds.set([...this._fileIds.values()]);
|
||||
}
|
||||
|
||||
|
@ -35,13 +35,12 @@
|
||||
</script>
|
||||
|
||||
<div class="board-wrapper">
|
||||
<div class="scroll-viewport hide-native-scrollbar" bind:this={viewport}>
|
||||
<div class="scroll-viewport hide-native-scrollbar" id="board-viewport" bind:this={viewport}>
|
||||
<div class="scroll-contents" bind:this={contents}>
|
||||
<Board />
|
||||
</div>
|
||||
<Scrollbar {viewport} {contents} horz zIndex={50} />
|
||||
</div>
|
||||
<Scrollbar {viewport} {contents} horz zIndex={50} />
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
@ -58,6 +57,7 @@
|
||||
overflow-x: scroll;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
scroll-behavior: smooth !important;
|
||||
}
|
||||
.scroll-contents {
|
||||
display: flex;
|
||||
|
Loading…
Reference in New Issue
Block a user