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.

Commit283d7a3

Browse files
committed
chore: merge branch 'sidebar/scroll-shadow' into dev
2 parents9a2f2df +f71b417 commit283d7a3

File tree

14 files changed

+68
-16
lines changed

14 files changed

+68
-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 ?theme('sidebar.topShadow') :'none'};
45+
border-bottom:${({ dropShadow})=>
46+
dropShadow ?theme('sidebar.topShadowBorderBottom') :''};
4047
`
4148
exportconstMenuRow=styled.div`
4249
${cs.flex()};

‎utils/themes/skins/cyan.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,8 @@ const cyan = {
109109
pinActive:primaryColor,
110110
menuLink:'#D9E6E5',
111111
borderColor:'#14363E',
112+
topShadow:'0px 6px 4px 0px rgba(0,0,0,0.2)',
113+
topShadowBorderBottom:'1px dashed #316d7b',
112114
},
113115
preview:{
114116
title:'#83a2a5',

‎utils/themes/skins/github.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,8 @@ const github = {
110110
pinActive:primaryColor,
111111
menuLink:'#D9E6E5',
112112
borderColor:'#14363E',
113+
topShadow:'0px 6px 4px 0px rgba(0,0,0,0.2)',
114+
topShadowBorderBottom:'1px dashed #3d5a51',
113115
},
114116
preview:{
115117
title:threadTitle,

‎utils/themes/skins/green.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,8 @@ const green = {
111111
pinActive:contentBg,
112112
menuLink:'#A6BBAF',
113113
borderColor:lighten(0.05,sidebarBg),
114+
topShadow:'-2px 2px 2px 0px rgb(39, 53, 45)',
115+
topShadowBorderBottom:'1px solid #576957',
114116
},
115117
preview:{
116118
title:bannerTitle,

‎utils/themes/skins/iron_green.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,8 @@ const iconGreen = {
109109
pinActive:'#54848B',
110110
menuLink:'#F0F9F8',
111111
borderColor:'#14363E',
112+
topShadow:'-1px 6px 2px 0px rgb(9, 171, 165)',
113+
topShadowBorderBottom:'1px solid #668d90',
112114
},
113115
preview:{
114116
title:'#C2CDD0',

0 commit comments

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