🎨 small ui changes (#110)

tdrive/frontend/public/locales/en.json

@@ -245,7 +245,7 @@
     "components.item_context_menu.versions": "Versions",
     "components.item_context_menu.move": "Move",
     "components.item_context_menu.move.modal_header": "Move",
-    "components.item_context_menu.move_to_trash": "Move to trash",
+    "components.item_context_menu.move_to_trash": "Delete",
     "components.item_context_menu.delete": "Delete",
     "components.item_context_menu.move_multiple": "Move selected items",
     "components.item_context_menu.move_multiple.modal_header": "Move selected items",

tdrive/frontend/public/locales/fr.json

@@ -245,7 +245,7 @@
     "components.item_context_menu.versions": "Versions",
     "components.item_context_menu.move": "Déplacer",
     "components.item_context_menu.move.modal_header": "Déplacer",
-    "components.item_context_menu.move_to_trash": "Déplacer vers la corbeille",
+    "components.item_context_menu.move_to_trash": "Supprimer",
     "components.item_context_menu.delete": "Supprimer",
     "components.item_context_menu.move_multiple": "Déplacer les éléments sélectionnés",
     "components.item_context_menu.move_multiple.modal_header": "Déplacer les éléments sélectionnés",

tdrive/frontend/src/app/components/menus/menu.jsx

@@ -1,5 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
-
 import MenusManager from '@components/menus/menus-manager.jsx';
 
 /*
@@ -24,71 +23,91 @@ export default class Menu extends React.Component {
   */
 
   static closeAll() {
-    MenusManager.closeMenu();
+    MenusManager.closeAllMenus(); // Corrected method name to closeAllMenus()
   }
 
   constructor(props) {
-    super();
+    super(props);
     this.state = {
-      menus_manager: MenusManager,
+      isMenuOpen: false,
     };
+    this.open = false; // Added initialization for open state
+    this.container = React.createRef(); // Ref for container div
+    this.previousMenusId = null; // Added initialization for previousMenusId
+  }
+
+  componentDidMount() {
     MenusManager.addListener(this);
   }
+
   componentWillUnmount() {
     if (this.props.onClose && this.open) {
       this.props.onClose();
     }
     MenusManager.removeListener(this);
   }
+
   openMenuFromParent(menu, rect, position) {
     MenusManager.openMenu(menu, rect, position);
   }
+
   openMenu(evt) {
-    this.open = true;
+    if (this.open) {
-    evt.preventDefault();
+      this.closeAll();
-    evt.stopPropagation();
+    } else {
-    var elementRect = window.getBoundingClientRect(this.container);
+      this.open = true;
-    elementRect.x = elementRect.x || elementRect.left;
+      evt.preventDefault();
-    elementRect.y = elementRect.y || elementRect.top;
+      evt.stopPropagation();
-    this.previous_menus_id = MenusManager.openMenu(
+      var elementRect = this.container.current.getBoundingClientRect(); // Fixed getBoundingClientRect()
-      this.props.menu,
+      elementRect.x = elementRect.x || elementRect.left;
-      elementRect,
+      elementRect.y = elementRect.y || elementRect.top;
-      this.props.position,
+      this.previousMenusId = MenusManager.openMenu( // Updated variable name
-    );
+        this.props.menu,
-    if (this.props.onOpen) this.props.onOpen();
+        elementRect,
+        this.props.position,
+      );
+      if (this.props.onOpen) this.props.onOpen();
+    }
   }
+
   shouldComponentUpdate(nextProps, nextState) {
-    if (nextProps.menu != this.props.menu && this.open) {
+    if (nextProps.menu !== this.props.menu && this.open) { // Fixed comparison operator
       this.setState({});
     }
 
     if (
-      (this.state.menus_manager.menus.length == 0 && this.previous_menus_number > 0) ||
+      (MenusManager.menus.length === 0 && this.previousMenusNumber > 0) ||
-      this.state.menus_manager.last_opened_id != this.previous_menus_id
+      MenusManager.lastOpenedId !== this.previousMenusId // Updated variable name
     ) {
       if (this.open && this.props.onClose) {
         this.props.onClose();
       }
       this.open = false;
     }
-    if (this.previous_menus_number != this.state.menus_manager.menus.length) {
+    if (this.previousMenusNumber !== MenusManager.menus.length) {
-      this.previous_menus_number = this.state.menus_manager.menus.length;
+      this.previousMenusNumber = MenusManager.menus.length;
     }
 
-    if (this.props.style !== nextProps.style || this.props.className !== nextProps.className) {
+    if (
+      this.props.style !== nextProps.style ||
+      this.props.className !== nextProps.className
+    ) {
       return true;
     }
 
     return false;
   }
+
   render() {
     return (
       <div
-        ref={node => (this.container = node)}
+        ref={this.container}
         style={this.props.style}
-        onClick={evt => {
+        onClick={(evt) => {
+          console.log('if this open: ', this.state.isMenuOpen);
           if (this.props.toggle) {
             if (!this.open) {
+              this.setState({ ...this.state, isMenuOpen: true });
               this.openMenu(evt);
             } else {
               MenusManager.closeMenu();

tdrive/frontend/src/app/components/menus/menus-manager.jsx

@@ -16,6 +16,7 @@ class MenusManager extends Observable {
     this.lastOpen = 0;
     this.willClose = false;
     this.max_level = 0;
+    this.isOpen = 0;
 
     var that = this;
     Globals.window.addEventListener('keydown', function (evt) {
@@ -57,7 +58,7 @@ class MenusManager extends Observable {
     this.notify();
   }
   async openMenu(menu, domRect, positionType, options) {
-
+    this.isOpen = 1;
     if(typeof menu === 'function') {
       menu = await menu();
     }

tdrive/frontend/src/app/views/client/body/drive/context-menu.tsx

@@ -63,24 +63,6 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
               hide: item.is_directory,
               onClick: () => preview(item),
             },
-            {
-              type: 'menu',
-              text: Languages.t('components.item_context_menu.download'),
-              onClick: () => download(item.id),
-            },
-            { type: 'separator' },
-            {
-              type: 'menu',
-              text: Languages.t('components.item_context_menu.rename'),
-              hide: access === 'read',
-              onClick: () => setPropertiesModalState({ open: true, id: item.id }),
-            },
-            {
-              type: 'menu',
-              text: Languages.t('components.item_context_menu.manage_access'),
-              hide: access === 'read' || getPublicLinkToken(),
-              onClick: () => setAccessModalState({ open: true, id: item.id }),
-            },
             {
               type: 'menu',
               text: Languages.t('components.item_context_menu.share'),
@@ -89,20 +71,15 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
             },
             {
               type: 'menu',
-              text: Languages.t('components.item_context_menu.copy_link'),
+              text: Languages.t('components.item_context_menu.download'),
-              hide: !item.access_info.public?.level || item.access_info.public?.level === 'none',
+              onClick: () => download(item.id),
-              onClick: () => {
-                copyToClipboard(getPublicLink(item || parent?.item));
-                ToasterService.success(
-                  Languages.t('components.item_context_menu.copy_link.success'),
-                );
-              },
             },
+            { type: 'separator' },
             {
               type: 'menu',
-              text: Languages.t('components.item_context_menu.versions'),
+              text: Languages.t('components.item_context_menu.manage_access'),
-              hide: item.is_directory,
+              hide: access === 'read' || getPublicLinkToken(),
-              onClick: () => setVersionModal({ open: true, id: item.id }),
+              onClick: () => setAccessModalState({ open: true, id: item.id }),
             },
             {
               type: 'menu',
@@ -127,6 +104,29 @@ export const useOnBuildContextMenu = (children: DriveItem[], initialParentId?: s
                   },
                 }),
             },
+            {
+              type: 'menu',
+              text: Languages.t('components.item_context_menu.rename'),
+              hide: access === 'read',
+              onClick: () => setPropertiesModalState({ open: true, id: item.id }),
+            },
+            {
+              type: 'menu',
+              text: Languages.t('components.item_context_menu.copy_link'),
+              hide: !item.access_info.public?.level || item.access_info.public?.level === 'none',
+              onClick: () => {
+                copyToClipboard(getPublicLink(item || parent?.item));
+                ToasterService.success(
+                  Languages.t('components.item_context_menu.copy_link.success'),
+                );
+              },
+            },
+            {
+              type: 'menu',
+              text: Languages.t('components.item_context_menu.versions'),
+              hide: item.is_directory,
+              onClick: () => setVersionModal({ open: true, id: item.id }),
+            },
             { type: 'separator', hide: access !== 'manage' },
             {
               type: 'menu',

tdrive/frontend/src/app/views/client/side-bar/index.tsx

@@ -62,14 +62,6 @@ export default () => {
 
         <div className="mt-4" />
         <Title>Drive</Title>
-        <Button
-          onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: ""})); setParentId('root')}}
-          size="lg"
-          theme="white"
-          className={'w-full mt-2 mb-1 ' + (folderType === 'home' && viewId == '' ? activeClass : '')}
-        >
-          <CloudIcon className="w-5 h-5 mr-4" /> {Languages.t('components.side_menu.home')}
-        </Button>
         <Button
           onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: ""})); setParentId('user_' + user?.id)}}
           size="lg"
@@ -78,6 +70,14 @@ export default () => {
         >
           <UserIcon className="w-5 h-5 mr-4" /> {Languages.t('components.side_menu.my_drive')}
         </Button>
+        <Button
+          onClick={() => {history.push(RouterServices.generateRouteFromState({companyId: company, viewId: ""})); setParentId('root')}}
+          size="lg"
+          theme="white"
+          className={'w-full mt-2 mb-1 ' + (folderType === 'home' && viewId == '' ? activeClass : '')}
+        >
+          <CloudIcon className="w-5 h-5 mr-4" /> {Languages.t('components.side_menu.home')}
+        </Button>
         <Button
           onClick={() => {setParentId('shared_with_me')}}
           size="lg"