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

Commit bc40d23

Browse files
mydearxymmydearxym
authored
refactor(comments): create comment editor ux (#1316)
* refactor(comments): re-org file structure * refactor(comments): switch bar mode ux * fix(icon-switcher): edge-case when no active * chore(layout): adjust global page/content, custom-bg * style(tooltip): adjust animation style * fix(tippy): blink after rich-editor load * fix(tippy): blink after rich-editor load
1 parent b03aa4a commit bc40d23

File tree

25 files changed

+368
-240
lines changed

25 files changed

+368
-240
lines changed

‎src/containers/editor/RichEditor/styles/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export const EditorWrapper = styled(EditWrapperBase).attrs(() => ({
1919
}))`
2020
color: ${theme('thread.articleTitle')};
2121
min-height: ${({ type }) => getMinHeight(type)};
22-
border-top: 1px solid;
23-
border-top-color: #1a3a40;
22+
border-bottom: 3px solid;
23+
border-bottom-color: ${theme('border')};
2424
// media therdhold is 651
2525
width: 100%;
2626
padding-top: 10px;

‎src/containers/editor/RichEditor/styles/metric.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const getWidth = (type) => {
22
switch (type) {
33
case 'comment': {
4-
return '600px'
4+
return '620px'
55
}
66
default: {
77
return '680px'

‎src/containers/editor/RichEditor/styles/overwrite.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const RichEditorStyle = createGlobalStyle`
1616
}
1717
1818
.ce-paragraph[data-placeholder]:empty::before {
19-
color: #4d666c !important;
19+
color: #a2a2a2 !important;
2020
}
2121
2222
.codex-editor svg {
@@ -124,7 +124,7 @@ const RichEditorStyle = createGlobalStyle`
124124
}
125125
}
126126
.ce-inline-toolbar {
127-
background: #03343F;
127+
background: white;
128128
border: none;
129129
}
130130
.ce-settings {
@@ -331,7 +331,7 @@ const RichEditorStyle = createGlobalStyle`
331331
display: none;
332332
}
333333
.tippy-tooltip.light-theme, .tippy-box[data-theme~=light]{
334-
background: ${theme('popover.bg')} !important;
334+
/* background: ${theme('popover.bg')} !important; */
335335
border: 1px solid;
336336
border-color: ${theme('popover.borderColor')} !important;
337337
box-shadow: ${theme('popover.boxShadow')} !important;

‎src/containers/layout/GlobalLayout/CustomBg.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ type TBackgroundEffect =
77
| {
88
bgImage: string
99
bgColor?: string
10-
bgSize?: 'contain' | 'cover'
10+
bgSize?: 'contain' | 'cover' | 'auto'
1111
}
1212
| string
1313

@@ -53,6 +53,7 @@ const ComstomBg: FC = () => {
5353
},
5454
tg: {
5555
bgImage: '/bg/tg-green.jpg',
56+
bgSize: 'auto',
5657
},
5758
tg2: {
5859
bgImage: '/bg/tg-earth.jpg',

‎src/containers/layout/ThemePalette/GlobalStyle.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,10 +181,13 @@ const GlobalStyle = createGlobalStyle`
181181
`};
182182
}
183183
184+
.tippy-box {
185+
background: ${theme('popover.bg')} !important;
186+
}
184187
/** customize tooltip animation globally */
185188
.tippy-box[data-state='visible'] {
186189
background: ${theme('popover.bg')} !important;
187-
transition: all 0.2s ease-in-out !important;
190+
transition: all .25s ease-in-out !important;
188191
}
189192
.tippy-box[data-placement^=top][data-state='visible'] {
190193
transform: translateY(-5px);

‎src/containers/tool/Drawer/styles/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ export const DrawerWrapper = styled.div.attrs(
7979
opacity: ${({ visible, fromContentEdge }) =>
8080
!visible && !fromContentEdge ? 0 : 1};
8181
82-
max-width: ${({ visible, fromContentEdge }) =>
83-
!visible && !fromContentEdge ? '60%' : '985px'};
84-
/* max-width: 985px; */
82+
/* max-width: ${({ visible, fromContentEdge }) =>
83+
!visible && !fromContentEdge ? '60%' : '985px'}; */
84+
max-width: 985px;
8585
8686
${({ fromContentEdge }) =>
8787
fromContentEdge
@@ -90,7 +90,7 @@ export const DrawerWrapper = styled.div.attrs(
9090
9191
will-change: transform, max-width, opacity;
9292
// 在宽屏时滑出来时，是从内容页而不是实际的 window 页滑出, 加 delay 可以在视觉上抵消从外部滑入的跳动感
93-
transition-delay: 0s, 0s, 0.1s;
93+
transition-delay: 0s, 0s, 0.06s;
9494
9595
${css.media.mobile`
9696
right: 0;

‎src/containers/unit/Comments/Editor/PublishEditor.tsx‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,35 @@
11
import { FC, memo } from 'react'
22

3-
import type { TAccount, TSubmitState } from '@/spec'
3+
import type { TSubmitState } from '@/spec'
44

5-
import Header from './Header'
5+
// import Header from './Header'
66
import BodyEditor from './BodyEditor'
7-
import Footer from './Footer'
87

9-
import { Wrapper, ExpandWrapper } from '../styles/editor/publish_editor'
10-
import { commentOnChange, createComment, closeEditor } from '../logic'
8+
import { Wrapper } from '../styles/editor/publish_editor'
9+
// import { commentOnChange, createComment, closeEditor } from '../logic'
10+
import { commentOnChange } from '../logic'
1111

1212
type TProps = {
13-
accountInfo: TAccount
1413
body: string
1514
submitState: TSubmitState
16-
showEditor: boolean
1715
}
1816

19-
const PublishEditor: FC<TProps> = ({
20-
accountInfo,
21-
submitState,
22-
showEditor,
23-
body,
24-
}) => {
25-
if (!showEditor) {
26-
return <Wrapper />
27-
}
17+
const PublishEditor: FC<TProps> = ({ submitState, body }) => {
2818
return (
29-
<ExpandWrapper>
30-
<Header accountInfo={accountInfo} showEditor={showEditor} />
19+
<Wrapper>
20+
{/* <Header accountInfo={accountInfo} showEditor={showEditor} /> */}
3121
<BodyEditor
3222
body={body}
3323
onChange={(v) => commentOnChange(v, 'commentBody')}
3424
/>
3525

36-
<Footer
26+
{/* <Footer
3727
submitState={submitState}
3828
body={body}
3929
onPublish={createComment}
4030
onCancel={closeEditor}
41-
/>
42-
</ExpandWrapper>
31+
/> */}
32+
</Wrapper>
4333
)
4434
}
4535

‎src/containers/unit/Comments/Editor/index.tsx‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Modal from '@/widgets/Modal'
44

55
import ReplyEditor from './ReplyEditor'
66
import UpdateEditor from './UpdateEditor'
7-
import PublishEditor from './PublishEditor'
87

98
import type { TEditState } from '../spec'
109
import { closeUpdateEditor, onReplyEditorClose } from '../logic'
@@ -15,10 +14,6 @@ type TProps = {
1514

1615
const CommentEditor: FC<TProps> = ({ editState }) => {
1716
const {
18-
// publish
19-
commentBody,
20-
showEditor,
21-
accountInfo,
2217
// update
2318
showUpdateEditor,
2419
updateId,
@@ -61,13 +56,6 @@ const CommentEditor: FC<TProps> = ({ editState }) => {
6156
/>
6257
)}
6358
</Modal>
64-
65-
<PublishEditor
66-
body={commentBody}
67-
showEditor={showEditor}
68-
accountInfo={accountInfo}
69-
submitState={submitState}
70-
/>
7159
</Fragment>
7260
)
7361
}

‎src/containers/unit/Comments/HeadBar/PublishBar.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { FC, memo } from 'react'
2+
3+
import { mockUsers } from '@/utils/mock'
4+
import Button from '@/widgets/Buttons/Button'
5+
6+
import {
7+
Wrapper,
8+
AccountWrapper,
9+
Avatar,
10+
UserName,
11+
ActionsWrapper,
12+
EditIcon,
13+
} from '../styles/head_bar/publish_bar'
14+
15+
type TProps = {
16+
closeEditor: () => void
17+
}
18+
19+
const PublishBar: FC<TProps> = ({ closeEditor }) => {
20+
return (
21+
<Wrapper>
22+
<AccountWrapper>
23+
<Avatar src={mockUsers(3)[0].avatar} />
24+
<UserName>mydearxym</UserName>
25+
</AccountWrapper>
26+
<ActionsWrapper>
27+
<Button
28+
size="small"
29+
space={20}
30+
ghost
31+
noBorder
32+
onClick={() => closeEditor()}
33+
>
34+
取消
35+
</Button>
36+
37+
<Button size="small" space={10}>
38+
<EditIcon />
39+
发布
40+
</Button>
41+
</ActionsWrapper>
42+
</Wrapper>
43+
)
44+
}
45+
46+
export default memo(PublishBar)

‎src/containers/unit/Comments/HeadBar/StateBar/Actions.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { FC, memo } from 'react'
2+
3+
import { ICON } from '@/config'
4+
import { SVG } from '@/constant'
5+
6+
import IconButton from '@/widgets/Buttons/IconButton'
7+
import { IconSwitcher } from '@/widgets/Switcher'
8+
9+
import { MODE, API_MODE } from '../../constant'
10+
11+
import type { TMode } from '../../spec'
12+
import type { TProps as TBase } from '../index'
13+
14+
import { Wrapper } from '../../styles/head_bar/state_bar/actions'
15+
import { foldAllComments, expandAllComments, onModeChange } from '../../logic'
16+
17+
type TProps = Pick<TBase, 'mode' | 'apiMode' | 'isAllFolded'>
18+
19+
const actionIconConfig = {
20+
right: 11,
21+
hintDelay: 200,
22+
}
23+
24+
const switchItems = [
25+
{
26+
key: MODE.REPLIES,
27+
iconSrc: `${ICON}/article/comment-reply-mode.svg`,
28+
desc: '回复模式',
29+
},
30+
{
31+
key: MODE.TIMELINE,
32+
iconSrc: `${ICON}/article/comment-timeline-mode.svg`,
33+
desc: '时间线模式',
34+
},
35+
]
36+
37+
const Actions: FC<TProps> = ({ mode, isAllFolded, apiMode }) => {
38+
return (
39+
<Wrapper>
40+
{/* {apiMode === API_MODE.ARTICLE && (
41+
<IconButton
42+
icon={SVG.LOCK}
43+
hint="关闭讨论"
44+
{...actionIconConfig}
45+
top={-1}
46+
/>
47+
)} */}
48+
49+
{/* {apiMode === API_MODE.ARTICLE && (
50+
<IconButton
51+
path="article/notify-on.svg"
52+
hint="订阅讨论"
53+
{...actionIconConfig}
54+
/>
55+
)} */}
56+
57+
{isAllFolded ? (
58+
<IconButton
59+
{...actionIconConfig}
60+
icon={SVG.EXPAND}
61+
size={13}
62+
hint="展开全部"
63+
active
64+
onClick={expandAllComments}
65+
/>
66+
) : (
67+
<IconButton
68+
icon={SVG.FOLD}
69+
{...actionIconConfig}
70+
size={13}
71+
hint="折叠全部"
72+
onClick={foldAllComments}
73+
/>
74+
)}
75+
76+
{apiMode === API_MODE.ARTICLE && (
77+
<IconSwitcher
78+
items={switchItems}
79+
activeKey={mode}
80+
onChange={({ key }) => onModeChange(key as TMode)}
81+
/>
82+
)}
83+
</Wrapper>
84+
)
85+
}
86+
87+
export default memo(Actions)

0 commit comments

Comments
 (0)