gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-08-16 07:40:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

timeline things

Browse Source
This commit is contained in:
Kiril Videlov 2023-02-21 21:52:34 +01:00
parent 40d3961def
commit 3c08aef077
3 changed files with 84 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -37,6 +37,7 @@
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-svelte": "^2.18.0",
"eslint-plugin-unicorn": "^45.0.2",
"fluent-svelte": "^1.6.0",
"postcss": "^8.4.14",
"postcss-load-config": "^4.0.1",
"prettier": "^2.8.4",

19
pnpm-lock.yaml
View File

@ -17,6 +17,7 @@ specifiers:
eslint-plugin-prettier: ^4.2.1
eslint-plugin-svelte: ^2.18.0
eslint-plugin-unicorn: ^45.0.2
fluent-svelte: ^1.6.0
idb-keyval: ^6.2.0
mm-jsr: ^3.0.2
nanoid: ^4.0.1
@ -63,6 +64,7 @@ devDependencies:
eslint-plugin-prettier: 4.2.1_u5wnrdwibbfomslmnramz52buy
eslint-plugin-svelte: 2.18.0_dbthnr4b2bdkhyiebwn7su3hnq
eslint-plugin-unicorn: 45.0.2_eslint@8.34.0
fluent-svelte: 1.6.0
postcss: 8.4.21
postcss-load-config: 4.0.1_postcss@8.4.21
prettier: 2.8.4
@ -1444,6 +1446,19 @@ packages:
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
dev: true
/fluent-svelte/1.6.0:
resolution: {integrity: sha512-z+QUvfAzh3t0bpiURO6f2eciZPnPPwl1pZe+sAYM8A8vUDSAHH8D0U4+VT+OHA16PEAd2DYVdPyJqM27ly5lxQ==}
dependencies:
focus-trap: 6.9.4
tabbable: 5.3.3
dev: true
/focus-trap/6.9.4:
resolution: {integrity: sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==}
dependencies:
tabbable: 5.3.3
dev: true
/for-each/0.3.3:
resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
dependencies:
@ -2881,6 +2896,10 @@ packages:
util.promisify: 1.0.1
dev: false
/tabbable/5.3.3:
resolution: {integrity: sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==}
dev: true
/tailwindcss/3.2.4_postcss@8.4.21:
resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
engines: {node: '>=12.13.0'}

91
src/routes/projects/[projectId]/sessionv2/[sessionId]/+page.svelte
View File

@ -4,6 +4,10 @@
import type { PageData } from "./$types";
import { add, format, differenceInSeconds, addSeconds } from "date-fns";
import { page } from "$app/stores";
import { onMount } from "svelte";
import { slide } from "svelte/transition";
import { Slider } from "fluent-svelte";
import "fluent-svelte/theme.css";
export let data: PageData;
$: session = data.session;
@ -36,6 +40,12 @@
const col = Math.floor(rat * 63 + 17);
return col;
};
let selectedFileIdx = 0;
let value = 0;
// onMount(() => (value = end.getTime()));
// $: sliderDate = new Date(value);
</script>
<div class="flex flex-col h-full text-zinc-400">
@ -65,67 +75,96 @@
</header>
<!-- main part -->
<div class="flex flex-col flex-none max-w-full">
<div
class="flex flex-col flex-none max-w-full select-none border-b border-zinc-700"
>
<div class="flex flex-col flex-none max-w-full">
<!-- sticky header -->
<div
class="overflow-hidden sticky top-0 z-30 bg-zinc-800 flex-none shadow shadow-zinc-700 ring-1 ring-zinc-700 ring-opacity-5"
class="overflow-hidden sticky top-0 z-30 bg-zinc-800 flex-none shadow shadow-zinc-700 ring-1 ring-zinc-700 ring-opacity-5 mb-1"
>
<div
class="grid-cols-11 -mr-px text-sm leading-6 border-zinc-700 grid"
>
<div class="grid-cols-11 -mr-px text-sm border-zinc-700 grid">
<div />
<div
class="col-span-2 flex items-center justify-center py-3"
class="col-span-2 flex items-center justify-center py-2"
>
<span>{format(start, "hh:mm")}</span>
</div>
<div
class="col-span-2 flex items-center justify-center py-3"
class="col-span-2 flex items-center justify-center py-2"
>
<span>{format(quarter, "hh:mm")}</span>
</div>
<div
class="col-span-2 flex items-center justify-center py-3"
class="col-span-2 flex items-center justify-center py-2"
>
<span>{format(midpoint, "hh:mm")}</span>
</div>
<div
class="col-span-2 flex items-center justify-center py-3"
class="col-span-2 flex items-center justify-center py-2"
>
<span>{format(threequarters, "hh:mm")}</span>
</div>
<div
class="col-span-2 flex items-center justify-center py-3"
class="col-span-2 flex items-center justify-center py-2"
>
<span>{format(end, "hh:mm")}</span>
</div>
</div>
<!-- needle -->
<div class="grid grid-cols-11">
<div class="col-span-2 flex items-center justify-center" />
<div class="-mx-1 col-span-8 flex items-center justify-center">
<Slider
min={17}
max={80}
step={1}
bind:value
/>
</div>
<div class="col-span-1 flex items-center justify-center" />
</div>
</div>
<div class="flex flex-auto">
<!-- <div
class="sticky left-0 z-10 w-14 flex-none ring-1 ring-zinc-700"
/> -->
<div class="flex flex-auto mb-1">
<div class="grid flex-auto grid-cols-1 grid-rows-1">
<!-- file names list -->
<div
class="col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-700/20"
class="bg-col-start-1 col-end-2 row-start-1 grid divide-y divide-zinc-700/20"
style="grid-template-rows: repeat({Object.keys($deltas)
.length}, minmax(2rem, 1fr));"
>
<!-- <div class="row-end-1 h-7" /> -->
{#each Object.keys($deltas) as filePath}
{#each Object.keys($deltas) as filePath, i}
<div
class="flex justify-end items-center overflow-hidden sticky left-0 z-20 w-1/6 pr-4 text-xs leading-5 text-zinc-300"
title={filePath}
class="flex {i == selectedFileIdx
? 'bg-zinc-500/70'
: ''}"
>
{filePath.split("/").pop()}
<button
class="flex justify-end items-center overflow-hidden sticky left-0 z-20 w-1/6 text-xs leading-5
{selectedFileIdx == i
? 'text-zinc-200 cursor-default'
: 'text-zinc-400 hover:text-zinc-200 cursor-pointer'}"
on:click={() => (selectedFileIdx = i)}
title={filePath}
>
{filePath.split("/").pop()}
</button>
</div>
{/each}
</div>
<div
class="col-start-1 col-end-2 row-start-1 grid"
style="grid-template-columns: repeat(88, minmax(0, 1fr));"
>
<div class="bg-sky-400/60 "
style=" grid-column: {value};"
>
</div>
</div>
<!-- time vertical lines -->
<div
class="col-start-1 col-end-2 row-start-1 grid-rows-1 divide-x divide-zinc-700/50 grid grid-cols-11"
@ -143,26 +182,24 @@
class="col-start-1 col-end-2 row-start-1 grid"
style="
grid-template-columns: repeat(88, minmax(0, 1fr));
grid-template-rows: 2rem repeat({Object.keys($deltas)
grid-template-rows: repeat({Object.keys($deltas)
.length}, minmax(0px, 1fr)) auto;"
>
{#each Object.entries($deltas) as [filePath, fileDeltas], idx}
{#each fileDeltas as delta}
<li
class="relative mt-px flex items-center"
class="relative flex items-center bg-zinc-300 hover:bg-zinc-100 rounded m-0.5 cursor-pointer"
style="
grid-row: {idx + 1} / span 1;
grid-column: {timeStampToCol(
new Date(delta.timestampMs)
)} / span 2;"
)} / span 1;"
>
<a
href="/"
class="group absolute inset-1 flex flex-col items-center justify-center rounded bg-zinc-300 p-px text-xs leading-5 hover:bg-zinc-200 shadow"
class="flex flex-col items-center justify-center text-xs "
>
<p
class="order-1 font-semibold text-zinc-800"
>
<p class="font-semibold text-zinc-800">
<!-- foo -->
</p>
</a>