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.

Commitbed8a4a

Browse files
committed
refactor(sidebar-footer): badic scroll shadow ux
1 parentd4edf47 commitbed8a4a

File tree

8 files changed

+28
-20
lines changed

8 files changed

+28
-20
lines changed

‎src/containers/Sidebar/Footer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { ICON_CMD } from '@config'
44

55
import{Wrapper,InnerWrapper,SettingIcon}from'./styles/footer'
66

7-
constFooter=({ pin})=>(
8-
<Wrapperpin={pin}>
7+
constFooter=({ pin, showFooterBarShadow})=>(
8+
<Wrapperpin={pin}dropShadow={showFooterBarShadow}>
99
<InnerWrapperpin={pin}>
1010
<SettingIconsrc={`${ICON_CMD}/setting.svg`}/>
1111
</InnerWrapper>

‎src/containers/Sidebar/Header.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,7 @@ import {
1515
SearchIcon,
1616
SiteLogo,
1717
}from'./styles/header'
18-
import{
19-
searchOnBlur,
20-
searchOnFocus,
21-
searchCommunityValueOnChange,
22-
}from'./logic'
18+
import{searchOnFocus,searchCommunityValueOnChange}from'./logic'
2319

2420
constHeader=({ pin, searchCommunityValue})=>(
2521
<Wrapperpin={pin}>
@@ -35,7 +31,6 @@ const Header = ({ pin, searchCommunityValue }) => (
3531
value={searchCommunityValue}
3632
onChange={e=>searchCommunityValueOnChange(e)}
3733
placeholder="订阅的社区"
38-
onBlur={searchOnBlur}
3934
onFocus={searchOnFocus}
4035
/>
4136
</SearchContent>

‎src/containers/Sidebar/MenuList.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { SortableContainer, SortableElement } from 'react-sortable-hoc'
55
import{OverlayScrollbarsComponent}from'overlayscrollbars-react'
66

77
importMenuBarfrom'./MenuBar'
8-
import{scrollOnTop,scrollOffTop}from'./logic'
8+
import{anchorTop,anchorOffTop,anchorBottom,anchorOffBottom}from'./logic'
99
import{Wrapper,ScrollWrapper}from'./styles/menu_list'
1010

1111
constSortableMenuBar=SortableElement(
@@ -41,7 +41,7 @@ const MenuList = SortableContainer(
4141
>
4242
<ScrollWrapper>
4343
<React.Fragment>
44-
<WaypointonEnter={scrollOnTop}onLeave={scrollOffTop}/>
44+
<WaypointonEnter={anchorTop}onLeave={anchorOffTop}/>
4545
{sortableCommunities.map((item,index)=>(
4646
<SortableMenuBar
4747
index={index}
@@ -52,6 +52,7 @@ const MenuList = SortableContainer(
5252
forceRerender={forceRerender}
5353
/>
5454
))}
55+
<WaypointonEnter={anchorBottom}onLeave={anchorOffBottom}/>
5556
</React.Fragment>
5657
</ScrollWrapper>
5758
</OverlayScrollbarsComponent>

‎src/containers/Sidebar/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const SidebarContainer = ({ sidebar }) => {
2626
pin,
2727
searchCommunityValue,
2828
showHomeBarShadow,
29+
showFooterBarShadow,
2930
communitiesData,
3031
forceRerender,
3132
}=sidebar
@@ -46,7 +47,7 @@ const SidebarContainer = ({ sidebar }) => {
4647
onSortEnd={onSortMenuEnd}
4748
distance={5}
4849
/>
49-
<Footerpin={pin}/>
50+
<Footerpin={pin}showFooterBarShadow={showFooterBarShadow}/>
5051
</Wrapper>
5152
)
5253
}

‎src/containers/Sidebar/logic.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,22 +27,24 @@ let sub$ = null
2727

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

30-
exportconstscrollOnTop=()=>{
30+
exportconstanchorTop=()=>{
3131
if(store)store.mark({showHomeBarShadow:false})
3232
}
3333

34-
exportconstscrollOffTop=()=>{
34+
exportconstanchorOffTop=()=>{
3535
if(store)store.mark({showHomeBarShadow:true})
3636
}
3737

38-
exportconstsearchOnBlur=()=>{
39-
log('searchOnBlur')
38+
exportconstanchorBottom=()=>{
39+
if(store)store.mark({showFooterBarShadow:false})
4040
}
4141

42-
exportconstsearchOnFocus=()=>{
43-
store.mark({pin:true})
42+
exportconstanchorOffBottom=()=>{
43+
if(store)store.mark({showFooterBarShadow:true})
4444
}
4545

46+
exportconstsearchOnFocus=()=>store.mark({pin:true})
47+
4648
exportconstsearchCommunityValueOnChange=e=>
4749
store.mark({searchCommunityValue:e.target.value})
4850

‎src/containers/Sidebar/store.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ const SidebarStore = t
1414
.model('SidebarStore',{
1515
// open: t.optional(t.boolean, false),
1616
pin:t.optional(t.boolean,false),
17-
// add shadow effect when user scroll the communities list
17+
// add shadow effectto homebarwhen user scroll the communities list
1818
showHomeBarShadow:t.optional(t.boolean,false),
19+
// add shadow effect to footer when user scroll the communities list
20+
showFooterBarShadow:t.optional(t.boolean,false),
1921
searchCommunityValue:t.optional(t.string,''),
2022

2123
/*

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,12 @@ export const Wrapper = styled.div`
77
// margin-bottom:${({ pin})=>(pin ?'0' :'20px')};
88
margin-top: -20px;
99
background:${theme('sidebar.bg')};
10-
box-shadow: -1px -4px 4px 0px rgba(0,0,0,0.2);
11-
border-top: 1px dashed #316d7b;
10+
11+
box-shadow:${({ dropShadow})=>
12+
dropShadow ?theme('sidebar.bottomShadow') :'none'};
13+
border-bottom:${({ dropShadow})=>
14+
dropShadow ?theme('sidebar.bottomShadowBorderBottom') :''};
15+
1216
z-index: 1;
1317
`
1418
exportconstInnerWrapper=styled.div`

‎utils/themes/skins/cyan.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@ const cyan = {
111111
borderColor:'#14363E',
112112
topShadow:'0px 6px 4px 0px rgba(0,0,0,0.2)',
113113
topShadowBorderBottom:'1px dashed #316d7b',
114+
bottomShadow:'-1px -4px 4px 0px rgba(0,0,0,0.2)',
115+
bottomShadowBorderBottom:'1px dashed #316d7b',
116+
114117
searchInputBottom:'#2b6775',
115118
searchInputBottomActive:'#61ABB2',
116119
searchInputHolder:'#3a7786',

0 commit comments

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