From 5503eee5e052e091a190001dbf1d66a6bbf5082c Mon Sep 17 00:00:00 2001 From: zhouwenxuan Date: Wed, 8 Jan 2025 13:14:00 +0800 Subject: [PATCH] show people in sidepanel --- .../image-dialog/{side-panel => }/index.css | 39 ++++++++--- .../components/dialog/image-dialog/index.js | 50 ++++++++------ .../dialog/image-dialog/side-panel/index.js | 66 ------------------- .../dir-view-mode/dir-column-nav/index.js | 6 ++ .../dir-view-mode/dir-column-view.js | 4 ++ .../src/components/dir-view-mode/dir-files.js | 3 + .../components/dir-view-mode/dir-list-view.js | 1 + .../dirent-detail/detail/detail/index.js | 21 +++--- .../dirent-detail/detail/header/index.js | 15 +++-- .../dirent-details/file-details/index.js | 9 ++- .../file-details/people/index.css | 19 ++++++ .../file-details/people/index.js | 39 +++++++++++ .../dirent-detail/dirent-details/index.js | 13 ++-- .../dirent-grid-view/dirent-grid-view.js | 3 + .../dirent-list-view/dirent-list-view.js | 2 +- .../cell-editors/long-text-editor/index.css | 4 +- .../cell-formatter/image-previewer.js | 2 + frontend/src/metadata/views/gallery/main.js | 3 + .../lib-content-view/lib-content-view.js | 1 + frontend/src/shared-dir-view.js | 3 + 20 files changed, 184 insertions(+), 119 deletions(-) rename frontend/src/components/dialog/image-dialog/{side-panel => }/index.css (66%) delete mode 100644 frontend/src/components/dialog/image-dialog/side-panel/index.js create mode 100644 frontend/src/components/dirent-detail/dirent-details/file-details/people/index.css create mode 100644 frontend/src/components/dirent-detail/dirent-details/file-details/people/index.js diff --git a/frontend/src/components/dialog/image-dialog/side-panel/index.css b/frontend/src/components/dialog/image-dialog/index.css similarity index 66% rename from frontend/src/components/dialog/image-dialog/side-panel/index.css rename to frontend/src/components/dialog/image-dialog/index.css index 687f798cbd9..dfe50442aa4 100644 --- a/frontend/src/components/dialog/image-dialog/side-panel/index.css +++ b/frontend/src/components/dialog/image-dialog/index.css @@ -1,11 +1,9 @@ .lightbox-side-panel { - display: flex; - flex-direction: column; - position: absolute; - top: 50px; - right: 0; width: 10px; height: calc(100% - 100px); + display: flex; + flex-direction: column; + position: relative; font-size: 1rem; color: #fff; background-color: #333; @@ -22,7 +20,15 @@ width: 10px; } -.expand-button { +.lightbox-side-panel .cur-view-detail { + background-color: #333; + border-left: 1px solid #666; +} + +.side-panel-controller { + display: flex; + justify-content: center; + align-items: center; position: absolute; top: 30px; left: -40px; @@ -38,11 +44,16 @@ cursor: pointer; } -.expand-button .sf-metadata-icon { +.side-panel-controller .expand-button { width: 32px; height: 32px; - color: #999; - vertical-align: middle; + transform: scale(0.67); + opacity: 0.7; + border: none; +} + +.side-panel-controller:hover .expand-button { + opacity: 1; } .lightbox-side-panel .detail-header { @@ -62,6 +73,7 @@ .lightbox-side-panel .detail-body { overflow-y: auto; + scrollbar-color: #666 #333; padding: 0; } @@ -73,6 +85,13 @@ margin-bottom: 20px; } +.lightbox-side-panel .sf-metadata-ui.collaborator-item { + color: #212529; +} + +.lightbox-side-panel .dirent-detail-item .dirent-detail-item-value:not(.editable) .sf-metadata-record-cell-empty:empty::before, +.lightbox-side-panel .sf-metadata-property-detail-editor:empty::before, +.lightbox-side-panel .sf-metadata-property-detail-capture-information-item .dirent-detail-item-value:empty::before, .lightbox-side-panel .file-details-collapse .file-details-collapse-header .sf3-font-down { color: #999; } @@ -82,7 +101,7 @@ background-color: #666; } -.lightbox-side-panel .lightbox-side-panel-divider { +.lightbox-side-panel .dirent-detail-divider { height: 1px; background-color: #999; margin-bottom: 20px; diff --git a/frontend/src/components/dialog/image-dialog/index.js b/frontend/src/components/dialog/image-dialog/index.js index 225dd74571e..2ce53d1f20d 100644 --- a/frontend/src/components/dialog/image-dialog/index.js +++ b/frontend/src/components/dialog/image-dialog/index.js @@ -7,29 +7,21 @@ import { SYSTEM_FOLDERS } from '../../../constants'; import { Utils } from '../../../utils/utils'; import { Dirent } from '../../../models'; import { seafileAPI } from '../../../utils/seafile-api'; -import SidePanel from './side-panel'; +import DirentDetails from '../../dirent-detail/dirent-details'; import '@seafile/react-image-lightbox/style.css'; +import './index.css'; -const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, onFileTagChanged }) => { +const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageItems, imageIndex, closeImagePopup, moveToPrevImage, moveToNextImage, onDeleteImage, onRotateImage, isShared }) => { const [direntDetail, setDirentDetail] = useState(null); const { enableOCR, enableMetadata, canModify, onOCR: onOCRAPI, OCRSuccessCallBack } = useMetadataAIOperations(); useEffect(() => { - const getDirentDetail = async (repoID, path) => { - try { - const res = await seafileAPI.getFileInfo(repoID, path); - return res.data; - } catch (error) { - return null; - } - }; - const path = Utils.joinPath(imageItems[imageIndex].parentDir, imageItems[imageIndex].name); - getDirentDetail(repoID, path).then(res => { - setDirentDetail(res); + seafileAPI.getFileInfo(repoID, path).then(res => { + setDirentDetail(res.data); }); - }, [imageIndex, imageItems, repoID]); + }, [imageIndex, imageItems, repoID, repoInfo]); const downloadImage = useCallback((url) => { location.href = url; @@ -41,6 +33,7 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte const imageItemsLength = imageItems.length; if (imageItemsLength === 0) return null; + const id = imageItems[imageIndex].id; const name = imageItems[imageIndex].name; const mainImg = imageItems[imageIndex]; const nextImg = imageItems[(imageIndex + 1) % imageItemsLength]; @@ -60,10 +53,22 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte } const renderSidePanel = () => { - const dirent = new Dirent({ name, type: 'file' }); - const path = Utils.joinPath(mainImg.parentDir, mainImg.name); + const dirent = new Dirent({ id, name, type: 'file' }); - return ; + return ( + {}} + repoTags={[]} + fileTags={[]} + onFileTagChanged={() => {}} + withinPreviewer={true} + /> + ); }; return ( @@ -91,13 +96,18 @@ const ImageDialog = ({ repoID, repoInfo, enableRotate: oldEnableRotate, imageIte onRotateImage={(onRotateImage && enableRotate) ? (angle) => onRotateImage(imageIndex, angle) : null} onOCR={onOCR} OCRLabel={gettext('OCR')} - onRenderSidePanel={renderSidePanel} + onRenderSidePanel={!isShared ? renderSidePanel : null} /> ); }; +ImageDialog.defaultProps = { + isShared: false, +}; + ImageDialog.propTypes = { - repoID: PropTypes.string, + repoID: PropTypes.string.isRequired, + repoInfo: PropTypes.object.isRequired, imageItems: PropTypes.array.isRequired, imageIndex: PropTypes.number.isRequired, closeImagePopup: PropTypes.func.isRequired, @@ -106,7 +116,7 @@ ImageDialog.propTypes = { onDeleteImage: PropTypes.func, onRotateImage: PropTypes.func, enableRotate: PropTypes.bool, - onFileTagChanged: PropTypes.func, + isShared: PropTypes.bool, }; ImageDialog.defaultProps = { diff --git a/frontend/src/components/dialog/image-dialog/side-panel/index.js b/frontend/src/components/dialog/image-dialog/side-panel/index.js deleted file mode 100644 index 26297f57589..00000000000 --- a/frontend/src/components/dialog/image-dialog/side-panel/index.js +++ /dev/null @@ -1,66 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { MetadataDetailsProvider } from '../../../../metadata'; -import Title from '../../../dirent-detail/detail/header/title'; -import { Utils } from '../../../../utils/utils'; -import PreviewDetails from '../../../dirent-detail/dirent-details/preview-details'; - -import './index.css'; -import FileDetails from '../../../dirent-detail/dirent-details/file-details'; -import { Detail, Body } from '../../../dirent-detail/detail'; -import { Icon } from '@seafile/sf-metadata-ui-component'; - -const SidePanel = ({ repoID, repoInfo, path, dirent, direntDetail, onFileTagChanged }) => { - const [expanded, setExpanded] = useState(false); - - const handleExpandClick = () => { - setExpanded(!expanded); - }; - - useEffect(() => { - const element = document.querySelector('.sf-metadata-long-text-editor-dialog'); - if (element) { - element.style.zIndex = 1052; - } - }); - - return ( - -
- - {expanded && ( - <> -
- - </div> - <Body> - <div className="detail-content"> - <FileDetails - repoID={repoID} - repoInfo={repoInfo} - dirent={dirent} - path={path} - direntDetail={direntDetail} - /> - </div> - </Body> - </> - )} - </div> - </MetadataDetailsProvider> - ); -}; - -export default SidePanel; diff --git a/frontend/src/components/dir-view-mode/dir-column-nav/index.js b/frontend/src/components/dir-view-mode/dir-column-nav/index.js index 4fb885d4076..73b9d39e6e4 100644 --- a/frontend/src/components/dir-view-mode/dir-column-nav/index.js +++ b/frontend/src/components/dir-view-mode/dir-column-nav/index.js @@ -32,6 +32,9 @@ const propTypes = { onItemsMove: PropTypes.func.isRequired, getMenuContainerSize: PropTypes.func, updateDirent: PropTypes.func, + repoTags: PropTypes.array, + fileTags: PropTypes.array, + onFileTagChanged: PropTypes.func, }; class DirColumnNav extends React.Component { @@ -71,6 +74,9 @@ class DirColumnNav extends React.Component { onItemMove={this.props.onItemMove} onItemsMove={this.props.onItemsMove} updateDirent={this.props.updateDirent} + repoTags={this.props.repoTags} + fileTags={this.props.fileTags} + onFileTagChanged={this.props.onFileTagChanged} /> <DirViews repoID={repoID} currentPath={currentPath} userPerm={userPerm} currentRepoInfo={currentRepoInfo} /> <DirTags repoID={repoID} currentPath={currentPath} userPerm={userPerm} currentRepoInfo={currentRepoInfo} /> diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js index ea0b5bc89b3..c900239f34e 100644 --- a/frontend/src/components/dir-view-mode/dir-column-view.js +++ b/frontend/src/components/dir-view-mode/dir-column-view.js @@ -84,6 +84,7 @@ const propTypes = { eventBus: PropTypes.object, updateCurrentDirent: PropTypes.func.isRequired, updateCurrentPath: PropTypes.func, + fileTags: PropTypes.array, }; class DirColumnView extends React.Component { @@ -182,6 +183,9 @@ class DirColumnView extends React.Component { getMenuContainerSize={this.getMenuContainerSize} direntList={this.props.direntList} updateDirent={this.props.updateDirent} + repoTags={this.props.repoTags} + fileTags={this.props.fileTags} + onFileTagChanged={this.props.onFileTagChanged} /> <ResizeBar resizeBarRef={this.resizeBarRef} diff --git a/frontend/src/components/dir-view-mode/dir-files.js b/frontend/src/components/dir-view-mode/dir-files.js index 9a7697ce017..6a565ea0695 100644 --- a/frontend/src/components/dir-view-mode/dir-files.js +++ b/frontend/src/components/dir-view-mode/dir-files.js @@ -257,6 +257,7 @@ class DirFiles extends React.Component { thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailSizeForOriginal}${path}`; } return { + id: item.object.id, name, parentDir: node.parentNode.path, src, @@ -449,6 +450,8 @@ class DirFiles extends React.Component { {this.state.isNodeImagePopupOpen && ( <ModalPortal> <ImageDialog + repoID={repoID} + repoInfo={currentRepoInfo} imageItems={this.state.imageNodeItems} imageIndex={this.state.imageIndex} closeImagePopup={this.closeNodeImagePopup} diff --git a/frontend/src/components/dir-view-mode/dir-list-view.js b/frontend/src/components/dir-view-mode/dir-list-view.js index cc879dce205..f6dcf532f5e 100644 --- a/frontend/src/components/dir-view-mode/dir-list-view.js +++ b/frontend/src/components/dir-view-mode/dir-list-view.js @@ -44,6 +44,7 @@ const propTypes = { fullDirentList: PropTypes.array, getMenuContainerSize: PropTypes.func, eventBus: PropTypes.object, + fileTags: PropTypes.array, }; class DirListView extends React.Component { diff --git a/frontend/src/components/dirent-detail/detail/detail/index.js b/frontend/src/components/dirent-detail/detail/detail/index.js index 7804ceedf0a..cb7763ff795 100644 --- a/frontend/src/components/dirent-detail/detail/detail/index.js +++ b/frontend/src/components/dirent-detail/detail/detail/index.js @@ -6,7 +6,7 @@ import { DRAG_HANDLER_HEIGHT } from '../../../resize-bar/constants'; import './index.css'; -const Detail = ({ children, className }) => { +const Detail = ({ children, className, withinPreviewer }) => { const [width, setWidth] = useState(300); const [isResizing, setResizing] = useState(false); const resizeBarRef = useRef(null); @@ -57,14 +57,16 @@ const Detail = ({ children, className }) => { style={{ width }} > {children} - <ResizeBar - resizeBarRef={resizeBarRef} - dragHandlerRef={dragHandlerRef} - resizeBarStyle={{ left: -1 }} - dragHandlerStyle={{ height: DRAG_HANDLER_HEIGHT }} - onResizeMouseDown={onResizeMouseDown} - onResizeMouseOver={onResizeMouseOver} - /> + {!withinPreviewer && ( + <ResizeBar + resizeBarRef={resizeBarRef} + dragHandlerRef={dragHandlerRef} + resizeBarStyle={{ left: -1 }} + dragHandlerStyle={{ height: DRAG_HANDLER_HEIGHT }} + onResizeMouseDown={onResizeMouseDown} + onResizeMouseOver={onResizeMouseOver} + /> + )} </div> ); @@ -73,6 +75,7 @@ const Detail = ({ children, className }) => { Detail.propTypes = { className: PropTypes.string, children: PropTypes.any, + withinPreviewer: PropTypes.bool, }; export default Detail; diff --git a/frontend/src/components/dirent-detail/detail/header/index.js b/frontend/src/components/dirent-detail/detail/header/index.js index 1ff83603a89..b0a5ac20720 100644 --- a/frontend/src/components/dirent-detail/detail/header/index.js +++ b/frontend/src/components/dirent-detail/detail/header/index.js @@ -5,17 +5,19 @@ import Title from './title'; import './index.css'; -const Header = ({ title, icon, iconSize = 32, onClose, children, component = {} }) => { +const Header = ({ title, icon, iconSize = 32, onClose, children, component = {}, withinPreviewer }) => { const { closeIcon } = component; return ( <div className="detail-header"> <Title title={title} icon={icon} iconSize={iconSize} /> - <div className="detail-control-container"> - {children} - <div className="detail-control" onClick={onClose}> - {closeIcon ? closeIcon : <Icon symbol="close" className="detail-control-close" />} + {!withinPreviewer && ( + <div className="detail-control-container"> + {children} + <div className="detail-control" onClick={onClose}> + {closeIcon ? closeIcon : <Icon symbol="close" className="detail-control-close" />} + </div> </div> - </div> + )} </div> ); }; @@ -27,6 +29,7 @@ Header.propTypes = { component: PropTypes.object, children: PropTypes.any, onClose: PropTypes.func.isRequired, + withinPreviewer: PropTypes.bool, }; export default Header; diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details/index.js b/frontend/src/components/dirent-detail/dirent-details/file-details/index.js index eb06faa56a2..5017521553c 100644 --- a/frontend/src/components/dirent-detail/dirent-details/file-details/index.js +++ b/frontend/src/components/dirent-detail/dirent-details/file-details/index.js @@ -10,11 +10,12 @@ import { gettext } from '../../../../utils/constants'; import EditFileTagPopover from '../../../popover/edit-filetag-popover'; import FileTagList from '../../../file-tag-list'; import { Utils } from '../../../../utils/utils'; -import { MetadataDetails, useMetadataDetails } from '../../../../metadata'; +import { MetadataDetails, useMetadata, useMetadataDetails } from '../../../../metadata'; import ObjectUtils from '../../../../metadata/utils/object-utils'; import { getCellValueByColumn, getDateDisplayString, decimalToExposureTime } from '../../../../metadata/utils/cell'; import Collapse from './collapse'; import { useMetadataStatus } from '../../../../hooks'; +import People from './people'; import './index.css'; @@ -60,6 +61,7 @@ const getImageInfoValue = (key, value) => { const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList }) => { const [isEditFileTagShow, setEditFileTagShow] = useState(false); const { enableMetadataManagement, enableMetadata } = useMetadataStatus(); + const { enableFaceRecognition } = useMetadata(); const { record } = useMetadataDetails(); const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]); @@ -140,6 +142,9 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC })} </Collapse> )} + {enableMetadataManagement && enableMetadata && enableFaceRecognition && Utils.imageCheck(dirent.name) && ( + <People repoID={repoID} record={record} /> + )} </> ); } @@ -180,6 +185,8 @@ FileDetails.propTypes = { dirent: PropTypes.object, path: PropTypes.string, direntDetail: PropTypes.object, + repoTags: PropTypes.array, + fileTagList: PropTypes.array, onFileTagChanged: PropTypes.func, }; diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details/people/index.css b/frontend/src/components/dirent-detail/dirent-details/file-details/people/index.css new file mode 100644 index 00000000000..9ee864fa199 --- /dev/null +++ b/frontend/src/components/dirent-detail/dirent-details/file-details/people/index.css @@ -0,0 +1,19 @@ +.dirent-detail-people { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-bottom: 20px; +} + +.dirent-detail-people .dirent-detail-people-item { + width: 32px; + height: 32px; + border-radius: 50%; + overflow: hidden; +} + +.dirent-detail-divider { + height: 1px; + background-color: #eee; + margin-bottom: 20px; +} diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details/people/index.js b/frontend/src/components/dirent-detail/dirent-details/file-details/people/index.js new file mode 100644 index 00000000000..80a7da12efb --- /dev/null +++ b/frontend/src/components/dirent-detail/dirent-details/file-details/people/index.js @@ -0,0 +1,39 @@ +import React, { useCallback, useMemo } from 'react'; +import { PRIVATE_COLUMN_KEY } from '../../../../../metadata/constants'; +import { gettext, mediaUrl, siteRoot, thumbnailDefaultSize } from '../../../../../utils/constants'; +import { getCellValueByColumn } from '../../../../../metadata/utils/cell'; + +import './index.css'; + +const People = ({ repoID, record }) => { + const images = useMemo(() => { + if (!record) return []; + const faceLinks = getCellValueByColumn(record, { key: PRIVATE_COLUMN_KEY.FACE_LINKS }); + if (!faceLinks) return []; + return faceLinks.map(item => ({ + ...item, + url: `${siteRoot}thumbnail/${repoID}/${thumbnailDefaultSize}/_Internal/Faces/${item.row_id}.jpg` + })); + }, [repoID, record]); + + const onImgLoadError = useCallback((e) => { + e.target.src = `${mediaUrl}avatars/default.png`; + }, []); + + if (!images.length) return null; + + return ( + <> + {images.length > 0 && <div className="dirent-detail-divider"></div>} + <div className="dirent-detail-people"> + {images.map(img => ( + <div className="dirent-detail-people-item" key={img.row_id} title={img.display_value || gettext('Unknown people')}> + <img src={img.url} alt={img.display_value || gettext('Unknown people')} onError={onImgLoadError} height={32} width={32} /> + </div> + ))} + </div> + </> + ); +}; + +export default People; diff --git a/frontend/src/components/dirent-detail/dirent-details/index.js b/frontend/src/components/dirent-detail/dirent-details/index.js index 079793c8cfd..e02af0e47d3 100644 --- a/frontend/src/components/dirent-detail/dirent-details/index.js +++ b/frontend/src/components/dirent-detail/dirent-details/index.js @@ -104,7 +104,7 @@ class DirentDetails extends React.Component { render() { const { dirent, direntDetail } = this.state; - const { repoID, fileTags } = this.props; + const { repoID, fileTags, withinPreviewer } = this.props; if (!dirent || !direntDetail) { return ( @@ -131,13 +131,13 @@ class DirentDetails extends React.Component { direntDetail={direntDetail} direntType={dirent?.type !== 'file' ? 'dir' : 'file'} > - <Detail> - <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={this.props.onClose} > + <Detail withinPreviewer={withinPreviewer}> + <Header title={dirent?.name || ''} icon={Utils.getDirentIcon(dirent, true)} onClose={this.props.onClose} withinPreviewer={withinPreviewer} > <AI /> <Settings /> </Header> <Body> - {this.renderImage()} + {!withinPreviewer && this.renderImage()} {dirent && direntDetail && ( <div className="detail-content"> {dirent.type !== 'file' ? ( @@ -162,6 +162,10 @@ class DirentDetails extends React.Component { } } +DirentDetails.defaultProps = { + withinPreviewer: false, +}; + DirentDetails.propTypes = { repoID: PropTypes.string.isRequired, dirent: PropTypes.object, @@ -171,6 +175,7 @@ DirentDetails.propTypes = { onFileTagChanged: PropTypes.func.isRequired, repoTags: PropTypes.array, fileTags: PropTypes.array, + withinPreviewer: PropTypes.bool, }; export default DirentDetails; diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js index d0114b3be51..08a49ea68c3 100644 --- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js +++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js @@ -608,6 +608,7 @@ class DirentGridView extends React.Component { } return { + id: item.id, name, thumbnail, src, @@ -1018,6 +1019,8 @@ class DirentGridView extends React.Component { {this.state.isImagePopupOpen && this.state.imageItems.length && ( <ModalPortal> <ImageDialog + repoID={this.props.repoID} + repoInfo={this.props.currentRepoInfo} imageItems={this.state.imageItems} imageIndex={this.state.imageIndex} closeImagePopup={this.closeImagePopup} diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js index e3d4e69df9c..ee65aea8b8c 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -205,6 +205,7 @@ class DirentListView extends React.Component { } return { + id: item.id, name, thumbnail, src, @@ -859,7 +860,6 @@ class DirentListView extends React.Component { onDeleteImage={this.deleteImage} onRotateImage={this.rotateImage} enableRotate={!repoEncrypted} - onFileTagChanged={this.props.onFileTagChanged} /> </ModalPortal> )} diff --git a/frontend/src/metadata/components/cell-editors/long-text-editor/index.css b/frontend/src/metadata/components/cell-editors/long-text-editor/index.css index 739dd34b725..7b7b88c4c79 100644 --- a/frontend/src/metadata/components/cell-editors/long-text-editor/index.css +++ b/frontend/src/metadata/components/cell-editors/long-text-editor/index.css @@ -1,3 +1,3 @@ -.sf-metadata-long-text-editor-dialog { +/* .sf-metadata-long-text-editor-dialog { z-index: 1049 !important; -} +} */ diff --git a/frontend/src/metadata/components/cell-formatter/image-previewer.js b/frontend/src/metadata/components/cell-formatter/image-previewer.js index fc0d24cc8e6..caeeba1c24b 100644 --- a/frontend/src/metadata/components/cell-formatter/image-previewer.js +++ b/frontend/src/metadata/components/cell-formatter/image-previewer.js @@ -84,6 +84,8 @@ const ImagePreviewer = ({ record, table, repoID, repoInfo, closeImagePopup }) => return ( <ModalPortal> <ImageDialog + repoID={repoID} + repoInfo={repoInfo} imageItems={imageItems} imageIndex={imageIndex} closeImagePopup={closeImagePopup} diff --git a/frontend/src/metadata/views/gallery/main.js b/frontend/src/metadata/views/gallery/main.js index 9e15a00d8ec..106b4896cbb 100644 --- a/frontend/src/metadata/views/gallery/main.js +++ b/frontend/src/metadata/views/gallery/main.js @@ -33,6 +33,7 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord, const lastState = useRef({ visibleAreaFirstImage: { groupIndex: 0, rowIndex: 0 } }); const { repoID, updateCurrentDirent } = useMetadataView(); + const repoInfo = window.sfMetadataContext.getSetting('repoInfo'); const images = useMemo(() => { if (isFirstLoading) return []; @@ -428,6 +429,8 @@ const Main = ({ isLoadingMore, metadata, onDelete, onLoadMore, duplicateRecord, {isImagePopupOpen && ( <ModalPortal> <ImageDialog + repoID={repoID} + repoInfo={repoInfo} imageItems={images} imageIndex={imageIndex} closeImagePopup={closeImagePopup} diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js index bfb212641da..3292e34cd51 100644 --- a/frontend/src/pages/lib-content-view/lib-content-view.js +++ b/frontend/src/pages/lib-content-view/lib-content-view.js @@ -2395,6 +2395,7 @@ class LibContentView extends React.Component { eventBus={this.props.eventBus} updateCurrentDirent={this.updateCurrentDirent} updateCurrentPath={this.updatePath} + fileTags={this.state.isViewFile ? this.state.fileTags : []} /> : <div className="message err-tip">{gettext('Folder does not exist.')}</div> diff --git a/frontend/src/shared-dir-view.js b/frontend/src/shared-dir-view.js index 2ba48045d42..566fdca1627 100644 --- a/frontend/src/shared-dir-view.js +++ b/frontend/src/shared-dir-view.js @@ -595,12 +595,15 @@ class SharedDirView extends React.Component { {this.state.isImagePopupOpen && <ModalPortal> <ImageDialog + repoID={repoID} + repoInfo={{ 'permission': 'r' }} imageItems={this.state.imageItems} imageIndex={this.state.imageIndex} closeImagePopup={this.closeImagePopup} moveToPrevImage={this.moveToPrevImage} moveToNextImage={this.moveToNextImage} enableRotate={false} + isShared={true} /> </ModalPortal> }