mirror of
https://github.com/immich-app/immich.git
synced 2025-01-01 08:31:59 +00:00
basic ui complete
This commit is contained in:
Alex
parent
73b961f5fa
commit
16543a233b
6 changed files with 79 additions and 47 deletions
|
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts">
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import { mdiPencil, mdiTrashCan } from '@mdi/js';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="bg-gray-800 text-white min-h-[60px] grid grid-cols-[15%_70%_15%] place-items-center place-content-center rounded-2xl mx-4 mt-2 p-2"
|
||||
>
|
||||
<p class="col-start-2 col-span-1">Add to album "RANDOM"</p>
|
||||
|
||||
<div class="col-start-3 col-span-1 flex gap-2 justify-self-end">
|
||||
<CircleIconButton size="20" padding="2" title="Remove rule" icon={mdiTrashCan} />
|
||||
<CircleIconButton size="20" padding="2" title="Edit rule" icon={mdiPencil} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts">
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import { mdiPencil, mdiTrashCan } from '@mdi/js';
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="bg-gray-700 text-white min-h-[60px] grid grid-cols-[15%_70%_15%] place-items-center place-content-center rounded-2xl mx-4 mt-2 p-2"
|
||||
>
|
||||
<p class="col-start-2 col-span-1">And has Alex and Henry and Nate</p>
|
||||
|
||||
<div class="col-start-3 col-span-1 flex gap-2 justify-self-end">
|
||||
<CircleIconButton size="20" padding="2" title="Remove rule" icon={mdiTrashCan} />
|
||||
<CircleIconButton size="20" padding="2" title="Edit rule" icon={mdiPencil} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<div
|
||||
class="dark:bg-immich-dark-primary text-black min-h-[60px] flex place-items-center place-content-center mx-4 mt-2 rounded-2xl"
|
||||
>
|
||||
When an asset is uploaded
|
||||
</div>
|
||||
|
|
@ -1,76 +1,73 @@
|
|||
<script lang="ts">
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import WorkflowActionCard from '$lib/components/workflow-page/editor/workflow-action-card.svelte';
|
||||
import WorkflowRuleCard from '$lib/components/workflow-page/editor/workflow-rule-card.svelte';
|
||||
import WorkflowTriggerCard from '$lib/components/workflow-page/editor/workflow-trigger-card.svelte';
|
||||
import { mdiPlus } from '@mdi/js';
|
||||
</script>
|
||||
|
||||
<section class="h-full">
|
||||
<div id="workflow-control-bar" class="m-4 flex justify-between place-items-center gap-2">
|
||||
<div>
|
||||
<p class="uppercase text-lg dark:text-white">
|
||||
Add this photo to every albums and notify everybody about this glorious asset
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
id="workflow-control-bar"
|
||||
class="flex justify-between place-items-center border-b border-gray-800 p-4 bg-zinc-900"
|
||||
>
|
||||
<p class="uppercase text-lg dark:text-white">
|
||||
Add this photo to every albums and notify everybody about this glorious asset
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<div class="flex gap-2">
|
||||
<Button size="sm" color="red">Discard</Button>
|
||||
<Button size="sm">Disable</Button>
|
||||
<Button size="sm" color="green">Save</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="bg-green-800 text-white min-h-[60px] flex place-items-center place-content-center translate-y-3 mx-4 mt-2 rounded-2xl"
|
||||
>
|
||||
When an asset is uploaded
|
||||
<div id="workflows-selection">
|
||||
<!-- TRIGGER BLOCK -->
|
||||
<div class="translate-y-3">
|
||||
<p class="pl-4 text-sm dark:text-gray-300">TRIGGER</p>
|
||||
<WorkflowTriggerCard />
|
||||
</div>
|
||||
|
||||
<div class="w-full flex place-items-center place-content-center">
|
||||
<div class="flex flex-col place-items-center z-10">
|
||||
<div class="rounded-full border-[6px] border-green-800 h-[20px] w-[20px] bg-white translate-y-1"></div>
|
||||
<div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-green-800 via-purple-800 to-indigo-900"></div>
|
||||
<div class="rounded-full border-[6px] border-indigo-900 h-[20px] w-[20px] bg-white -translate-y-1"></div>
|
||||
<!-- VISUAL CONNECTOR -->
|
||||
<div class="w-full grid grid-cols-3 place-items-center place-content-center">
|
||||
<p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-sm dark:text-gray-300">RULES</p>
|
||||
<div class="col-start-2 col-span-1 flex flex-col place-items-center z-10">
|
||||
<div
|
||||
class="rounded-full border-[6px] border-immich-dark-primary h-[20px] w-[20px] bg-white translate-y-1"
|
||||
></div>
|
||||
<div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-immich-dark-primary via-gray-600 to-gray-700"></div>
|
||||
<div class="rounded-full border-[6px] border-gray-700 h-[20px] w-[20px] bg-white -translate-y-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="condition-blocks" class="-translate-y-3">
|
||||
<div class="bg-indigo-900 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4">
|
||||
And has Alex and Henry and Nate
|
||||
</div>
|
||||
<!-- RULES BLOCK -->
|
||||
<div id="rule-block" class="-translate-y-6">
|
||||
<WorkflowRuleCard />
|
||||
<WorkflowRuleCard />
|
||||
|
||||
<div
|
||||
class="bg-indigo-900 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
|
||||
>
|
||||
And from Nurnberg, Germany
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="border-2 border-indigo-500 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
|
||||
class="border-2 border-gray-700 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
|
||||
>
|
||||
<span><Icon path={mdiPlus} /></span> ADD RULE
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex place-items-center place-content-center -translate-y-6">
|
||||
<div class="flex flex-col place-items-center z-10">
|
||||
<div class="rounded-full border-[6px] border-indigo-900 h-[20px] w-[20px] bg-white translate-y-1"></div>
|
||||
<div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-indigo-900 via-indigo-800 to-gray-700"></div>
|
||||
<!-- VISUAL CONNECTOR -->
|
||||
<div class="w-full grid grid-cols-3 place-items-center place-content-center -translate-y-9">
|
||||
<p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-sm dark:text-gray-300">ACTIONS</p>
|
||||
<div class="col-start-2 col-span-1 flex flex-col place-items-center z-10">
|
||||
<div class="rounded-full border-[6px] border-gray-900 h-[20px] w-[20px] bg-white translate-y-1"></div>
|
||||
<div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-gray-900 via-indigo-800 to-gray-700"></div>
|
||||
<div class="rounded-full border-[6px] border-gray-700 h-[20px] w-[20px] bg-white -translate-y-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="action-blocks" class="-translate-y-11">
|
||||
<div
|
||||
class="bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
|
||||
>
|
||||
Add to Album
|
||||
</div>
|
||||
<div
|
||||
class="bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
|
||||
>
|
||||
Send webhook to abc.com with payload 123
|
||||
</div>
|
||||
<!-- ACTION BLOCK -->
|
||||
<div id="action-block" class="-translate-y-14">
|
||||
<WorkflowActionCard />
|
||||
<WorkflowActionCard />
|
||||
<div
|
||||
class="border-2 border-gray-500 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
import WorkflowCard from '$lib/components/workflow-page/workflow-card.svelte';
|
||||
</script>
|
||||
|
||||
<section id="workflow-list" class="border-r border-gray-600 h-full relative overflow-scroll">
|
||||
<section id="workflow-list" class="border-r border-gray-800 h-full relative overflow-scroll pr-2">
|
||||
<div class="sticky top-0 dark:bg-immich-dark-bg flex justify-between place-items-center pr-2 py-4">
|
||||
<p class="text-xs dark:text-white">CURRENT WORKFLOW</p>
|
||||
<p class="text-xs dark:text-white">CURRENT WORKFLOWS</p>
|
||||
<Button size="sm">New Workflow</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{#each Array.from({ length: 50 }) as _, i}
|
||||
{#each Array.from({ length: 50 }) as _}
|
||||
<WorkflowCard />
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</script>
|
||||
|
||||
<UserPageLayout title={data.meta.title}>
|
||||
<section class="grid grid-cols-[400px_1fr] h-full">
|
||||
<section class="grid grid-cols-[25%_1fr] h-full">
|
||||
<WorkflowList />
|
||||
<WorkflowEditor />
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue