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.

Commit07e817b

Browse files
committed
feat(sidebar): replace exploreAll with search function in header
1 parentbf8dfae commit07e817b

File tree

6 files changed

+91
-30
lines changed

6 files changed

+91
-30
lines changed

‎src/containers/Sidebar/Header.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
importReactfrom'react'
2-
import{Button}from'antd'
3-
2+
// eslint-disable-next-line import/named
43
import{ICON_CMD,ICON_BASE}from'@config'
54

65
importPinButtonfrom'./PinButton'
@@ -10,30 +9,37 @@ import {
109
InnerWrapper,
1110
HeaderFuncs,
1211
SiteLogoWrapper,
13-
ExploreWrapper,
14-
ExploreContent,
15-
ExploreIcon,
16-
ExploreText,
12+
SearchWrapper,
13+
SearchContent,
14+
SearchInput,
15+
SearchIcon,
1716
SiteLogo,
1817
}from'./styles/header'
18+
import{
19+
searchOnBlur,
20+
searchOnFocus,
21+
searchCommunityValueOnChange,
22+
}from'./logic'
1923

20-
constHeader=({ pin})=>(
24+
constHeader=({ pin, searchCommunityValue})=>(
2125
<Wrapperpin={pin}>
2226
<InnerWrapper>
2327
<HeaderFuncs>
2428
<SiteLogoWrapperpin={pin}>
2529
<SiteLogosrc={`${ICON_BASE}/sidebar/everyday.svg`}/>
2630
</SiteLogoWrapper>
27-
<ExploreWrapperpin={pin}>
28-
<ahref="/communities"rel="noopener noreferrer"target="_blank">
29-
<Buttonsize="small"type="primary"ghost>
30-
<ExploreContent>
31-
<ExploreIconsrc={`${ICON_CMD}/telescope.svg`}/>
32-
<ExploreText>Explore All</ExploreText>
33-
</ExploreContent>
34-
</Button>
35-
</a>
36-
</ExploreWrapper>
31+
<SearchWrapperpin={pin}>
32+
<SearchContent>
33+
<SearchIconsrc={`${ICON_CMD}/search.svg`}/>
34+
<SearchInput
35+
value={searchCommunityValue}
36+
onChange={e=>searchCommunityValueOnChange(e)}
37+
placeholder="订阅的社区"
38+
onBlur={searchOnBlur}
39+
onFocus={searchOnFocus}
40+
/>
41+
</SearchContent>
42+
</SearchWrapper>
3743
</HeaderFuncs>
3844
<PinButtonpin={pin}/>
3945
</InnerWrapper>

‎src/containers/Sidebar/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const SidebarContainer = ({ sidebar }) => {
2323
const{
2424
curCommunity,
2525
pin,
26+
searchCommunityValue,
2627
showHomeBarShadow,
2728
communitiesData,
2829
forceRerender,
@@ -34,7 +35,7 @@ const SidebarContainer = ({ sidebar }) => {
3435

3536
return(
3637
<Wrapperpin={pin}testid="sidebar">
37-
<Headerpin={pin}/>
38+
<Headerpin={pin}searchCommunityValue={searchCommunityValue}/>
3839
<MenuList
3940
items={communitiesData}
4041
pin={pin}

‎src/containers/Sidebar/logic.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,17 @@ export const scrollOffTop = () => {
3535
if(store)store.mark({showHomeBarShadow:true})
3636
}
3737

38+
exportconstsearchOnBlur=()=>{
39+
log('searchOnBlur')
40+
}
41+
42+
exportconstsearchOnFocus=()=>{
43+
store.mark({pin:true})
44+
}
45+
46+
exportconstsearchCommunityValueOnChange=e=>
47+
store.mark({searchCommunityValue:e.target.value})
48+
3849
exportconstonCommunitySelect=community=>{
3950
// NOTE: check page, if current it's from communities then redirect whole page
4051
const{ mainPath}=store.curRoute

‎src/containers/Sidebar/store.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55

66
import{typesast,getParent}from'mobx-state-tree'
77
importRfrom'ramda'
8-
import{buildLog,markStates,stripMobx,sortByIndex}from'@utils'
9-
/* import MenuItem from './MenuItemStore' */
8+
import{buildLog,markStates,stripMobx,sortByIndex,notEmpty}from'@utils'
109

1110
/* eslint-disable-next-line */
1211
constlog=buildLog('S:SidebarStore')
@@ -17,6 +16,7 @@ const SidebarStore = t
1716
pin:t.optional(t.boolean,false),
1817
// add shadow effect when user scroll the communities list
1918
showHomeBarShadow:t.optional(t.boolean,false),
19+
searchCommunityValue:t.optional(t.string,''),
2020

2121
/*
2222
this is a fix for wired svg icon in sidebar
@@ -56,7 +56,16 @@ const SidebarStore = t
5656
returnself.root.langMessages
5757
},
5858
getcommunitiesData(){
59+
const{ searchCommunityValue}=self
5960
const{ subscribedCommunities}=self.root.account
61+
62+
if(notEmpty(R.trim(searchCommunityValue))){
63+
returnR.filter(
64+
item=>R.contains(searchCommunityValue,R.prop('title',item)),
65+
subscribedCommunities.entries
66+
)
67+
}
68+
6069
returnsubscribedCommunities
6170
?sortByIndex(subscribedCommunities.entries)
6271
:[]

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

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
importstyledfrom'styled-components'
2+
import{Input}from'antd'
23

34
importImgfrom'@components/Img'
45
import{theme,cs}from'@utils'
@@ -16,6 +17,7 @@ export const InnerWrapper = styled.div`
1617
`
1718
exportconstHeaderFuncs=styled.div`
1819
${cs.flexGrow()};
20+
margin-top: -5px;
1921
`
2022
exportconstPinIconWrapper=styled.div`
2123
&:hover {
@@ -58,7 +60,7 @@ export const PinIcon = styled(Img)`
5860
opacity: 1;
5961
}
6062
`
61-
exportconstExploreWrapper=styled.div`
63+
exportconstSearchWrapper=styled.div`
6264
padding-left: 16px;
6365
visibility:${({ pin})=>(pin ?'visible' :'hidden')};
6466
opacity:${({ pin})=>(pin ?1 :0)};
@@ -68,17 +70,46 @@ export const ExploreWrapper = styled.div`
6870
opacity: 1;
6971
}
7072
`
71-
exportconstExploreContent=styled.div`
72-
${cs.flex('align-center')};
73-
`
74-
exportconstExploreText=styled.div`
75-
letter-spacing: 1.5px;
76-
${ExploreContent}:hover & {
77-
letter-spacing: 3px;
73+
exportconstSearchInput=styled(Input)`
74+
border: 1px solid;
75+
border-color:${theme('sidebar.bg')};
76+
border-bottom-color:${theme('sidebar.searchInputBottom')};
77+
height: 28px;
78+
margin-top: -4px;
79+
border-radius: 0px;
80+
margin-left: 5px;
81+
line-height: 20px;
82+
83+
width: 50%;
84+
font-size: 1rem;
85+
background:${theme('sidebar.bg')};
86+
padding-left: 5px;
87+
color:${theme('sidebar.menuLink')};
88+
text-align: left;
89+
90+
::placeholder {
91+
color:${theme('sidebar.searchInputHolder')};
7892
}
79-
transition: letter-spacing 0.3s;
93+
94+
&:hover {
95+
color:${theme('sidebar.menuLink')};
96+
border-color:${theme('sidebar.bg')};
97+
border-bottom: 1px solid;
98+
border-bottom-color:${theme('sidebar.searchInputBottom')};
99+
}
100+
&:focus {
101+
border-color:${theme('sidebar.bg')};
102+
box-shadow: none;
103+
border-bottom: 1px solid;
104+
border-bottom-color:${theme('sidebar.searchInputBottomActive')};
105+
color:${theme('sidebar.menuLink')};
106+
text-align: left;
107+
}
108+
`
109+
exportconstSearchContent=styled.div`
110+
${cs.flex('align-center')};
80111
`
81-
exportconstExploreIcon=styled(Img)`
112+
exportconstSearchIcon=styled(Img)`
82113
fill:${theme('button.primary')};
83114
width: 16px;
84115
height: 16px;

‎utils/themes/skins/solarized_dark.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,9 @@ const solarizedDark = {
113113
borderColor:'#14363E',
114114
topShadow:'-2px 1px 6px 0px rgb(1,21,25)',
115115
topShadowBorderBottom:'1px solid #06495a',
116+
searchInputBottom:'#154964',
117+
searchInputBottomActive:'#2e78a4',
118+
searchInputHolder:'#17414E',
116119
},
117120
preview:{
118121
title:primaryColor,

0 commit comments

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