feat: add settings to hide or change size of unscheduled tasks

ivan-lednev · Oct 25, 2023 · 1b1136f · 1b1136f
1 parent 0a0a741
commit 1b1136f
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 5 deletions.
diff --git a/src/settings.ts b/src/settings.ts
@@ -24,6 +24,8 @@ export interface DayPlannerSettings {
   defaultDurationMinutes: number;
   showPathInTaskBlock: boolean;
   showTimestampInTaskBlock: boolean;
+  unscheduledTasksHeight: number;
+  showUncheduledTasks: boolean;
 }
 
 export const defaultSettings: DayPlannerSettings = {
@@ -49,6 +51,8 @@ export const defaultSettings: DayPlannerSettings = {
   defaultDurationMinutes: 30,
   showPathInTaskBlock: true,
   showTimestampInTaskBlock: false,
+  unscheduledTasksHeight: 100,
+  showUncheduledTasks: true,
 };
 
 export const defaultSettingsForTests = {

diff --git a/src/ui/components/task-container.svelte b/src/ui/components/task-container.svelte
@@ -119,12 +119,11 @@
 {#if !hideControls}
   <TimelineControls {day} />
 
-  {#if $displayedTasks.noTime.length > 0}
+  {#if $displayedTasks.noTime.length > 0 && $settings.showUncheduledTasks}
     <UnscheduledTaskContainer>
       {#each $displayedTasks.noTime as planItem}
         <Task
-          --task-height="{$settings.defaultDurationMinutes *
-            $settings.zoomLevel}px"
+          --task-height="{$settings.defaultDurationMinutes}px"
           {planItem}
           on:mouseup={() => handleTaskMouseUp(planItem)}
         >

diff --git a/src/ui/components/timeline-controls.svelte b/src/ui/components/timeline-controls.svelte
@@ -87,6 +87,11 @@
     $settings.startHour = Number(event.currentTarget.value);
   }
 
+  function handleUnscheduledTasksHeightInput(event: Event) {
+    // @ts-expect-error
+    $settings.unscheduledTasksHeight = Number(event.currentTarget.value);
+  }
+
   function handleZoomLevelInput(event: Event) {
     // @ts-expect-error
     $settings.zoomLevel = Number(event.currentTarget.value);
@@ -232,6 +237,35 @@
         />
       </SettingItem>
 
+      <SettingItem>
+        <svelte:fragment slot="name">Show unscheduled tasks</svelte:fragment>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div
+          slot="control"
+          class="checkbox-container mod-small"
+          class:is-enabled={$settings.showUncheduledTasks}
+          on:click={() => {
+            $settings.showUncheduledTasks = !$settings.showUncheduledTasks;
+          }}
+        >
+          <input tabindex="0" type="checkbox" />
+        </div>
+      </SettingItem>
+
+      {#if $settings.showUncheduledTasks}
+        <SettingItem>
+          <svelte:fragment slot="name"
+            >Unscheduled tasks height limit
+          </svelte:fragment>
+          <Dropdown
+            slot="control"
+            value={String($settings.unscheduledTasksHeight)}
+            values={["50", "100", "150", "200", "250", "300", "350", "400"]}
+            on:input={handleUnscheduledTasksHeightInput}
+          />
+        </SettingItem>
+      {/if}
+
       <SettingItem>
         <svelte:fragment slot="name">Auto-scroll to now</svelte:fragment>
         <!-- svelte-ignore a11y-click-events-have-key-events -->

diff --git a/src/ui/components/unscheduled-task-container.svelte b/src/ui/components/unscheduled-task-container.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { defaultDurationMinutes } from "../../constants";
   import { settings } from "../../global-store/settings";
 </script>
 
 <div
-  style:max-height="{$settings.zoomLevel * defaultDurationMinutes * 2}px"
+  style:max-height="{$settings.unscheduledTasksHeight}px"
   class="unscheduled-task-container"
 >
   <slot />