Details improvements

DustinBrett · Sep 30, 2024 · 8f5950e · 8f5950e
1 parent 76ab3b4
commit 8f5950e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 20 deletions.
diff --git a/components/system/Files/FileManager/Columns/StyledColumns.ts b/components/system/Files/FileManager/Columns/StyledColumns.ts
@@ -38,14 +38,15 @@ const StyledColumns = styled.span`
       }
 
       &::after {
-        border-right: 1px solid rgb(99, 99, 99);
+        border-left: 1px solid rgb(99, 99, 99);
         content: "";
         cursor: col-resize;
         height: 25px;
         padding-left: ${({ theme }) =>
           theme.sizes.fileManager.columnResizeWidth}px;
         position: absolute;
-        right: 0;
+        right: -${({ theme }) => theme.sizes.fileManager.columnResizeWidth}px;
+        z-index: 1;
       }
 
       &:hover {

diff --git a/components/system/Files/FileManager/Columns/index.tsx b/components/system/Files/FileManager/Columns/index.tsx
@@ -36,28 +36,14 @@ const Columns: FC<ColumnsProps> = ({
     <StyledColumns>
       <ol>
         {DEFAULT_COLUMN_ORDER.map((name) => (
-          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
           <li
             key={columns[name].name}
-            onClick={() => {
-              const sortBy = name as SortBy;
-
-              setSortOrder(
-                directory,
-                Object.keys(sortFiles(directory, files, sortBy, !ascending)),
-                sortBy,
-                !ascending
-              );
-            }}
             onPointerDownCapture={(event) => {
               const widthToEdge =
                 (event.target as HTMLElement).clientWidth -
                 event.nativeEvent.offsetX;
-              const startDragging =
-                widthToEdge <= sizes.fileManager.columnResizeWidth &&
-                widthToEdge >= 0;
 
-              draggingRef.current = startDragging ? name : "";
+              draggingRef.current = widthToEdge <= 1 ? name : "";
               lastClientX.current = event.clientX;
             }}
             onPointerMoveCapture={(event) => {
@@ -89,8 +75,19 @@ const Columns: FC<ColumnsProps> = ({
               }
             }}
             onPointerUpCapture={() => {
-              draggingRef.current = "";
-              lastClientX.current = 0;
+              if (draggingRef.current) {
+                draggingRef.current = "";
+                lastClientX.current = 0;
+              } else {
+                const sortBy = name as SortBy;
+
+                setSortOrder(
+                  directory,
+                  Object.keys(sortFiles(directory, files, sortBy, !ascending)),
+                  sortBy,
+                  !ascending
+                );
+              }
             }}
             style={{ width: `${columns[name].width}px` }}
           >

diff --git a/styles/defaultTheme/sizes.ts b/styles/defaultTheme/sizes.ts
@@ -27,7 +27,7 @@ const sizes = {
     columnGap: "1px",
     columnHeight: "25px",
     columnMinWidth: 80,
-    columnResizeWidth: 6,
+    columnResizeWidth: 7,
     detailsStartPadding: 14,
     gridEntryHeight: "70px",
     gridEntryWidth: "74px",