redirect(drawer): redesign UI & Share widgets (#151)

* chore: wip * chore: wip * chore: style adjust * chore: wip * chore: wip * chore: article navi * chore: style adjust * chore: wip * chore: wip * chore: wip * chore: rm Share container * chore: wip * chore: WithMargin wip * chore: WithMargin wip * chore: WithMargin wip * chore: WithMargin wip * chore: dynamic load modal
groupher · Oct 20, 2023 · ab7282c · ab7282c
1 parent ddc0fa6
commit ab7282c
Show file tree

Hide file tree

Showing 103 changed files with 859 additions and 952 deletions.
diff --git a/config/config.json b/config/config.json
@@ -1,6 +1,6 @@
 {
   "//--- general configs ---//": "",
-  "DEFAULT_THEME": "day",
+  "DEFAULT_THEME": "night",
   "SENIOR_AMOUNT_THRESHOLD": 51.2,
   "SPONSOR_AMOUNT_THRESHOLD": 3999,
   "PAGE_SIZE": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -101,7 +101,7 @@
     "sanitize-html": "^2.5.2",
     "scroll-into-view-if-needed": "1.5.0",
     "sentry-testkit": "^2.1.0",
-    "sonner": "^0.6.2",
+    "sonner": "^1.0.0",
     "store": "^2.0.12",
     "stringz": "^2.0.0",
     "styled-components": "^6.1.0",

diff --git a/src/containers/content/ArticleContent/DesktopView/SideInfo.tsx b/src/containers/content/ArticleContent/DesktopView/SideInfo.tsx
@@ -47,22 +47,18 @@ const SideInfo: FC<TProps> = ({ article }) => {
 
         <Br bottom={25} />
 
+        <Label>类别</Label>
+        <ArticleCatState cat={ARTICLE_CAT.FEATURE} state={ARTICLE_STATE.WIP} smaller={false} />
+
+        <Br bottom={25} />
+
         <Label>标签</Label>
         <Value>
           <TagsList items={articleTags} size="small" />
         </Value>
 
         <Br bottom={25} />
 
-        <Label>类别</Label>
-        <ArticleCatState cat={ARTICLE_CAT.FEATURE} state={ARTICLE_STATE.WIP} smaller={false} />
-
-        <Br bottom={25} />
-
-        <Label>状态</Label>
-        <Value>进行中</Value>
-
-        <Br bottom={20} />
         <Label>发布时间</Label>
         <Value>
           <ReadableDate date={insertedAt} fmt="absolute" withTime={false} />

diff --git a/src/containers/digest/ArticleDigest/DesktopView/Header.tsx b/src/containers/digest/ArticleDigest/DesktopView/Header.tsx
@@ -28,22 +28,22 @@ type TProps = {
 }
 
 const Header: FC<TProps> = ({ metric }) => {
-  const community = useViewingCommunity()
+  const { slug, title, logo } = useViewingCommunity()
 
   return (
     <Wrapper id={ANCHOR.GLOBAL_HEADER_ID}>
       <InnerWrapper>
         <Community>
-          <CommunityLogo src={assetSrc(community.logo)} />
-          <CommunityTitle>{community.title}</CommunityTitle>
+          <CommunityLogo src={assetSrc(logo)} />
+          <CommunityTitle>{title}</CommunityTitle>
         </Community>
 
         <Main metric={metric}>
-          <LinkItem href={`/${community.slug}/${ROUTE.POST}`}>讨论区</LinkItem>
-          <LinkItem href={`/${community.slug}/${ROUTE.KANBAN}`}>看板</LinkItem>
-          <LinkItem href={`/${community.slug}/${ROUTE.CHANGELOG}`}>更新日志</LinkItem>
-          <LinkItem href={`/${community.slug}/${ROUTE.HELP}`}>帮助台</LinkItem>
-          <LinkItem href={`/${community.slug}/${ROUTE.ABOUT}`}>关于</LinkItem>
+          <LinkItem href={`/${slug}/${ROUTE.POST}`}>讨论区</LinkItem>
+          <LinkItem href={`/${slug}/${ROUTE.KANBAN}`}>看板</LinkItem>
+          <LinkItem href={`/${slug}/${ROUTE.CHANGELOG}`}>更新日志</LinkItem>
+          <LinkItem href={`/${slug}/${ROUTE.HELP}`}>帮助台</LinkItem>
+          <LinkItem href={`/${slug}/${ROUTE.ABOUT}`}>关于</LinkItem>
         </Main>
 
         <MobileNaviWrapper>

diff --git a/src/containers/editor/CommunityEditor/styles/banner/scale_selector.ts b/src/containers/editor/CommunityEditor/styles/banner/scale_selector.ts
@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import type { TActive, TSpace } from '@/spec'
 import css, { theme } from '@/css'
 
+import { WithMargin } from '@/widgets/Common'
+
 export const Wrapper = styled.div`
   ${css.column('align-center')};
   color: ${theme('article.digest')};
@@ -58,7 +60,7 @@ export const Footer = styled.div`
 `
 
 type TNote = TActive & TSpace
-export const Note = styled.div<TNote>`
+export const Note = styled(WithMargin)<TNote>`
   font-size: 12px;
   color: ${({ $active }) => ($active ? theme('article.title') : theme('lightText'))};
   font-weight: ${({ $active }) => ($active ? 500 : 400)};
@@ -70,8 +72,6 @@ export const Note = styled.div<TNote>`
   }
 
   transition: color 0.2s;
-
-  ${(props) => css.spaceMargins(props)};
 `
 export const ShineNote = styled.div`
   font-size: 12px;

diff --git a/src/containers/layout/ThemePalette/GlobalStyle.ts b/src/containers/layout/ThemePalette/GlobalStyle.ts
@@ -199,5 +199,13 @@ const GlobalStyle = createGlobalStyle<TPrimaryColor>`
     background: ${theme('toast.bg')} !important;
     border-color: ${theme('toast.border')} !important;
   }
+  [data-sonner-toast] [data-close-button] {
+    background: ${theme('hoverBg')} !important;
+    color: ${theme('hint')} !important;
+    border-color: ${theme('hint')} !important;
+  }
+  [data-sonner-toast][data-mounted=true] {
+    margin-top: -8px !important;
+  }
 `
 export default GlobalStyle
diff --git a/src/containers/layout/ThemePalette/ScrollBarStyle.ts b/src/containers/layout/ThemePalette/ScrollBarStyle.ts
@@ -515,7 +515,7 @@ const ScrollBarStyle = createGlobalStyle`
   }
 
   .os-theme-dark.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-    background: rgba(0, 0, 0, 0.4);
+    background: rgb(148 148 148 / 55%);
   }
 
   .os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {

diff --git a/src/containers/thread/AboutThread/styles/label_list.ts b/src/containers/thread/AboutThread/styles/label_list.ts
@@ -1,13 +1,11 @@
 import styled from 'styled-components'
 
-import type { TSpace } from '@/spec'
-
 import css, { theme } from '@/css'
+import { WithMargin } from '@/widgets/Common'
 
-export const Wrapper = styled.div<TSpace>`
+export const Wrapper = styled(WithMargin)`
   ${css.rowWrap('align-center')};
   gap: 0 8px;
-  ${(props) => css.spaceMargins(props)};
 `
 export const Label = styled.div`
   border: 1px solid;

diff --git a/src/containers/thread/ArticlesThread/store.ts b/src/containers/thread/ArticlesThread/store.ts
@@ -26,11 +26,12 @@ import { T, markStates, getParent, Instance, toJS } from '@/mobx'
 import { nilOrEmpty } from '@/validator'
 import { plural } from '@/fmt'
 
-import { PagedPosts, ArticlesFilter, emptyPagi } from '@/model'
+import { PagedPosts, PagedChangelogs, ArticlesFilter, emptyPagi } from '@/model'
 
 const ArticlesThread = T.model('ArticlesThread', {
   mode: T.opt(T.enum(['default', 'modeline']), 'default'),
   pagedPosts: T.opt(PagedPosts, emptyPagi),
+  pagedChangelogs: T.opt(PagedChangelogs, emptyPagi),
   filters: T.opt(ArticlesFilter, {}),
   resState: T.opt(T.enum('resState', values(TYPE.RES_STATE)), TYPE.RES_STATE.LOADING),
 })

diff --git a/src/containers/thread/ChangelogThread/store.ts b/src/containers/thread/ChangelogThread/store.ts
@@ -44,7 +44,9 @@ const ChangelogThread = T.model('ChangelogThread', {
       return mockChangelogTimeTags(15)
     },
     get pagedChangelogsData(): TPagedArticles {
-      return toJS(self.pagedChangelogs)
+      const root = getParent(self) as TRootStore
+
+      return toJS(root.articlesThread.pagedChangelogs)
     },
   }))
   .actions((self) => ({

diff --git a/src/containers/thread/DashboardThread/styles/saving_bar.ts b/src/containers/thread/DashboardThread/styles/saving_bar.ts
@@ -4,9 +4,10 @@ import type { TSpace } from '@/spec'
 import css, { theme } from '@/css'
 
 import InfoSVG from '@/icons/Save'
+import { WithMargin } from '@/widgets/Common'
 
 type TWrapper = { direction: 'left' | 'right'; width: string } & TSpace
-export const NormalWrapper = styled.div<TWrapper>`
+export const NormalWrapper = styled(WithMargin)<TWrapper>`
   ${css.row('align-center')};
   width: ${({ direction, width }) => (direction === 'right' ? `calc(${width} + 10px)` : width)};
   background: ${(props) => {
@@ -19,8 +20,6 @@ export const NormalWrapper = styled.div<TWrapper>`
   height: 42px;
   padding: 0 10px;
   border-radius: 10px;
-
-  ${(props) => css.spaceMargins(props)};
 `
 export const MinimalWrapper = styled(NormalWrapper)`
   height: 34px;

diff --git a/src/containers/tool/ArticleSticker/LeftSticker/index.tsx b/src/containers/tool/ArticleSticker/LeftSticker/index.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 
 import type { TArticle } from '@/spec'
 
-import Share from '@/containers/tool/Share'
+import Share from '@/widgets/Share'
 import Upvote from '@/widgets/Upvote'
 
 import { Wrapper, InnerWrapper, Divider } from '../styles/left_sticker'
@@ -33,7 +33,7 @@ const LeftSticker: FC<TProps> = ({ show, article, testid = 'article-sticker-left
           onAction={handleUpvote}
         />
         <Divider />
-        <Share size={17} right={3} />
+        <Share right={3} />
       </InnerWrapper>
     </Wrapper>
   )

diff --git a/src/containers/tool/Drawer/AddOn/CloseButton.tsx b/src/containers/tool/Drawer/AddOn/CloseButton.tsx
diff --git a/src/containers/tool/Drawer/AddOn/index.tsx b/src/containers/tool/Drawer/AddOn/index.tsx
diff --git a/...tainers/tool/Drawer/AddOn/ArticleNavi.tsx → ...ainers/tool/Drawer/Viewer/ArticleNavi.tsx b/...tainers/tool/Drawer/AddOn/ArticleNavi.tsx → ...ainers/tool/Drawer/Viewer/ArticleNavi.tsx
@@ -6,14 +6,14 @@ import type { TArticleNavi } from '../spec'
 
 import {
   Wrapper,
-  LeftSwitchBlock,
-  LeftArrow,
-  RightSwitchBlock,
-  RightArrow,
+  UpSwitchBlock,
+  UpArrow,
+  DownSwitchBlock,
+  DownArrow,
   IndexWrapper,
-  LeftIndexWrapper,
-  RightIndexWrapper,
-} from '../styles/add_on/article_navi'
+  UpIndexWrapper,
+  DownIndexWrapper,
+} from '../styles/article_navi'
 
 import { naviToArticle } from '../logic'
 
@@ -29,20 +29,20 @@ const ArticleNavi: FC<TProps> = ({ articleNavi }) => {
   return (
     <Wrapper>
       {articleNavi?.previous && (
-        <LeftSwitchBlock onClick={() => naviToArticle(articleNavi.previous)}>
-          <LeftArrow />
+        <UpSwitchBlock onClick={() => naviToArticle(articleNavi.previous)}>
+          <UpArrow />
           <IndexWrapper>
-            <LeftIndexWrapper>上一篇</LeftIndexWrapper>
+            <UpIndexWrapper>上一篇</UpIndexWrapper>
           </IndexWrapper>
-        </LeftSwitchBlock>
+        </UpSwitchBlock>
       )}
       {articleNavi?.next && (
-        <RightSwitchBlock onClick={() => naviToArticle(articleNavi.next)}>
-          <RightArrow />
+        <DownSwitchBlock onClick={() => naviToArticle(articleNavi.next)}>
+          <DownArrow />
           <IndexWrapper>
-            <RightIndexWrapper>下一篇</RightIndexWrapper>
+            <DownIndexWrapper>下一篇</DownIndexWrapper>
           </IndexWrapper>
-        </RightSwitchBlock>
+        </DownSwitchBlock>
       )}
     </Wrapper>
   )

diff --git a/src/containers/tool/Drawer/Viewer/DesktopView.tsx b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
@@ -1,11 +1,13 @@
 import { Fragment, FC, ReactNode, memo } from 'react'
+import { includes } from 'ramda'
 
 import { ANCHOR } from '@/constant/dom'
 
-import type { TSwipeOption, TArticleNavi } from '../spec'
-import AddOn from '../AddOn'
+import type { TArticleNavi, TSwipeOption } from '../spec'
+import { ARTICLE_VIEWER_TYPES } from '../constant'
 
-import { DrawerOverlay, DrawerWrapper, DrawerContent } from '../styles'
+import ArticleNavi from './ArticleNavi'
+import { DrawerOverlay, DrawerWrapper, DrawerContent, NaviArea } from '../styles'
 import { closeDrawer } from '../logic'
 
 type TProps = {
@@ -15,8 +17,8 @@ type TProps = {
   rightOffset: string
   fromContentEdge: boolean
   type: string
-  articleNavi?: TArticleNavi
   children: ReactNode
+  articleNavi: TArticleNavi
 }
 
 const DesktopView: FC<TProps> = ({
@@ -29,6 +31,8 @@ const DesktopView: FC<TProps> = ({
   articleNavi,
   children,
 }) => {
+  const isArticleViewer = includes(type, ARTICLE_VIEWER_TYPES)
+
   return (
     <Fragment>
       <DrawerOverlay
@@ -45,8 +49,14 @@ const DesktopView: FC<TProps> = ({
         mobile={false}
         options={options}
       >
-        <AddOn type={type} articleNavi={articleNavi} />
-        <DrawerContent type={type}>{children}</DrawerContent>
+        <DrawerContent type={type}>
+          {isArticleViewer && (
+            <NaviArea>
+              <ArticleNavi articleNavi={articleNavi} />
+            </NaviArea>
+          )}
+          {children}
+        </DrawerContent>
       </DrawerWrapper>
     </Fragment>
   )