1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-09 10:50:24 +00:00

fix: sdoc detail style (#6709)

* fix: sdoc detail style

* feat: update code

* feat: style

* feat: restore code

* feat: restore code

* feat: delete

* feat: rstore code

* feat: rstore code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
This commit is contained in:
杨国璇
2024-09-05 13:35:58 +08:00
committed by GitHub
parent 8a61cbd784
commit dd907e14ed
6 changed files with 55 additions and 11 deletions

View File

@@ -16,7 +16,7 @@
"@gatsbyjs/reach-router": "1.3.9", "@gatsbyjs/reach-router": "1.3.9",
"@seafile/react-image-lightbox": "2.0.8", "@seafile/react-image-lightbox": "2.0.8",
"@seafile/resumablejs": "1.1.16", "@seafile/resumablejs": "1.1.16",
"@seafile/sdoc-editor": "1.0.71", "@seafile/sdoc-editor": "1.0.72",
"@seafile/seafile-calendar": "0.0.12", "@seafile/seafile-calendar": "0.0.12",
"@seafile/seafile-editor": "^1.0.116", "@seafile/seafile-editor": "^1.0.116",
"@seafile/sf-metadata-ui-component": "^0.0.31", "@seafile/sf-metadata-ui-component": "^0.0.31",
@@ -4783,9 +4783,9 @@
"integrity": "sha512-8rBbmAEuuwOAGHYGCtEzpx+bxAcGS+V30otMmhRe7bPAdh4E57RWgCa8x7pkzHGFlY1t5d+ILz1gojvPVMYQig==" "integrity": "sha512-8rBbmAEuuwOAGHYGCtEzpx+bxAcGS+V30otMmhRe7bPAdh4E57RWgCa8x7pkzHGFlY1t5d+ILz1gojvPVMYQig=="
}, },
"node_modules/@seafile/sdoc-editor": { "node_modules/@seafile/sdoc-editor": {
"version": "1.0.71", "version": "1.0.72",
"resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-1.0.71.tgz", "resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-1.0.72.tgz",
"integrity": "sha512-BJSvKICn8NbSBPWqJ2KhqDjXYt0L2aQ6s365X/sVrDEMcYmqN4hwBScRaiwW3Db3mD8GOEu/1VGhSA71JIkUIA==", "integrity": "sha512-ugLUXgfExMie5+pVkCLpBVfivWcsO8eUTDl8P7qmbB0ntQA8eAC5BisHNZ4kZHIaWOWj+bs7z0LLlg0jFa7p2Q==",
"dependencies": { "dependencies": {
"@seafile/print-js": "1.6.6", "@seafile/print-js": "1.6.6",
"@seafile/react-image-lightbox": "2.0.4", "@seafile/react-image-lightbox": "2.0.4",

View File

@@ -11,7 +11,7 @@
"@gatsbyjs/reach-router": "1.3.9", "@gatsbyjs/reach-router": "1.3.9",
"@seafile/react-image-lightbox": "2.0.8", "@seafile/react-image-lightbox": "2.0.8",
"@seafile/resumablejs": "1.1.16", "@seafile/resumablejs": "1.1.16",
"@seafile/sdoc-editor": "1.0.71", "@seafile/sdoc-editor": "1.0.72",
"@seafile/seafile-calendar": "0.0.12", "@seafile/seafile-calendar": "0.0.12",
"@seafile/seafile-editor": "^1.0.116", "@seafile/seafile-editor": "^1.0.116",
"@seafile/sf-metadata-ui-component": "^0.0.31", "@seafile/sf-metadata-ui-component": "^0.0.31",

View File

@@ -4,7 +4,8 @@ import Icon from '../../../icon';
import './index.css'; import './index.css';
const Header = ({ title, icon, onClose }) => { const Header = ({ title, icon, onClose, component = {} }) => {
const { closeIcon } = component;
return ( return (
<div className="detail-header"> <div className="detail-header">
<div className="detail-title dirent-title"> <div className="detail-title dirent-title">
@@ -12,7 +13,7 @@ const Header = ({ title, icon, onClose }) => {
<span className="name ellipsis" title={title}>{title}</span> <span className="name ellipsis" title={title}>{title}</span>
</div> </div>
<div className="detail-control" onClick={onClose}> <div className="detail-control" onClick={onClose}>
<Icon symbol="close" className="detail-control-close" /> {closeIcon ? closeIcon : (<Icon symbol="close" className="detail-control-close" />)}
</div> </div>
</div> </div>
); );
@@ -21,6 +22,7 @@ const Header = ({ title, icon, onClose }) => {
Header.propTypes = { Header.propTypes = {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired, icon: PropTypes.string.isRequired,
component: PropTypes.object,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; };

View File

@@ -10,8 +10,8 @@ import { MetadataContext } from '../../../metadata';
import './index.css'; import './index.css';
const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className }) => { const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component }) => {
const { headerComponent } = component;
const [direntDetail, setDirentDetail] = useState(''); const [direntDetail, setDirentDetail] = useState('');
useEffect(() => { useEffect(() => {
@@ -44,7 +44,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
})} })}
style={{ width }} style={{ width }}
> >
<Header title={direntName} icon={smallIconUrl} onClose={onClose} /> <Header title={direntName} icon={smallIconUrl} onClose={onClose} component={headerComponent} />
<Body> <Body>
{dirent && direntDetail && ( {dirent && direntDetail && (
<div className="detail-content"> <div className="detail-content">
@@ -66,6 +66,7 @@ EmbeddedFileDetails.propTypes = {
dirent: PropTypes.object, dirent: PropTypes.object,
path: PropTypes.string.isRequired, path: PropTypes.string.isRequired,
repoInfo: PropTypes.object.isRequired, repoInfo: PropTypes.object.isRequired,
component: PropTypes.object,
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; };

View File

@@ -0,0 +1,25 @@
.sdoc-content-right-panel .cur-view-detail {
border-left: none;
}
.sdoc-content-right-panel .cur-view-detail .detail-header {
border-bottom-color: #EAECEF;
height: 46px;
padding-top: 7px;
padding-bottom: 7px;
line-height: 1.5;
}
.sdoc-content-right-panel .detail-header .detail-control:hover {
background-color: inherit;
}
.sdoc-content-right-panel .detail-header .sdoc-sm-close {
color: #999;
font-weight: 700;
font-size: 16px;
}
.sdoc-content-right-panel .detail-header .detail-control:hover .sdoc-sm-close {
color: #5a5a5a;
}

View File

@@ -7,6 +7,8 @@ import { Utils } from '../../../utils/utils';
import { useCollaborators } from '../../../metadata'; import { useCollaborators } from '../../../metadata';
import EmbeddedFileDetails from '../../../components/dirent-detail/embedded-file-details'; import EmbeddedFileDetails from '../../../components/dirent-detail/embedded-file-details';
import './index.css';
const SdocEditor = () => { const SdocEditor = () => {
const [isStarred, setStarted] = useState(window.app.pageOptions.isStarred); const [isStarred, setStarted] = useState(window.app.pageOptions.isStarred);
const [isDraft] = useState(window.app.pageOptions.isSdocDraft); const [isDraft] = useState(window.app.pageOptions.isSdocDraft);
@@ -22,7 +24,21 @@ const SdocEditor = () => {
resizable_width: true, resizable_width: true,
display_type: 'right-panel', display_type: 'right-panel',
component: ({ onClose, width }) => { component: ({ onClose, width }) => {
return (<EmbeddedFileDetails repoID={repoID} onClose={onClose} path={docPath} dirent={currentDirent} repoInfo={{ permission: docPerm }} width={width} />); return (
<EmbeddedFileDetails
repoID={repoID}
path={docPath}
dirent={currentDirent}
repoInfo={{ permission: docPerm }}
width={width - 1}
component={{
headerComponent: {
closeIcon: (<i className="sdocfont sdoc-sm-close"></i>)
}
}}
onClose={onClose}
/>
);
}, },
} }
]; ];