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",
|
"@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",
|
||||||
|
@@ -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",
|
||||||
|
@@ -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,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@@ -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,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
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 { 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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
Reference in New Issue
Block a user