haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-27 15:54:39 +00:00
Code Issues Releases Wiki Activity

feat: face recognition toggle ui (#6913)

Browse Source 
* feat: face recognition toggle ui

* feat: optimize titile

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
2024-10-16 15:12:23 +08:00
committed by GitHub
parent 88cb2637d2
commit 7c710d759a
3 changed files with 44 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.css Normal file
View File

@@ -0,0 +1,16 @@
.metadata-face-recognition-dialog .change-face-recognition-status-management {
margin-bottom: 10px;
}
.metadata-face-recognition-dialog .change-face-recognition-status-management .custom-switch {
padding-left: 0;
}
.metadata-face-recognition-dialog .change-face-recognition-status-management:not(.disabled) .custom-switch:hover,
.metadata-face-recognition-dialog .change-face-recognition-status-management:not(.disabled) .custom-switch:hover * {
cursor: pointer;
}
.metadata-face-recognition-dialog .tip {
font-size: 12px;
}

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

@@ -1,12 +1,17 @@
import React, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
import classnames from 'classnames';
import Switch from '../../../../components/common/switch';
import { gettext } from '../../../../utils/constants';
import metadataAPI from '../../../api';
import toaster from '../../../../components/toast';
import { Utils } from '../../../../utils/utils';
const MetadataFaceRecognitionDialog = ({ value, repoID, toggle, submit }) => {
import './index.css';
const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit }) => {
const [value, setValue] = useState(oldValue);
const [submitting, setSubmitting] = useState(false);
const onToggle = useCallback(() => {
@@ -25,16 +30,32 @@ const MetadataFaceRecognitionDialog = ({ value, repoID, toggle, submit }) => {
});
}, [repoID, submit, toggle]);
const onValueChange = useCallback(() => {
const nextValue = !value;
setValue(nextValue);
}, [value]);
return (
<Modal className="metadata-face-recognition-dialog" isOpen={true} toggle={onToggle}>
<ModalHeader toggle={onToggle}>{gettext('Face recognition')}</ModalHeader>
<ModalHeader toggle={onToggle}>{gettext('Face recognition management')}</ModalHeader>
<ModalBody>
{value ? gettext('Face recognition enabled.') : gettext('Whether to enable face recognition?')}
<Switch
checked={value}
disabled={submitting || oldValue}
size="large"
textPosition="right"
className={classnames('change-face-recognition-status-management w-100', { 'disabled': submitting || oldValue })}
onChange={onValueChange}
placeholder={gettext('Face recognition')}
/>
<div className="tip">
{gettext('Enable face recognition to identify people in your photos.')}
</div>
</ModalBody>
{!value && (
{!oldValue && (
<ModalFooter>
<Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
<Button color="primary" disabled={submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
<Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
</ModalFooter>
)}
</Modal>

3
frontend/src/metadata/components/metadata-details/constants.js
View File

@@ -18,7 +18,8 @@ export const NOT_DISPLAY_COLUMN_KEYS = [
PRIVATE_COLUMN_KEY.SIZE,
PRIVATE_COLUMN_KEY.SUFFIX,
PRIVATE_COLUMN_KEY.FILE_DETAILS,
PRIVATE_COLUMN_KEY.LOCATION
PRIVATE_COLUMN_KEY.LOCATION,
PRIVATE_COLUMN_KEY.FACE_LINKS,
];
export const SYSTEM_FOLDERS = [