Skip to content

Commit 735aea1

Browse files
author
chenyueban
committed
feat(fluent-ui.com): Remove the header and move the content to the nav
1 parent 54d6154 commit 735aea1

10 files changed

Lines changed: 96 additions & 93 deletions

File tree

‎packages/fluent-ui.com/src/components/docs/content.tsx‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import * as React from 'react'
22
import Markdown from 'markdown-to-jsx'
3-
import { Box, Typography } from '@fluent-ui/core'
3+
import { Box, Typography, IconButton } from '@fluent-ui/core'
4+
import { useDispatch } from '@fluent-ui/hooks'
45
import { createUseStyles } from '@fluent-ui/styles'
6+
import { MenuLine as MenuLineIcon } from '@fluent-ui/icons'
57

6-
import Header from './header'
78
import SideBar from './sidebar'
89

910
import Playground from '../playground'
@@ -85,12 +86,28 @@ const typographyOverrides = {
8586
p: Body
8687
}
8788

89+
const useContentStyles = createUseStyles({
90+
menuButton: {
91+
position: 'fixed',
92+
left: 5,
93+
top: 10,
94+
zIndex: 1002
95+
}
96+
})
97+
8898
const Content = ({ data }: TemplateProps): React.ReactElement => {
8999
const pre =
90100
data.doc.frontmatter.type === 'hooks' || data.doc.frontmatter.type === 'getting-started'
91101
? Highlight
92102
: Playground
93103

104+
const mobileMenuDispatch = useDispatch({
105+
type: 'navigation/expand',
106+
payload: (v: boolean): boolean => !v
107+
})
108+
109+
const classes = useContentStyles()
110+
94111
return (
95112
<>
96113
<SideBar data={data} />
@@ -106,7 +123,9 @@ const Content = ({ data }: TemplateProps): React.ReactElement => {
106123
transition: 'all 250ms cubic-bezier(0.4,0,0.2,1) 0ms'
107124
}}
108125
>
109-
{/*<Header />*/}
126+
<Box className={classes.menuButton} display={['block', 'none']}>
127+
<IconButton onClick={mobileMenuDispatch}>{<MenuLineIcon />}</IconButton>
128+
</Box>
110129
<Box padding="4" minHeight="100%" backgroundColor="white.default">
111130
<Markdown
112131
// @ts-ignore

packages/fluent-ui.com/src/components/docs/header.tsx renamed to packages/fluent-ui.com/src/components/docs/nav-footer.tsx

Lines changed: 19 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,11 @@ import * as React from 'react'
22
import { navigate } from 'gatsby'
33
import { useIntl, IntlContext } from 'react-intl'
44

5-
import { Command, Item, Tooltip, Box, List, Transition, Portal } from '@fluent-ui/core'
6-
import {
7-
EarthLine as EarthLineIcon,
8-
PaletteLine as PaletteLineIcon,
9-
MenuLine as MenuLineIcon
10-
} from '@fluent-ui/icons' // TODO tree-shaking
11-
import { useDispatch, usePopper, useClickOutside, useGlobal } from '@fluent-ui/hooks'
5+
import { Item, Box, List, Transition, Portal } from '@fluent-ui/core'
6+
import { EarthLine as EarthLineIcon, PaletteLine as PaletteLineIcon } from '@fluent-ui/icons' // TODO tree-shaking
7+
import { usePopper, useClickOutside, useGlobal } from '@fluent-ui/hooks'
128
import { createUseStyles } from '@fluent-ui/styles'
139

14-
import Search from '../search'
1510
import { langKeys, LangKey } from '../../translations'
1611
import { pathnameToLanguage } from '../../utils'
1712

@@ -21,9 +16,7 @@ const useStyles = createUseStyles({
2116
}
2217
})
2318

24-
const Header = (): React.ReactElement => {
25-
const dispatch = useDispatch({ type: 'navigation/expand', payload: (v: boolean): boolean => !v })
26-
19+
const NavFooter = (): React.ReactElement => {
2720
const classes = useStyles()
2821

2922
const home = <img className={classes.iconButton} src="/images/fluent-ui.svg" alt="fluent-ui" />
@@ -33,7 +26,7 @@ const Header = (): React.ReactElement => {
3326

3427
const [changeLanguageVisible, setChangeLanguageVisible] = React.useState(false)
3528
const [referenceRef, popperRef] = usePopper<HTMLDivElement, HTMLDivElement>({
36-
placement: 'bottom-start',
29+
placement: 'right-start',
3730
positionFixed: true
3831
})
3932
const handleChangeLanguageVisible = React.useCallback((): void => {
@@ -65,35 +58,22 @@ const Header = (): React.ReactElement => {
6558

6659
return (
6760
<>
68-
<Command position="sticky" top="0" height={56} backgroundColor="white.default" zIndex={99}>
69-
<Tooltip title={formatMessage({ id: 'command.change-language' })}>
70-
<div onClick={handleChangeLanguageVisible} style={{ display: 'flex' }}>
71-
<Item ref={referenceRef} prefix={<EarthLineIcon />} />
72-
</div>
73-
</Tooltip>
74-
<Tooltip title={formatMessage({ id: 'command.edit-website-colors' })}>
75-
<Item onClick={handleNavigateToColorTool} prefix={<PaletteLineIcon />} />
76-
</Tooltip>
77-
<Tooltip title={formatMessage({ id: 'command.home-page' })}>
78-
<Item onClick={handleNavigateToHome} prefix={home} />
79-
</Tooltip>
80-
<Tooltip title={formatMessage({ id: 'command.github-repository' })}>
81-
<Item as="a" href="https://github.com/fluent-org/fluent-ui" prefix={github} />
82-
</Tooltip>
83-
84-
<Command.Content>
85-
<Box display={['none', 'block']}>
86-
<Search />
87-
</Box>
88-
<Box display={['block', 'none']}>
89-
<Item onClick={dispatch} prefix={<MenuLineIcon />} />
90-
</Box>
91-
</Command.Content>
92-
</Command>
61+
<Item ref={referenceRef} prefix={<EarthLineIcon />} onClick={handleChangeLanguageVisible}>
62+
{formatMessage({ id: 'command.change-language' })}
63+
</Item>
64+
<Item onClick={handleNavigateToColorTool} prefix={<PaletteLineIcon />}>
65+
{formatMessage({ id: 'command.edit-website-colors' })}
66+
</Item>
67+
<Item onClick={handleNavigateToHome} prefix={home}>
68+
{formatMessage({ id: 'command.home-page' })}
69+
</Item>
70+
<Item as="a" href="https://github.com/fluent-org/fluent-ui" prefix={github}>
71+
{formatMessage({ id: 'command.github-repository' })}
72+
</Item>
9373

9474
<Portal>
9575
<Transition visible={changeLanguageVisible} wrapper={false} mountOnEnter unmountOnExit>
96-
<Box ref={popperRef} zIndex={1000} width={160}>
76+
<Box ref={popperRef} zIndex={1003} width={160}>
9777
<List>
9878
{(Object.keys(langKeys) as LangKey[]).map(
9979
(langKey): React.ReactElement => {
@@ -122,4 +102,4 @@ const Header = (): React.ReactElement => {
122102
)
123103
}
124104

125-
export default Header
105+
export default NavFooter

‎packages/fluent-ui.com/src/components/docs/nav.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import { navigate } from 'gatsby'
3-
import { Navigation, Drawer, Item, ItemGroup, Input } from '@fluent-ui/core'
3+
import { Navigation, Drawer, Item, ItemGroup } from '@fluent-ui/core'
44
import { createUseStyles } from '@fluent-ui/styles'
55
import {
66
MenuLine as MenuLineIcon,
@@ -18,6 +18,9 @@ import {
1818
} from '@fluent-ui/icons' // TODO tree-shaking
1919
import { useAction } from '@fluent-ui/hooks'
2020
import { useIntl } from 'react-intl'
21+
import Search from '../search'
22+
import NavFooter from './nav-footer'
23+
2124
import { toLine } from '../../utils'
2225
import { TemplateProps } from '../../templates/docs'
2326

@@ -155,13 +158,14 @@ const Nav = ({ data, pageContext }: TemplateProps): React.ReactElement => {
155158
<Drawer visible={drawerVisible} onChange={handleDrawerVisible}>
156159
<Navigation ref={rootRef} value={activeId} expanded={true} acrylic height="100%" width={260}>
157160
<Navigation.Header>
158-
<Item onClick={handleExpanded} prefix={<MenuLineIcon />} />
159-
</Navigation.Header>
160-
<Navigation.Footer>
161161
<Item prefix={<SearchLineIcon />}>
162-
<Input ghost />
162+
<Search />
163163
</Item>
164+
</Navigation.Header>
165+
<Navigation.Footer>
166+
<NavFooter />
164167
</Navigation.Footer>
168+
165169
{result.map(
166170
({ type, titles }): React.ReactFragment => {
167171
return (
@@ -201,12 +205,14 @@ const Nav = ({ data, pageContext }: TemplateProps): React.ReactElement => {
201205
>
202206
<Navigation.Header>
203207
<Item onClick={handleExpanded} prefix={<MenuLineIcon />} />
204-
</Navigation.Header>
205-
<Navigation.Footer>
206208
<Item prefix={<SearchLineIcon />}>
207-
<Input ghost />
209+
<Search />
208210
</Item>
211+
</Navigation.Header>
212+
<Navigation.Footer>
213+
<NavFooter />
209214
</Navigation.Footer>
215+
210216
{result.map(
211217
({ type, titles }): React.ReactFragment => {
212218
return (

‎packages/fluent-ui.com/src/components/docs/sidebar.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types'
33
import { Box, Theme, Typography } from '@fluent-ui/core'
44
import { createUseStyles } from '@fluent-ui/styles'
55
import { TemplateProps } from '../../templates/docs'
6+
import { toLine } from '../../utils'
67
import { Styles } from 'jss'
78

89
type Classes = 'sideBar' | 'subTitle'
@@ -35,13 +36,6 @@ interface SidebarProps {
3536
data: TemplateProps['data']
3637
}
3738

38-
function toLine(name: string) {
39-
return name
40-
.replace(/(\s+)/g, '-$1') // Turn hump
41-
.replace(/\s+/g, '') // Remove spaces
42-
.toLowerCase()
43-
}
44-
4539
const SideBar: React.FC<SidebarProps> = ({ data }): React.ReactElement => {
4640
const [title] = data.doc.htmlAst.children.filter((element): boolean => element.tagName === 'h1')
4741
const subtitles = data.doc.htmlAst.children.filter((element): boolean => element.tagName === 'h2')

‎packages/fluent-ui.com/src/components/search/index.tsx‎

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
2-
import { Box, Typography, Transition, Theme } from '@fluent-ui/core'
2+
import { Box, Typography, Transition, Theme, Portal } from '@fluent-ui/core'
33
import { createUseStyles } from '@fluent-ui/styles'
4-
import { useClickOutside } from '@fluent-ui/hooks'
4+
import { useClickOutside, usePopper } from '@fluent-ui/hooks'
55
import { InstantSearch, Index } from 'react-instantsearch-dom'
66
// @ts-ignore
77
import algoliasearch from 'algoliasearch/lite'
@@ -34,6 +34,10 @@ export default function Search(): React.ReactElement {
3434
useClickOutside(ref, (): void => {
3535
setFocus(false)
3636
})
37+
const [referenceRef, popperRef] = usePopper<HTMLInputElement, HTMLDivElement>({
38+
placement: 'bottom-start',
39+
positionFixed: true
40+
})
3741

3842
return (
3943
<InstantSearch
@@ -48,31 +52,34 @@ export default function Search(): React.ReactElement {
4852
onFocus={(): void => {
4953
setFocus(true)
5054
}}
55+
innerRef={referenceRef}
5156
/>
52-
<Transition visible={query.length > 0 && focus} wrapper={false}>
53-
<Box className={classes.hits}>
54-
{indices.map(
55-
({ name, title }): React.ReactElement => (
56-
<Index indexName={name} key={name}>
57-
<Results>
58-
<Typography
59-
variant="subtitle1"
60-
as="header"
61-
gutterBottom
62-
borderBottom="1px solid #eee"
63-
paddingBottom="0.4em"
64-
>
65-
{title}
66-
</Typography>
67-
</Results>
68-
</Index>
69-
)
70-
)}
71-
<a className={classes.powerBy} href="https://www.algolia.com/docsearch">
72-
<img src="/images/algolia.svg" alt="algolia" />
73-
</a>
74-
</Box>
75-
</Transition>
57+
<Portal>
58+
<Transition visible={query.length > 0 && focus} wrapper={false} mountOnEnter unmountOnExit>
59+
<Box className={classes.hits} ref={popperRef}>
60+
{indices.map(
61+
({ name, title }): React.ReactElement => (
62+
<Index indexName={name} key={name}>
63+
<Results>
64+
<Typography
65+
variant="subtitle1"
66+
as="header"
67+
gutterBottom
68+
borderBottom="1px solid #eee"
69+
paddingBottom="0.4em"
70+
>
71+
{title}
72+
</Typography>
73+
</Results>
74+
</Index>
75+
)
76+
)}
77+
<a className={classes.powerBy} href="https://www.algolia.com/docsearch">
78+
<img src="/images/algolia.svg" alt="algolia" />
79+
</a>
80+
</Box>
81+
</Transition>
82+
</Portal>
7683
</InstantSearch>
7784
)
7885
}

‎packages/fluent-ui.com/src/components/search/input.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import * as React from 'react'
22
import { Input } from '@fluent-ui/core'
3-
import { SearchLine as SearchLineIcon } from '@fluent-ui/icons'
43
import { connectSearchBox } from 'react-instantsearch-dom'
54
import { useDebouncedCallback } from 'use-debounce'
65

76
interface SearchBoxProps {
87
refine?: (...args: any[]) => any
98
onFocus: () => void
9+
innerRef: React.RefObject<HTMLInputElement>
1010
}
1111

1212
export default connectSearchBox(
13-
({ refine, onFocus }: SearchBoxProps): React.ReactElement => {
13+
({ refine, onFocus, innerRef }: SearchBoxProps): React.ReactElement => {
1414
const [debouncedCallback] = useDebouncedCallback((value): void => {
1515
refine && refine(value)
1616
}, 1000)
@@ -19,7 +19,8 @@ export default connectSearchBox(
1919
placeholder="Search"
2020
onChange={debouncedCallback}
2121
onFocus={onFocus}
22-
prefix={<SearchLineIcon />}
22+
ref={innerRef}
23+
ghost
2324
/>
2425
)
2526
}

‎packages/fluent-ui.com/src/components/search/styles.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ const hits = (theme: Theme): Style => ({
77
width: '80vw',
88
overflow: 'scroll',
99
padding: '0.7em 1em 0.4em',
10-
position: 'absolute',
11-
top: 'calc(100% - 0.6em)',
12-
left: 10,
13-
right: 'auto',
1410
zIndex: 1002,
1511
background: theme.colors!.white!.default,
1612
boxShadow: theme.shadows![3],

‎packages/fluent-ui.com/src/docs/components/Color/Color.zh.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ langKey: "zh"
99

1010
<ColorTemplate />
1111

12-
## Color 工具
12+
## Color tool
1313

1414
你可以选择一个颜色来改变本网站的样子。
1515

‎packages/fluent-ui.com/src/utils/helpers.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export function getCookie(name: string): string {
99
export function toLine(name: string): string {
1010
const target = name
1111
.replace(/([A-Z])/g, '-$1')
12+
.replace(/\s+/g, '-')
1213
.toLowerCase()
13-
.replace(/\s+/g, '')
1414
if (target[0] === '-') return target.substr(1)
1515
return target
1616
}

‎packages/fluent-ui/src/ItemGroup/ItemGroup.styled.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const titlePrefix = (theme: Theme): Style => ({
4949
opacity: 0
5050
})
5151
const titlePrefixAcrylic: Style = {
52-
zIndex: -1
52+
zIndex: 1
5353
}
5454
const titlePrefixNotFloatOpen: Style = {
5555
transform: 'rotate(180deg)'

0 commit comments

Comments
 (0)