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

feat: adjust editor position

Browse Source
This commit is contained in:
杨国璇
2024-08-16 21:59:37 +08:00
parent 46e8aac5c6
commit 285c47ac0a
9 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/delete-collaborator/index.css
View File

@@ -55,5 +55,6 @@
.sf-metadata-delete-collaborator .collaborator .collaborator-remove {
height: 14px;
width: 14px;
margin-left: 2px;
position: relative;
left: 2px;
}

11
frontend/src/metadata/metadata-view/components/cell-editor/collaborator-editor/index.js
View File

@@ -11,9 +11,11 @@ import DeleteCollaborator from './delete-collaborator';
import './index.css';
const CollaboratorEditor = forwardRef(({
height,
saveImmediately = false,
column,
value: oldValue,
editorPosition = { left: 0, top: 0 },
onCommit,
onPressTab,
onClose,
@@ -178,7 +180,8 @@ const CollaboratorEditor = forwardRef(({
if (editorRef.current) {
const { bottom } = editorRef.current.getBoundingClientRect();
if (bottom > window.innerHeight) {
editorRef.current.style.top = `${window.innerHeight - bottom}px`;
editorRef.current.style.top = 'unset';
editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
}
}
if (editorContainerRef.current && collaboratorItemRef.current) {
@@ -238,8 +241,10 @@ const CollaboratorEditor = forwardRef(({
}, [displayCollaborators, searchValue, value, highlightIndex, onMenuMouseEnter, onMenuMouseLeave, onSelectCollaborator]);
const isBeyondScreen = editorPosition.left + 300 > window.innerWidth;
return (
<div className="sf-metadata-collaborator-editor" style={{ top: -38 }} ref={editorRef}>
<div className="sf-metadata-collaborator-editor" style={{ top: -38, left: isBeyondScreen ? 'unset' : 0, right: isBeyondScreen ? -column.width : 'unset' }} ref={editorRef}>
<DeleteCollaborator value={value} onDelete={onDeleteCollaborator} />
<div className="sf-metadata-search-collaborator-options">
<SearchInput placeholder={gettext('Search collaborators')} onKeyDown={onKeyDown} onChange={onChangeSearch} autoFocus={true} className="sf-metadata-search-collaborators" />
@@ -253,8 +258,10 @@ const CollaboratorEditor = forwardRef(({
CollaboratorEditor.propTypes = {
saveImmediately: PropTypes.bool,
height: PropTypes.number,
column: PropTypes.object,
value: PropTypes.array,
editorPosition: PropTypes.object,
onCommit: PropTypes.func,
onClose: PropTypes.func,
onPressTab: PropTypes.func,

2
frontend/src/metadata/metadata-view/components/cell-editor/editor-container/popup-editor-container.js
View File

@@ -22,7 +22,7 @@ class PopupEditorContainer extends React.Component {
super(props);
const { column, width, height, left, top } = this.props;
let additionalStyles = {};
if (column.type === CellType.SINGLE_SELECT) {
if (column.type === CellType.SINGLE_SELECT || column.type === CellType.MULTIPLE_SELECT) {
additionalStyles = { width, height };
}
this.state = {

6
frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.css
View File

@@ -10,13 +10,17 @@
.sf-metadata-delete-select-options .sf-metadata-delete-select-option {
margin-top: 5px;
margin-bottom: 5px;
margin-right: 10px;
align-items: center;
max-width: 100% !important;
overflow: hidden
}
.sf-metadata-delete-select-options .sf-metadata-delete-select-option .sf-metadata-delete-select-remove {
height: 14px;
width: 14px;
margin-left: 2px;
position: relative;
left: 2px;
}
.sf-metadata-delete-select-options .sf-metadata-delete-select-option .sf-metadata-icon-x-01 {

2
frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/delete-options/index.js
View File

@@ -20,8 +20,6 @@ const DeleteOption = ({ value, options, onDelete }) => {
return [...selectedOptions, ...invalidOptions];
}, [options, value]);
if (displayOptions.length === 0) return null;
return (
<div className="sf-metadata-delete-select-options">
{displayOptions.map(option => {

7
frontend/src/metadata/metadata-view/components/cell-editor/multiple-select-editor/index.js
View File

@@ -11,9 +11,11 @@ import DeleteOption from './delete-options';
import './index.css';
const MultipleSelectEditor = forwardRef(({
height,
saveImmediately,
column,
value: oldValue,
editorPosition = { left: 0, top: 0 },
onCommit,
onPressTab,
modifyColumnData,
@@ -179,7 +181,8 @@ const MultipleSelectEditor = forwardRef(({
if (editorRef.current) {
const { bottom } = editorRef.current.getBoundingClientRect();
if (bottom > window.innerHeight) {
editorRef.current.style.top = (parseInt(editorRef.current.style.top) - bottom + window.innerHeight) + 'px';
editorRef.current.style.top = 'unset';
editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
}
}
if (editorContainerRef.current && selectItemRef.current) {
@@ -269,8 +272,10 @@ const MultipleSelectEditor = forwardRef(({
});
MultipleSelectEditor.propTypes = {
height: PropTypes.number,
column: PropTypes.object,
value: PropTypes.array,
editorPosition: PropTypes.object,
onCommit: PropTypes.func,
onPressTab: PropTypes.func,
};

5
frontend/src/metadata/metadata-view/components/cell-editor/single-select-editor/index.js
View File

@@ -15,6 +15,7 @@ const SingleSelectEditor = forwardRef(({
columns,
record,
value: oldValue,
editorPosition = { left: 0, top: 0 },
onCommit,
onPressTab,
modifyColumnData,
@@ -175,7 +176,8 @@ const SingleSelectEditor = forwardRef(({
if (editorRef.current) {
const { bottom } = editorRef.current.getBoundingClientRect();
if (bottom > window.innerHeight) {
editorRef.current.style.top = (parseInt(editorRef.current.style.top) - bottom + window.innerHeight) + 'px';
editorRef.current.style.top = 'unset';
editorRef.current.style.bottom = editorPosition.top + height - window.innerHeight + 'px';
}
}
if (editorContainerRef.current && selectItemRef.current) {
@@ -269,6 +271,7 @@ SingleSelectEditor.propTypes = {
columns: PropTypes.array,
record: PropTypes.object,
value: PropTypes.string,
editorPosition: PropTypes.object,
onCommit: PropTypes.func,
onPressTab: PropTypes.func,
};

4
frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.css
View File

@@ -12,10 +12,6 @@
padding: 2px 6px;
}
.sf-metadata-multiple-select-property-detail-editor .sf-metadata-delete-select-options .sf-metadata-delete-select-option {
margin-right: 10px;
}
.sf-metadata-multiple-select-property-editor-popover .sf-metadata-delete-select-options {
display: none;
}

9
frontend/src/metadata/metadata-view/components/detail-editor/multiple-select-editor/index.js
View File

@@ -84,6 +84,13 @@ const MultipleSelectEditor = ({ field, value, record, fields, onChange, modifyCo
);
}, [showEditor, onCommit, record, value, modifyColumnData, fields, field]);
const isEmpty = useMemo(() => {
if (!Array.isArray(value) || value.length === 0) return true;
const selectedOptions = options.filter((option) => value.includes(option.id) || value.includes(option.name));
const invalidOptionIds = value.filter(optionId => optionId && !options.find(o => o.id === optionId || o.name === optionId));
return selectedOptions.length + invalidOptionIds.length === 0;
}, [options, value]);
return (
<div
className="sf-metadata-property-detail-editor sf-metadata-single-select-property-detail-editor sf-metadata-multiple-select-property-detail-editor"
@@ -91,7 +98,7 @@ const MultipleSelectEditor = ({ field, value, record, fields, onChange, modifyCo
ref={ref}
onClick={openEditor}
>
<DeleteOptions value={value} options={options} onDelete={deleteOption} />
{!isEmpty && (<DeleteOptions value={value} options={options} onDelete={deleteOption} />)}
{renderEditor()}
</div>
);