haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-07-13 15:05:30 +00:00
Code Issues Releases Wiki Activity

['dir view'] for 'sdoc' file: add menu option 'Convert & Export', and (#6574)

Browse Source 
make 'convert to markdown', 'convert to docx', 'export as docx' as its
sub-menu options

- menus: the 'more operation' menu for the current `<tr>`,
the 'more operation' menu for the single selected file,
the context menu
This commit is contained in:
llj 2024-08-16 20:27:18 +08:00 committed by GitHub
parent d77a712964
commit 2db1e43f21
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 129 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/components/context-menu/context-menu.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import listener from './globalEventListener';
import { hideMenu } from './actions';
import { callIfExists } from './helpers';
@ -24,6 +25,8 @@ class ContextMenu extends React.Component {
isVisible: false,
currentObject: null,
menuList: [],
isSubMenuShown: false,
currentItem: ''
};
}
@ -183,6 +186,28 @@ class ContextMenu extends React.Component {
event.stopPropagation();
};
onDropDownMouseMove = (e) => {
if (this.state.isSubMenuShown && e.target && e.target.className === 'dropdown-item') {
this.setState({
isSubMenuShown: false
});
}
};
toggleSubMenu = (e) => {
e.stopPropagation();
this.setState({
isSubMenuShown: !this.state.isSubMenuShown
});
};
toggleSubMenuShown = (item) => {
this.setState({
isSubMenuShown: true,
currentItem: item.key
});
};
render() {
const inlineStyle = { position: 'fixed', opacity: 0, pointerEvents: 'none', display: 'block' };
return (
@ -190,6 +215,37 @@ class ContextMenu extends React.Component {
{this.state.menuList.map((menuItem, index) => {
if (menuItem === 'Divider') {
return <div key={index} className="seafile-divider dropdown-divider"></div>;
} else if (menuItem.subOpList) {
return (
<Dropdown
key={index}
direction="right"
className="w-100"
isOpen={this.state.isSubMenuShown && this.state.currentItem == menuItem.key}
toggle={this.toggleSubMenu}
onMouseMove={(e) => {e.stopPropagation();}}
>
<DropdownToggle
tag='div'
className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
onMouseEnter={this.toggleSubMenuShown.bind(this, menuItem)}
>
<span className="mr-auto">{menuItem.value}</span>
<i className="sf3-font-down sf3-font rotate-270"></i>
</DropdownToggle>
<DropdownMenu>
{menuItem.subOpList.map((item, index) => {
if (item == 'Divider') {
return <DropdownItem key={index} divider />;
} else {
return (
<DropdownItem key={index} data-operation={item.key} onClick={this.onMenuItemClick} onContextMenu={this.onContextMenu}>{item.value}</DropdownItem>
);
}
})}
</DropdownMenu>
</Dropdown>
);
} else {
return (
<button

60
frontend/src/components/dropdown-menu/item-dropdown-menu.js
View File

@ -35,6 +35,8 @@ class ItemDropdownMenu extends React.Component {
this.state = {
menuList: [],
isItemMenuShow: false,
isSubMenuShown: false,
currentItem: ''
};
}
@ -112,6 +114,28 @@ class ItemDropdownMenu extends React.Component {
this.props.onMenuItemClick(operation, event, item);
};
onDropDownMouseMove = (e) => {
if (this.state.isSubMenuShown && e.target && e.target.className === 'dropdown-item') {
this.setState({
isSubMenuShown: false
});
}
};
toggleSubMenu = (e) => {
e.stopPropagation();
this.setState({
isSubMenuShown: !this.state.isSubMenuShown
});
};
toggleSubMenuShown = (item) => {
this.setState({
isSubMenuShown: true,
currentItem: item.key
});
};
render() {
let menuList = this.state.menuList;
let { toggleClass, toggleChildren, tagName, menuStyle } = this.props;
@ -165,10 +189,44 @@ class ItemDropdownMenu extends React.Component {
// onClick={this.onDropdownToggleClick}
/>
<ModalPortal>
<DropdownMenu style={menuStyle}>
<DropdownMenu
style={menuStyle}
onMouseMove={this.onDropDownMouseMove}
>
{menuList.map((menuItem, index) => {
if (menuItem === 'Divider') {
return <DropdownItem key={index} divider />;
} else if (menuItem.subOpList) {
return (
<Dropdown
key={index}
direction="right"
className="w-100"
isOpen={this.state.isSubMenuShown && this.state.currentItem == menuItem.key}
toggle={this.toggleSubMenu}
onMouseMove={(e) => {e.stopPropagation();}}
>
<DropdownToggle
tag='div'
className="dropdown-item font-weight-normal rounded-0 d-flex align-items-center"
onMouseEnter={this.toggleSubMenuShown.bind(this, menuItem)}
>
<span className="mr-auto">{menuItem.value}</span>
<i className="sf3-font-down sf3-font rotate-270"></i>
</DropdownToggle>
<DropdownMenu>
{menuItem.subOpList.map((item, index) => {
if (item == 'Divider') {
return <DropdownItem key={index} divider />;
} else {
return (
<DropdownItem key={index} data-toggle={item.key} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{item.value}</DropdownItem>
);
}
})}
</DropdownMenu>
</Dropdown>
);
} else {
return (
<DropdownItem className='p-0' key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>

1
frontend/src/utils/text-translation.js
View File

@ -25,6 +25,7 @@ const TextTranslation = {
'UNLOCK': { key: 'Unlock', value: gettext('Unlock') },
'FREEZE_DOCUMENT': { key: 'Freeze Document', value: gettext('Freeze Document') },
'UNFREEZE_DOCUMENT': { key: 'Unfreeze Document', value: gettext('Unfreeze Document') },
'CONVERT_AND_EXPORT': { key: 'Convert & Export', value: gettext('Convert & Export') },
'CONVERT_TO_MARKDOWN': { key: 'Convert to Markdown', value: gettext('Convert to Markdown') },
'CONVERT_TO_SDOC': { key: 'Convert to sdoc', value: gettext('Convert to sdoc') },
'CONVERT_TO_DOCX': { key: 'Convert to docx', value: gettext('Convert to docx') },

18
frontend/src/utils/utils.js
View File

@ -547,8 +547,11 @@ export const Utils = {
getFileOperationList: function (isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
let list = [];
const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, TAGS, UNLOCK, LOCK, UNFREEZE_DOCUMENT, FREEZE_DOCUMENT,
HISTORY, ACCESS_LOG, PROPERTIES, OPEN_VIA_CLIENT, ONLYOFFICE_CONVERT, CONVERT_TO_MARKDOWN, CONVERT_TO_DOCX, EXPORT_DOCX, CONVERT_TO_SDOC } = TextTranslation;
const {
SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, TAGS, UNLOCK, LOCK, UNFREEZE_DOCUMENT, FREEZE_DOCUMENT,
HISTORY, ACCESS_LOG, PROPERTIES, OPEN_VIA_CLIENT, ONLYOFFICE_CONVERT,
CONVERT_AND_EXPORT, CONVERT_TO_MARKDOWN, CONVERT_TO_DOCX, EXPORT_DOCX, CONVERT_TO_SDOC
} = TextTranslation;
const permission = dirent.permission;
const { isCustomPermission, customPermission } = Utils.getUserPermission(permission);
@ -637,9 +640,14 @@ export const Utils = {
}
if (dirent.name.endsWith('.sdoc')) {
list.push(CONVERT_TO_MARKDOWN);
list.push(CONVERT_TO_DOCX);
list.push(EXPORT_DOCX);
if (Utils.isDesktop()) {
let subOpList = [CONVERT_TO_MARKDOWN, CONVERT_TO_DOCX, EXPORT_DOCX];
list.push({ ...CONVERT_AND_EXPORT, subOpList });
} else {
list.push(CONVERT_TO_MARKDOWN);
list.push(CONVERT_TO_DOCX);
list.push(EXPORT_DOCX);
}
}
}