From 6e9a6a8f098ca4125de1bc50c5371cd5a74f5e4b Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 16 May 2022 16:11:49 +0800
Subject: [PATCH 1/4] style(viewing-icon): adjust position

---
 src/widgets/PostItem/styles/desktop_view/viewing_sign.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/widgets/PostItem/styles/desktop_view/viewing_sign.ts b/src/widgets/PostItem/styles/desktop_view/viewing_sign.ts
index 85fd38060..45df8d080 100644
--- a/src/widgets/PostItem/styles/desktop_view/viewing_sign.ts
+++ b/src/widgets/PostItem/styles/desktop_view/viewing_sign.ts
@@ -6,12 +6,11 @@ import ViewSVG from '@/icons/View'
 export const Wrapper = styled.div`
   ${css.flex()};
   position: absolute;
-  left: -28px;
-  top: 11px;
+  left: -30px;
+  top: 18px;
   animation: ${animate.fadeInRight} 0.25s linear;
 `
 export const ViewIcon = styled(ViewSVG)`
   ${css.size(10)};
-  fill: ${theme('thread.articleTitle')};
+  fill: ${theme('thread.articleDigest')};
 `
-export const Title = styled.div``

From 859acd7cf865ce80f02ed563f153eb418ba8b8f9 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Mon, 16 May 2022 22:06:13 +0800
Subject: [PATCH 2/4] fix(c11n-panel): adjust style & crash fix

---
 .../tool/C11NSettingPanel/GeneralSettings.tsx          | 10 +++++-----
 src/containers/tool/C11NSettingPanel/index.tsx         |  2 +-
 .../tool/C11NSettingPanel/styles/gerneral_settings.ts  |  6 ------
 src/widgets/Header/AddOns.tsx                          |  4 ++--
 src/widgets/NoticeBar/styles/index.ts                  |  2 +-
 src/widgets/PostItem/DesktopView/Header.tsx            |  7 +++----
 src/widgets/Switcher/styles/metric/radio.ts            |  2 +-
 src/widgets/Switcher/styles/radio.ts                   |  1 +
 src/widgets/Switcher/styles/tabs/drawer_view.ts        | 10 +++++-----
 utils/helper.ts                                        |  2 +-
 10 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/src/containers/tool/C11NSettingPanel/GeneralSettings.tsx b/src/containers/tool/C11NSettingPanel/GeneralSettings.tsx
index 145b8c634..9b31cd0c0 100644
--- a/src/containers/tool/C11NSettingPanel/GeneralSettings.tsx
+++ b/src/containers/tool/C11NSettingPanel/GeneralSettings.tsx
@@ -5,10 +5,10 @@ import { isMobile } from 'react-device-detect'
 import type { TThread, TC11N } from '@/spec'
 import { THREAD, C11N } from '@/constant'
 
-import { Br } from '@/widgets/Common'
+import { Br, Divider } from '@/widgets/Common'
 import { Radio } from '@/widgets/Switcher'
 
-import { Wrapper, Title, Desc, Divider } from './styles/gerneral_settings'
+import { Wrapper, Title, Desc } from './styles/gerneral_settings'
 import { onC11NChange } from './logic'
 
 type TProps = {
@@ -45,7 +45,7 @@ const GeneralSettings: FC<TProps> = ({ curThread, customization }) => {
           })
         }
       />
-      <Divider />
+      <Divider top={25} bottom={25} />
 
       <Title>阅读辅助</Title>
       <Br top={10} />
@@ -95,10 +95,10 @@ const GeneralSettings: FC<TProps> = ({ curThread, customization }) => {
               })
             }
           />
-          <Divider />
+          <Divider top={25} bottom={25} />
         </>
       ) : (
-        <Divider />
+        <Divider top={25} bottom={25} />
       )}
 
       <Title>显示密度</Title>
diff --git a/src/containers/tool/C11NSettingPanel/index.tsx b/src/containers/tool/C11NSettingPanel/index.tsx
index 66318b3be..83bafe524 100644
--- a/src/containers/tool/C11NSettingPanel/index.tsx
+++ b/src/containers/tool/C11NSettingPanel/index.tsx
@@ -86,4 +86,4 @@ const C11NSettingPanelContainer: FC<TProps> = ({ c11NSettingPanel: store }) => {
   )
 }
 
-export default bond(C11NSettingPanelContainer, 'c11nSettingPanel') as FC<TProps>
+export default bond(C11NSettingPanelContainer, 'c11NSettingPanel') as FC<TProps>
diff --git a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts
index 241738bdd..e7bf48724 100644
--- a/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts
+++ b/src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts
@@ -24,9 +24,3 @@ export const Desc = styled.div`
   margin-bottom: 10px;
   opacity: 0.5;
 `
-export const Divider = styled.div`
-  margin: 30px 0;
-  width: 100%;
-  height: 1px;
-  background: #003541;
-`
diff --git a/src/widgets/Header/AddOns.tsx b/src/widgets/Header/AddOns.tsx
index 114f15c08..d47a4539b 100755
--- a/src/widgets/Header/AddOns.tsx
+++ b/src/widgets/Header/AddOns.tsx
@@ -3,7 +3,7 @@ import { FC, memo } from 'react'
 import type { TAccount } from '@/spec'
 import { EVENT } from '@/constant'
 
-import { send, c11nSettins } from '@/utils/helper'
+import { send, c11nSettings } from '@/utils/helper'
 
 import UserAccount from './UserAccount'
 
@@ -33,7 +33,7 @@ const AddOns: FC<TProps> = ({ accountInfo }) => {
 
   return (
     <Wrapper>
-      <div onClick={() => c11nSettins()}>
+      <div onClick={() => c11nSettings()}>
         <SettingIcon />
       </div>
       <Divider>&nbsp;</Divider>
diff --git a/src/widgets/NoticeBar/styles/index.ts b/src/widgets/NoticeBar/styles/index.ts
index fddcf2b46..8daa0cd81 100755
--- a/src/widgets/NoticeBar/styles/index.ts
+++ b/src/widgets/NoticeBar/styles/index.ts
@@ -22,7 +22,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   padding-bottom: 8px;
   /* width: 100%; */
   min-height: 40px;
-  background: ${({ noBg }) => (noBg ? 'transparent' : '#00333f')};
+  background: ${({ noBg }) => (noBg ? 'transparent' : '#FDF6E8')};
   border-radius: 8px;
 
   margin-top: ${({ top }) => `${top || 0}px`};
diff --git a/src/widgets/PostItem/DesktopView/Header.tsx b/src/widgets/PostItem/DesktopView/Header.tsx
index e2788beaf..30de8fdcd 100644
--- a/src/widgets/PostItem/DesktopView/Header.tsx
+++ b/src/widgets/PostItem/DesktopView/Header.tsx
@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic'
 import type { TPost } from '@/spec'
 import { EVENT } from '@/constant'
 
-import { send } from '@/utils/helper'
+import { send, c11nSettings } from '@/utils/helper'
 
 import AvatarsGroup from '@/widgets/AvatarsGroup'
 // import TagsList from '@/widgets/TagsList'
@@ -32,9 +32,8 @@ const Header: FC<TProps> = ({ item }) => {
   return (
     <Wrapper>
       <Brief>
-        <Title onClick={() => send(EVENT.PREVIEW_ARTICLE, { article: item })}>
-          {item.title}
-        </Title>
+        {/* <Title onClick={() => send(EVENT.PREVIEW_ARTICLE, { article: item })}> */}
+        <Title onClick={() => c11nSettings()}>{item.title}</Title>
         {/*  @ts-ignore */}
         <TagsList items={item.articleTags} left={12} />
       </Brief>
diff --git a/src/widgets/Switcher/styles/metric/radio.ts b/src/widgets/Switcher/styles/metric/radio.ts
index 3179e9eb8..2f9a2212f 100644
--- a/src/widgets/Switcher/styles/metric/radio.ts
+++ b/src/widgets/Switcher/styles/metric/radio.ts
@@ -4,7 +4,7 @@ import { SIZE } from '@/constant'
 import { TTheme } from '@/spec'
 
 export const getActiveBackground = (dimOnActive: boolean): TTheme => {
-  return dimOnActive ? '#00414F' : theme('button.primary')
+  return dimOnActive ? theme('border') : theme('button.primary')
 }
 
 export const getLabelColor = (
diff --git a/src/widgets/Switcher/styles/radio.ts b/src/widgets/Switcher/styles/radio.ts
index 34638ab90..4c555d5f1 100644
--- a/src/widgets/Switcher/styles/radio.ts
+++ b/src/widgets/Switcher/styles/radio.ts
@@ -29,6 +29,7 @@ export const Label = styled.label<TLabel>`
   font-size: ${({ size }) => getLabelFontsize(size)};
   margin-right: ${({ checked }) => (checked ? '16px' : '8px')};
   padding-left: ${({ checked }) => (checked ? '14px' : '24px')};
+  font-weight: ${({ checked }) => (checked ? 'bold' : 'normal')};
   padding-right: 14px;
   padding-top: 1px;
   padding-bottom: 1px;
diff --git a/src/widgets/Switcher/styles/tabs/drawer_view.ts b/src/widgets/Switcher/styles/tabs/drawer_view.ts
index 48804e943..ba410cdf0 100644
--- a/src/widgets/Switcher/styles/tabs/drawer_view.ts
+++ b/src/widgets/Switcher/styles/tabs/drawer_view.ts
@@ -18,19 +18,19 @@ export const TabItem = styled.div<TActive>`
   padding-bottom: 4px;
   color: ${({ active }) =>
     active ? theme('thread.articleTitle') : theme('thread.articleDigest')};
-  background: ${({ active }) => (active ? '#0f4150' : '#093542')};
+  background: ${({ active }) => (active ? theme('border') : theme('hoverBg'))};
   font-weight: ${({ active }) => (active ? 'bold' : 'normal')};
   font-size: 12px;
   flex-grow: 1;
   cursor: pointer;
 
   :first-child {
-    border-top-left-radius: 6px;
-    border-bottom-left-radius: 6px;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
   }
 
   :last-child {
-    border-top-right-radius: 6px;
-    border-bottom-right-radius: 6px;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
   }
 `
diff --git a/utils/helper.ts b/utils/helper.ts
index 1cb0becfc..6ab4466b2 100755
--- a/utils/helper.ts
+++ b/utils/helper.ts
@@ -258,7 +258,7 @@ export const listUsers = (data): void => {
   send(EVENT.DRAWER.OPEN, { type, data })
 }
 
-export const c11nSettins = (): void => {
+export const c11nSettings = (): void => {
   send(EVENT.DRAWER.OPEN, { type: TYPE.DRAWER.C11N_SETTINGS })
 }
 

From 43a5d89499ad4a3a9ed3537fff29c5f31c3e8fd7 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 17 May 2022 16:37:11 +0800
Subject: [PATCH 3/4] refactor(drawer): add general panel

---
 src/containers/tool/Drawer/AddOn/index.tsx    | 19 ++++++++++--
 .../tool/Drawer/Viewer/DesktopView.tsx        |  4 ++-
 src/containers/tool/Drawer/logic.ts           |  1 +
 .../tool/Drawer/styles/add_on/index.ts        |  6 ++++
 src/containers/tool/Drawer/styles/index.ts    | 30 ++++++++++++-------
 src/containers/tool/Drawer/styles/metrics.ts  |  6 ++--
 utils/themes/skins/github.ts                  |  1 +
 7 files changed, 49 insertions(+), 18 deletions(-)

diff --git a/src/containers/tool/Drawer/AddOn/index.tsx b/src/containers/tool/Drawer/AddOn/index.tsx
index e4df37f30..a9fc91b57 100755
--- a/src/containers/tool/Drawer/AddOn/index.tsx
+++ b/src/containers/tool/Drawer/AddOn/index.tsx
@@ -1,14 +1,19 @@
 import { FC, memo } from 'react'
 import { includes } from 'ramda'
 
+import { VIEWER_TYPES } from '../styles/metrics'
 import ArticleNavi from './ArticleNavi'
 
 import type { TArticleNavi } from '../spec'
 import { ARTICLE_VIEWER_TYPES } from '../constant'
 
+import IconButton from '@/widgets/Buttons/IconButton'
+
 import Share from '@/containers/tool/Share'
 import CloseButton from './CloseButton'
-import { Wrapper, TopArea } from '../styles/add_on'
+import { Wrapper, ViewerWrapper, TopArea } from '../styles/add_on'
+
+import { closeDrawer } from '../logic'
 
 type TProps = {
   type: string
@@ -19,15 +24,23 @@ const AddOn: FC<TProps> = ({ type, articleNavi }) => {
   const showArticleNavi = includes(type, ARTICLE_VIEWER_TYPES)
   const showShare = includes(type, ARTICLE_VIEWER_TYPES)
 
+  if (!includes(type, VIEWER_TYPES)) {
+    return (
+      <Wrapper>
+        <IconButton icon="close" onClick={closeDrawer} size={20} />
+      </Wrapper>
+    )
+  }
+
   return (
-    <Wrapper>
+    <ViewerWrapper>
       <TopArea showShare={showShare}>
         <CloseButton />
         {showShare && <Share top={9} left={6} size={15} offsetLeft="50%" />}
       </TopArea>
 
       {showArticleNavi && <ArticleNavi articleNavi={articleNavi} />}
-    </Wrapper>
+    </ViewerWrapper>
   )
 }
 
diff --git a/src/containers/tool/Drawer/Viewer/DesktopView.tsx b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
index 02171df10..122f2c08f 100644
--- a/src/containers/tool/Drawer/Viewer/DesktopView.tsx
+++ b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
@@ -1,10 +1,12 @@
 import { Fragment, FC, ReactNode, memo } from 'react'
+import { contains } from 'ramda'
 
 import { ANCHOR } from '@/constant'
 
 import type { TSwipeOption, TArticleNavi } from '../spec'
 import AddOn from '../AddOn'
 
+import { VIEWER_TYPES } from '../styles/metrics'
 import { DrawerOverlay, DrawerWrapper, DrawerContent } from '../styles'
 import { closeDrawer } from '../logic'
 
@@ -46,7 +48,7 @@ const DesktopView: FC<TProps> = ({
         options={options}
       >
         <AddOn type={type} articleNavi={articleNavi} />
-        <DrawerContent>{children}</DrawerContent>
+        <DrawerContent type={type}>{children}</DrawerContent>
       </DrawerWrapper>
     </Fragment>
   )
diff --git a/src/containers/tool/Drawer/logic.ts b/src/containers/tool/Drawer/logic.ts
index 1fae77666..6c7b8a295 100755
--- a/src/containers/tool/Drawer/logic.ts
+++ b/src/containers/tool/Drawer/logic.ts
@@ -161,6 +161,7 @@ const DataResolver = [
     match: asyncRes(EVENT.DRAWER.OPEN),
     action: (res) => {
       const payload = res[EVENT.DRAWER.OPEN]
+      console.log(' >>> payload >>> ', payload)
       /*
          log('should open payload thread: ', payload.thread)
          log('should open payload id: ', payload.data.id)
diff --git a/src/containers/tool/Drawer/styles/add_on/index.ts b/src/containers/tool/Drawer/styles/add_on/index.ts
index 0ca70d507..8ad8f9bfc 100755
--- a/src/containers/tool/Drawer/styles/add_on/index.ts
+++ b/src/containers/tool/Drawer/styles/add_on/index.ts
@@ -3,6 +3,12 @@ import styled from 'styled-components'
 import css, { theme } from '@/utils/css'
 
 export const Wrapper = styled.div`
+  position: absolute;
+  right: 82px;
+  top: 18px;
+  z-index: 1;
+`
+export const ViewerWrapper = styled.div`
   /* border: 1px solid tomato; */
   width: 60px;
   ${css.flexColumn('align-end')};
diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts
index 968edef45..891e802ce 100755
--- a/src/containers/tool/Drawer/styles/index.ts
+++ b/src/containers/tool/Drawer/styles/index.ts
@@ -3,12 +3,13 @@ import { contains } from 'ramda'
 
 import type { TActive } from '@/spec'
 import css, { theme, zIndex } from '@/utils/css'
+import { pixelAdd } from '@/utils/dom'
 
 import type { TDrawer, TSwipe } from '../spec'
 import {
-  WIDE_CASE,
-  WIDE_WIDTH,
-  NARROW_WIDTH,
+  VIEWER_TYPES,
+  VIEWER_WIDTH,
+  NORMAL_WIDTH,
   getTransform,
   getMobileContentHeight,
   getContentLinearGradient,
@@ -61,19 +62,20 @@ export const DrawerWrapper = styled.div.attrs(
 )<TDrawer>`
   ${css.flex()};
   position: fixed;
-  right: ${({ rightOffset }) => rightOffset};
-  top: 0px;
+  right: ${({ rightOffset, type }) =>
+    contains(type, VIEWER_TYPES) ? rightOffset : pixelAdd(rightOffset, -25)};
+  top: ${({ type }) => (contains(type, VIEWER_TYPES) ? 0 : '25px')};
 
   color: ${theme('drawer.font')};
   box-sizing: border-box;
   font-family: Roboto, sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  border-radius: 0px;
   height: 100%;
   width: ${({ type }) =>
-    contains(type, WIDE_CASE) ? WIDE_WIDTH : NARROW_WIDTH};
+    contains(type, VIEWER_TYPES) ? VIEWER_WIDTH : NORMAL_WIDTH};
 
-  min-width: ${({ type }) => (contains(type, WIDE_CASE) ? '700px' : '450px')};
+  min-width: ${({ type }) =>
+    contains(type, VIEWER_TYPES) ? '700px' : '450px'};
   z-index: ${({ visible }) => (visible ? zIndex.drawer : -1)};
 
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
@@ -102,12 +104,18 @@ export const DrawerWrapper = styled.div.attrs(
   `};
 `
 
-export const DrawerContent = styled.div`
+export const DrawerContent = styled.div<{ type: string }>`
+  position: relative;
   /* 60 is the width of addon */
   width: calc(100% - 60px);
   background-color: ${theme('drawer.bg')};
-  height: 100vh;
-  box-shadow: ${theme('drawer.shadow')};
+  height: ${({ type }) =>
+    contains(type, VIEWER_TYPES) ? '100vh' : 'calc(100vh - 50px)'};
+  border-radius: ${({ type }) => (contains(type, VIEWER_TYPES) ? 0 : '10px')};
+  box-shadow: ${({ type }) =>
+    contains(type, VIEWER_TYPES)
+      ? theme('drawer.shadow')
+      : theme('drawer.shadowLite')};
 `
 type TDrawerMobile = { options: Record<string, unknown>; bgColor: string }
 export const DrawerMobileContent = styled.div<TDrawerMobile>`
diff --git a/src/containers/tool/Drawer/styles/metrics.ts b/src/containers/tool/Drawer/styles/metrics.ts
index 2b4214190..465505ca1 100644
--- a/src/containers/tool/Drawer/styles/metrics.ts
+++ b/src/containers/tool/Drawer/styles/metrics.ts
@@ -6,8 +6,8 @@ type Options = {
   direction?: 'bottom' | 'top'
 }
 
-export const WIDE_WIDTH = '70%'
-export const NARROW_WIDTH = '40%'
+export const VIEWER_WIDTH = '70%'
+export const NORMAL_WIDTH = '475px'
 
 export const SWIPE_THRESHOLD = {
   top: {
@@ -22,7 +22,7 @@ export const SWIPE_THRESHOLD = {
   },
 }
 
-export const WIDE_CASE = reduce(
+export const VIEWER_TYPES = reduce(
   concat,
   // @ts-ignore
   [TYPE.DRAWER.MAILS_VIEW],
diff --git a/utils/themes/skins/github.ts b/utils/themes/skins/github.ts
index 66086f42b..f14086d35 100755
--- a/utils/themes/skins/github.ts
+++ b/utils/themes/skins/github.ts
@@ -168,6 +168,7 @@ const github = {
     font: primaryColor,
     bg: contentBg,
     shadow: '-5px -1px 20px 0px rgb(143 143 143 / 27%)',
+    shadowLite: '-1px 3px 20px 0px rgb(143 143 143 / 27%)',
     closerShadow: '-7px 4px 20px 0px rgb(143 143 143 / 27%)',
     markdownHelperBg: '#F9FCFC',
     accountBg: '#FFFFFF',

From 20e2cca87cbcf5fba957daa12a8cc2fd45968005 Mon Sep 17 00:00:00 2001
From: mydearxym <mydearxym@qq.com>
Date: Tue, 17 May 2022 18:37:04 +0800
Subject: [PATCH 4/4] refactor(drawer): extract helper in metrics

---
 src/containers/tool/Drawer/AddOn/index.tsx    |  5 ++--
 .../tool/Drawer/Viewer/DesktopView.tsx        |  2 --
 src/containers/tool/Drawer/styles/index.ts    | 28 +++++++------------
 src/containers/tool/Drawer/styles/metrics.ts  | 24 +++++++++++++---
 4 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/containers/tool/Drawer/AddOn/index.tsx b/src/containers/tool/Drawer/AddOn/index.tsx
index a9fc91b57..438df4b33 100755
--- a/src/containers/tool/Drawer/AddOn/index.tsx
+++ b/src/containers/tool/Drawer/AddOn/index.tsx
@@ -1,7 +1,6 @@
 import { FC, memo } from 'react'
 import { includes } from 'ramda'
 
-import { VIEWER_TYPES } from '../styles/metrics'
 import ArticleNavi from './ArticleNavi'
 
 import type { TArticleNavi } from '../spec'
@@ -12,7 +11,7 @@ import IconButton from '@/widgets/Buttons/IconButton'
 import Share from '@/containers/tool/Share'
 import CloseButton from './CloseButton'
 import { Wrapper, ViewerWrapper, TopArea } from '../styles/add_on'
-
+import { isViewerMode } from '../styles/metrics'
 import { closeDrawer } from '../logic'
 
 type TProps = {
@@ -24,7 +23,7 @@ const AddOn: FC<TProps> = ({ type, articleNavi }) => {
   const showArticleNavi = includes(type, ARTICLE_VIEWER_TYPES)
   const showShare = includes(type, ARTICLE_VIEWER_TYPES)
 
-  if (!includes(type, VIEWER_TYPES)) {
+  if (!isViewerMode(type)) {
     return (
       <Wrapper>
         <IconButton icon="close" onClick={closeDrawer} size={20} />
diff --git a/src/containers/tool/Drawer/Viewer/DesktopView.tsx b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
index 122f2c08f..175933a6d 100644
--- a/src/containers/tool/Drawer/Viewer/DesktopView.tsx
+++ b/src/containers/tool/Drawer/Viewer/DesktopView.tsx
@@ -1,12 +1,10 @@
 import { Fragment, FC, ReactNode, memo } from 'react'
-import { contains } from 'ramda'
 
 import { ANCHOR } from '@/constant'
 
 import type { TSwipeOption, TArticleNavi } from '../spec'
 import AddOn from '../AddOn'
 
-import { VIEWER_TYPES } from '../styles/metrics'
 import { DrawerOverlay, DrawerWrapper, DrawerContent } from '../styles'
 import { closeDrawer } from '../logic'
 
diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts
index 891e802ce..c7fb6bf43 100755
--- a/src/containers/tool/Drawer/styles/index.ts
+++ b/src/containers/tool/Drawer/styles/index.ts
@@ -1,5 +1,4 @@
 import styled from 'styled-components'
-import { contains } from 'ramda'
 
 import type { TActive } from '@/spec'
 import css, { theme, zIndex } from '@/utils/css'
@@ -7,13 +6,13 @@ import { pixelAdd } from '@/utils/dom'
 
 import type { TDrawer, TSwipe } from '../spec'
 import {
-  VIEWER_TYPES,
-  VIEWER_WIDTH,
-  NORMAL_WIDTH,
   getTransform,
   getMobileContentHeight,
   getContentLinearGradient,
   getDim,
+  isViewerMode,
+  getDrawerWidth,
+  getDrawerMinWidth,
 } from './metrics'
 
 export const DrawerOverlay = styled.div<TActive>`
@@ -63,27 +62,22 @@ export const DrawerWrapper = styled.div.attrs(
   ${css.flex()};
   position: fixed;
   right: ${({ rightOffset, type }) =>
-    contains(type, VIEWER_TYPES) ? rightOffset : pixelAdd(rightOffset, -25)};
-  top: ${({ type }) => (contains(type, VIEWER_TYPES) ? 0 : '25px')};
+    isViewerMode(type) ? rightOffset : pixelAdd(rightOffset, -25)};
+  top: ${({ type }) => (isViewerMode(type) ? 0 : '25px')};
 
   color: ${theme('drawer.font')};
   box-sizing: border-box;
   font-family: Roboto, sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   height: 100%;
-  width: ${({ type }) =>
-    contains(type, VIEWER_TYPES) ? VIEWER_WIDTH : NORMAL_WIDTH};
-
-  min-width: ${({ type }) =>
-    contains(type, VIEWER_TYPES) ? '700px' : '450px'};
+  width: ${({ type }) => getDrawerWidth(type)};
+  min-width: ${({ type }) => getDrawerMinWidth(type)};
   z-index: ${({ visible }) => (visible ? zIndex.drawer : -1)};
 
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
   opacity: ${({ visible, fromContentEdge }) =>
     !visible && !fromContentEdge ? 0 : 1};
 
-  /* max-width: ${({ visible, fromContentEdge }) =>
-    !visible && !fromContentEdge ? '60%' : '985px'}; */
   max-width: 985px;
 
   ${({ fromContentEdge }) =>
@@ -110,12 +104,10 @@ export const DrawerContent = styled.div<{ type: string }>`
   width: calc(100% - 60px);
   background-color: ${theme('drawer.bg')};
   height: ${({ type }) =>
-    contains(type, VIEWER_TYPES) ? '100vh' : 'calc(100vh - 50px)'};
-  border-radius: ${({ type }) => (contains(type, VIEWER_TYPES) ? 0 : '10px')};
+    isViewerMode(type) ? '100vh' : 'calc(100vh - 50px)'};
+  border-radius: ${({ type }) => (isViewerMode(type) ? 0 : '10px')};
   box-shadow: ${({ type }) =>
-    contains(type, VIEWER_TYPES)
-      ? theme('drawer.shadow')
-      : theme('drawer.shadowLite')};
+    isViewerMode(type) ? theme('drawer.shadow') : theme('drawer.shadowLite')};
 `
 type TDrawerMobile = { options: Record<string, unknown>; bgColor: string }
 export const DrawerMobileContent = styled.div<TDrawerMobile>`
diff --git a/src/containers/tool/Drawer/styles/metrics.ts b/src/containers/tool/Drawer/styles/metrics.ts
index 465505ca1..b735a2ecc 100644
--- a/src/containers/tool/Drawer/styles/metrics.ts
+++ b/src/containers/tool/Drawer/styles/metrics.ts
@@ -1,4 +1,4 @@
-import { concat, keys, reduce } from 'ramda'
+import { concat, keys, reduce, contains } from 'ramda'
 import { TYPE, ARTICLE_THREAD } from '@/constant'
 
 type Options = {
@@ -6,8 +6,8 @@ type Options = {
   direction?: 'bottom' | 'top'
 }
 
-export const VIEWER_WIDTH = '70%'
-export const NORMAL_WIDTH = '475px'
+const VIEWER_WIDTH = '70%'
+const NORMAL_WIDTH = '475px'
 
 export const SWIPE_THRESHOLD = {
   top: {
@@ -22,7 +22,7 @@ export const SWIPE_THRESHOLD = {
   },
 }
 
-export const VIEWER_TYPES = reduce(
+const VIEWER_TYPES = reduce(
   concat,
   // @ts-ignore
   [TYPE.DRAWER.MAILS_VIEW],
@@ -33,6 +33,22 @@ export const VIEWER_TYPES = reduce(
   ]),
 )
 
+/**
+ * viewer-mode is wider, for aritlce viewer, editor staff
+ * normal-mode is for settings, user preview staff
+ */
+export const isViewerMode = (type: string): boolean => {
+  return contains(type, VIEWER_TYPES)
+}
+
+export const getDrawerWidth = (type: string): string => {
+  return isViewerMode(type) ? VIEWER_WIDTH : NORMAL_WIDTH
+}
+
+export const getDrawerMinWidth = (type: string): string => {
+  return isViewerMode(type) ? '700px' : '450px'
+}
+
 // export for modeline usage
 export const L_HEIGHT = '25vh'
 const L_TRANSLATE = '300%'