From fd99f11f8eeeedb128d04550102c9f6fe764fa50 Mon Sep 17 00:00:00 2001
From: Konstantin Chernyshev <38007247+k4black@users.noreply.github.com>
Date: Mon, 8 Jan 2024 22:25:05 +0100
Subject: [PATCH] feat: Fix sync button style, Fix intent level, Add button
 (#265)

* feat: add button, fix refresh style, fix indentations

* fix: add text-indent for title as std bullet points

* fix: add todoist prefix to css class

* fix: intent for task item

* fix: remove git keep

* fix: callTaskModal call

* fix: intends

* chore: add changelog items
---
 CHANGELOG.md               |  3 +++
 src/ui/TaskList.svelte     |  2 +-
 src/ui/TaskRenderer.svelte |  2 +-
 src/ui/TodoistQuery.svelte | 46 ++++++++++++++++++++++++++++++++------
 styles.css                 | 25 +++++++++++++++++----
 5 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3519f6..34ab69a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,10 +12,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added the option to wrap page links in parenthesis when creating tasks with the command. You may find this useful if you primarily use Todoist on mobile where links are less obvious. Thanks to [@ThDag](https://github.com/ThDag) for the contribution!
 - You can now use the `{{filename}}` placeholder in the filter property. This will be replaced with the name of the file where the query is defined.
   - For example, if the full file path is `My Vault/Notes/How to Take Smart Notes.md` then the replaced file name will be `How to Take Smart Notes`.
+- Create "Add item" button - open same modal window of task creation. 
 
 ### 🔁 Changes
 
 - You can now toggle whether or not task descriptions are rendered for each task.
+- Change the style of the sync button to match the new Obsidian style of the "edit" button.
+- Fix intent level to match std markdown levels - to have consistent style.
 
 ## [1.11.1] - 2023-04-09
 
diff --git a/src/ui/TaskList.svelte b/src/ui/TaskList.svelte
index 74a963d..6d876c6 100644
--- a/src/ui/TaskList.svelte
+++ b/src/ui/TaskList.svelte
@@ -41,7 +41,7 @@
 </script>
 
 {#if todos.length != 0}
-  <ul class="contains-task-list todoist-task-list">
+  <ul class="todoist-task-list">
     {#each todos as todo (todo.id)}
       <TaskRenderer
         {onClickTask}
diff --git a/src/ui/TaskRenderer.svelte b/src/ui/TaskRenderer.svelte
index bc8eeec..a3b2c12 100644
--- a/src/ui/TaskRenderer.svelte
+++ b/src/ui/TaskRenderer.svelte
@@ -114,7 +114,7 @@
   transition:fade={{ duration: settings.fadeToggle ? 400 : 0 }}
   class="task-list-item {priorityClass} {dateTimeClass}"
 >
-  <div>
+  <div class="todoist-task-container">
     <input
       disabled={!isCompletable}
       data-line="1"
diff --git a/src/ui/TodoistQuery.svelte b/src/ui/TodoistQuery.svelte
index 3654cfa..187dd30 100644
--- a/src/ui/TodoistQuery.svelte
+++ b/src/ui/TodoistQuery.svelte
@@ -6,6 +6,7 @@
   import type { Query } from "../query/query";
   import type { TodoistApi } from "../api/api";
   import type { Task, Project } from "../api/models";
+  import CreateTaskModal from "../modals/createTask/createTaskModal";
   import TaskList from "./TaskList.svelte";
   import GroupedTaskList from "./GroupedTaskList.svelte";
   import { Result } from "../result";
@@ -76,6 +77,15 @@
     }
   });
 
+  function callTaskModal() {
+    new CreateTaskModal(
+      app,
+      api,
+      settings,
+      true
+    );
+  }
+
   async function fetchTodos() {
     if (fetching) {
       return;
@@ -97,17 +107,39 @@
 </script>
 
 <h4 class="todoist-query-title">{title}</h4>
-<button
-  class="todoist-refresh-button"
+<div
+  class="edit-block-button todoist-add-button"
+  on:click={() => {
+    callTaskModal();
+  }}
+  aria-label="Add item"
+>
+  <svg
+    class="svg-icon lucide-code-2"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M9 1v8H1v2h8v8h2v-8h8v-2h-8V1h-2z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</div>
+<div
+  class={fetching ? "edit-block-button todoist-refresh-button todoist-refresh-disabled" : "edit-block-button todoist-refresh-button"}
   on:click={async () => {
     await fetchTodos();
   }}
-  disabled={fetching}
+  aria-label="Refresh list"
 >
   <svg
-    class={fetching ? "todoist-refresh-spin" : ""}
-    width="20px"
-    height="20px"
+    class={fetching ? "svg-icon lucide-code-2 todoist-refresh-spin" : "svg-icon lucide-code-2"}
+    width="20"
+    height="20"
     viewBox="0 0 20 20"
     fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
@@ -118,7 +150,7 @@
       clip-rule="evenodd"
     />
   </svg>
-</button>
+</div>
 <br />
 {#if fetchedOnce}
   {#if query.group}
diff --git a/styles.css b/styles.css
index 3167a87..71aa94f 100644
--- a/styles.css
+++ b/styles.css
@@ -3,15 +3,24 @@
   font-size: 1.25em;
 }
 
+.todoist-add-button {
+  margin-left: 8px;
+  margin-right: 66px;
+}
+
 .todoist-refresh-button {
-  display: inline;
+  height: unset;
   margin-left: 8px;
-  margin-right: 8px;
-  float: right;
+  margin-right: 34px;
+}
+
+.todoist-refresh-disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }
 
 .todoist-refresh-spin {
-  animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite reverse;
 }
 
 @-webkit-keyframes spin {
@@ -61,12 +70,19 @@
   margin-top: 20px;
 }
 
+.todoist-task-container {
+    text-indent: -38px;
+    padding-inline-start: 30px;
+}
+
 .todoist-task-content {
   display: inline;
+  text-indent: 0px;
 }
 
 ul.todoist-task-list {
   white-space: normal;
+  padding-inline-start: calc(var(--list-indent) - 11px);
 }
 
 .markdown-reading-view .hide-in-reading-view {
@@ -75,6 +91,7 @@ ul.todoist-task-list {
 
 .is-live-preview .block-language-todoist {
   padding-left: 15px;
+  padding-right: 10px;
 }
 
 .theme-dark {