mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-09-11 12:25:42 +03:00
timeline things
This commit is contained in:
parent
40d3961def
commit
3c08aef077
@ -37,6 +37,7 @@
|
|||||||
"eslint-plugin-prettier": "^4.2.1",
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
"eslint-plugin-svelte": "^2.18.0",
|
"eslint-plugin-svelte": "^2.18.0",
|
||||||
"eslint-plugin-unicorn": "^45.0.2",
|
"eslint-plugin-unicorn": "^45.0.2",
|
||||||
|
"fluent-svelte": "^1.6.0",
|
||||||
"postcss": "^8.4.14",
|
"postcss": "^8.4.14",
|
||||||
"postcss-load-config": "^4.0.1",
|
"postcss-load-config": "^4.0.1",
|
||||||
"prettier": "^2.8.4",
|
"prettier": "^2.8.4",
|
||||||
|
@ -17,6 +17,7 @@ specifiers:
|
|||||||
eslint-plugin-prettier: ^4.2.1
|
eslint-plugin-prettier: ^4.2.1
|
||||||
eslint-plugin-svelte: ^2.18.0
|
eslint-plugin-svelte: ^2.18.0
|
||||||
eslint-plugin-unicorn: ^45.0.2
|
eslint-plugin-unicorn: ^45.0.2
|
||||||
|
fluent-svelte: ^1.6.0
|
||||||
idb-keyval: ^6.2.0
|
idb-keyval: ^6.2.0
|
||||||
mm-jsr: ^3.0.2
|
mm-jsr: ^3.0.2
|
||||||
nanoid: ^4.0.1
|
nanoid: ^4.0.1
|
||||||
@ -63,6 +64,7 @@ devDependencies:
|
|||||||
eslint-plugin-prettier: 4.2.1_u5wnrdwibbfomslmnramz52buy
|
eslint-plugin-prettier: 4.2.1_u5wnrdwibbfomslmnramz52buy
|
||||||
eslint-plugin-svelte: 2.18.0_dbthnr4b2bdkhyiebwn7su3hnq
|
eslint-plugin-svelte: 2.18.0_dbthnr4b2bdkhyiebwn7su3hnq
|
||||||
eslint-plugin-unicorn: 45.0.2_eslint@8.34.0
|
eslint-plugin-unicorn: 45.0.2_eslint@8.34.0
|
||||||
|
fluent-svelte: 1.6.0
|
||||||
postcss: 8.4.21
|
postcss: 8.4.21
|
||||||
postcss-load-config: 4.0.1_postcss@8.4.21
|
postcss-load-config: 4.0.1_postcss@8.4.21
|
||||||
prettier: 2.8.4
|
prettier: 2.8.4
|
||||||
@ -1444,6 +1446,19 @@ packages:
|
|||||||
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
|
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
|
||||||
dev: true
|
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:
|
/for-each/0.3.3:
|
||||||
resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
|
resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
|
||||||
dependencies:
|
dependencies:
|
||||||
@ -2881,6 +2896,10 @@ packages:
|
|||||||
util.promisify: 1.0.1
|
util.promisify: 1.0.1
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/tabbable/5.3.3:
|
||||||
|
resolution: {integrity: sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/tailwindcss/3.2.4_postcss@8.4.21:
|
/tailwindcss/3.2.4_postcss@8.4.21:
|
||||||
resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
|
resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
|
||||||
engines: {node: '>=12.13.0'}
|
engines: {node: '>=12.13.0'}
|
||||||
|
@ -4,6 +4,10 @@
|
|||||||
import type { PageData } from "./$types";
|
import type { PageData } from "./$types";
|
||||||
import { add, format, differenceInSeconds, addSeconds } from "date-fns";
|
import { add, format, differenceInSeconds, addSeconds } from "date-fns";
|
||||||
import { page } from "$app/stores";
|
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;
|
export let data: PageData;
|
||||||
$: session = data.session;
|
$: session = data.session;
|
||||||
@ -36,6 +40,12 @@
|
|||||||
const col = Math.floor(rat * 63 + 17);
|
const col = Math.floor(rat * 63 + 17);
|
||||||
return col;
|
return col;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let selectedFileIdx = 0;
|
||||||
|
|
||||||
|
let value = 0;
|
||||||
|
// onMount(() => (value = end.getTime()));
|
||||||
|
// $: sliderDate = new Date(value);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col h-full text-zinc-400">
|
<div class="flex flex-col h-full text-zinc-400">
|
||||||
@ -65,67 +75,96 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- main part -->
|
<!-- 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">
|
<div class="flex flex-col flex-none max-w-full">
|
||||||
<!-- sticky header -->
|
<!-- sticky header -->
|
||||||
<div
|
<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
|
<div class="grid-cols-11 -mr-px text-sm border-zinc-700 grid">
|
||||||
class="grid-cols-11 -mr-px text-sm leading-6 border-zinc-700 grid"
|
|
||||||
>
|
|
||||||
<div />
|
<div />
|
||||||
<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>
|
<span>{format(start, "hh:mm")}</span>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<span>{format(quarter, "hh:mm")}</span>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<span>{format(midpoint, "hh:mm")}</span>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<span>{format(threequarters, "hh:mm")}</span>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<span>{format(end, "hh:mm")}</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
<div class="flex flex-auto">
|
<div class="flex flex-auto mb-1">
|
||||||
<!-- <div
|
|
||||||
class="sticky left-0 z-10 w-14 flex-none ring-1 ring-zinc-700"
|
|
||||||
/> -->
|
|
||||||
|
|
||||||
<div class="grid flex-auto grid-cols-1 grid-rows-1">
|
<div class="grid flex-auto grid-cols-1 grid-rows-1">
|
||||||
<!-- file names list -->
|
<!-- file names list -->
|
||||||
<div
|
<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)
|
style="grid-template-rows: repeat({Object.keys($deltas)
|
||||||
.length}, minmax(2rem, 1fr));"
|
.length}, minmax(2rem, 1fr));"
|
||||||
>
|
>
|
||||||
<!-- <div class="row-end-1 h-7" /> -->
|
<!-- <div class="row-end-1 h-7" /> -->
|
||||||
|
|
||||||
{#each Object.keys($deltas) as filePath}
|
{#each Object.keys($deltas) as filePath, i}
|
||||||
<div
|
<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"
|
class="flex {i == selectedFileIdx
|
||||||
title={filePath}
|
? '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>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</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 -->
|
<!-- time vertical lines -->
|
||||||
<div
|
<div
|
||||||
class="col-start-1 col-end-2 row-start-1 grid-rows-1 divide-x divide-zinc-700/50 grid grid-cols-11"
|
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"
|
class="col-start-1 col-end-2 row-start-1 grid"
|
||||||
style="
|
style="
|
||||||
grid-template-columns: repeat(88, minmax(0, 1fr));
|
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;"
|
.length}, minmax(0px, 1fr)) auto;"
|
||||||
>
|
>
|
||||||
{#each Object.entries($deltas) as [filePath, fileDeltas], idx}
|
{#each Object.entries($deltas) as [filePath, fileDeltas], idx}
|
||||||
{#each fileDeltas as delta}
|
{#each fileDeltas as delta}
|
||||||
<li
|
<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="
|
style="
|
||||||
grid-row: {idx + 1} / span 1;
|
grid-row: {idx + 1} / span 1;
|
||||||
grid-column: {timeStampToCol(
|
grid-column: {timeStampToCol(
|
||||||
new Date(delta.timestampMs)
|
new Date(delta.timestampMs)
|
||||||
)} / span 2;"
|
)} / span 1;"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="/"
|
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
|
<p class="font-semibold text-zinc-800">
|
||||||
class="order-1 font-semibold text-zinc-800"
|
|
||||||
>
|
|
||||||
<!-- foo -->
|
<!-- foo -->
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
|
Loading…
Reference in New Issue
Block a user