Added clock/calendar input

obsidian-tasks-group · Nov 27, 2021 · 7d96867 · 7d96867
1 parent 923314e
commit 7d96867
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 7 deletions.
diff --git a/src/Settings.ts b/src/Settings.ts
@@ -2,12 +2,14 @@ export interface Settings {
     globalFilter: string;
     removeGlobalFilter: boolean;
     reminder: boolean; //To activate the reminder input
+    reminderCalendar: boolean; //To activate the reminder input
 }
 
 const defaultSettings: Settings = {
     globalFilter: '',
     removeGlobalFilter: false,
     reminder: false,
+    reminderCalendar: false,
 };
 
 let settings: Settings = { ...defaultSettings };

diff --git a/src/SettingsTab.ts b/src/SettingsTab.ts
@@ -65,11 +65,6 @@ export class SettingsTab extends PluginSettingTab {
                     });
             });
 
-        containerEl.createEl('div', {
-            cls: 'setting-item-description',
-            text: 'Enable reminder on edit/create task (requires obsidian-reminder plugin)',
-        });
-
         new Setting(containerEl)
             .setName('Enable reminder on edit/creat task')
             .setDesc(
@@ -84,5 +79,22 @@ export class SettingsTab extends PluginSettingTab {
                     await this.plugin.saveSettings();
                 });
             });
+
+        new Setting(containerEl)
+            .setName('Enable calendar modal')
+            .setDesc(
+                'Enable calendar modal on reminder (requires obsidian-reminder plugin)',
+            )
+            .addToggle((toggle) => {
+                const settings = getSettings();
+
+                toggle
+                    .setValue(settings.reminderCalendar)
+                    .onChange(async (value) => {
+                        updateSettings({ reminderCalendar: value });
+
+                        await this.plugin.saveSettings();
+                    });
+            });
     }
 }
diff --git a/src/ui/EditTask.svelte b/src/ui/EditTask.svelte
@@ -37,6 +37,7 @@
     let parsedDueDate: string = '';
     let parsedRecurrence: string = '';
     let parsedDone: string = '';
+    let parsedReminderDateTime: string = '';
 
     $: {
         if (!editableTask.startDate) {
@@ -142,6 +143,17 @@
         }
     }
 
+    $: {
+        if (!parsedReminderDateTime) {
+            parsedReminderDateTime = '';
+        } else {
+            parsedReminderTime = window
+                .moment(parsedReminderDateTime)
+                .format('YYYY-MM-DD HH:mm');
+            editableTask.reminderTime = parsedReminderTime;
+        }
+    }
+
     onMount(() => {
         const { globalFilter } = getSettings();
         const description = task.description
@@ -175,7 +187,7 @@
                 : '',
         };
         //Only load reminder panel if activated in settings
-        const { reminder } = getSettings();
+        const { reminder, reminderCalendar } = getSettings();
         if (!reminder) {
             var elem = document.getElementById('task-modal-reminder');
 
@@ -184,6 +196,26 @@
                     elem.parentNode.removeChild(elem);
                 }
             }
+            elem = document.getElementById('task-modal-reminder-calendar');
+            if (elem) {
+                if (elem.parentNode) {
+                    elem.parentNode.removeChild(elem);
+                }
+            }
+        }
+        if (!reminderCalendar) {
+            let elem = document.getElementById('reminder');
+            if (elem) {
+                let stilo =
+                    'width: 100%;margin:0;padding:0;box-sizing:border-box;';
+                elem.setAttribute('style', stilo);
+            }
+            elem = document.getElementById('task-modal-reminder-calendar');
+            if (elem) {
+                if (elem.parentNode) {
+                    elem.parentNode.removeChild(elem);
+                }
+            }
         }
         setTimeout(() => {
             descriptionInput.focus();
@@ -362,13 +394,31 @@
                 class="tasks-modal-date"
                 id="task-modal-reminder"
             >
-                <label for="reminder">⏰ Reminder</label>
+                <div>
+                    <label for="reminder">⏰ Reminder</label>
+                </div>
                 <input
+                    style="width: 88%;margin:0;padding:0;box-sizing:border-box;"
                     bind:value={editableTask.reminderTime}
                     id="reminder"
                     type="text"
                     placeholder="Try 'today 12:34 am' or '2021-02-21'"
                 />
+                <label
+                    style="margin:0;padding:0;box-sizing:border-box;"
+                    id="task-modal-reminder-calendar"
+                    class="task-calendar-hidden-label"
+                >
+                    <input
+                        bind:value={parsedReminderDateTime}
+                        type="datetime-local"
+                        id="reminder_calendar"
+                        class="task-calendar-hidden-input"
+                    />
+                    <button style="margin-right: 0px;" id="calendar_text"
+                        >📅</button
+                    >
+                </label>
                 <code>⏰ {@html parsedReminderTime}</code>
             </div>
         </div>

diff --git a/styles.css b/styles.css
@@ -40,10 +40,37 @@
     width: 100%;
 }
 
+/* .task-modal-reminder {
+    width: 100%;
+
+} */
+
 .tasks-modal hr {
     margin: 10px 0 10px 0;
 }
 
 .tasks-modal-date {
     margin-bottom: 10px;
 }
+.task-calendar-hidden-label {
+    display: inline-block;
+    position: relative;
+    line-height: 0;
+}
+.task-calendar-hidden-input {
+    position: absolute;
+    opacity: 0;
+    width: -webkit-fill-available;
+    height: 100%;
+    border: 0;
+    overflow: hidden;
+    cursor: pointer;
+}
+.task-calendar-hidden-input::-webkit-calendar-picker-indicator {
+    position: absolute;
+    top: -150%;
+    left: -150%;
+    width: 300%;
+    height: 300%;
+    cursor: pointer;
+}