fix(side-bar): 🐛 increase the bandwith of displaying task name

haydenull · Aug 29, 2023 · 9e28102 · 9e28102
1 parent b4ed00c
commit 9e28102
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/src/components/SidebarTask.tsx b/src/components/SidebarTask.tsx
@@ -60,10 +60,11 @@ const Task = ({ task, type = 'allDay' }: { task: IEvent; type?: 'overdue' | 'all
 
   return (
     <div
-      className="agenda-sidebar-task flex cursor-pointer"
+      className="agenda-sidebar-task flex cursor-pointer relative"
       style={{ opacity: isDone ? 0.4 : 0.9 }}
       onClick={() => navToBlock(task)}
     >
+      {/* time info */}
       <div
         className="flex flex-col justify-between text-right"
         style={{
@@ -80,20 +81,27 @@ const Task = ({ task, type = 'allDay' }: { task: IEvent; type?: 'overdue' | 'all
           </div>
         )}
       </div>
+
+      {/* divider */}
       <div
         style={{ width: '3px', backgroundColor: calendarConfig?.bgColor, borderRadius: '2px', margin: '0 6px' }}
       ></div>
-      <div style={{ width: 'calc(100% - 114px)' }} className="relative">
+
+      {/* task info */}
+      <div style={{ width: 'calc(100% - 59px)' }} className="relative">
+        {/* project info */}
         <div className="truncate" style={{ color: 'var(--ls-icon-color)', fontSize: '0.8em', opacity: 0.6 }}>
           {calendarConfig?.id}
         </div>
+        {/* task title */}
         <div
           className="agenda-sidebar-task__title line-clamp-2"
           style={{ width: 'calc(100% - 30px)' }}
           title={task.addOns.showTitle}
         >
           {task.addOns.showTitle}
         </div>
+        {/* NOW Badge */}
         {isActive && (
           <span
             className="ui__button bg-indigo-600 absolute right-0"
@@ -109,21 +117,16 @@ const Task = ({ task, type = 'allDay' }: { task: IEvent; type?: 'overdue' | 'all
         )}
       </div>
 
-      <div
-        onClick={embedToToday}
-        className="agenda-sidebar-task__add flex"
-        style={{ alignItems: 'center', paddingLeft: '8px' }}
-      >
-        <MdPlaylistAdd
-          style={{ color: 'var(--ls-icon-color)', fontSize: '1.2em', opacity: '0.7', marginTop: '0.2em' }}
-        />
-      </div>
-      <div
-        onClick={onClickStartPomodoro}
-        className="agenda-sidebar-task__add flex"
-        style={{ alignItems: 'center', paddingLeft: '8px' }}
-      >
-        <GiTomato style={{ color: 'var(--ls-icon-color)', fontSize: '0.9em', opacity: '0.7', marginTop: '0.2em' }} />
+      {/* actions */}
+      <div className="absolute top-0 h-full agenda-sidebar-task__action flex-row">
+        <div onClick={embedToToday} className="flex" style={{ alignItems: 'center', paddingLeft: '8px' }}>
+          <MdPlaylistAdd
+            style={{ color: 'var(--ls-icon-color)', fontSize: '1.2em', opacity: '0.7', marginTop: '0.2em' }}
+          />
+        </div>
+        <div onClick={onClickStartPomodoro} className="flex" style={{ alignItems: 'center', paddingLeft: '8px' }}>
+          <GiTomato style={{ color: 'var(--ls-icon-color)', fontSize: '0.9em', opacity: '0.7', marginTop: '0.2em' }} />
+        </div>
       </div>
     </div>
   )

diff --git a/src/constants/style.ts b/src/constants/style.ts
@@ -51,19 +51,27 @@ export const LOGSEQ_PROVIDE_COMMON_STYLE = `
     left: calc(50% - 2px);
     top: calc(100% + 2px);
   }
-  .agenda-sidebar-task__add {
-    display: none;
+  .agenda-sidebar-task__action {
+    display: flex;
+    width: 58px;
+    background: var(--ls-tertiary-background-color);
+    opacity: 0.85;
+    right: -60px;
+    visibility: hidden;
+    transition: right 0.1s ease;
   }
   .agenda-sidebar-task {
     padding: 5px 8px 5px 0;
     border-radius: 4px;
+    overflow: hidden;
   }
   .agenda-sidebar-task:hover {
     opacity: 1;
     background: var(--ls-tertiary-background-color);
   }
-  .agenda-sidebar-task:hover .agenda-sidebar-task__add {
-    display: flex;
+  .agenda-sidebar-task:hover .agenda-sidebar-task__action {
+    visibility: visible;
+    right: 0;
   }
   .agenda-sidebar-task:hover .agenda-sidebar-task__title {
     color: var(--ls-link-text-color);