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

Commit a05ea28

Browse files
mydearxymmydearxym
committed
chore: Merge branch 'custom-scrollbar' into dev
2 parents 3534763 + b5cfe3f commit a05ea28

File tree

13 files changed

+84
-31
lines changed

13 files changed

+84
-31
lines changed

‎components/Hooks/usePlatform.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const inialPlatform = {
99
isSafari: false,
1010
isIE: false,
1111
isEdge: false,
12+
isMacOS: false,
1213
}
1314

1415
// see https://stackoverflow.com/questions/49328382/browser-detection-in-reactjs/49328524
@@ -40,10 +41,18 @@ const usePlatform = (/* { breakpoint } */) => {
4041
const isChrome =
4142
!!Global.chrome && (!!Global.chrome.webstore || !!Global.chrome.runtime)
4243

44+
const isMacOS = Global.navigator.appVersion.indexOf('Mac') != -1
4345
/* eslint-enable */
4446

4547
setPlatform(
46-
R.merge(inialPlatform, { isFirefox, isSafari, isIE, isEdge, isChrome })
48+
R.merge(inialPlatform, {
49+
isFirefox,
50+
isSafari,
51+
isIE,
52+
isEdge,
53+
isChrome,
54+
isMacOS,
55+
})
4756
)
4857

4958
return () => {}

‎config/endpoint.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const getGraphQLEndpoint = () => {
1313
return 'http://localhost:4001/graphiql'
1414

1515
default:
16-
// return 'https://api.coderplanets.com/graphiql'
17-
return 'http://localhost:4001/graphiql'
16+
return 'https://api.coderplanets.com/graphiql'
17+
/* return 'http://localhost:4001/graphiql' */
1818
}
1919
}
2020

‎containers/Doraemon/logic/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -500,6 +500,9 @@ export const useInit = _store => {
500500
pockect$ = new Pocket(store)
501501
SAK = new SwissArmyKnife(store)
502502

503+
/* eslint-disable no-undef */
504+
OverlayScrollbars(document.getElementById('suggestion-scroller'), {})
505+
503506
initSpecCmdResolver()
504507

505508
pockect$.search().subscribe(res => {
@@ -537,6 +540,8 @@ export const useInit = _store => {
537540
}, [_store])
538541
}
539542

543+
/*
544+
540545
export const init2 = _store => {
541546
if (store) return false
542547
@@ -577,3 +582,4 @@ export const init2 = _store => {
577582
if (sub$) sub$.unsubscribe()
578583
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
579584
}
585+
*/

‎containers/Doraemon/styles/results_list.js

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ import styled from 'styled-components'
33
import Img from '@components/Img'
44
import { theme, animate, cs } from '@utils'
55

6+
export const Wrapper = styled.div.attrs(() => ({
7+
id: 'suggestion-scroller',
8+
}))`
9+
width: 100%;
10+
overflow: hidden;
11+
max-height: 400px;
12+
`
613
export const LoadingIcon = styled(Img)`
714
fill: ${theme('shell.searchIcon')};
815
width: 30px;
@@ -40,18 +47,14 @@ export const PanelContainer = styled.div`
4047
left: 50%;
4148
margin-left: -19vw;
4249
`
43-
export const Wrapper = styled.div`
44-
width: 100%;
45-
overflow: hidden;
46-
`
4750
export const SuggestionWrapper = styled.div`
4851
position: relative;
4952
display: ${({ empty }) => (empty ? 'none' : 'flex')};
5053
flex-direction: column;
51-
max-height: 60vh;
54+
// max-height: 400px;
5255
overflow-y: scroll;
5356
overflow-x: hidden;
54-
width: 102%;
57+
width: 100%;
5558
`
5659
// #001b21;
5760
export const BaseBar = styled.div`
@@ -115,7 +118,7 @@ export const Title = styled.div`
115118
116119
${cs.truncate('400px')};
117120
${cs.media.mobile`
118-
${cs.truncate('200px')};
121+
${cs.truncate('200px')};
119122
`};
120123
`
121124
export const Desc = styled.div`

‎containers/GlobalLayout/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@ import React from 'react'
88
import T from 'prop-types'
99
import useNetwork from 'react-use/lib/useNetwork'
1010

11+
import 'overlayscrollbars/js/OverlayScrollbars'
12+
import 'overlayscrollbars/css/OverlayScrollbars.css'
13+
1114
import { ICON_CMD } from '@config'
1215
import { connectStore } from '@utils'
13-
1416
import { useShortcut, useMedia, usePlatform } from '@hooks'
1517

1618
import { Wrapper, SubCommunitiesExpander, ExpanderIcon } from './styles'

‎containers/GlobalLayout/logic.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ export const useInit = (_store, extra) => {
2222
useEffect(() => {
2323
store = _store
2424

25+
// FIXME: do not show body scrollbar on mac
26+
/* eslint-disable no-undef */
27+
OverlayScrollbars(document.querySelectorAll('body'), {
28+
// NOT WORK!
29+
// scrollbars: { autoHide: 'scroll', autoHideDelay: 500 },
30+
})
31+
2532
const { online, media, platform } = extra
2633
store.markState({ online, media, platform })
2734
}, [_store, extra])

‎containers/Sidebar/MenuList.js

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import R from 'ramda'
33
import { SortableContainer, SortableElement } from 'react-sortable-hoc'
44

55
import MenuBar from './MenuBar'
6-
import { Wrapper } from './styles/menu_list'
6+
import { Wrapper, ScrollWrapper } from './styles/menu_list'
77

88
const SortableMenuBar = SortableElement(
99
({ pin, item, activeRaw, forceRerender }) => (
@@ -23,19 +23,26 @@ const MenuList = SortableContainer(
2323

2424
return (
2525
<Wrapper>
26-
{homeCommunities.map(item => (
27-
<MenuBar key={item.raw} pin={pin} item={item} activeRaw={activeRaw} />
28-
))}
29-
{sortableCommunities.map((item, index) => (
30-
<SortableMenuBar
31-
index={index}
32-
key={item.raw}
33-
pin={pin}
34-
item={item}
35-
activeRaw={activeRaw}
36-
forceRerender={forceRerender}
37-
/>
38-
))}
26+
<ScrollWrapper>
27+
{homeCommunities.map(item => (
28+
<MenuBar
29+
key={item.raw}
30+
pin={pin}
31+
item={item}
32+
activeRaw={activeRaw}
33+
/>
34+
))}
35+
{sortableCommunities.map((item, index) => (
36+
<SortableMenuBar
37+
index={index}
38+
key={item.raw}
39+
pin={pin}
40+
item={item}
41+
activeRaw={activeRaw}
42+
forceRerender={forceRerender}
43+
/>
44+
))}
45+
</ScrollWrapper>
3946
</Wrapper>
4047
)
4148
}

‎containers/Sidebar/logic.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,12 @@ export const useInit = _store => {
154154
// log('effect init')
155155
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
156156

157+
/* eslint-disable no-undef */
158+
OverlayScrollbars(document.getElementById('sidebar-scroller'), {
159+
scrollbars: { autoHide: 'scroll', autoHideDelay: 200 },
160+
className: 'os-theme-light',
161+
})
162+
157163
setTimeout(() => {
158164
/* eslint-disable-next-line */
159165
toggleForeceRerender(true)

‎containers/Sidebar/styles/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@ export const Wrapper = styled.aside.attrs(props => ({
1212
position: fixed;
1313
height: 100vh;
1414
top: 0;
15-
width: ${({ pin }) => (pin ? '250px' : '56px')};
15+
width: ${({ pin }) => (pin ? '260px' : '56px')};
1616
box-shadow: ${({ pin }) => (pin ? '3px 0 20px rgba(0, 0, 0, 0.2); ' : '')};
1717
background: ${theme('sidebar.bg')};
1818
border-color: ${theme('sidebar.borderColor')};
1919
z-index: ${cs.zIndex.sidebar};
20-
overflow: hidden;
20+
// overflow: hidden;
2121
2222
transition: width 0.2s, opacity 0.8s, box-shadow 0.1s linear 0.1s,
2323
background-color 0.3s;
2424
2525
&:hover {
26-
width: 250px;
26+
width: 260px;
2727
box-shadow: 3px 0 20px rgba(0, 0, 0, 0.2);
2828
}
2929
${cs.media.tablet`display: none`};

‎containers/Sidebar/styles/menu_list.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ export const Wrapper = styled.div`
55
left: 0;
66
position: relative;
77
width: 260px;
8-
height: 95vh;
9-
overflow-y: scroll;
8+
height: 100%;
9+
// height: 95vh;
10+
// overflow-y: scroll;
1011
transition: left 0.2s;
1112
`
12-
export const holder = 1
13+
export const ScrollWrapper = styled.div.attrs(() => ({
14+
id: 'sidebar-scroller',
15+
}))`
16+
// max-height: calc(100% - 20px);
17+
// height 500px;
18+
height: calc(100% - 20px);
19+
`

0 commit comments

Comments
 (0)