Improvment UX & UI

vanarok · Oct 8, 2024 · 27305d0 · 27305d0
1 parent e3c9dea
commit 27305d0
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 19 deletions.
diff --git a/components/Task.vue b/components/Task.vue
@@ -1,15 +1,15 @@
 <template>
-    <div :class="{'task-finished': taskFinished}" class="container" @mouseover="hover = true" @mouseleave="hover = false">
+    <div :class="{'task-finished': taskFinished}" class="container" @mouseleave="hover = false" @mouseover="hover = true">
         <textarea
             :class="[{'task-text-overlay-effect': visibleOverlay}]"
             :value="task.description"
-            disabled
             class="task-text"
+            disabled
             style="background: none; font-family: Inter; font-size: 1.2em; padding: 0; width: 100%; height: 100%; border: none"
             type="text"
         />
         <Transition>
-            <div class="info" v-if="hover">
+            <div v-if="hover" class="info">
                 <span class="time">{{ getTime() }}</span>
                 <button
                     v-if="!task.project_id"
@@ -18,23 +18,23 @@
                 ></button>
                 <button v-if="false" class="i-mdi-content-save-outline save"></button>
                 <button
-                    class="i-mdi-timer-play"
                     :class="{disabled: taskFinished}"
                     :disabled="taskFinished"
+                    class="i-mdi-timer-play"
                     @click="startTask({task, status: statuses.running})"
                 ></button>
                 <button
-                    :disabled="taskFinished"
-                    @click="confirmRemoveTask(task)"
                     :class="{
                         'i-mdi-delete-alert-outline': confirmedRemove,
                         'i-mdi-delete-outline': !confirmedRemove,
                         disabled: taskFinished
                     }"
+                    :disabled="taskFinished"
+                    @click="confirmRemoveTask(task)"
                 ></button>
                 <button
-                    @click="setStatus({task, status: taskFinished ? statuses.beginning : statuses.finished})"
                     :class="{'i-mdi-check': taskFinished, 'i-mdi-check-outline': !taskFinished}"
+                    @click="setStatus({task, status: taskFinished ? statuses.beginning : statuses.finished})"
                 ></button>
             </div>
         </Transition>
@@ -213,7 +213,7 @@ const getTime = () => {
     border-radius: 2em;
     border: 1px solid #747bff22;
     width: 100%;
-    height: 9em;
+    min-height: 9em;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -236,10 +236,7 @@ const getTime = () => {
         max-width: 400px;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
-    }
-
-    .task-text-overlay-effect {
-        filter: blur(2px);
+        max-height: 2.5em;
     }
 }
 
@@ -272,6 +269,7 @@ const getTime = () => {
     gap: 0.5em;
     font-size: 1.2em;
 }
+
 .save {
     color: #747bff;
     top: 1em;
@@ -281,6 +279,7 @@ const getTime = () => {
 button {
     transition: transform 0.25s;
 }
+
 button:hover {
     transform: scale(1.3);
 }

diff --git a/entrypoints/sidepanel/App.vue b/entrypoints/sidepanel/App.vue
@@ -77,9 +77,15 @@ if (!isComplete.value) {
                                 </div>
                                 <div v-if="project.due_date">
                                     Due date
-                                    <div class="value" style="width: 8em">{{ new Date(project.due_date).toLocaleDateString() }}</div>
+                                    <div class="value" style="width: 8em">
+                                        {{ new Date(project.due_date).toLocaleDateString() }}
+                                    </div>
                                 </div>
                             </div>
+                            <div v-if="project" :title="project.private_notes" class="private-notes">
+                                <strong>Private notes:</strong>
+                                {{ project.private_notes }}
+                            </div>
                         </div>
                         <button v-else-if="assignProjectMode" id="project-choose-activator" @click="cancelAssignProjectMode">
                             <span>Cancel</span>
@@ -152,10 +158,28 @@ if (!isComplete.value) {
     }
 }
 
+.private-notes {
+    text-overflow: ellipsis;
+    min-height: 35.99px;
+    width: 100%;
+    max-width: 400px;
+    text-align: left;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
 .settings-button {
-    font-size: 2em;
+    font-size: 1.3rem;
     position: absolute;
-    bottom: 0.6em;
-    left: 0.3em;
+    bottom: 0.8rem;
+    left: 0.1rem;
+    color: #747bff66;
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+        color: #747bff;
+    }
 }
 </style>
diff --git a/entrypoints/sidepanel/style.css b/entrypoints/sidepanel/style.css
@@ -1,7 +1,7 @@
 :root {
     font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
     line-height: 1.5;
-    font-weight: 400;
+    font-weight: 500;
 
     color-scheme: light dark;
     color: rgba(255, 255, 255, 0.87);
@@ -12,6 +12,9 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-text-size-adjust: 100%;
+    transition:
+        color 0.5s,
+        background-color 0.5s;
 }
 
 a {
@@ -86,6 +89,7 @@ input {
 input[type='text']:hover {
     border-color: #646cff;
 }
+
 input[type='text']:focus,
 input[type='text']:focus-visible {
     outline: 4px auto -webkit-focus-ring-color;

diff --git a/views/Tasks.vue b/views/Tasks.vue
@@ -22,6 +22,7 @@ const useDebounce = (value: Ref<string>, delay: number): Ref<string> => {
     })
     return debounceValue
 }
+
 const filterDebounced = useDebounce(filter, 1000)
 const {
     data: tasks,
@@ -95,12 +96,12 @@ const {mutate: createTask} = useMutation({
         </h3>
         <Transition mode="out-in">
             <div v-if="isPending">
-                <div v-for="skeleton in 6" class="task-skeleton">
+                <div v-for="_skeleton in 6" class="task-skeleton">
                     <div class="task-text-skeleton"></div>
                 </div>
             </div>
             <div v-else-if="isError">{{ error.message }}</div>
-            <div v-else class="tasks">
+            <div v-else :class="{'recent-tasks': !projectId, 'project-tasks': projectId}" class="tasks">
                 <TransitionGroup name="list">
                     <Task v-for="task in tasks?.data" :key="task.id" :project :task="task" />
                 </TransitionGroup>
@@ -114,6 +115,20 @@ const {mutate: createTask} = useMutation({
     display: flex;
     flex-direction: column;
     gap: 1em;
+    overflow-y: scroll;
+}
+
+.recent-tasks {
+    height: calc(100vh - 10.3rem);
+}
+
+.project-tasks {
+    height: calc(100vh - 17.3rem);
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.tasks::-webkit-scrollbar {
+    display: none;
 }
 
 .task-skeleton {