mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-09 02:42:47 +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:
8
frontend/package-lock.json
generated
8
frontend/package-lock.json
generated
@@ -16,7 +16,7 @@
|
||||
"@gatsbyjs/reach-router": "1.3.9",
|
||||
"@seafile/react-image-lightbox": "2.0.8",
|
||||
"@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-editor": "^1.0.116",
|
||||
"@seafile/sf-metadata-ui-component": "^0.0.31",
|
||||
@@ -4783,9 +4783,9 @@
|
||||
"integrity": "sha512-8rBbmAEuuwOAGHYGCtEzpx+bxAcGS+V30otMmhRe7bPAdh4E57RWgCa8x7pkzHGFlY1t5d+ILz1gojvPVMYQig=="
|
||||
},
|
||||
"node_modules/@seafile/sdoc-editor": {
|
||||
"version": "1.0.71",
|
||||
"resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-1.0.71.tgz",
|
||||
"integrity": "sha512-BJSvKICn8NbSBPWqJ2KhqDjXYt0L2aQ6s365X/sVrDEMcYmqN4hwBScRaiwW3Db3mD8GOEu/1VGhSA71JIkUIA==",
|
||||
"version": "1.0.72",
|
||||
"resolved": "https://registry.npmjs.org/@seafile/sdoc-editor/-/sdoc-editor-1.0.72.tgz",
|
||||
"integrity": "sha512-ugLUXgfExMie5+pVkCLpBVfivWcsO8eUTDl8P7qmbB0ntQA8eAC5BisHNZ4kZHIaWOWj+bs7z0LLlg0jFa7p2Q==",
|
||||
"dependencies": {
|
||||
"@seafile/print-js": "1.6.6",
|
||||
"@seafile/react-image-lightbox": "2.0.4",
|
||||
|
@@ -11,7 +11,7 @@
|
||||
"@gatsbyjs/reach-router": "1.3.9",
|
||||
"@seafile/react-image-lightbox": "2.0.8",
|
||||
"@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-editor": "^1.0.116",
|
||||
"@seafile/sf-metadata-ui-component": "^0.0.31",
|
||||
|
@@ -4,7 +4,8 @@ import Icon from '../../../icon';
|
||||
|
||||
import './index.css';
|
||||
|
||||
const Header = ({ title, icon, onClose }) => {
|
||||
const Header = ({ title, icon, onClose, component = {} }) => {
|
||||
const { closeIcon } = component;
|
||||
return (
|
||||
<div className="detail-header">
|
||||
<div className="detail-title dirent-title">
|
||||
@@ -12,7 +13,7 @@ const Header = ({ title, icon, onClose }) => {
|
||||
<span className="name ellipsis" title={title}>{title}</span>
|
||||
</div>
|
||||
<div className="detail-control" onClick={onClose}>
|
||||
<Icon symbol="close" className="detail-control-close" />
|
||||
{closeIcon ? closeIcon : (<Icon symbol="close" className="detail-control-close" />)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -21,6 +22,7 @@ const Header = ({ title, icon, onClose }) => {
|
||||
Header.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
icon: PropTypes.string.isRequired,
|
||||
component: PropTypes.object,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
|
@@ -10,8 +10,8 @@ import { MetadataContext } from '../../../metadata';
|
||||
|
||||
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('');
|
||||
|
||||
useEffect(() => {
|
||||
@@ -44,7 +44,7 @@ const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width =
|
||||
})}
|
||||
style={{ width }}
|
||||
>
|
||||
<Header title={direntName} icon={smallIconUrl} onClose={onClose} />
|
||||
<Header title={direntName} icon={smallIconUrl} onClose={onClose} component={headerComponent} />
|
||||
<Body>
|
||||
{dirent && direntDetail && (
|
||||
<div className="detail-content">
|
||||
@@ -66,6 +66,7 @@ EmbeddedFileDetails.propTypes = {
|
||||
dirent: PropTypes.object,
|
||||
path: PropTypes.string.isRequired,
|
||||
repoInfo: PropTypes.object.isRequired,
|
||||
component: PropTypes.object,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
|
25
frontend/src/pages/sdoc/sdoc-editor/index.css
Normal file
25
frontend/src/pages/sdoc/sdoc-editor/index.css
Normal 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;
|
||||
}
|
@@ -7,6 +7,8 @@ import { Utils } from '../../../utils/utils';
|
||||
import { useCollaborators } from '../../../metadata';
|
||||
import EmbeddedFileDetails from '../../../components/dirent-detail/embedded-file-details';
|
||||
|
||||
import './index.css';
|
||||
|
||||
const SdocEditor = () => {
|
||||
const [isStarred, setStarted] = useState(window.app.pageOptions.isStarred);
|
||||
const [isDraft] = useState(window.app.pageOptions.isSdocDraft);
|
||||
@@ -22,7 +24,21 @@ const SdocEditor = () => {
|
||||
resizable_width: true,
|
||||
display_type: 'right-panel',
|
||||
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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
}
|
||||
];
|
||||
|
Reference in New Issue
Block a user