2.0.3

j-palindrome · Dec 26, 2023 · 4448ddd · 4448ddd
1 parent fe8710a
commit 4448ddd
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 41 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,10 +16,18 @@
 
 # Changelog
 
+## 2.0.3 (12/25/2023)
+**Fixed:**
+- Quick fix for menu hiding too quickly
+
+**Added:**
+- Better UI for dragging
+
 ## 2.0.2 (12/25/2023)
 
 **Fixed:**
 - Quick fix for Daily Notes not existing.
+- Fixed React keys for `Buttons`
 
 ## 2.0.1 (12/25/2023)
 

diff --git a/dist/manifest.json b/dist/manifest.json
@@ -1,7 +1,7 @@
 {
   "id": "time-ruler",
   "name": "Time Ruler",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "minAppVersion": "0.15.0",
   "description": "A drag-and-drop time ruler combining the best of a task list and a calendar view (integrates with Tasks, Full Calendar, and Dataview).",
   "author": "Joshua Tazman Reinier",

diff --git a/dist/styles.css b/dist/styles.css
@@ -17,12 +17,18 @@
 #time-ruler :is(.right-1) {
   right: 0.25rem;
 }
+#time-ruler :is(.right-10) {
+  right: 2.5rem;
+}
 #time-ruler :is(.top-0) {
   top: 0px;
 }
 #time-ruler :is(.top-full) {
   top: 100%;
 }
+#time-ruler :is(.\!z-50) {
+  z-index: 50 !important;
+}
 #time-ruler :is(.z-10) {
   z-index: 10;
 }
@@ -355,18 +361,12 @@
 #time-ruler :is(.border-t) {
   border-top-width: 1px;
 }
-#time-ruler :is(.border-t-2) {
-  border-top-width: 2px;
-}
 #time-ruler :is(.border-solid) {
   border-style: solid;
 }
 #time-ruler :is(.\!border-none) {
   border-style: none !important;
 }
-#time-ruler :is(.border-accent) {
-  border-color: var(--text-accent);
-}
 #time-ruler :is(.border-faint) {
   border-color: var(--text-faint);
 }
@@ -841,12 +841,18 @@ div.unscheduled div.time-ruler-group {
   --tw-backdrop-saturate: ;
   --tw-backdrop-sepia: ;
 }
+#time-ruler :is(.hover\:border-accent:hover) {
+  border-color: var(--text-accent);
+}
 #time-ruler :is(.hover\:border-normal:hover) {
   border-color: var(--text-normal);
 }
 #time-ruler :is(.hover\:bg-selection:hover) {
   background-color: var(--text-selection);
 }
+#time-ruler :is(.hover\:text-accent:hover) {
+  color: var(--text-accent);
+}
 #time-ruler :is(.hover\:underline:hover) {
   text-decoration-line: underline;
 }

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "id": "time-ruler",
   "name": "Time Ruler",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "minAppVersion": "0.15.0",
   "description": "A drag-and-drop time ruler combining the best of a task list and a calendar view (integrates with Tasks, Full Calendar, and Dataview).",
   "author": "Joshua Tazman Reinier",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -432,17 +432,17 @@ const Buttons = ({
   const checkShowing = (ev: MouseEvent) => {
     invariant(modalFrame.current)
     const els = document.elementsFromPoint(ev.clientX, ev.clientY)
-
     if (!els.includes(modalFrame.current)) {
       setShowingModal(false)
     }
   }
+
   useEffect(() => {
-    window.removeEventListener('mousedown', checkShowing)
+    window.removeEventListener('click', checkShowing)
     if (showingModal) {
-      window.addEventListener('mousedown', checkShowing)
+      window.addEventListener('click', checkShowing)
     }
-    return () => window.removeEventListener('mousedown', checkShowing)
+    return () => window.removeEventListener('click', checkShowing)
   }, [showingModal])
 
   const today = now.toISODate()
@@ -484,19 +484,19 @@ const Buttons = ({
   return (
     <>
       <div className={`flex w-full items-center space-x-1 rounded-lg`}>
-        <div
-          className='group relative'
-          onClick={(ev) => setShowingModal(!showingModal)}
-          ref={modalFrame}
-        >
-          <Button src='more-horizontal' />
+        <div className='group relative'>
+          <Button
+            src='more-horizontal'
+            onClick={(ev) => {
+              setShowingModal(!showingModal)
+              ev.stopPropagation()
+            }}
+          />
           {showingModal && (
             <div
               className='tr-menu'
-              onClick={(ev) => {
-                ev.stopPropagation()
-                ev.preventDefault()
-              }}
+              ref={modalFrame}
+              onClick={() => setShowingModal(false)}
             >
               <div className='flex flex-col items-center'>
                 <div
@@ -548,7 +548,7 @@ const Buttons = ({
                       string,
                       string
                     ]) => (
-                      <div className='flex flex-col items-center'>
+                      <div className='flex flex-col items-center' key={title}>
                         <Button
                           src={src}
                           title={title}
@@ -576,7 +576,7 @@ const Buttons = ({
                       string,
                       string
                     ]) => (
-                      <div className='flex flex-col items-center'>
+                      <div className='flex flex-col items-center' key={title}>
                         <Button
                           src={src}
                           title={title}

diff --git a/src/components/Minutes.tsx b/src/components/Minutes.tsx
@@ -27,18 +27,21 @@ export default function Minutes({
   noExtension?: boolean
   nested?: boolean
 }) {
-  const times: DateTime[] = []
-  const givenStart = DateTime.fromISO(startISO)
-  const givenEnd = DateTime.fromISO(endISO)
   const showingPastDates = useAppStore((state) => state.showingPastDates)
   const hideTimes = useAppStore((state) => state.settings.hideTimes)
   const calendarMode = useAppStore((state) => state.viewMode === 'week')
-  const type: TimeSpanTypes = calendarMode ? 'hours' : 'minutes'
+  const dayEnd = useAppStore((state) => state.settings.dayStartEnd[1])
+
   if (hideTimes) return <></>
 
+  const times: DateTime[] = []
+  const givenStart = DateTime.fromISO(startISO)
+  const givenEnd = DateTime.fromISO(endISO)
+  const type: TimeSpanTypes = calendarMode ? 'hours' : 'minutes'
+
   let start = roundMinutes(givenStart)
   let end = roundMinutes(givenEnd)
-  const dayEnd = useAppStore((state) => state.settings.dayStartEnd[1])
+
   let dayEndTime = start.set({ hour: dayEnd })
   if (dayEnd < 12 && end.get('hour') >= dayEnd)
     dayEndTime = dayEndTime.plus({ days: 1 })
@@ -149,7 +152,17 @@ function Time({ time, type, dragContainer }: TimeProps) {
   const hourDisplay = useHourDisplay(hours)
 
   return (
-    <div className={`group flex h-[16px] items-center justify-end`} key={iso}>
+    <div
+      className={`flex h-[16px] items-center justify-end relative`}
+      key={iso}
+    >
+      <div
+        className={`text-sm absolute right-10 h-4 items-center bg-primary rounded-lg px-2 text-accent !z-50 justify-center ${
+          isOver ? 'block' : 'hidden'
+        }`}
+      >
+        {hours}:{String(minutes).padStart(2, '0')}
+      </div>
       <div
         className={`w-10 h-full flex flex-none items-center justify-end ${selectedClassName}`}
         {...attributes}
@@ -160,9 +173,7 @@ function Time({ time, type, dragContainer }: TimeProps) {
         }}
       >
         <hr
-          className={`${
-            isOver ? 'border-accent border-t-2' : 'border-faint border-t'
-          } ${
+          className={`hover:border-accent border-faint my-0 border-0 border-t ${
             type === 'hours'
               ? hours % 6 === 0
                 ? 'w-6'
@@ -179,17 +190,11 @@ function Time({ time, type, dragContainer }: TimeProps) {
           }`}
         ></hr>
         <div
-          className={`ml-1 h-full flex-none font-menu text-xs w-4 ${
-            isOver ? 'text-accent' : 'text-muted'
-          }`}
+          className={`ml-1 h-full flex-none font-menu text-xs w-4 hover:text-accent text-muted`}
         >
           {(type === 'minutes' && minutes === 0) ||
           (type === 'hours' && hours % 3 === 0)
             ? hourDisplay
-            : isOver
-            ? minutes > 0
-              ? ':' + minutes
-              : hours
             : ''}
         </div>
       </div>
@@ -213,7 +218,7 @@ export function NowTime({ dragContainer }: { dragContainer: string }) {
 
   return (
     <div
-      className={`group flex w-full items-center rounded-lg pl-9 pr-2 hover:bg-selection transition-colors duration-300 ${
+      className={`flex w-full items-center rounded-lg pl-9 pr-2 hover:bg-selection transition-colors duration-300 ${
         isOver ? 'bg-selection' : ''
       }`}
       ref={(node) => {