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

Commit dc4d93e

Browse files
mydearxymmydearxym
authored
feat: drawer setting layout for editor staff (#1321)
* style(viewing-icon): adjust position * fix(c11n-panel): adjust style & crash fix * refactor(drawer): add general panel * refactor(drawer): extract helper in metrics
1 parent 095b063 commit dc4d93e

File tree

18 files changed

+83
-54
lines changed

18 files changed

+83
-54
lines changed

‎src/containers/tool/C11NSettingPanel/GeneralSettings.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import { isMobile } from 'react-device-detect'
55
import type { TThread, TC11N } from '@/spec'
66
import { THREAD, C11N } from '@/constant'
77

8-
import { Br } from '@/widgets/Common'
8+
import { Br, Divider } from '@/widgets/Common'
99
import { Radio } from '@/widgets/Switcher'
1010

11-
import { Wrapper, Title, Desc, Divider } from './styles/gerneral_settings'
11+
import { Wrapper, Title, Desc } from './styles/gerneral_settings'
1212
import { onC11NChange } from './logic'
1313

1414
type TProps = {
@@ -45,7 +45,7 @@ const GeneralSettings: FC<TProps> = ({ curThread, customization }) => {
4545
})
4646
}
4747
/>
48-
<Divider />
48+
<Divider top={25} bottom={25} />
4949

5050
<Title>阅读辅助</Title>
5151
<Br top={10} />
@@ -95,10 +95,10 @@ const GeneralSettings: FC<TProps> = ({ curThread, customization }) => {
9595
})
9696
}
9797
/>
98-
<Divider />
98+
<Divider top={25} bottom={25} />
9999
</>
100100
) : (
101-
<Divider />
101+
<Divider top={25} bottom={25} />
102102
)}
103103

104104
<Title>显示密度</Title>

‎src/containers/tool/C11NSettingPanel/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,4 @@ const C11NSettingPanelContainer: FC<TProps> = ({ c11NSettingPanel: store }) => {
8686
)
8787
}
8888

89-
export default bond(C11NSettingPanelContainer, 'c11nSettingPanel') as FC<TProps>
89+
export default bond(C11NSettingPanelContainer, 'c11NSettingPanel') as FC<TProps>

‎src/containers/tool/C11NSettingPanel/styles/gerneral_settings.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,3 @@ export const Desc = styled.div`
2424
margin-bottom: 10px;
2525
opacity: 0.5;
2626
`
27-
export const Divider = styled.div`
28-
margin: 30px 0;
29-
width: 100%;
30-
height: 1px;
31-
background: #003541;
32-
`

‎src/containers/tool/Drawer/AddOn/index.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@ import ArticleNavi from './ArticleNavi'
66
import type { TArticleNavi } from '../spec'
77
import { ARTICLE_VIEWER_TYPES } from '../constant'
88

9+
import IconButton from '@/widgets/Buttons/IconButton'
10+
911
import Share from '@/containers/tool/Share'
1012
import CloseButton from './CloseButton'
11-
import { Wrapper, TopArea } from '../styles/add_on'
13+
import { Wrapper, ViewerWrapper, TopArea } from '../styles/add_on'
14+
import { isViewerMode } from '../styles/metrics'
15+
import { closeDrawer } from '../logic'
1216

1317
type TProps = {
1418
type: string
@@ -19,15 +23,23 @@ const AddOn: FC<TProps> = ({ type, articleNavi }) => {
1923
const showArticleNavi = includes(type, ARTICLE_VIEWER_TYPES)
2024
const showShare = includes(type, ARTICLE_VIEWER_TYPES)
2125

26+
if (!isViewerMode(type)) {
27+
return (
28+
<Wrapper>
29+
<IconButton icon="close" onClick={closeDrawer} size={20} />
30+
</Wrapper>
31+
)
32+
}
33+
2234
return (
23-
<Wrapper>
35+
<ViewerWrapper>
2436
<TopArea showShare={showShare}>
2537
<CloseButton />
2638
{showShare && <Share top={9} left={6} size={15} offsetLeft="50%" />}
2739
</TopArea>
2840

2941
{showArticleNavi && <ArticleNavi articleNavi={articleNavi} />}
30-
</Wrapper>
42+
</ViewerWrapper>
3143
)
3244
}
3345

‎src/containers/tool/Drawer/Viewer/DesktopView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const DesktopView: FC<TProps> = ({
4646
options={options}
4747
>
4848
<AddOn type={type} articleNavi={articleNavi} />
49-
<DrawerContent>{children}</DrawerContent>
49+
<DrawerContent type={type}>{children}</DrawerContent>
5050
</DrawerWrapper>
5151
</Fragment>
5252
)

‎src/containers/tool/Drawer/logic.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ const DataResolver = [
161161
match: asyncRes(EVENT.DRAWER.OPEN),
162162
action: (res) => {
163163
const payload = res[EVENT.DRAWER.OPEN]
164+
console.log(' >>> payload >>> ', payload)
164165
/*
165166
log('should open payload thread: ', payload.thread)
166167
log('should open payload id: ', payload.data.id)

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ import styled from 'styled-components'
33
import css, { theme } from '@/utils/css'
44

55
export const Wrapper = styled.div`
6+
position: absolute;
7+
right: 82px;
8+
top: 18px;
9+
z-index: 1;
10+
`
11+
export const ViewerWrapper = styled.div`
612
/* border: 1px solid tomato; */
713
width: 60px;
814
${css.flexColumn('align-end')};

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import styled from 'styled-components'
2-
import { contains } from 'ramda'
32

43
import type { TActive } from '@/spec'
54
import css, { theme, zIndex } from '@/utils/css'
5+
import { pixelAdd } from '@/utils/dom'
66

77
import type { TDrawer, TSwipe } from '../spec'
88
import {
9-
WIDE_CASE,
10-
WIDE_WIDTH,
11-
NARROW_WIDTH,
129
getTransform,
1310
getMobileContentHeight,
1411
getContentLinearGradient,
1512
getDim,
13+
isViewerMode,
14+
getDrawerWidth,
15+
getDrawerMinWidth,
1616
} from './metrics'
1717

1818
export const DrawerOverlay = styled.div<TActive>`
@@ -61,27 +61,23 @@ export const DrawerWrapper = styled.div.attrs(
6161
)<TDrawer>`
6262
${css.flex()};
6363
position: fixed;
64-
right: ${({ rightOffset }) => rightOffset};
65-
top: 0px;
64+
right: ${({ rightOffset, type }) =>
65+
isViewerMode(type) ? rightOffset : pixelAdd(rightOffset, -25)};
66+
top: ${({ type }) => (isViewerMode(type) ? 0 : '25px')};
6667
6768
color: ${theme('drawer.font')};
6869
box-sizing: border-box;
6970
font-family: Roboto, sans-serif;
7071
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
71-
border-radius: 0px;
7272
height: 100%;
73-
width: ${({ type }) =>
74-
contains(type, WIDE_CASE) ? WIDE_WIDTH : NARROW_WIDTH};
75-
76-
min-width: ${({ type }) => (contains(type, WIDE_CASE) ? '700px' : '450px')};
73+
width: ${({ type }) => getDrawerWidth(type)};
74+
min-width: ${({ type }) => getDrawerMinWidth(type)};
7775
z-index: ${({ visible }) => (visible ? zIndex.drawer : -1)};
7876
7977
visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
8078
opacity: ${({ visible, fromContentEdge }) =>
8179
!visible && !fromContentEdge ? 0 : 1};
8280
83-
/* max-width: ${({ visible, fromContentEdge }) =>
84-
!visible && !fromContentEdge ? '60%' : '985px'}; */
8581
max-width: 985px;
8682
8783
${({ fromContentEdge }) =>
@@ -102,12 +98,16 @@ export const DrawerWrapper = styled.div.attrs(
10298
`};
10399
`
104100

105-
export const DrawerContent = styled.div`
101+
export const DrawerContent = styled.div<{ type: string }>`
102+
position: relative;
106103
/* 60 is the width of addon */
107104
width: calc(100% - 60px);
108105
background-color: ${theme('drawer.bg')};
109-
height: 100vh;
110-
box-shadow: ${theme('drawer.shadow')};
106+
height: ${({ type }) =>
107+
isViewerMode(type) ? '100vh' : 'calc(100vh - 50px)'};
108+
border-radius: ${({ type }) => (isViewerMode(type) ? 0 : '10px')};
109+
box-shadow: ${({ type }) =>
110+
isViewerMode(type) ? theme('drawer.shadow') : theme('drawer.shadowLite')};
111111
`
112112
type TDrawerMobile = { options: Record<string, unknown>; bgColor: string }
113113
export const DrawerMobileContent = styled.div<TDrawerMobile>`

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { concat, keys, reduce } from 'ramda'
1+
import { concat, keys, reduce, contains } from 'ramda'
22
import { TYPE, ARTICLE_THREAD } from '@/constant'
33

44
type Options = {
55
position?: 'H' | 'M' | 'L'
66
direction?: 'bottom' | 'top'
77
}
88

9-
export const WIDE_WIDTH = '70%'
10-
export const NARROW_WIDTH = '40%'
9+
const VIEWER_WIDTH = '70%'
10+
const NORMAL_WIDTH = '475px'
1111

1212
export const SWIPE_THRESHOLD = {
1313
top: {
@@ -22,7 +22,7 @@ export const SWIPE_THRESHOLD = {
2222
},
2323
}
2424

25-
export const WIDE_CASE = reduce(
25+
const VIEWER_TYPES = reduce(
2626
concat,
2727
// @ts-ignore
2828
[TYPE.DRAWER.MAILS_VIEW],
@@ -33,6 +33,22 @@ export const WIDE_CASE = reduce(
3333
]),
3434
)
3535

36+
/**
37+
* viewer-mode is wider, for aritlce viewer, editor staff
38+
* normal-mode is for settings, user preview staff
39+
*/
40+
export const isViewerMode = (type: string): boolean => {
41+
return contains(type, VIEWER_TYPES)
42+
}
43+
44+
export const getDrawerWidth = (type: string): string => {
45+
return isViewerMode(type) ? VIEWER_WIDTH : NORMAL_WIDTH
46+
}
47+
48+
export const getDrawerMinWidth = (type: string): string => {
49+
return isViewerMode(type) ? '700px' : '450px'
50+
}
51+
3652
// export for modeline usage
3753
export const L_HEIGHT = '25vh'
3854
const L_TRANSLATE = '300%'

‎src/widgets/Header/AddOns.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { FC, memo } from 'react'
33
import type { TAccount } from '@/spec'
44
import { EVENT } from '@/constant'
55

6-
import { send, c11nSettins } from '@/utils/helper'
6+
import { send, c11nSettings } from '@/utils/helper'
77

88
import UserAccount from './UserAccount'
99

@@ -33,7 +33,7 @@ const AddOns: FC<TProps> = ({ accountInfo }) => {
3333

3434
return (
3535
<Wrapper>
36-
<div onClick={() => c11nSettins()}>
36+
<div onClick={() => c11nSettings()}>
3737
<SettingIcon />
3838
</div>
3939
<Divider>&nbsp;</Divider>

0 commit comments

Comments
 (0)