2.0.0-beta.2

Fixes: - Settings are properly saved - Hiding a source will now move it to the bottom of the source list - Fix wordcount for Chinese characters - plugin should properly unload
liamcain · Apr 20, 2021 · f5c39c4 · f5c39c4
1 parent 1619467
commit f5c39c4
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 152 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@popperjs/svelte": "0.1.1",
     "obsidian": "obsidianmd/obsidian-api#master",
-    "obsidian-calendar-ui": "0.4.0",
+    "obsidian-calendar-ui": "liamcain/obsidian-calendar-ui#c275987d032377bb141747da0f9db2c5cde2df03",
     "obsidian-daily-notes-interface": "0.9.2",
     "semver": "7.3.5",
     "svelte": "3.37.0",

diff --git a/src/io/dailyNotes.ts b/src/io/dailyNotes.ts
@@ -9,6 +9,19 @@ import {
 import type { ISettings } from "src/settings";
 import { createConfirmationDialog } from "src/ui/modal";
 
+function getPeriodicity(granularity: IGranularity): string {
+  const periodicity = {
+    day: "daily",
+    week: "weekly",
+    month: "monthly",
+  };
+  return periodicity[granularity];
+}
+
+function capitalize(text: string): string {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
 /**
  * Create a Daily Note for a given date.
  */
@@ -38,7 +51,7 @@ export async function tryToCreatePeriodicNote(
       cta: "Create",
       onAccept: createFile,
       text: `File ${filename} does not exist. Would you like to create it?`,
-      title: "New Daily Note",
+      title: `New ${capitalize(getPeriodicity(granularity))} Note`,
     });
   } else {
     await createFile();

diff --git a/src/io/monthlyNotes.ts b/src/io/monthlyNotes.ts
diff --git a/src/io/weeklyNotes.ts b/src/io/weeklyNotes.ts
diff --git a/src/migrations/index.ts b/src/migrations/index.ts
@@ -25,5 +25,5 @@ export default function applyMigrations(settings: IAnySettings): ISettings {
       migration.apply(settings);
     }
   }
-  return;
+  return settings;
 }
diff --git a/src/ui/Calendar.svelte b/src/ui/Calendar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Moment } from "moment";
-  import type { App } from "obsidian";
+  import type { Plugin } from "obsidian";
   import {
     Calendar as CalendarBase,
     configureGlobalMomentLocale,
@@ -14,7 +14,7 @@
   let today: Moment;
   $: today = getToday($settings);
 
-  export let app: App;
+  export let plugin: Plugin;
   export let displayedMonth: Moment = today;
   export let eventHandlers: CallableFunction[];
 
@@ -45,7 +45,7 @@
 </script>
 
 <CalendarBase
-  {app}
+  {plugin}
   sources={$sources}
   getSourceSettings={settings.getSourceSettings}
   {today}

diff --git a/src/ui/settings/DragHandle.svelte b/src/ui/settings/DragHandle.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  export let dragDisabled: boolean;
+  export let startDrag: (ev: MouseEvent | TouchEvent) => void;
+  export let handleKeyDown: (ev: KeyboardEvent) => void;
+</script>
+
+<div
+  aria-label="Drag to rearrange"
+  style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
+  class="handle"
+  on:mousedown={startDrag}
+  on:touchstart={startDrag}
+  on:keydown={handleKeyDown}
+>
+  <svg
+    fill="none"
+    height="32"
+    viewBox="0 0 17 32"
+    width="17"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="3.13232" cy="3.64536" r="3" fill="currentColor" />
+    <circle cx="13.167" cy="3.64536" r="3" fill="currentColor" />
+    <circle cx="3.13232" cy="15.8953" r="3" fill="currentColor" />
+    <circle cx="13.167" cy="15.8953" r="3" fill="currentColor" />
+    <circle cx="3.13232" cy="28.1452" r="3" fill="currentColor" />
+    <circle cx="13.167" cy="28.1452" r="3" fill="currentColor" />
+  </svg>
+</div>
+
+<style>
+  .handle {
+    color: var(--background-modifier-border);
+    height: 16px;
+    margin-right: 8px;
+    width: 16px;
+  }
+
+  :global(.active) .handle {
+    color: var(--text-accent-hover);
+  }
+
+  .handle svg {
+    width: 16px;
+    height: 16px;
+  }
+</style>
diff --git a/src/ui/settings/Sources.svelte b/src/ui/settings/Sources.svelte
@@ -1,9 +1,11 @@
 <script>
   import { debounce } from "obsidian";
-
   import { writable } from "svelte/store";
   import { dndzone, TRIGGERS } from "svelte-dnd-action";
 
+  import { partition } from "src/ui/utils";
+
+  import DragHandle from "./DragHandle.svelte";
   import Picker from "./palette/Picker.svelte";
   import { settings, sources } from "../stores";
   import SourceSettingsModal from "./SourceSettingsModal";
@@ -15,14 +17,22 @@
   let dragDisabled = true;
 
   let activeItemId;
+  let enabledItems;
+  let disabledItems;
   let items = writable([]);
   let saveSettings = debounce(() => saveAllSourceSettings($items), 200, false);
 
-  sources.subscribe((sourcesVal) => {
-    items.set(
-      sourcesVal.map(getSourceSettings).sort((a, b) => a.order - b.order)
+  function refreshItems() {
+    const allItems = $sources
+      .map(getSourceSettings)
+      .sort((a, b) => a.order - b.order);
+    [enabledItems, disabledItems] = partition(
+      allItems,
+      (item) => item.display !== "none"
     );
-  });
+  }
+
+  sources.subscribe(refreshItems);
 
   function getSourceSettings(source) {
     return {
@@ -33,15 +43,14 @@
   }
 
   function handleConsider(event) {
-    items.set(event.detail.items);
-
+    enabledItems = event.detail.items;
     if (event.detail.info.trigger === TRIGGERS.DRAG_STOPPED) {
       dragDisabled = true;
     }
   }
 
   function handleFinalize(event) {
-    items.set(event.detail.items);
+    enabledItems = event.detail.items;
     dragDisabled = true;
     saveAllSourceSettings($items);
   }
@@ -77,9 +86,9 @@
           },
         };
 
-        // mutate `item` so display refreshes
         item.display = sourceSettings.display;
-        items.update((val) => val);
+        refreshItems();
+
         settings.set(newSettings);
         return newSettings;
       });
@@ -96,41 +105,40 @@
 <div class="container">
   <div
     class="layout-grid"
-    use:dndzone={{ items: $items, dragDisabled, flipDurationMs }}
+    use:dndzone={{
+      items: enabledItems,
+      dragDisabled,
+      dropTargetStyle: {},
+      flipDurationMs,
+    }}
     on:consider={handleConsider}
     on:finalize={handleFinalize}
   >
-    {#each $items as item (item.id)}
+    {#each enabledItems as item (item.id)}
       <div
         class="calendar-source"
         class:active={item.id === activeItemId}
         on:click|stopPropagation={() => setActiveItem(item)}
       >
-        <div
-          aria-label="Drag to rearrange"
-          style={dragDisabled ? "cursor: grab" : "cursor: grabbing"}
-          class="handle"
-          on:mousedown={startDrag}
-          on:touchstart={startDrag}
-          on:keydown={handleKeyDown}
-        >
-          <svg
-            fill="none"
-            height="32"
-            viewBox="0 0 17 32"
-            width="17"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <circle cx="3.13232" cy="3.64536" r="3" fill="currentColor" />
-            <circle cx="13.167" cy="3.64536" r="3" fill="currentColor" />
-            <circle cx="3.13232" cy="15.8953" r="3" fill="currentColor" />
-            <circle cx="13.167" cy="15.8953" r="3" fill="currentColor" />
-            <circle cx="3.13232" cy="28.1452" r="3" fill="currentColor" />
-            <circle cx="13.167" cy="28.1452" r="3" fill="currentColor" />
-          </svg>
-        </div>
+        <DragHandle {dragDisabled} {startDrag} {handleKeyDown} />
+        {item.name}
+        <Picker
+          disabled={item.display === "none"}
+          highlighted={item.display === "calendar-and-menu"}
+          bind:value={item.color}
+          on:input={saveSettings}
+        />
+      </div>
+    {/each}
+    {#each disabledItems as item (item.id)}
+      <div
+        class="calendar-source disabled"
+        class:active={item.id === activeItemId}
+        on:click|stopPropagation={() => setActiveItem(item)}
+      >
         {item.name}
         <Picker
+          disabled={item.display === "none"}
           highlighted={item.display === "calendar-and-menu"}
           bind:value={item.color}
           on:input={saveSettings}
@@ -171,6 +179,11 @@
     width: 100%;
   }
 
+  .calendar-source.disabled {
+    color: var(--text-muted);
+    padding-left: 32px;
+  }
+
   .calendar-source:hover {
     border: 1px solid var(--text-faint);
   }
@@ -183,20 +196,4 @@
   .calendar-source:nth-child(2) {
     width: calc(50% - 6px);
   }
-
-  .handle {
-    color: var(--background-modifier-border);
-    height: 16px;
-    margin-right: 8px;
-    width: 16px;
-  }
-
-  .active .handle {
-    color: var(--text-accent-hover);
-  }
-
-  .handle svg {
-    width: 16px;
-    height: 16px;
-  }
 </style>