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

@@ -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
 

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}

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"

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}

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 {