Frontend Refactorings & Fixes

NoteSpaceTeam · May 24, 2024 · ad3d91c · ad3d91c
1 parent 0628088
commit ad3d91c
Show file tree

Hide file tree

Showing 17 changed files with 247 additions and 190 deletions.
diff --git a/code/client/src/App.scss b/code/client/src/App.scss
@@ -44,3 +44,11 @@
     }
   }
 }
+
+.editable-text {
+  background-color: transparent;
+  color: black;
+  border: 1px black;
+  font-size: 16px;
+  font-weight: 500;
+}
diff --git a/code/client/src/index.css b/code/client/src/index.css
@@ -60,19 +60,6 @@ button {
   background-color: rgba(0, 0, 0, 0.05) !important;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
-
 ::selection {
   background-color: grey;
   color: white;

diff --git a/code/client/src/ui/components/sidebar/Sidebar.scss b/code/client/src/ui/components/sidebar/Sidebar.scss
@@ -67,118 +67,4 @@
     align-items: center;
     gap: 10px;
   }
-
-  .workspace-tree {
-    ul {
-      padding: 0;
-      li {
-        padding: 1px;
-      }
-    }
-
-    .popup {
-      position: fixed;
-      background: black;
-      color: white;
-      border-radius: 15px;
-      margin-left: 20px;
-      display: flex;
-      flex-direction: column;
-      justify-content: start;
-      align-items: start;
-
-      button {
-        display: flex;
-        flex-direction: row;
-        justify-content: start;
-        align-items: center;
-        gap: 10px;
-        width: 100%;
-        border-radius: 15px;
-      }
-
-      button:hover {
-        color: white;
-        background-color: rgb(255, 255, 255, 0.1);
-      }
-    }
-  }
-
-  .resource {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    .resource-header {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      transition: 0.1s;
-      width: 90%;
-      border-radius: 5px;
-
-      :first-child {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-      }
-
-      div {
-        display: flex;
-        flex-direction: row;
-        justify-content: start;
-        border-radius: 5px;
-        user-select: none;
-      }
-    }
-
-    .resource-header:hover {
-      background-color: rgba(0, 0, 0, 0.1);
-      cursor: pointer;
-    }
-
-    .resource-header > button {
-      display: none;
-    }
-
-    .resource-header:hover > button {
-      display: block;
-    }
-
-    .resource-header > button:hover {
-      color: gray;
-    }
-
-    .resource-header > div {
-      white-space: nowrap;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      max-width: max-content;
-    }
-
-    .resource-children {
-      padding-left: 10px;
-    }
-
-    .resource-name {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      gap: 2px;
-    }
-
-    .folder svg {
-      color: darkgray;
-    }
-
-    button {
-      background-color: transparent;
-      color: black;
-      padding: 5px;
-      margin: 0;
-    }
-  }
 }
diff --git a/code/client/src/ui/components/sidebar/Sidebar.tsx b/code/client/src/ui/components/sidebar/Sidebar.tsx
@@ -4,7 +4,7 @@ import { RiMenuFold2Line, RiMenuFoldLine, RiTeamFill } from 'react-icons/ri';
 import useWorkspace from '@ui/contexts/workspace/useWorkspace';
 import useSidebarState from '@ui/components/sidebar/hooks/useSidebarState';
 import './Sidebar.scss';
-import WorkspaceTree from '@ui/components/sidebar/components/WorkspaceTree';
+import WorkspaceTree from '@ui/components/sidebar/components/workspace-tree/WorkspaceTree';
 import { IoMdSettings } from 'react-icons/io';
 import { TiHome } from 'react-icons/ti';
 

diff --git a/...s/sidebar/components/TreeResourceView.tsx → ...nents/workspace-tree/TreeResourceView.tsx b/...s/sidebar/components/TreeResourceView.tsx → ...nents/workspace-tree/TreeResourceView.tsx
@@ -36,13 +36,13 @@ function TreeResourceView({ resource, workspace, children, onCreateResource, onD
     <div className="resource">
       <div className="resource-header">
         <div>
-          <div>
+          <>
             {resource.children.length > 0 ? (
               <button onClick={handleToggle}>{isOpen ? <RiArrowDownSFill /> : <RiArrowRightSFill />}</button>
             ) : (
               <PiDotOutlineFill />
             )}
-          </div>
+          </>
 
           <CreateResourceContextMenu
             onCreateNew={(type: ResourceType) => onCreateResource!(resource.id, type)}

diff --git a/code/client/src/ui/components/sidebar/components/workspace-tree/WorkspaceTree.scss b/code/client/src/ui/components/sidebar/components/workspace-tree/WorkspaceTree.scss
@@ -0,0 +1,117 @@
+.workspace-tree {
+  ul {
+    padding: 0;
+    li {
+      padding: 1px;
+    }
+  }
+
+  .popup {
+    position: fixed;
+    background: black;
+    color: white;
+    border-radius: 15px;
+    margin-left: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+
+    button {
+      display: flex;
+      flex-direction: row;
+      justify-content: start;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      border-radius: 15px;
+    }
+
+    button:hover {
+      color: white;
+      background-color: rgb(255, 255, 255, 0.1);
+    }
+  }
+
+  .resource {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .resource-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      transition: 0.1s;
+      width: 90%;
+      border-radius: 5px;
+
+      :first-child {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+
+      div {
+        display: flex;
+        flex-direction: row;
+        justify-content: start;
+        border-radius: 5px;
+        user-select: none;
+      }
+    }
+
+    .resource-header:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+      cursor: pointer;
+    }
+
+    .resource-header > button {
+      display: none;
+    }
+
+    .resource-header:hover > button {
+      display: block;
+    }
+
+    .resource-header > button:hover {
+      color: gray;
+    }
+
+    .resource-header > div {
+      white-space: nowrap;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      max-width: max-content;
+
+      button {
+        padding: 0;
+      }
+    }
+
+    .resource-children {
+      padding-left: 10px;
+    }
+
+    .resource-name {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .folder svg {
+      color: darkgray;
+    }
+
+    button {
+      background-color: transparent;
+      color: black;
+      padding: 5px;
+      margin: 0;
+    }
+  }
+}
diff --git a/...ents/sidebar/components/WorkspaceTree.tsx → ...mponents/workspace-tree/WorkspaceTree.tsx b/...ents/sidebar/components/WorkspaceTree.tsx → ...mponents/workspace-tree/WorkspaceTree.tsx
@@ -1,9 +1,10 @@
-import TreeResourceView from '@ui/components/sidebar/components/TreeResourceView';
+import TreeResourceView from '@ui/components/sidebar/components/workspace-tree/TreeResourceView';
 import { WorkspaceMeta } from '@notespace/shared/src/workspace/types/workspace';
 import { getTree } from '@domain/workspaces/tree/utils';
 import { ResourceType } from '@notespace/shared/src/workspace/types/resource';
 import { DragEvent, useState } from 'react';
 import { Resources, WorkspaceOperations } from '@ui/contexts/workspace/WorkspaceContext';
+import './WorkspaceTree.scss';
 
 type WorkspaceTreeProps = {
   workspace: WorkspaceMeta;

diff --git a/code/client/src/ui/components/table/DataTable.scss b/code/client/src/ui/components/table/DataTable.scss
@@ -18,15 +18,25 @@
       color: white;
     }
 
-    .table-header button {
-      padding: 0;
-      margin: 0;
+    .table-header {
+      grid-template-rows: 4vh !important;
+
+      button {
+        padding: 0;
+        margin: 0;
+        font-weight: 500;
+
+        svg {
+          font-size: 3vh;
+          margin-left: -3vh;
+        }
+      }
     }
 
     .table-row,
     .table-header {
       display: grid;
-      grid-template-columns: 50px repeat(4, 1fr);
+      grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr));
       grid-template-rows: 5vh;
       row-gap: 10vh;
       grid-gap: 1vh;
@@ -38,9 +48,14 @@
       background-color: lightgray;
       border-radius: 5px;
       transition: background-color 0.2s;
+      white-space: nowrap;
 
       span {
-        width: min-content;
+        width: 100%;
+        display: inline-block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
       }
     }