gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-28 13:26:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

🔨 Refactor timeline selection logic

Browse Source 
- Improve timeline page UX
- Add `fluent-svelte/theme.css`
- Reset selection when close button is clicked
- Update selection when session is selected
- Add human readable branch name to selection object
- Extend selection end time by 60 seconds

[src/routes/projects/[projectId]/timeline/+page.svelte]
- Add `fluent-svelte/theme.css`
- Reset the selection when the close button is clicked
- Set the selection object when a session is selected
- Add a human readable branch name to the selection object
- Change the selection end time to add 60 seconds
- Adjust the styling of the selection bar
This commit is contained in:
Kiril Videlov 2023-02-27 13:48:46 +01:00
parent a0ff5cd2b6
commit 6f3b1268f4
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/routes/projects/[projectId]/timeline/+page.svelte
View File

@ -11,6 +11,7 @@
import { add, format, differenceInSeconds, addSeconds } from 'date-fns';
import { Slider } from 'fluent-svelte';
import { CodeViewer } from '$lib/components';
import 'fluent-svelte/theme.css';
export let data: PageData;
const { project, sessions } = data;
@ -90,16 +91,12 @@
type Selection = {
sessionIdx: number;
dateMilliseconds: number;
branch: string;
start: Date;
end: Date;
deltas: Record<string, Delta[]>;
};
let selection = {
// sessionIdx: 3,
// dateMilliseconds: 1677106800000,
// start: new Date(1677106800000),
// deltas: {} as Record<string, Delta[]>,
} as Selection;
let selection = {} as Selection;
const resetSelection = () => {
selection = {} as Selection;
@ -192,8 +189,9 @@
selection = {
sessionIdx: i,
dateMilliseconds: +dateMilliseconds,
branch: uiSession.session.meta.branch,
start: new Date(uiSession.session.meta.startTimestampMs),
end: new Date(uiSession.session.meta.lastTimestampMs), // TODO: maybe use last delta timestamp?
end: addSeconds(new Date(uiSession.session.meta.lastTimestampMs), 60),
deltas: uiSession.deltas
};
scrollExpandedIntoView(dateMilliseconds);
@ -246,13 +244,19 @@
‹
</div>
</div>
<div
class="flex-grow bg-orange-400/1 border-t border-l border-r rounded-t border-orange-400/50"
>
<button on:click={resetSelection}>Close</button>
<div class="flex-grow border-t border-l border-r rounded-t border-orange-400">
<div
class="px-4 bg-orange-400 border-t border-l border-orange-400 p-1 rounded-t-sm text-zinc-800 text-sm font-medium flex items-center justify-between"
>
<span class="cursor-default"
>{format(selection.start, 'hh:mm')} - {format(selection.end, 'hh:mm')}</span
>
<span>{toHumanBranchName(selection.branch)}</span>
<button on:click={resetSelection}>Close</button>
</div>
<div
class="flex flex-col flex-none max-w-full select-none border-b border-zinc-700 h-full overflow-auto"
class="flex flex-col flex-none max-w-full select-none h-full overflow-auto"
>
<div class="flex flex-col flex-none max-w-full mb-40">
<!-- sticky header -->