Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 945a2c1

Browse files
mydearxymmydearxym
authored
feat: enhance previewer in wide screen (#349)
* chore: wip * refactor: basic UI/UX * refactor(preview): real logic & style & set media break
1 parent 3943484 commit 945a2c1

File tree

22 files changed

+392
-489
lines changed

22 files changed

+392
-489
lines changed

‎components/Modal/index.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,23 @@ import { Mask, Wrapper, CloseBtn, ChildrenWrapper } from './styles'
1414
/* eslint-disable-next-line */
1515
const debug = makeDebugger('c:Modal:index')
1616

17-
const Modal = ({ children, show, width, showCloseBtn, onClose, mode }) => (
17+
const Modal = ({
18+
children,
19+
show,
20+
width,
21+
showCloseBtn,
22+
onClose,
23+
mode,
24+
background,
25+
offsetTop,
26+
}) => (
1827
<Mask show={show} onClick={onClose}>
19-
<Wrapper width={width} mode={mode}>
28+
<Wrapper
29+
width={width}
30+
mode={mode}
31+
background={background}
32+
offsetTop={offsetTop}
33+
>
2034
<CloseBtn
2135
mode={mode}
2236
src={`${ICON_CMD}/closeBtn.svg`}
@@ -37,15 +51,19 @@ Modal.propTypes = {
3751
onClose: PropTypes.func,
3852
width: PropTypes.string,
3953
showCloseBtn: PropTypes.bool,
40-
mode: PropTypes.oneOf(['normal', 'error']),
54+
mode: PropTypes.oneOf(['default', 'error']),
55+
background: PropTypes.oneOf(['default', 'preview']),
56+
offsetTop: PropTypes.string,
4157
}
4258

4359
Modal.defaultProps = {
4460
show: false,
4561
onClose: debug,
4662
width: '600px',
4763
showCloseBtn: false,
48-
mode: 'normal',
64+
mode: 'default',
65+
background: 'default',
66+
offsetTop: '13%',
4967
}
5068

5169
export default Modal

‎components/Modal/styles/index.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,18 @@ export const Mask = styled.div`
1717

1818
export const Wrapper = styled.div`
1919
position: relative;
20-
background: ${theme('modal.bg')};
20+
background-color: ${({ background }) =>
21+
background === 'default' ? theme('modal.bg') : theme('preview.bg')};
2122
margin: 0 auto;
22-
top: 13%;
23+
top: ${({ offsetTop }) => offsetTop};
2324
width: ${({ width }) => width};
2425
min-height: 320px;
25-
max-height: 80vh;
26+
max-height: 81vh;
2627
box-shadow: -5px 6px 37px -8px rgba(0, 0, 0, 0.42);
2728
border: 1px solid;
2829
border-top: 3px solid;
2930
border-color: ${({ mode }) =>
30-
mode === 'normal' ? theme('modal.border') : theme('baseColor.error')};
31+
mode === 'default' ? theme('modal.border') : theme('baseColor.error')};
3132
animation: ${animate.zoomInRule};
3233
`
3334
export const ChildrenWrapper = styled.div`
@@ -38,7 +39,7 @@ export const ChildrenWrapper = styled.div`
3839
`
3940
export const CloseBtn = styled(Img)`
4041
fill: ${({ mode }) =>
41-
mode === 'normal' ? theme('font') : theme('baseColor.error')};
42+
mode === 'default' ? theme('font') : theme('baseColor.error')};
4243
position: absolute;
4344
width: 30px;
4445
height: 30px;

‎containers/ArticleBodyHeader/logic.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ export const init = _store => {
269269

270270
export const uninit = () => {
271271
// if (store.curView === TYPE.LOADING) return false
272+
if (!sub$) return false
272273
debug('===== do uninit')
273274
sr71$.stop()
274275
sub$.unsubscribe()

‎containers/Comments/CommentBodyEditor.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,13 @@ const CommentBodyEditor = ({
3535

3636
<EditorFooter
3737
loading={creating}
38+
showFold
3839
showPreview={showInputPreview}
3940
onCreate={onCreate}
4041
onBackEdit={logic.backToEditor}
4142
onPreview={logic.createCommentPreview}
43+
onFold={logic.onCommentInputBlur}
4244
/>
43-
{/* <Footer loading={creating} showPreview={showInputPreview} /> */}
4445
</div>
4546
)
4647

‎containers/Comments/CommentEditor.js‎

Lines changed: 47 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import React from 'react'
2-
import withClickOutside from 'react-click-outside'
3-
42
import MarkDownRender from 'components/MarkDownRender'
53
import CommentBodyEditor from './CommentBodyEditor'
64

@@ -11,65 +9,57 @@ import EditorFooter from './EditorFooter'
119

1210
import * as logic from './logic'
1311

14-
class CommentEditor extends React.Component {
15-
/* eslint-disable */
16-
handleClickOutside() {
17-
logic.onCommentInputBlur()
18-
}
19-
/* eslint-enable */
20-
21-
render() {
22-
const {
23-
referUsers,
24-
accountInfo,
25-
onCreate,
26-
mentionList,
27-
restProps: {
28-
countCurrent,
29-
showInputBox,
30-
showInputEditor,
31-
showInputPreview,
32-
editContent,
33-
creating,
34-
},
35-
} = this.props
12+
const CommentEditor = props => {
13+
const {
14+
referUsers,
15+
accountInfo,
16+
onCreate,
17+
mentionList,
18+
restProps: {
19+
countCurrent,
20+
showInputBox,
21+
showInputEditor,
22+
showInputPreview,
23+
editContent,
24+
creating,
25+
},
26+
} = props
3627

37-
return (
38-
<Container show={showInputBox}>
39-
<EditorHeader
40-
accountInfo={accountInfo}
41-
showInputEditor={showInputEditor}
28+
return (
29+
<Container show={showInputBox}>
30+
<EditorHeader
31+
accountInfo={accountInfo}
32+
showInputEditor={showInputEditor}
33+
showInputPreview={showInputPreview}
34+
countCurrent={countCurrent}
35+
referUsers={referUsers}
36+
/>
37+
{showInputEditor && (
38+
<CommentBodyEditor
39+
mentionList={mentionList}
4240
showInputPreview={showInputPreview}
43-
countCurrent={countCurrent}
44-
referUsers={referUsers}
41+
showInputEditor={showInputEditor}
42+
body={editContent}
43+
onCreate={onCreate}
44+
restProps={{ ...props }}
4545
/>
46-
{showInputEditor && (
47-
<CommentBodyEditor
48-
mentionList={mentionList}
49-
showInputPreview={showInputPreview}
50-
showInputEditor={showInputEditor}
51-
body={editContent}
46+
)}
47+
{showInputPreview && (
48+
<div>
49+
<PreviewerWrapper>
50+
<MarkDownRender body={editContent} />
51+
</PreviewerWrapper>
52+
<EditorFooter
53+
loading={creating}
54+
showPreview={showInputPreview}
5255
onCreate={onCreate}
53-
restProps={{ ...this.props }}
56+
onBackEdit={logic.backToEditor}
57+
onPreview={logic.createCommentPreview}
5458
/>
55-
)}
56-
{showInputPreview && (
57-
<div>
58-
<PreviewerWrapper>
59-
<MarkDownRender body={editContent} />
60-
</PreviewerWrapper>
61-
<EditorFooter
62-
loading={creating}
63-
showPreview={showInputPreview}
64-
onCreate={onCreate}
65-
onBackEdit={logic.backToEditor}
66-
onPreview={logic.createCommentPreview}
67-
/>
68-
</div>
69-
)}
70-
</Container>
71-
)
72-
}
59+
</div>
60+
)}
61+
</Container>
62+
)
7363
}
7464

75-
export default withClickOutside(CommentEditor)
65+
export default CommentEditor

‎containers/Comments/CommentReplyEditor.js‎

Lines changed: 44 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react'
2-
import withClickOutside from 'react-click-outside'
32
import dynamic from 'next/dynamic'
43

54
import MarkDownRender from 'components/MarkDownRender'
@@ -24,63 +23,50 @@ const DynamicBodyEditor = dynamic({
2423
/* eslint-enable */
2524
})
2625

27-
class CommentReplyEditor extends React.Component {
28-
/* eslint-disable */
29-
handleClickOutside() {
30-
logic.closeReplyBox()
31-
logic.onCommentInputBlur()
32-
}
33-
/* eslint-enable */
34-
35-
render() {
36-
const {
37-
referUsers,
38-
show,
39-
isEdit,
40-
accountInfo,
41-
showReplyPreview,
42-
mentionList,
43-
restProps: { countCurrent, replyContent, replyToComment, replying },
44-
} = this.props
45-
46-
return (
47-
<Wrapper>
48-
<ReplyEditorHeader
49-
accountInfo={accountInfo}
50-
countCurrent={countCurrent}
51-
referUsers={referUsers}
52-
showPreview={showReplyPreview}
53-
/>
26+
const CommentReplyEditor = ({
27+
referUsers,
28+
show,
29+
isEdit,
30+
accountInfo,
31+
showReplyPreview,
32+
mentionList,
33+
restProps: { countCurrent, replyContent, replyToComment, replying },
34+
}) => (
35+
<Wrapper>
36+
<ReplyEditorHeader
37+
accountInfo={accountInfo}
38+
countCurrent={countCurrent}
39+
referUsers={referUsers}
40+
showPreview={showReplyPreview}
41+
/>
5442

55-
{!isEdit && <ReplyToBar comment={replyToComment} />}
43+
{!isEdit && <ReplyToBar comment={replyToComment} />}
5644

57-
{show ? (
58-
<div className="comment-reply-editor">
59-
<InputEditorWrapper>
60-
<DynamicBodyEditor
61-
mentionList={mentionList}
62-
onChange={debounce(logic.onReplyInputChange, 450)}
63-
onMention={logic.onMention}
64-
onMentionSearch={logic.onMentionSearch}
65-
body={replyContent}
66-
/>
67-
</InputEditorWrapper>
68-
</div>
69-
) : (
70-
<PreviewWrapper>
71-
<MarkDownRender body={replyContent} />
72-
</PreviewWrapper>
73-
)}
74-
<EditorFooter
75-
loading={replying}
76-
showPreview={showReplyPreview}
77-
onCreate={logic.createReplyComment}
78-
onBackEdit={logic.replyBackToEditor}
79-
onPreview={logic.replyCommentPreview}
80-
/>
81-
</Wrapper>
82-
)
83-
}
84-
}
45+
{show ? (
46+
<div className="comment-reply-editor">
47+
<InputEditorWrapper>
48+
<DynamicBodyEditor
49+
mentionList={mentionList}
50+
onChange={debounce(logic.onReplyInputChange, 450)}
51+
onMention={logic.onMention}
52+
onMentionSearch={logic.onMentionSearch}
53+
body={replyContent}
54+
/>
55+
</InputEditorWrapper>
56+
</div>
57+
) : (
58+
<PreviewWrapper>
59+
<MarkDownRender body={replyContent} />
60+
</PreviewWrapper>
61+
)}
62+
<EditorFooter
63+
loading={replying}
64+
showPreview={showReplyPreview}
65+
onCreate={logic.createReplyComment}
66+
onBackEdit={logic.replyBackToEditor}
67+
onPreview={logic.replyCommentPreview}
68+
/>
69+
</Wrapper>
70+
)
8571

86-
export default withClickOutside(CommentReplyEditor)
72+
export default CommentReplyEditor

‎containers/Comments/CommentsList.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import {
4747
ReplyTitle,
4848
ActionNumber,
4949
UpIcon,
50+
DownIcon,
5051
ReplyBar,
5152
ReplyToBody,
5253
ReplyToFloor,
@@ -163,9 +164,8 @@ const Comment = ({ data, tobeDeleteId, accountInfo }) => (
163164
</VisiableAction>
164165
<VisiableAction>
165166
<div onClick={logic.toggleDislikeComment.bind(this, data)}>
166-
<UpIcon
167-
src={`${ICON_CMD}/up.svg`}
168-
reverse
167+
<DownIcon
168+
src={`${ICON_CMD}/arrow-up-o.svg`}
169169
viewerDid={data.viewerHasDisliked}
170170
/>
171171
</div>

‎containers/Comments/EditorFooter.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import {
1111
InputHelper,
1212
HelperIcon,
1313
InputSubmit,
14+
FoldBtn,
15+
FoldArrow,
16+
FoldText,
1417
} from './styles/editor_footer'
1518

1619
import * as logic from './logic'
@@ -21,7 +24,11 @@ const EditorFooter = ({
2124
onCreate,
2225
onBackEdit,
2326
onPreview,
27+
showFold,
28+
onFold,
2429
}) => {
30+
console.log('showFold: ', showFold)
31+
2532
return (
2633
<InputFooter>
2734
{showPreview ? (
@@ -41,6 +48,13 @@ const EditorFooter = ({
4148
)}
4249

4350
<InputSubmit>
51+
{showFold && (
52+
<FoldBtn onClick={onFold}>
53+
<FoldArrow src={`${ICON_CMD}/arrow-up-o.svg`} />
54+
<FoldText>收起</FoldText>
55+
</FoldBtn>
56+
)}
57+
<Space right="14px" />
4458
{showPreview ? (
4559
<Button type="primary" ghost size="small" onClick={onBackEdit}>
4660
返回编辑

0 commit comments

Comments
 (0)