refactor(comments): create comment editor ux

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

@@ -19,8 +19,8 @@ export const EditorWrapper = styled(EditWrapperBase).attrs(() => ({
 }))`
   color: ${theme('thread.articleTitle')};
   min-height: ${({ type }) => getMinHeight(type)};
-  border-top: 1px solid;
-  border-top-color: #1a3a40;
+  border-bottom: 3px solid;
+  border-bottom-color: ${theme('border')};
   // media therdhold is 651
   width: 100%;
   padding-top: 10px;

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

@@ -1,7 +1,7 @@
 export const getWidth = (type) => {
   switch (type) {
     case 'comment': {
-      return '600px'
+      return '620px'
     }
     default: {
       return '680px'

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

@@ -16,7 +16,7 @@ const RichEditorStyle = createGlobalStyle`
   }
 
   .ce-paragraph[data-placeholder]:empty::before {
-    color: #4d666c !important;
+    color: #a2a2a2 !important;
   }
 
   .codex-editor svg {
@@ -124,7 +124,7 @@ const RichEditorStyle = createGlobalStyle`
     }
   }
   .ce-inline-toolbar {
-    background: #03343F;
+    background: white;
     border: none;
   }
   .ce-settings {
@@ -331,7 +331,7 @@ const RichEditorStyle = createGlobalStyle`
     display: none;
   }
   .tippy-tooltip.light-theme, .tippy-box[data-theme~=light]{
-    background: ${theme('popover.bg')} !important;
+    /* background: ${theme('popover.bg')} !important; */
     border: 1px solid;
     border-color: ${theme('popover.borderColor')} !important; 
     box-shadow: ${theme('popover.boxShadow')} !important;

src/containers/layout/GlobalLayout/CustomBg.tsx

@@ -7,7 +7,7 @@ type TBackgroundEffect =
   | {
       bgImage: string
       bgColor?: string
-      bgSize?: 'contain' | 'cover'
+      bgSize?: 'contain' | 'cover' | 'auto'
     }
   | string
 
@@ -53,6 +53,7 @@ const ComstomBg: FC = () => {
     },
     tg: {
       bgImage: '/bg/tg-green.jpg',
+      bgSize: 'auto',
     },
     tg2: {
       bgImage: '/bg/tg-earth.jpg',

src/containers/layout/ThemePalette/GlobalStyle.ts

@@ -181,10 +181,13 @@ const GlobalStyle = createGlobalStyle`
     `};
   }
 
+  .tippy-box {
+    background: ${theme('popover.bg')} !important;
+  }
   /** customize tooltip animation globally */
   .tippy-box[data-state='visible'] {
     background: ${theme('popover.bg')} !important;
-    transition: all 0.2s ease-in-out !important;
+    transition: all .25s ease-in-out !important;
   }
   .tippy-box[data-placement^=top][data-state='visible'] {
     transform: translateY(-5px);

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

@@ -79,9 +79,9 @@ export const DrawerWrapper = styled.div.attrs(
   opacity: ${({ visible, fromContentEdge }) =>
     !visible && !fromContentEdge ? 0 : 1};
 
-  max-width: ${({ visible, fromContentEdge }) =>
-    !visible && !fromContentEdge ? '60%' : '985px'};
-  /* max-width: 985px; */
+  /* max-width: ${({ visible, fromContentEdge }) =>
+    !visible && !fromContentEdge ? '60%' : '985px'}; */
+  max-width: 985px;
 
   ${({ fromContentEdge }) =>
     fromContentEdge
@@ -90,7 +90,7 @@ export const DrawerWrapper = styled.div.attrs(
 
   will-change: transform, max-width, opacity;
   // 在宽屏时滑出来时，是从内容页而不是实际的 window 页滑出, 加 delay 可以在视觉上抵消从外部滑入的跳动感
-  transition-delay: 0s, 0s, 0.1s;
+  transition-delay: 0s, 0s, 0.06s;
 
   ${css.media.mobile`
     right: 0;

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

@@ -1,45 +1,35 @@
 import { FC, memo } from 'react'
 
-import type { TAccount, TSubmitState } from '@/spec'
+import type { TSubmitState } from '@/spec'
 
-import Header from './Header'
+// import Header from './Header'
 import BodyEditor from './BodyEditor'
-import Footer from './Footer'
 
-import { Wrapper, ExpandWrapper } from '../styles/editor/publish_editor'
-import { commentOnChange, createComment, closeEditor } from '../logic'
+import { Wrapper } from '../styles/editor/publish_editor'
+// import { commentOnChange, createComment, closeEditor } from '../logic'
+import { commentOnChange } from '../logic'
 
 type TProps = {
-  accountInfo: TAccount
   body: string
   submitState: TSubmitState
-  showEditor: boolean
 }
 
-const PublishEditor: FC<TProps> = ({
-  accountInfo,
-  submitState,
-  showEditor,
-  body,
-}) => {
-  if (!showEditor) {
-    return <Wrapper />
-  }
+const PublishEditor: FC<TProps> = ({ submitState, body }) => {
   return (
-    <ExpandWrapper>
-      <Header accountInfo={accountInfo} showEditor={showEditor} />
+    <Wrapper>
+      {/* <Header accountInfo={accountInfo} showEditor={showEditor} /> */}
       <BodyEditor
         body={body}
         onChange={(v) => commentOnChange(v, 'commentBody')}
       />
 
-      <Footer
+      {/* <Footer
         submitState={submitState}
         body={body}
         onPublish={createComment}
         onCancel={closeEditor}
-      />
-    </ExpandWrapper>
+      /> */}
+    </Wrapper>
   )
 }
 

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

@@ -4,7 +4,6 @@ import Modal from '@/widgets/Modal'
 
 import ReplyEditor from './ReplyEditor'
 import UpdateEditor from './UpdateEditor'
-import PublishEditor from './PublishEditor'
 
 import type { TEditState } from '../spec'
 import { closeUpdateEditor, onReplyEditorClose } from '../logic'
@@ -15,10 +14,6 @@ type TProps = {
 
 const CommentEditor: FC<TProps> = ({ editState }) => {
   const {
-    // publish
-    commentBody,
-    showEditor,
-    accountInfo,
     // update
     showUpdateEditor,
     updateId,
@@ -61,13 +56,6 @@ const CommentEditor: FC<TProps> = ({ editState }) => {
           />
         )}
       </Modal>
-
-      <PublishEditor
-        body={commentBody}
-        showEditor={showEditor}
-        accountInfo={accountInfo}
-        submitState={submitState}
-      />
     </Fragment>
   )
 }

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

@@ -0,0 +1,46 @@
+import { FC, memo } from 'react'
+
+import { mockUsers } from '@/utils/mock'
+import Button from '@/widgets/Buttons/Button'
+
+import {
+  Wrapper,
+  AccountWrapper,
+  Avatar,
+  UserName,
+  ActionsWrapper,
+  EditIcon,
+} from '../styles/head_bar/publish_bar'
+
+type TProps = {
+  closeEditor: () => void
+}
+
+const PublishBar: FC<TProps> = ({ closeEditor }) => {
+  return (
+    <Wrapper>
+      <AccountWrapper>
+        <Avatar src={mockUsers(3)[0].avatar} />
+        <UserName>mydearxym</UserName>
+      </AccountWrapper>
+      <ActionsWrapper>
+        <Button
+          size="small"
+          space={20}
+          ghost
+          noBorder
+          onClick={() => closeEditor()}
+        >
+          取消
+        </Button>
+
+        <Button size="small" space={10}>
+          <EditIcon />
+          发布
+        </Button>
+      </ActionsWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(PublishBar)

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

@@ -0,0 +1,87 @@
+import { FC, memo } from 'react'
+
+import { ICON } from '@/config'
+import { SVG } from '@/constant'
+
+import IconButton from '@/widgets/Buttons/IconButton'
+import { IconSwitcher } from '@/widgets/Switcher'
+
+import { MODE, API_MODE } from '../../constant'
+
+import type { TMode } from '../../spec'
+import type { TProps as TBase } from '../index'
+
+import { Wrapper } from '../../styles/head_bar/state_bar/actions'
+import { foldAllComments, expandAllComments, onModeChange } from '../../logic'
+
+type TProps = Pick<TBase, 'mode' | 'apiMode' | 'isAllFolded'>
+
+const actionIconConfig = {
+  right: 11,
+  hintDelay: 200,
+}
+
+const switchItems = [
+  {
+    key: MODE.REPLIES,
+    iconSrc: `${ICON}/article/comment-reply-mode.svg`,
+    desc: '回复模式',
+  },
+  {
+    key: MODE.TIMELINE,
+    iconSrc: `${ICON}/article/comment-timeline-mode.svg`,
+    desc: '时间线模式',
+  },
+]
+
+const Actions: FC<TProps> = ({ mode, isAllFolded, apiMode }) => {
+  return (
+    <Wrapper>
+      {/* {apiMode === API_MODE.ARTICLE && (
+          <IconButton
+            icon={SVG.LOCK}
+            hint="关闭讨论"
+            {...actionIconConfig}
+            top={-1}
+          />
+        )} */}
+
+      {/* {apiMode === API_MODE.ARTICLE && (
+          <IconButton
+            path="article/notify-on.svg"
+            hint="订阅讨论"
+            {...actionIconConfig}
+          />
+        )} */}
+
+      {isAllFolded ? (
+        <IconButton
+          {...actionIconConfig}
+          icon={SVG.EXPAND}
+          size={13}
+          hint="展开全部"
+          active
+          onClick={expandAllComments}
+        />
+      ) : (
+        <IconButton
+          icon={SVG.FOLD}
+          {...actionIconConfig}
+          size={13}
+          hint="折叠全部"
+          onClick={foldAllComments}
+        />
+      )}
+
+      {apiMode === API_MODE.ARTICLE && (
+        <IconSwitcher
+          items={switchItems}
+          activeKey={mode}
+          onChange={({ key }) => onModeChange(key as TMode)}
+        />
+      )}
+    </Wrapper>
+  )
+}
+
+export default memo(Actions)

src/containers/unit/Comments/HeadBar/StateBar/index.tsx

@@ -0,0 +1,60 @@
+import { FC, memo } from 'react'
+
+import type { TCommentsState } from '@/spec'
+
+import { LineDivider } from '@/widgets/Common'
+import Button from '@/widgets/Buttons/Button'
+import { LavaLampLoading } from '@/widgets/Loading'
+
+import Actions from './Actions'
+import type { TProps as TBase } from '../index'
+
+import {
+  Wrapper,
+  TotalTitle,
+  TotalCountWrapper,
+  TotalNum,
+  ActionsWrapper,
+  EditIcon,
+} from '../../styles/head_bar/state_bar'
+
+type TProps = Pick<
+  TBase,
+  'mode' | 'apiMode' | 'isAllFolded' | 'loading' | 'basicState'
+> & { callEditor?: () => void }
+
+const StateBar: FC<TProps> = ({
+  basicState,
+  mode,
+  isAllFolded,
+  loading,
+  apiMode,
+  callEditor = console.log,
+}) => {
+  return (
+    <Wrapper>
+      <TotalCountWrapper>
+        <TotalTitle>
+          共
+          <TotalNum highlight={basicState.isViewerJoined}>
+            {basicState.totalCount}
+          </TotalNum>
+          条讨论
+        </TotalTitle>
+      </TotalCountWrapper>
+      <ActionsWrapper>
+        {loading && <LavaLampLoading right={15} />}
+
+        <Button size="small" space={10} onClick={() => callEditor()}>
+          <EditIcon />
+          讨论
+        </Button>
+        <LineDivider left={18} />
+
+        <Actions mode={mode} isAllFolded={isAllFolded} apiMode={apiMode} />
+      </ActionsWrapper>
+    </Wrapper>
+  )
+}
+
+export default memo(StateBar)