haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-10 03:11:07 +00:00
Code Issues Releases Wiki Activity

[library] added new 'settings' dialog(includes setting panels for (#7002)

Browse Source 
'history', 'auto deletion', 'extended properties', and 'face
recognition')

- deleted 'history settings', 'auto deletion setting' in the dropdown
  menu & context menu of 'my library' & 'department library' items.
- fixed bug in the context menu of 'department library' items.
- deleted the 'more' menu(included 'extended properties' & 'face
  recognition') for library 'views'.
- click the 'extended properties' prompt in 'views', the new 'settings'
  dialog will be shown.
This commit is contained in:
llj
2024-11-06 20:12:39 +08:00
committed by GitHub
parent d32ca4e8fd
commit b04cc17872
13 changed files with 262 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
frontend/src/components/dialog/lib-settings.js Normal file
View File

@@ -0,0 +1,129 @@
import React, { Fragment, useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import { gettext, enableRepoAutoDel } from '../../utils/constants';
import LibHistorySettingPanel from './lib-settings/lib-history-setting-panel';
import LibAutoDelSettingPanel from './lib-settings/lib-old-files-auto-del-setting-panel';
import {
MetadataStatusManagementDialog as LibExtendedPropertiesSettingPanel,
MetadataFaceRecognitionDialog as LibFaceRecognitionSettingPanel,
useMetadata
} from '../../metadata';
import '../../css/lib-settings.css';
const propTypes = {
toggleDialog: PropTypes.func.isRequired,
repoID: PropTypes.string.isRequired,
currentRepoInfo: PropTypes.object.isRequired
};
const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
let [activeTab, setActiveTab] = useState(tab || 'historySetting');
const toggleTab = useCallback((tab) => {
setActiveTab(tab);
}, []);
const onTabKeyDown = useCallback((e) => {
if (e.key == 'Enter' || e.key == 'Space') {
e.target.click();
}
}, []);
const { encrypted, is_admin } = currentRepoInfo;
const { enableMetadataManagement } = window.app.pageOptions;
const { enableMetadata, updateEnableMetadata, enableFaceRecognition, updateEnableFaceRecognition } = useMetadata();
const enableHistorySetting = is_admin; // repo owner, admin of the department which the repo belongs to, and ...
const enableAutoDelSetting = is_admin && enableRepoAutoDel;
const enableExtendedPropertiesSetting = !encrypted && is_admin && enableMetadataManagement;
const enableFaceRecognitionSetting = enableExtendedPropertiesSetting && enableMetadata;
return (
<div>
<Modal isOpen={true} className="lib-settings-dialog" toggle={toggleDialog}>
<ModalHeader toggle={toggleDialog}>
{gettext('Settings')}
</ModalHeader>
<ModalBody className="d-md-flex p-md-0" role="tablist">
<Fragment>
<div className="lib-setting-nav p-4">
<Nav pills className="flex-column">
{enableHistorySetting &&
<NavItem role="tab" aria-selected={activeTab === 'historySetting'} aria-controls="history-setting-panel">
<NavLink className={activeTab === 'historySetting' ? 'active' : ''} onClick={(toggleTab.bind(this, 'historySetting'))} tabIndex="0" onKeyDown={onTabKeyDown}>
{gettext('History')}
</NavLink>
</NavItem>
}
{enableAutoDelSetting &&
<NavItem role="tab" aria-selected={activeTab === 'autoDelSetting'} aria-controls="auto-del-setting-panel">
<NavLink className={activeTab === 'autoDelSetting' ? 'active' : ''} onClick={toggleTab.bind(this, 'autoDelSetting')} tabIndex="0" onKeyDown={onTabKeyDown}>
{gettext('Auto deletion')}
</NavLink>
</NavItem>
}
{enableExtendedPropertiesSetting &&
<NavItem role="tab" aria-selected={activeTab === 'extendedPropertiesSetting'} aria-controls="extended-properties-setting-panel">
<NavLink className={activeTab === 'extendedPropertiesSetting' ? 'active' : ''} onClick={toggleTab.bind(this, 'extendedPropertiesSetting')} tabIndex="0" onKeyDown={onTabKeyDown}>
{gettext('Extended properties')}
</NavLink>
</NavItem>
}
{enableFaceRecognitionSetting &&
<NavItem role="tab" aria-selected={activeTab === 'faceRecognitionSetting'} aria-controls="face-recognition-setting-panel">
<NavLink className={activeTab === 'faceRecognitionSetting' ? 'active' : ''} onClick={toggleTab.bind(this, 'faceRecognitionSetting')} tabIndex="0" onKeyDown={onTabKeyDown}>
{gettext('Face recognition')}
</NavLink>
</NavItem>
}
</Nav>
</div>
<TabContent activeTab={activeTab} className="flex-fill">
{(enableHistorySetting && activeTab === 'historySetting') &&
<TabPane tabId="historySetting" role="tabpanel" id="history-setting-panel">
<LibHistorySettingPanel
repoID={repoID}
toggleDialog={toggleDialog}
/>
</TabPane>
}
{(enableAutoDelSetting && activeTab === 'autoDelSetting') &&
<TabPane tabId="autoDelSetting" role="tabpanel" id="auto-del-setting-panel">
<LibAutoDelSettingPanel
repoID={repoID}
toggleDialog={toggleDialog}
/>
</TabPane>
}
{(enableExtendedPropertiesSetting && activeTab === 'extendedPropertiesSetting') &&
<TabPane tabId="extendedPropertiesSetting" role="tabpanel" id="extended-properties-setting-panel">
<LibExtendedPropertiesSettingPanel
repoID={repoID}
value={enableMetadata}
submit={(value) => { updateEnableMetadata(value); }}
toggleDialog={toggleDialog}
/>
</TabPane>
}
{(enableFaceRecognitionSetting && activeTab === 'faceRecognitionSetting') &&
<TabPane tabId="faceRecognitionSetting" role="tabpanel" id="face-recognition-setting-panel">
<LibFaceRecognitionSettingPanel
repoID={repoID}
value={enableFaceRecognition}
submit={(value) => { updateEnableFaceRecognition(true); }}
toggleDialog={toggleDialog}
/>
</TabPane>
}
</TabContent>
</Fragment>
</ModalBody>
</Modal>
</div>
);
};
LibSettingsDialog.propTypes = propTypes;
export default LibSettingsDialog;

21
frontend/src/components/dialog/lib-history-setting-dialog.js → frontend/src/components/dialog/lib-settings/lib-history-setting-panel.js
View File

@@ -1,13 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
import { gettext, enableRepoHistorySetting } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import toaster from '../toast';
import { Button, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
import { gettext, enableRepoHistorySetting } from '../../../utils/constants';
import { seafileAPI } from '../../../utils/seafile-api';
import { Utils } from '../../../utils/utils';
import toaster from '../../toast';
const propTypes = {
itemName: PropTypes.string.isRequired,
toggleDialog: PropTypes.func.isRequired,
repoID: PropTypes.string.isRequired,
};
@@ -108,14 +107,8 @@ class LibHistorySetting extends React.Component {
};
render() {
const { itemName: repoName } = this.props;
let title = gettext('{placeholder} History Setting');
title = title.replace('{placeholder}', '<span class="op-target text-truncate mx-1">' + Utils.HTMLescape(repoName) + '</span>');
return (
<Modal isOpen={true} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.toggleDialog}>
<span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
</ModalHeader>
<>
<ModalBody>
<Form>
{!enableRepoHistorySetting &&
@@ -151,7 +144,7 @@ class LibHistorySetting extends React.Component {
<Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
<Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
</ModalFooter>
</Modal>
</>
);
}
}

23
frontend/src/components/dialog/lib-old-files-auto-del-dialog.js → frontend/src/components/dialog/lib-settings/lib-old-files-auto-del-setting-panel.js
View File

@@ -1,17 +1,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
import { gettext } from '../../utils/constants';
import { seafileAPI } from '../../utils/seafile-api';
import { Utils } from '../../utils/utils';
import toaster from '../toast';
import { Button, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
import { gettext } from '../../../utils/constants';
import { seafileAPI } from '../../../utils/seafile-api';
import { Utils } from '../../../utils/utils';
import toaster from '../../toast';
const propTypes = {
toggleDialog: PropTypes.func.isRequired,
repoID: PropTypes.string.isRequired,
};
class LibOldFilesAutoDelDialog extends React.Component {
class LibOldFilesAutoDelSetting extends React.Component {
constructor(props) {
super(props);
@@ -93,10 +93,7 @@ class LibOldFilesAutoDelDialog extends React.Component {
render() {
return (
<Modal isOpen={true} toggle={this.props.toggleDialog}>
<ModalHeader toggle={this.props.toggleDialog}>
{gettext('Auto deletion')}
</ModalHeader>
<>
<ModalBody>
<Form>
<FormGroup check>
@@ -123,11 +120,11 @@ class LibOldFilesAutoDelDialog extends React.Component {
<Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
<Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
</ModalFooter>
</Modal>
</>
);
}
}
LibOldFilesAutoDelDialog.propTypes = propTypes;
LibOldFilesAutoDelSetting.propTypes = propTypes;
export default LibOldFilesAutoDelDialog;
export default LibOldFilesAutoDelSetting;

21
frontend/src/components/dir-view-mode/dir-others.js
View File

@@ -4,9 +4,17 @@ import { gettext, siteRoot } from '../../utils/constants';
import { Utils } from '../../utils/utils';
import TreeSection from '../tree-section';
import TrashDialog from '../dialog/trash-dialog';
import LibSettingsDialog from '../dialog/lib-settings';
import './dir-others.css';
const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
const showSettings = currentRepoInfo.is_admin; // repo owner, department admin, shared with 'Admin' permission
let [isSettingsDialogOpen, setSettingsDialogOpen] = useState(false);
const toggleSettingsDialog = () => {
setSettingsDialogOpen(!isSettingsDialogOpen);
};
const [showTrashDialog, setShowTrashDialog] = useState(false);
let trashUrl = null;
const historyUrl = siteRoot + 'repo/history/' + repoID + '/';
@@ -18,6 +26,12 @@ const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
};
return (
<TreeSection title={gettext('Others')} className="dir-others">
{showSettings &&
<div className='dir-others-item text-nowrap' title={gettext('Settings')} onClick={toggleSettingsDialog}>
<span className="sf3-font-set-up sf3-font"></span>
<span className="dir-others-item-text">{gettext('Settings')}</span>
</div>
}
{trashUrl &&
<div className='dir-others-item text-nowrap' title={gettext('Trash')} onClick={toggleTrashDialog}>
<span className="sf3-font-trash sf3-font"></span>
@@ -38,6 +52,13 @@ const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
toggleTrashDialog={toggleTrashDialog}
/>
)}
{isSettingsDialogOpen && (
<LibSettingsDialog
repoID={repoID}
currentRepoInfo={currentRepoInfo}
toggleDialog={toggleSettingsDialog}
/>
)}
</TreeSection>
);
};

77
frontend/src/components/dir-view-mode/dir-views.js
View File

@@ -2,8 +2,9 @@ import React, { useCallback, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import TreeSection from '../tree-section';
import { MetadataStatusManagementDialog, MetadataFaceRecognitionDialog, MetadataTreeView, useMetadata } from '../../metadata';
import { MetadataTreeView, useMetadata } from '../../metadata';
import ExtensionPrompts from './extension-prompts';
import LibSettingsDialog from '../dialog/lib-settings';
const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
const enableMetadataManagement = useMemo(() => {
@@ -12,53 +13,14 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [window.app.pageOptions.enableMetadataManagement, currentRepoInfo]);
const [showMetadataStatusManagementDialog, setShowMetadataStatusManagementDialog] = useState(false);
const [showMetadataFaceRecognitionDialog, setShowMetadataFaceRecognitionDialog] = useState(false);
const { enableMetadata, updateEnableMetadata, enableFaceRecognition, updateEnableFaceRecognition, navigation } = useMetadata();
const moreOperations = useMemo(() => {
if (!enableMetadataManagement || !currentRepoInfo.is_admin) return [];
let operations = [
{ key: 'extended-properties', value: gettext('Extended properties') }
];
if (enableMetadata) {
operations.push({ key: 'face-recognition', value: gettext('Face recognition') });
}
return operations;
}, [enableMetadataManagement, enableMetadata, currentRepoInfo]);
const moreOperationClick = useCallback((operationKey) => {
switch (operationKey) {
case 'extended-properties': {
setShowMetadataStatusManagementDialog(true);
break;
}
case 'face-recognition': {
setShowMetadataFaceRecognitionDialog(true);
break;
}
default:
break;
}
}, []);
const closeMetadataManagementDialog = useCallback(() => {
setShowMetadataStatusManagementDialog(false);
}, []);
const closeMetadataFaceRecognitionDialog = useCallback(() => {
setShowMetadataFaceRecognitionDialog(false);
}, []);
const openMetadataFaceRecognition = useCallback(() => {
updateEnableFaceRecognition(true);
}, [updateEnableFaceRecognition]);
const toggleMetadataStatus = useCallback((value) => {
updateEnableMetadata(value);
}, [updateEnableMetadata]);
const { enableMetadata, navigation } = useMetadata();
let [isSettingsDialogOpen, setSettingsDialogOpen] = useState(false);
const toggleSettingsDialog = () => {
setSettingsDialogOpen(!isSettingsDialogOpen);
};
const onExtendedProperties = useCallback(() => {
setShowMetadataStatusManagementDialog(true);
setSettingsDialogOpen(true);
}, []);
if (!enableMetadataManagement) return null;
@@ -67,9 +29,6 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
<>
<TreeSection
title={gettext('Views')}
moreKey={{ name: 'views' }}
moreOperations={moreOperations}
moreOperationClick={moreOperationClick}
>
{!enableMetadata ? (
<ExtensionPrompts onExtendedProperties={onExtendedProperties} />
@@ -77,20 +36,12 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
<MetadataTreeView userPerm={userPerm} currentPath={currentPath} />
) : null}
</TreeSection>
{showMetadataStatusManagementDialog && (
<MetadataStatusManagementDialog
value={enableMetadata}
{isSettingsDialogOpen && (
<LibSettingsDialog
repoID={repoID}
toggle={closeMetadataManagementDialog}
submit={toggleMetadataStatus}
/>
)}
{showMetadataFaceRecognitionDialog && (
<MetadataFaceRecognitionDialog
value={enableFaceRecognition}
repoID={repoID}
toggle={closeMetadataFaceRecognitionDialog}
submit={openMetadataFaceRecognition}
currentRepoInfo={currentRepoInfo}
tab="extendedPropertiesSetting"
toggleDialog={toggleSettingsDialog}
/>
)}
</>
@@ -101,7 +52,7 @@ DirViews.propTypes = {
userPerm: PropTypes.string,
repoID: PropTypes.string,
currentPath: PropTypes.string,
onNodeClick: PropTypes.func,
currentRepoInfo: PropTypes.object.isRequired,
};
export default DirViews;

49
frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
View File

@@ -5,18 +5,16 @@ import relativeTime from 'dayjs/plugin/relativeTime';
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import { Link, navigate } from '@gatsbyjs/reach-router';
import { Utils } from '../../utils/utils';
import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff, enableResetEncryptedRepoPassword, isEmailConfigured, enableRepoAutoDel } from '../../utils/constants';
import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff, enableResetEncryptedRepoPassword, isEmailConfigured } from '../../utils/constants';
import ModalPortal from '../../components/modal-portal';
import ShareDialog from '../../components/dialog/share-dialog';
import LibSubFolderPermissionDialog from '../../components/dialog/lib-sub-folder-permission-dialog';
import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
import ChangeRepoPasswordDialog from '../../components/dialog/change-repo-password-dialog';
import ResetEncryptedRepoPasswordDialog from '../../components/dialog/reset-encrypted-repo-password-dialog';
import LibOldFilesAutoDelDialog from '../../components/dialog/lib-old-files-auto-del-dialog';
import Rename from '../rename';
import { seafileAPI } from '../../utils/seafile-api';
import { userAPI } from '../../utils/user-api';
import LibHistorySettingDialog from '../dialog/lib-history-setting-dialog';
import toaster from '../toast';
import RepoAPITokenDialog from '../dialog/repo-api-token-dialog';
import RepoShareAdminDialog from '../dialog/repo-share-admin-dialog';
@@ -55,7 +53,6 @@ class SharedRepoListItem extends React.Component {
isRenaming: false,
isStarred: this.props.repo.starred,
isFolderPermissionDialogOpen: false,
isHistorySettingDialogShow: false,
isDeleteDialogShow: false,
isAPITokenDialogShow: false,
isTransferDialogShow: false,
@@ -63,7 +60,6 @@ class SharedRepoListItem extends React.Component {
isRepoDeleted: false,
isChangePasswordDialogShow: false,
isResetPasswordDialogShow: false,
isOldFilesAutoDelDialogOpen: false
};
this.isDeparementOnwerGroupMember = false;
}
@@ -182,9 +178,6 @@ class SharedRepoListItem extends React.Component {
case 'Unshare':
this.onItemUnshare();
break;
case 'History Setting':
this.onHistorySettingToggle();
break;
case 'API Token':
this.onAPITokenToggle();
break;
@@ -203,9 +196,6 @@ class SharedRepoListItem extends React.Component {
case 'Unwatch File Changes':
this.unwatchFileChanges();
break;
case 'Old Files Auto Delete':
this.toggleOldFilesAutoDelDialog();
break;
// no default
}
};
@@ -273,10 +263,6 @@ class SharedRepoListItem extends React.Component {
this.setState({ isFolderPermissionDialogOpen: !this.state.isFolderPermissionDialogOpen });
};
onHistorySettingToggle = () => {
this.setState({ isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow });
};
onItemShare = () => {
this.setState({ isShowSharedDialog: true });
};
@@ -328,10 +314,6 @@ class SharedRepoListItem extends React.Component {
this.setState({ isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen });
};
toggleOldFilesAutoDelDialog = () => {
this.setState({ isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen });
};
onAPITokenToggle = () => {
this.setState({ isAPITokenDialogShow: !this.state.isAPITokenDialogShow });
};
@@ -362,9 +344,6 @@ class SharedRepoListItem extends React.Component {
case 'Share':
translateResult = gettext('Share');
break;
case 'History Setting':
translateResult = gettext('History Setting');
break;
case 'Share Admin':
translateResult = gettext('Share Admin');
break;
@@ -380,9 +359,6 @@ class SharedRepoListItem extends React.Component {
case 'Unwatch File Changes':
translateResult = gettext('Unwatch File Changes');
break;
case 'Old Files Auto Delete':
translateResult = gettext('Auto Deletion Setting');
break;
case 'API Token':
translateResult = 'API Token'; // translation is not needed here
break;
@@ -401,9 +377,6 @@ class SharedRepoListItem extends React.Component {
getAdvancedOperations = () => {
const operations = [];
operations.push('API Token');
if (enableRepoAutoDel) {
operations.push('Old Files Auto Delete');
}
return operations;
};
@@ -435,9 +408,8 @@ class SharedRepoListItem extends React.Component {
const monitorOp = repo.monitored ? 'Unwatch File Changes' : 'Watch File Changes';
operations.push(monitorOp);
}
operations.push('Divider', 'History Setting');
if (Utils.isDesktop()) {
operations.push('Advanced');
operations.push('Divider', 'Advanced');
}
return operations;
} else {
@@ -803,15 +775,6 @@ class SharedRepoListItem extends React.Component {
/>
</ModalPortal>
}
{this.state.isHistorySettingDialogShow && (
<ModalPortal>
<LibHistorySettingDialog
repoID={repo.repo_id}
itemName={repo.repo_name}
toggleDialog={this.onHistorySettingToggle}
/>
</ModalPortal>
)}
{this.state.isAPITokenDialogShow && (
<ModalPortal>
<RepoAPITokenDialog
@@ -845,14 +808,6 @@ class SharedRepoListItem extends React.Component {
/>
</ModalPortal>
)}
{this.state.isOldFilesAutoDelDialogOpen && (
<ModalPortal>
<LibOldFilesAutoDelDialog
repoID={repo.repo_id}
toggleDialog={this.toggleOldFilesAutoDelDialog}
/>
</ModalPortal>
)}
{this.state.isTransferDialogShow && (
<ModalPortal>
<TransferDialog

53
frontend/src/css/lib-settings.css Normal file
View File

@@ -0,0 +1,53 @@
.lib-settings-dialog {
max-width: 760px;
}
@media (min-width: 768px) {
.lib-settings-dialog .modal-content {
min-height: 534px;
}
}
.lib-setting-nav {
border-bottom: 1px solid rgba(0,40,100,0.12) !important;
}
@media (min-width: 768px) {
.lib-setting-nav {
min-width: 240px;
border-bottom: none;
border-right: 1px solid rgba(0,40,100,0.12) !important;
}
}
.lib-setting-nav .nav-pills .nav-item .nav-link {
margin: 0;
padding: 0 10px;
height: 32px;
flex: 1 1 auto;
}
.lib-setting-nav .nav-pills .nav-item .nav-link.active {
background: #f5f5f5;
color: inherit;
position: relative;
}
.lib-setting-nav .nav-pills .nav-item .nav-link.active::before {
content: '';
display: block;
width: 4px;
height: 24px;
background-color: #ff8000;
border-radius: 2px;
position: absolute;
top: 4px;
left: -8px;
z-index: 0;
}
.lib-settings-dialog .tab-pane {
height: 100%;
display: flex;
flex-direction: column;
}

17
frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.js
View File

@@ -1,6 +1,6 @@
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
import { ModalBody, ModalFooter, Button } from 'reactstrap';
import classnames from 'classnames';
import Switch from '../../../../components/common/switch';
import { gettext } from '../../../../utils/constants';
@@ -10,7 +10,7 @@ import { Utils } from '../../../../utils/utils';
import './index.css';
const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit }) => {
const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
const [value, setValue] = useState(oldValue);
const [submitting, setSubmitting] = useState(false);
@@ -36,9 +36,8 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit
}, [value]);
return (
<Modal className="metadata-face-recognition-dialog" isOpen={true} toggle={onToggle}>
<ModalHeader toggle={onToggle}>{gettext('Face recognition management')}</ModalHeader>
<ModalBody>
<>
<ModalBody className="metadata-face-recognition-dialog">
<Switch
checked={value}
disabled={submitting || oldValue}
@@ -48,9 +47,9 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit
onChange={onValueChange}
placeholder={gettext('Face recognition')}
/>
<div className="tip">
<p className="tip m-0">
{gettext('Enable face recognition to identify people in your photos.')}
</div>
</p>
</ModalBody>
{!oldValue && (
<ModalFooter>
@@ -58,14 +57,14 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit
<Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
</ModalFooter>
)}
</Modal>
</>
);
};
MetadataFaceRecognitionDialog.propTypes = {
value: PropTypes.bool.isRequired,
repoID: PropTypes.string.isRequired,
toggle: PropTypes.func.isRequired,
toggleDialog: PropTypes.func.isRequired,
submit: PropTypes.func.isRequired,
};

17
frontend/src/metadata/components/dialog/metadata-status-manage-dialog/index.js
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
import { ModalBody, ModalFooter, Button } from 'reactstrap';
import Switch from '../../../../components/common/switch';
import toaster from '../../../../components/toast';
import TurnOffConfirmDialog from './turn-off-confirm';
@@ -11,7 +11,7 @@ import { gettext } from '../../../../utils/constants';
import './index.css';
const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submit }) => {
const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
const [value, setValue] = useState(oldValue);
const [submitting, setSubmitting] = useState(false);
const [showTurnOffConfirmDialog, setShowTurnOffConfirmDialog] = useState(false);
@@ -62,9 +62,8 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
return (
<>
{!showTurnOffConfirmDialog && (
<Modal className="metadata-status-management-dialog" isOpen={true} toggle={onToggle}>
<ModalHeader toggle={onToggle}>{gettext('Extended properties management')}</ModalHeader>
<ModalBody>
<>
<ModalBody className="metadata-status-management-dialog">
<Switch
checked={value}
disabled={submitting}
@@ -74,15 +73,15 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
onChange={onValueChange}
placeholder={gettext('Enable extended properties')}
/>
<div className="tip">
<p className="tip m-0">
{gettext('After enable extended properties for files, you can add different properties to files, like collaborators, file expiring time, file description. You can also create different views for files based extended properties.')}
</div>
</p>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
<Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
</ModalFooter>
</Modal>
</>
)}
{showTurnOffConfirmDialog && (
<TurnOffConfirmDialog toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit} />
@@ -94,7 +93,7 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
MetadataStatusManagementDialog.propTypes = {
value: PropTypes.bool,
repoID: PropTypes.string.isRequired,
toggle: PropTypes.func.isRequired,
toggleDialog: PropTypes.func.isRequired,
submit: PropTypes.func.isRequired,
};

35
frontend/src/pages/my-libs/mylib-repo-list-item.js
View File

@@ -12,7 +12,6 @@ import ShareDialog from '../../components/dialog/share-dialog';
import toaster from '../../components/toast';
import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
import TransferDialog from '../../components/dialog/transfer-dialog';
import LibHistorySettingDialog from '../../components/dialog/lib-history-setting-dialog';
import ChangeRepoPasswordDialog from '../../components/dialog/change-repo-password-dialog';
import ResetEncryptedRepoPasswordDialog from '../../components/dialog/reset-encrypted-repo-password-dialog';
import LabelRepoStateDialog from '../../components/dialog/label-repo-state-dialog';
@@ -21,7 +20,6 @@ import Rename from '../../components/rename';
import MylibRepoMenu from './mylib-repo-menu';
import RepoAPITokenDialog from '../../components/dialog/repo-api-token-dialog';
import RepoShareAdminDialog from '../../components/dialog/repo-share-admin-dialog';
import LibOldFilesAutoDelDialog from '../../components/dialog/lib-old-files-auto-del-dialog';
import RepoMonitoredIcon from '../../components/repo-monitored-icon';
import { GRID_MODE, LIST_MODE } from '../../components/dir-view-mode/constants';
import { userAPI } from '../../utils/user-api';
@@ -52,7 +50,6 @@ class MylibRepoListItem extends React.Component {
isShareDialogShow: false,
isDeleteDialogShow: false,
isTransferDialogShow: false,
isHistorySettingDialogShow: false,
isChangePasswordDialogShow: false,
isResetPasswordDialogShow: false,
isLabelRepoStateDialogOpen: false,
@@ -60,7 +57,6 @@ class MylibRepoListItem extends React.Component {
isAPITokenDialogShow: false,
isRepoShareAdminDialogOpen: false,
isRepoDeleted: false,
isOldFilesAutoDelDialogOpen: false,
};
}
@@ -108,9 +104,6 @@ class MylibRepoListItem extends React.Component {
case 'Transfer':
this.onTransferToggle();
break;
case 'History Setting':
this.onHistorySettingToggle();
break;
case 'Change Password':
this.onChangePasswordToggle();
break;
@@ -135,9 +128,6 @@ class MylibRepoListItem extends React.Component {
case 'Share Admin':
this.toggleRepoShareAdminDialog();
break;
case 'Old Files Auto Delete':
this.toggleOldFilesAutoDelDialog();
break;
default:
break;
}
@@ -211,10 +201,6 @@ class MylibRepoListItem extends React.Component {
this.setState({ isTransferDialogShow: !this.state.isTransferDialogShow });
};
onHistorySettingToggle = () => {
this.setState({ isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow });
};
onChangePasswordToggle = () => {
this.setState({ isChangePasswordDialogShow: !this.state.isChangePasswordDialogShow });
};
@@ -239,10 +225,6 @@ class MylibRepoListItem extends React.Component {
this.setState({ isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen });
};
toggleOldFilesAutoDelDialog = () => {
this.setState({ isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen });
};
onUnfreezedItem = () => {
this.setState({
highlight: false,
@@ -510,15 +492,6 @@ class MylibRepoListItem extends React.Component {
/>
</ModalPortal>
)}
{this.state.isHistorySettingDialogShow && (
<ModalPortal>
<LibHistorySettingDialog
repoID={repo.repo_id}
itemName={repo.repo_name}
toggleDialog={this.onHistorySettingToggle}
/>
</ModalPortal>
)}
{this.state.isChangePasswordDialogShow && (
<ModalPortal>
<ChangeRepoPasswordDialog
@@ -574,14 +547,6 @@ class MylibRepoListItem extends React.Component {
/>
</ModalPortal>
)}
{this.state.isOldFilesAutoDelDialogOpen && (
<ModalPortal>
<LibOldFilesAutoDelDialog
repoID={repo.repo_id}
toggleDialog={this.toggleOldFilesAutoDelDialog}
/>
</ModalPortal>
)}
</Fragment>
);

13
frontend/src/pages/my-libs/mylib-repo-menu.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import { gettext, isPro, folderPermEnabled, enableRepoSnapshotLabel, enableResetEncryptedRepoPassword, isEmailConfigured, enableRepoAutoDel } from '../../utils/constants';
import { gettext, isPro, folderPermEnabled, enableRepoSnapshotLabel, enableResetEncryptedRepoPassword, isEmailConfigured } from '../../utils/constants';
import { Utils } from '../../utils/utils';
const propTypes = {
@@ -103,7 +103,7 @@ class MylibRepoMenu extends React.Component {
operations.push(monitorOp);
}
operations.push('Divider', 'History Setting', 'Advanced');
operations.push('Divider', 'Advanced');
// Remove adjacent excess 'Divider'
for (let i = 0; i < operations.length; i++) {
if (operations[i] === 'Divider' && operations[i + 1] === 'Divider') {
@@ -120,9 +120,6 @@ class MylibRepoMenu extends React.Component {
if (this.props.isPC && enableRepoSnapshotLabel) {
operations.push('Label Current State');
}
if (enableRepoAutoDel) {
operations.push('Old Files Auto Delete');
}
return operations;
};
@@ -147,9 +144,6 @@ class MylibRepoMenu extends React.Component {
case 'Transfer':
translateResult = gettext('Transfer');
break;
case 'History Setting':
translateResult = gettext('History Setting');
break;
case 'Change Password':
translateResult = gettext('Change Password');
break;
@@ -174,9 +168,6 @@ class MylibRepoMenu extends React.Component {
case 'Share Admin':
translateResult = gettext('Share Admin');
break;
case 'Old Files Auto Delete':
translateResult = gettext('Auto Deletion Setting');
break;
case 'Advanced':
translateResult = gettext('Advanced');
break;

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

@@ -165,10 +165,6 @@ const TextTranslation = {
key: 'Watch File Changes',
value: gettext('Watch File Changes')
},
'HISTORY_SETTING': {
key: 'History Setting',
value: gettext('History Setting')
},
'ADVANCED': {
key: 'advanced',
value: gettext('Advanced')
@@ -183,10 +179,6 @@ const TextTranslation = {
key: 'Label Current State',
value: gettext('Label Current State')
},
'OLD_FILES_AUTO_DELETE': {
key: 'Old Files Auto Delete',
value: gettext('Old Files Auto Delete')
},
'UNSHARE': {
key: 'Unshare',

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

@@ -1,4 +1,5 @@
import { mediaUrl, gettext, serviceURL, siteRoot, isPro, fileAuditEnabled, canGenerateShareLink, canGenerateUploadLink, shareLinkPasswordMinLength, username, folderPermEnabled, onlyofficeConverterExtensions, enableOnlyoffice, enableSeadoc, enableFileTags, enableRepoSnapshotLabel, enableRepoAutoDel, enableResetEncryptedRepoPassword, isEmailConfigured, isSystemStaff } from './constants';
import { mediaUrl, gettext, serviceURL, siteRoot, isPro, fileAuditEnabled, canGenerateShareLink, canGenerateUploadLink, shareLinkPasswordMinLength, username, folderPermEnabled, onlyofficeConverterExtensions, enableOnlyoffice, enableSeadoc, enableFileTags, enableRepoSnapshotLabel,
enableResetEncryptedRepoPassword, isEmailConfigured, isSystemStaff } from './constants';
import TextTranslation from './text-translation';
import React from 'react';
import toaster from '../components/toast';
@@ -720,7 +721,7 @@ export const Utils = {
const showResetPasswordMenuItem = isPro && repo.encrypted && enableResetEncryptedRepoPassword && isEmailConfigured;
const operations = [];
const DIVIDER = 'Divider';
const { SHARE, DELETE, RENAME, TRANSFER, FOLDER_PERMISSION, SHARE_ADMIN, CHANGE_PASSWORD, RESET_PASSWORD, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, HISTORY_SETTING, ADVANCED } = TextTranslation;
const { SHARE, DELETE, RENAME, TRANSFER, FOLDER_PERMISSION, SHARE_ADMIN, CHANGE_PASSWORD, RESET_PASSWORD, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, ADVANCED } = TextTranslation;
operations.push(SHARE, DELETE, DIVIDER, RENAME, TRANSFER);
@@ -742,7 +743,7 @@ export const Utils = {
operations.push(monitorOp);
}
operations.push(DIVIDER, HISTORY_SETTING);
operations.push(DIVIDER);
const subOpList = Utils.getAdvancedOperations();
operations.push({ ...ADVANCED, subOpList });
@@ -752,7 +753,7 @@ export const Utils = {
getAdvancedOperations: function () {
const operations = [];
const { API_TOKEN, LABEL_CURRENT_STATE, OLD_FILES_AUTO_DELETE } = TextTranslation;
const { API_TOKEN, LABEL_CURRENT_STATE } = TextTranslation;
operations.push(API_TOKEN);
@@ -760,10 +761,6 @@ export const Utils = {
operations.push(LABEL_CURRENT_STATE);
}
if (enableRepoAutoDel) {
operations.push(OLD_FILES_AUTO_DELETE);
}
return operations;
},
@@ -796,7 +793,7 @@ export const Utils = {
getSharedRepoOperationList: function (repo, currentGroup, isPublic) {
const operations = [];
const { SHARE, UNSHARE, DELETE, RENAME, FOLDER_PERMISSION, SHARE_ADMIN, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, HISTORY_SETTING, ADVANCED, CHANGE_PASSWORD, RESET_PASSWORD } = TextTranslation;
const { SHARE, UNSHARE, DELETE, RENAME, FOLDER_PERMISSION, SHARE_ADMIN, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, ADVANCED, CHANGE_PASSWORD, RESET_PASSWORD, API_TOKEN } = TextTranslation;
const isStaff = currentGroup && currentGroup.admins && currentGroup.admins.indexOf(username) > -1;
const isRepoOwner = repo.owner_email === username;
@@ -830,9 +827,9 @@ export const Utils = {
const monitorOp = repo.monitored ? UNWATCH_FILE_CHANGES : WATCH_FILE_CHANGES;
operations.push(monitorOp);
}
operations.push(DIVIDER, HISTORY_SETTING);
if (Utils.isDesktop()) {
const subOpList = Utils.getAdvancedOperations();
operations.push(DIVIDER);
const subOpList = [API_TOKEN];
operations.push({ ...ADVANCED, subOpList });
}
return operations;