Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit9a30852

Browse files
committed
feat(sidebar): add drop shadow when scroll off the top
1 parent9a2f2df commit9a30852

File tree

6 files changed

+52
-16
lines changed

6 files changed

+52
-16
lines changed

‎src/containers/Sidebar/MenuBar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ import {
1616

1717
import{onCommunitySelect}from'./logic'
1818

19-
constMenuBar=({ pin, item, activeRaw, forceRerender})=>(
19+
constMenuBar=({ pin, item, activeRaw, forceRerender, dropShadow})=>(
2020
<WrapperonClick={onCommunitySelect.bind(this,item)}>
2121
<ActiveBarpin={pin}active={activeRaw===R.toLower(item.raw)}/>
22-
<MenuItemBar>
22+
<MenuItemBardropShadow={dropShadow}>
2323
<MenuRowpin={pin}active={activeRaw===R.toLower(item.raw)}>
2424
<MenuItemIcon
2525
key={uid.gen()}

‎src/containers/Sidebar/MenuList.js‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
importReactfrom'react'
22
importRfrom'ramda'
3+
import{Waypoint}from'react-waypoint'
34
import{SortableContainer,SortableElement}from'react-sortable-hoc'
4-
55
import{OverlayScrollbarsComponent}from'overlayscrollbars-react'
66

77
importMenuBarfrom'./MenuBar'
8+
import{scrollOnTop,scrollOffTop}from'./logic'
89
import{Wrapper,ScrollWrapper}from'./styles/menu_list'
910

1011
constSortableMenuBar=SortableElement(
@@ -19,30 +20,39 @@ const SortableMenuBar = SortableElement(
1920
)
2021

2122
constMenuList=SortableContainer(
22-
({ items, pin, activeRaw, forceRerender})=>{
23+
({ items, pin, activeRaw, forceRerender, showHomeBarShadow})=>{
2324
consthomeCommunities=R.filter(R.propEq('raw','home'),items)
2425
constsortableCommunities=R.reject(R.propEq('raw','home'),items)
2526

2627
return(
2728
<Wrapper>
2829
{homeCommunities.map(item=>(
29-
<MenuBarkey={item.raw}pin={pin}item={item}activeRaw={activeRaw}/>
30+
<MenuBar
31+
key={item.raw}
32+
pin={pin}
33+
item={item}
34+
activeRaw={activeRaw}
35+
dropShadow={showHomeBarShadow}
36+
/>
3037
))}
3138
<OverlayScrollbarsComponent
3239
options={{scrollbars:{autoHide:'scroll',autoHideDelay:200}}}
3340
className="os-theme-light"
3441
>
3542
<ScrollWrapper>
36-
{sortableCommunities.map((item,index)=>(
37-
<SortableMenuBar
38-
index={index}
39-
key={item.raw}
40-
pin={pin}
41-
item={item}
42-
activeRaw={activeRaw}
43-
forceRerender={forceRerender}
44-
/>
45-
))}
43+
<React.Fragment>
44+
<WaypointonEnter={scrollOnTop}onLeave={scrollOffTop}/>
45+
{sortableCommunities.map((item,index)=>(
46+
<SortableMenuBar
47+
index={index}
48+
key={item.raw}
49+
pin={pin}
50+
item={item}
51+
activeRaw={activeRaw}
52+
forceRerender={forceRerender}
53+
/>
54+
))}
55+
</React.Fragment>
4656
</ScrollWrapper>
4757
</OverlayScrollbarsComponent>
4858
</Wrapper>

‎src/containers/Sidebar/index.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,13 @@ const log = buildLog('C:Sidebar:index')
2020
constSidebarContainer=({ sidebar})=>{
2121
useInit(sidebar)
2222

23-
const{ curCommunity, pin, communitiesData, forceRerender}=sidebar
23+
const{
24+
curCommunity,
25+
pin,
26+
showHomeBarShadow,
27+
communitiesData,
28+
forceRerender,
29+
}=sidebar
2430

2531
// onMouseLeave={logic.leaveSidebar}
2632
// onMouseLeave is not unreliable in chrome: https://github.com/facebook/react/issues/4492
@@ -32,6 +38,7 @@ const SidebarContainer = ({ sidebar }) => {
3238
<MenuList
3339
items={communitiesData}
3440
pin={pin}
41+
showHomeBarShadow={showHomeBarShadow}
3542
forceRerender={forceRerender}
3643
activeRaw={activeRaw}
3744
onSortEnd={onSortMenuEnd}

‎src/containers/Sidebar/logic.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,16 @@ let sub$ = null
2727

2828
exportconstsetPin=()=>store.mark({pin:!store.pin})
2929

30+
exportconstscrollOnTop=()=>{
31+
store.mark({showHomeBarShadow:false})
32+
log('scrollTop ... On')
33+
}
34+
35+
exportconstscrollOffTop=()=>{
36+
store.mark({showHomeBarShadow:true})
37+
log('scrollTop ... Off')
38+
}
39+
3040
exportconstonCommunitySelect=community=>{
3141
// NOTE: check page, if current it's from communities then redirect whole page
3242
const{ mainPath}=store.curRoute

‎src/containers/Sidebar/store.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ const SidebarStore = t
1515
.model('SidebarStore',{
1616
// open: t.optional(t.boolean, false),
1717
pin:t.optional(t.boolean,false),
18+
// add shadow effect when user scroll the communities list
19+
showHomeBarShadow:t.optional(t.boolean,false),
1820

1921
/*
2022
this is a fix for wired svg icon in sidebar

‎src/containers/Sidebar/styles/menu_bar.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ export const ActiveBar = styled.div`
2626
top: 20px;
2727
}
2828
`
29+
// box-shadow: 0px 6px 4px 0px rgba(0,0,0,0.2);
30+
// border-bottom: 1px dashed #316d7b;
2931
exportconstMenuItemBar=styled.div`
3032
cursor: pointer;
3133
opacity: 1;
@@ -37,6 +39,11 @@ export const MenuItemBar = styled.div`
3739
width: 100%;
3840
box-sizing: border-box;
3941
color:${theme('sidebar.menuLink')};
42+
43+
box-shadow:${({ dropShadow})=>
44+
dropShadow ?'0px 6px 4px 0px rgba(0,0,0,0.2)' :'none'};
45+
border-bottom:${({ dropShadow})=>
46+
dropShadow ?'1px dashed #316d7b' :''};
4047
`
4148
exportconstMenuRow=styled.div`
4249
${cs.flex()};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp