Started to create context menu

davidebianchi03 · Mar 16, 2024 · 6e0a7dc · 6e0a7dc
1 parent b520a34
commit 6e0a7dc
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 8 deletions.
diff --git a/frontend/src/components/fileexplorer/FileExplorer.tsx b/frontend/src/components/fileexplorer/FileExplorer.tsx
@@ -18,6 +18,9 @@ type FileExplorerState = {
     folder_name: string,
     children: ChildItem[],
     show_dropzone: boolean,
+    show_context_menu: boolean,
+    context_menu_x: number,
+    context_menu_y: number,
 }
 
 type TitleBarOption = {
@@ -27,6 +30,13 @@ type TitleBarOption = {
     callback: Function,
 }
 
+type ContextMenuOption = {
+    key: number,
+    title: string,
+    icon: IconProp,
+    callback: Function,
+}
+
 export default class FileExplorer extends React.Component<FileExplorerProps> {
 
     state: FileExplorerState;
@@ -38,17 +48,17 @@ export default class FileExplorer extends React.Component<FileExplorerProps> {
             callback: () => this.createFolder(""),
         },
         {
-            key: 1,
+            key: 2,
             title: "New File",
             icon: faFileCirclePlus,
             callback: () => this.createFile(""),
         },
-        {
-            key: 2,
-            title: "Upload",
-            icon: faUpload,
-            callback: () => { }
-        },
+        // {
+        //     key: 2,
+        //     title: "Upload",
+        //     icon: faUpload,
+        //     callback: () => { }
+        // },
         {
             key: 3,
             title: "Refresh",
@@ -57,6 +67,15 @@ export default class FileExplorer extends React.Component<FileExplorerProps> {
         }
     ]
 
+    context_menu_options: ContextMenuOption[] = [
+        {
+            key: 1,
+            title: "Open",
+            icon: faRotate,
+            callback: () => { },
+        }
+    ];
+
     current_path: string;
     filter_text: string;
 
@@ -68,6 +87,9 @@ export default class FileExplorer extends React.Component<FileExplorerProps> {
             folder_name: "/",
             children: [],
             show_dropzone: false,
+            show_context_menu: false,
+            context_menu_x: 0,
+            context_menu_y: 0,
         }
     }
 
@@ -288,7 +310,19 @@ export default class FileExplorer extends React.Component<FileExplorerProps> {
                                 }}
                         >
                             {this.state.children.map(child => (
-                                <div className="row" onDoubleClick={() => this.openChildItem(child)}>
+                                <div className="row"
+                                    onDoubleClick={() => this.openChildItem(child)}
+                                    onContextMenu={
+                                        (event: React.MouseEvent<HTMLDivElement>) => {
+                                            event.preventDefault();
+                                            this.setState(
+                                                {
+                                                    show_context_menu: true,
+                                                    context_menu_x: event.clientX,
+                                                    context_menu_y: event.clientY
+                                                });
+                                        }
+                                    }>
                                     <div className="type">
                                         <img src={child.is_directory ? folder_icon : file_icon} width={25} height={25} alt="type" />
                                     </div>
@@ -329,6 +363,22 @@ export default class FileExplorer extends React.Component<FileExplorerProps> {
                                     :
                                     <div></div>
                             }
+                            {
+                                this.state.show_context_menu ?
+                                    <div className="context_menu" style={{ top: this.state.context_menu_y, left: this.state.context_menu_x }}>
+                                        {
+                                            this.context_menu_options.map(
+                                                (obj: ContextMenuOption) =>
+                                                    <div className="context_menu_option">
+                                                        <FontAwesomeIcon icon={obj.icon} className="context_menu_icon"/>
+                                                        <span>{obj.title}</span>
+                                                    </div>
+                                            )
+                                        }
+                                    </div>
+                                    :
+                                    <div></div>
+                            }
                         </div>
 
                     </div>

diff --git a/frontend/src/components/fileexplorer/styles/FileExplorer.css b/frontend/src/components/fileexplorer/styles/FileExplorer.css
@@ -193,4 +193,33 @@
 .file-explorer .explorer .files .row .permissions {
     width: 150px;
     padding: 0px 2px;
+}
+
+.context_menu {
+    position: absolute;
+    z-index: 5;
+    background: #fff;
+    padding: 5px 0px;
+    border: solid rgb(233, 233, 233) 1px;
+    border-radius: 3px;
+    -webkit-box-shadow: 5px 5px 73px -9px #000000;
+    -moz-box-shadow: 5px 5px 73px -9px #000000;
+    -o-box-shadow: 5px 5px 73px -9px #000000;
+    box-shadow: 5px 5px 73px -9px #000000;
+}
+
+.context_menu .context_menu_option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 3px 10px;
+}
+
+.context_menu .context_menu_option:hover{
+    background-color: #f3f3f3;
+    cursor: pointer;
+}
+
+.context_menu .context_menu_option .context_menu_icon {
+    margin-right: 25px;
 }