Add more date settings

5toliv · May 7, 2021 · 753a18e · 753a18e
1 parent 6481871
commit 753a18e
Show file tree

Hide file tree

Showing 16 changed files with 614 additions and 91 deletions.
diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-kanban",
 	"name": "Kanban",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"minAppVersion": "0.11.13",
 	"description": "Create markdown-backed Kanban boards in Obsidian.",
 	"author": "mgmeyers",

diff --git a/dist/styles.css b/dist/styles.css
@@ -286,6 +286,14 @@ button.kanban-plugin__lane-settings-button
   color: var(--text-muted);
 }
 
+.kanban-plugin__item-metadata > span {
+  display: block;
+}
+
+.kanban-plugin__item-metadata-date-relative::first-letter {
+  text-transform: uppercase;
+}
+
 .kanban-plugin__item-metadata a {
   text-decoration: none;
 }

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-kanban",
 	"name": "Kanban",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"minAppVersion": "0.11.13",
 	"description": "Create markdown-backed Kanban boards in Obsidian.",
 	"author": "mgmeyers",

diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "monkey-around": "^2.1.0",
     "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
+    "react-cool-onclickoutside": "^1.6.1",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-redux": "^7.2.3",

diff --git a/src/Settings.ts b/src/Settings.ts
@@ -26,9 +26,12 @@ export interface KanbanSettings {
   "show-checkboxes"?: boolean;
   "date-format"?: string;
   "date-display-format"?: string;
+  "hide-date-display"?: boolean;
+  "show-relative-date"?: boolean;
   "date-trigger"?: string;
   "link-date-to-daily-note"?: boolean;
   "hide-date-in-title"?: boolean;
+  "max-archive-size"?: number;
 
   "display-tags"?: boolean;
   "time-format"?: string;
@@ -140,21 +143,62 @@ export class SettingsManager {
         text.inputEl.value = value ? value.toString() : "";
 
         text.onChange((val) => {
-          if (numberRegEx.test(val)) {
+          if (val && numberRegEx.test(val)) {
             text.inputEl.removeClass("error");
 
             this.applySettingsUpdate({
               "lane-width": {
                 $set: parseInt(val),
               },
             });
-          } else {
+
+            return;
+          }
+
+          if (val) {
             text.inputEl.addClass("error");
+          }
+
+          this.applySettingsUpdate({
+            $unset: ["lane-width"],
+          });
+        });
+      });
+
+    new Setting(contentEl)
+      .setName("Maximum number of archived cards")
+      .setDesc(
+        "Archived cards can be viewed in markdown mode. This setting will begin removing old cards once the limit is reached. Setting this value to -1 will allow a board's archive to grow infinitely."
+      )
+      .addText((text) => {
+        const [value, globalValue] = this.getSetting("max-archive-size", local);
+
+        text.inputEl.setAttr("type", "number");
+        text.inputEl.placeholder = `${
+          globalValue ? globalValue : "-1"
+        } (default)`;
+        text.inputEl.value = value ? value.toString() : "";
+
+        text.onChange((val) => {
+          if (val && numberRegEx.test(val)) {
+            text.inputEl.removeClass("error");
 
             this.applySettingsUpdate({
-              $unset: ["lane-width"],
+              "max-archive-size": {
+                $set: parseInt(val),
+              },
             });
+
+            return;
+          }
+
+          if (val) {
+            text.inputEl.addClass("error");
           }
+
+          this.applySettingsUpdate({
+            $unset: ["max-archive-size"],
+          });
         });
       });
 
@@ -324,6 +368,76 @@ export class SettingsManager {
       });
     });
 
+    new Setting(contentEl)
+      .setName("Hide dates")
+      .setDesc(
+        "When toggled, card dates will not be shown. Relative dates will still be displayed if they are enabled."
+      )
+      .addToggle((toggle) => {
+        const [value, globalValue] = this.getSetting(
+          "hide-date-display",
+          local
+        );
+
+        if (value !== undefined) {
+          toggle.setValue(value as boolean);
+        } else if (globalValue !== undefined) {
+          toggle.setValue(globalValue as boolean);
+        }
+
+        toggle.onChange((newValue) => {
+          this.applySettingsUpdate({
+            "hide-date-display": {
+              $set: newValue,
+            },
+          });
+        });
+      })
+      .addExtraButton((b) => {
+        b.setIcon("reset")
+          .setTooltip("Reset to default")
+          .onClick(() => {
+            this.applySettingsUpdate({
+              $unset: ["hide-date-display"],
+            });
+          });
+      });
+
+    new Setting(contentEl)
+      .setName("Show relative date")
+      .setDesc(
+        "When toggled, cards will display the distance between today and the card's date. eg. 'In 3 days', 'A month ago'"
+      )
+      .addToggle((toggle) => {
+        const [value, globalValue] = this.getSetting(
+          "show-relative-date",
+          local
+        );
+
+        if (value !== undefined) {
+          toggle.setValue(value as boolean);
+        } else if (globalValue !== undefined) {
+          toggle.setValue(globalValue as boolean);
+        }
+
+        toggle.onChange((newValue) => {
+          this.applySettingsUpdate({
+            "show-relative-date": {
+              $set: newValue,
+            },
+          });
+        });
+      })
+      .addExtraButton((b) => {
+        b.setIcon("reset")
+          .setTooltip("Reset to default")
+          .onClick(() => {
+            this.applySettingsUpdate({
+              $unset: ["show-relative-date"],
+            });
+          });
+      });
+
     // new Setting(contentEl).setName("Time output format").then((setting) => {
     //   setting.addMomentFormat((mf) => {
     //     setting.descEl.appendChild(

diff --git a/src/components/Item/ItemContent.tsx b/src/components/Item/ItemContent.tsx
@@ -1,4 +1,4 @@
-import { MarkdownRenderer, getLinkpath } from "obsidian";
+import { MarkdownRenderer, getLinkpath, moment } from "obsidian";
 import React from "react";
 import { Item } from "../types";
 import { c, getDefaultDateFormat } from "../helpers";
@@ -13,6 +13,26 @@ export interface ItemContentProps {
   onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
 }
 
+function getRelativeDate(date: moment.Moment) {
+  const today = moment().startOf("day");
+
+  if (today.isSame(date, "day")) {
+    return "today";
+  }
+
+  const diff = date.diff(today, "day");
+
+  if (diff === -1) {
+    return "yesterday";
+  }
+
+  if (diff === 1) {
+    return "tomorrow";
+  }
+
+  return date.from(today);
+}
+
 export function ItemContent({
   item,
   isSettingsVisible,
@@ -28,6 +48,8 @@ export function ItemContent({
   const dateDisplayFormat =
     view.getSetting("date-display-format") || dateFormat;
   const shouldLinkDate = view.getSetting("link-date-to-daily-note");
+  const shouldShowRelativeDate = view.getSetting("show-relative-date");
+  const hideDateDisplay = view.getSetting("hide-date-display");
 
   const onAction = () => setIsSettingsVisible && setIsSettingsVisible(false);
 
@@ -84,8 +106,12 @@ export function ItemContent({
     );
   }
 
-  const dateStr = item.metadata.date?.format(dateFormat);
-  const dateDisplayStr = item.metadata.date?.format(dateDisplayFormat);
+  const dateStr = hideDateDisplay
+    ? null
+    : item.metadata.date?.format(dateFormat);
+  const dateDisplayStr = hideDateDisplay
+    ? null
+    : item.metadata.date?.format(dateDisplayFormat);
 
   const datePath = dateStr ? getLinkpath(dateStr) : null;
   const isResolved = dateStr
@@ -106,6 +132,11 @@ export function ItemContent({
       dateDisplayStr
     );
 
+  const relativeDate =
+    shouldShowRelativeDate && item.metadata.date
+      ? getRelativeDate(item.metadata.date)
+      : null;
+
   return (
     <div className={c("item-title")}>
       <div
@@ -136,7 +167,16 @@ export function ItemContent({
         dangerouslySetInnerHTML={markdownContent.innerHTML}
       />
       <div className={c("item-metadata")}>
-        {dateStr && <span className={c("item-metadata-date")}>{date}</span>}
+        <>
+          {relativeDate && (
+            <span className={c("item-metadata-date-relative")}>
+              {relativeDate}
+            </span>
+          )}
+          {!hideDateDisplay && dateStr && (
+            <span className={c("item-metadata-date")}>{date}</span>
+          )}
+        </>
       </div>
     </div>
   );

diff --git a/src/components/Item/ItemForm.tsx b/src/components/Item/ItemForm.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import useOnclickOutside from "react-cool-onclickoutside";
 
 import { Item } from "../types";
 import { c, generateInstanceId } from "../helpers";
@@ -15,6 +16,12 @@ export function ItemForm({ addItem }: ItemFormProps) {
   const [itemTitle, setItemTitle] = React.useState("");
   const { view } = React.useContext(ObsidianContext);
 
+  const clickOutsideRef = useOnclickOutside(() => {
+    setIsInputVisible(false);
+  }, {
+    ignoreClass: c("ignore-click-outside")
+  })
+
   const clear = () => {
     setItemTitle("");
     setIsInputVisible(false);
@@ -48,7 +55,7 @@ export function ItemForm({ addItem }: ItemFormProps) {
 
   if (isInputVisible) {
     return (
-      <>
+      <div ref={clickOutsideRef}>
         <div className={c("item-input-wrapper")}>
           <div data-replicated-value={itemTitle} className={c("grow-wrap")}>
             <textarea
@@ -69,7 +76,7 @@ export function ItemForm({ addItem }: ItemFormProps) {
             Cancel
           </button>
         </div>
-      </>
+      </div>
     );
   }