Skip to content

Commit

Permalink
make menu items collapseable
Browse files Browse the repository at this point in the history
  • Loading branch information
scosman committed Oct 9, 2024
1 parent f8a0d4c commit 9d5d9a7
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 44 deletions.
2 changes: 1 addition & 1 deletion app/web_ui/src/routes/(app)/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
</div>
</a>
</li>
<li>
<li class="mb-4">
<details>
<summary>
<div class="grid grid-cols-[auto,1fr] gap-x-3 gap-y-1 text-sm">
Expand Down
87 changes: 44 additions & 43 deletions app/web_ui/src/routes/(app)/select_tasks_menu.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,27 @@
let id = "select-tasks-menu-" + Math.random().toString(36)
$: project_list = $projects?.projects || []
let manually_selected_project: ProjectInfo | null = null
// Undefined should fallback. Null is manually selected none
let manually_selected_project: ProjectInfo | null | undefined = undefined
let tasks_loading = false
let tasks_loading_error: string | null = null
let selected_project_tasks: Task[] = []
$: selected_project =
manually_selected_project === null
? null
: manually_selected_project || $current_project
function select_project(project: ProjectInfo) {
if (project?.path == selected_project?.path) {
// Actually deselect it
manually_selected_project = null
return
}
manually_selected_project = project
load_tasks(project)
}
$: selected_project = manually_selected_project || $current_project
$: load_tasks(selected_project)
async function load_tasks(project: ProjectInfo | null) {
Expand Down Expand Up @@ -77,14 +86,17 @@

<ul class="menu menu-md bg-base-200 rounded-box" {id}>
{#each project_list as project}
{#if project.path == selected_project?.path}
<li>
<h1 class="flex flex-row pr-1">
<div class="grow">
<span class="badge badge-secondary badge-outline">Project</span>
{project.name}
</div>
<div>
<li>
<button
on:click={() => select_project(project)}
class="flex flex-row pr-1"
>
<div class="grow">
<span class="badge badge-secondary badge-outline">Project</span>
{project.name}
</div>
<div>
{#if project.path == selected_project?.path}
<svg
fill="#000000"
class="w-3 h-3"
Expand All @@ -99,8 +111,25 @@
points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "
/>
</svg>
</div>
</h1>
{:else}
<svg
fill="#000000"
class="w-3 h-3"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 407.436 407.436"
xml:space="preserve"
>
<polygon
points="203.718,91.567 0,294.621 21.179,315.869 203.718,133.924 386.258,315.869 407.436,294.621 "
/>
</svg>
{/if}
</div>
</button>
{#if project.path == selected_project?.path}
<ul>
{#if tasks_loading}
<li
Expand Down Expand Up @@ -150,36 +179,8 @@
</a>
</li>
</ul>
</li>
{:else}
<li>
<button
on:click={() => select_project(project)}
class="flex flex-row pr-1"
>
<div class="grow">
<span class="badge badge-secondary badge-outline">Project</span>
{project.name}
</div>
<div>
<svg
fill="#000000"
class="w-3 h-3"
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 407.436 407.436"
xml:space="preserve"
>
<polygon
points="203.718,91.567 0,294.621 21.179,315.869 203.718,133.924 386.258,315.869 407.436,294.621 "
/>
</svg>
</div>
</button>
</li>
{/if}
{/if}
</li>
{/each}
<li class="pt-4">
<a href="/setup/create_project">
Expand Down

0 comments on commit 9d5d9a7

Please sign in to comment.