eduvia/workavia-drive
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨 small ui changes (#110)

Browse Source
This commit is contained in:
Montassar Ghanmy
2023-06-23 10:53:03 +01:00
committed by GitHub
parent eadf2016bc
commit 6a7403a399
6 changed files with 85 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tdrive/frontend/public/locales/en.json
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+44 -25
View File
@@ -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;
evt.preventDefault();
evt.stopPropagation();
var elementRect = window.getBoundingClientRect(this.container);
elementRect.x = elementRect.x || elementRect.left;
elementRect.y = elementRect.y || elementRect.top;
this.previous_menus_id = MenusManager.openMenu(
this.props.menu,
elementRect,
this.props.position,
);
if (this.props.onOpen) this.props.onOpen();
if (this.open) {
this.closeAll();
} else {
this.open = true;
evt.preventDefault();
evt.stopPropagation();
var elementRect = this.container.current.getBoundingClientRect(); // Fixed getBoundingClientRect()
elementRect.x = elementRect.x || elementRect.left;
elementRect.y = elementRect.y || elementRect.top;
this.previousMenusId = MenusManager.openMenu( // Updated variable name
this.props.menu,
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) ||
this.state.menus_manager.last_opened_id != this.previous_menus_id
(MenusManager.menus.length === 0 && this.previousMenusNumber > 0) ||
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) {
this.previous_menus_number = this.state.menus_manager.menus.length;
if (this.previousMenusNumber !== MenusManager.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
+2 -1
View File
@@ -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
+29 -29
View File
@@ -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'),
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'),
);
},
text: Languages.t('components.item_context_menu.download'),
onClick: () => download(item.id),
},
{ type: 'separator' },
{
type: 'menu',
text: Languages.t('components.item_context_menu.versions'),
hide: item.is_directory,
onClick: () => setVersionModal({ open: true, id: item.id }),
text: Languages.t('components.item_context_menu.manage_access'),
hide: access === 'read' || getPublicLinkToken(),
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
+8 -8
View File
@@ -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"