gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-25 10:33:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

some basic layout for the 'day' timeline

Browse Source
This commit is contained in:
Kiril Videlov 2023-02-06 22:06:03 +01:00
parent 9dc978b068
commit 00a4b9c8bc
4 changed files with 105 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/lib/components/timeline/TimelineDay.svelte
View File

@ -2,13 +2,24 @@
import type { Session } from "$lib/session";
import TimelineDaySession from "./TimelineDaySession.svelte";
export let sessions: Session[];
const sessionDisplayWidth = (session: Session) => {
let sessionDurationHours =
(session.endTime - session.startTime) / 1000 / 60 / 60;
if (sessionDurationHours <= 1) {
return "w-40";
} else {
return "w-60";
}
};
</script>
<div>
<div class="flex flex-row space-x-2">
<div class="mt-12">
<div class="-mb-5 border border-slate-400 h-1.5 bg-slate-200 z-0" />
<div class="flex flex-row space-x-2 z-10">
{#each sessions as session}
<div>
<TimelineDaySession session={session}></TimelineDaySession>
<div class={sessionDisplayWidth(session)}>
<TimelineDaySession {session} />
</div>
{/each}
</div>

36
src/lib/components/timeline/TimelineDaySession.svelte
View File

@ -1,9 +1,10 @@
<script lang="ts">
import type { Session } from "$lib/session";
import TimelineDaySessionActivities from "./TimelineDaySessionActivities.svelte";
export let session: Session;
const toHumanReadableTime = (timestamp: number) => {
return new Date(session.startTime).toLocaleTimeString("en-US", {
return new Date(timestamp).toLocaleTimeString("en-US", {
hour: "numeric",
minute: "numeric",
});
@ -11,14 +12,14 @@
const colorFromBranchName = (branchName: string) => {
const colors = [
"bg-red-500",
"bg-green-500",
"bg-blue-500",
"bg-yellow-500",
"bg-purple-500",
"bg-pink-500",
"bg-indigo-500",
"bg-gray-500",
"bg-red-500 border-red-700",
"bg-green-500 border-green-700",
"bg-blue-500 border-blue-700",
"bg-yellow-500 border-yellow-700",
"bg-purple-500 border-purple-700",
"bg-pink-500 border-pink-700",
"bg-indigo-500 border-indigo-700",
"bg-gray-500 border-gray-700",
];
const hash = branchName.split("").reduce((acc, char) => {
return acc + char.charCodeAt(0);
@ -27,11 +28,22 @@
};
</script>
<div>
<div id="block" class="text-slate-50 rounded {colorFromBranchName(session.branchName)}">
<div class="flex flex-col space-y-2">
<div
id="block"
class="border px-4 py-2 text-slate-50 rounded-lg {colorFromBranchName(session.branchName)}"
>
{session.branchName}
</div>
<div id="activities">TODO: activities</div>
<div id="activities">
<div class="my-2 mx-1">
<TimelineDaySessionActivities
activities={session.activities}
sessionStart={session.startTime}
sessionEnd={session.endTime}
/>
</div>
</div>
<div id="time-range">
{toHumanReadableTime(session.startTime)}
-

63
src/lib/components/timeline/TimelineDaySessionActivities.svelte Normal file
View File

@ -0,0 +1,63 @@
<script lang="ts">
import { type SessionActivity, ActivityType } from "$lib/session";
import FaSquare from "svelte-icons/fa/FaSquare.svelte";
import FaCircle from "svelte-icons/fa/FaCircle.svelte";
import FaAdjust from "svelte-icons/fa/FaAdjust.svelte";
import FaMapMarker from "svelte-icons/fa/FaMapMarker.svelte";
export let activities: SessionActivity[];
export let sessionStart: number;
export let sessionEnd: number;
$: sessionDuration = sessionEnd - sessionStart;
let proportionOfTime = (time: number) => {
return ((time - sessionStart) / sessionDuration) * 100;
};
const toHumanReadableTime = (timestamp: number) => {
return new Date(timestamp).toLocaleTimeString("en-US", {
hour: "numeric",
minute: "numeric",
});
};
</script>
<div class="relative">
<hr class="h-px bg-slate-400 border-0 z-0" />
<div class="absolute inset-0 -mt-1.5">
{#each activities as activity}
<div
class="flex -mx-1.5"
style="position:relative; left: {proportionOfTime(
activity.timestamp
)}%;"
>
<div
class="w-3 h-3 text-slate-700 z-50 absolute inset-0"
style=""
title="{activity.type} at {toHumanReadableTime(
activity.timestamp
)}"
>
{#if activity.type === ActivityType.COMMIT}
<div class="text-sky-500 hover:text-sky-600">
<FaSquare />
</div>
{:else if activity.type === ActivityType.MERGE}
<div class="text-green-500 hover:text-green-600">
<FaMapMarker />
</div>
{:else if activity.type === ActivityType.REBASE}
<div class="text-orange-500 hover:text-orange-600">
<FaAdjust />
</div>
{:else if activity.type === ActivityType.PUSH}
<div class="text-purple-500 hover:text-purple-600">
<FaCircle />
</div>
{/if}
</div>
</div>
{/each}
</div>
</div>

6
src/lib/session.ts
View File

@ -56,17 +56,17 @@ export let dummySessions: Session[] = [
],
[
new SessionActivity(
Math.floor(new Date('2023-01-01T08:30:00.000Z').getTime()),
Math.floor(new Date('2023-01-01T08:01:00.000Z').getTime()),
ActivityType.COMMIT),
new SessionActivity(
Math.floor(new Date('2023-01-01T08:40:00.000Z').getTime()),
Math.floor(new Date('2023-01-01T08:59:00.000Z').getTime()),
ActivityType.PUSH),
]
),
new Session(
"2-a1b2c3d4e5f6g7h8i9j0",
Math.floor(new Date('2023-01-01T14:00:00.000Z').getTime()),
Math.floor(new Date('2023-01-01T15:00:00.000Z').getTime()),
Math.floor(new Date('2023-01-01T15:30:00.000Z').getTime()),
"newer-dependencies",
[
new SessionFile("package.json", "package.json", 4, 15),