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-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",
|
||||
|
@ -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'}
|
||||
|
@ -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"
|
||||
>
|
||||
<div
|
||||
class="grid-cols-11 -mr-px text-sm leading-6 border-zinc-700 grid"
|
||||
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 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="flex flex-auto">
|
||||
<!-- <div
|
||||
class="sticky left-0 z-10 w-14 flex-none ring-1 ring-zinc-700"
|
||||
/> -->
|
||||
|
||||
<div class="col-span-1 flex items-center justify-center" />
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
class="flex {i == selectedFileIdx
|
||||
? 'bg-zinc-500/70'
|
||||
: ''}"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<p
|
||||
class="order-1 font-semibold text-zinc-800"
|
||||
class="flex flex-col items-center justify-center text-xs "
|
||||
>
|
||||
<p class="font-semibold text-zinc-800">
|
||||
<!-- foo -->
|
||||
</p>
|
||||
</a>
|
||||
|
Loading…
Reference in New Issue
Block a user