Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
whats-open-web
Commits
f3afc915
Commit
f3afc915
authored
Dec 23, 2017
by
Andrew Hrdy
Browse files
Search bar moved to navbar.
parent
53f99deb
Pipeline
#1881
passed with stage
in 1 minute and 42 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/AppBar.js
View file @
f3afc915
...
...
@@ -5,6 +5,7 @@ import Typography from 'material-ui/Typography';
import
Button
from
'
material-ui/Button
'
;
import
IconButton
from
'
material-ui/IconButton
'
;
import
MenuIcon
from
'
material-ui-icons/Menu
'
;
import
SearchBar
from
'
../containers/SearchBar
'
;
import
classNames
from
'
classnames
'
class
CustomAppBar
extends
React
.
Component
{
...
...
@@ -36,6 +37,7 @@ class CustomAppBar extends React.Component {
className={classNames(
'
app
-
bar
-
menu
-
button
'
,
'
app
-
bar
-
text
-
color
'
)}>
<MenuIcon/>
</IconButton>
<SearchBar />
<div
className={classNames(
'
app
-
bar
-
link
-
container
'
, !this.state.isAppBarExpanded &&
'
app
-
bar
-
hide
'
)}>
<Button
...
...
src/containers/Layout.js
View file @
f3afc915
...
...
@@ -46,7 +46,6 @@ class Layout extends React.Component {
}}
/
>
<
div
className
=
{
'
layout-container
'
}
>
<
div
className
=
{
'
layout-main-content
'
}
>
<
SearchBar
suggestions
=
{{}}
/
>
<
div
className
=
{
'
layout-card-container
'
}
>
<
CardContainer
styles
=
{
'
layout-card-container
'
}
searchTerm
=
{
searchTerm
}
facilities
=
{
facilities
}
/
>
...
...
src/containers/SearchBar.js
View file @
f3afc915
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
Paper
from
'
material-ui/Paper
'
;
import
{
withStyles
}
from
'
material-ui/styles
'
;
import
{
compose
}
from
'
redux
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
setSearchTerm
}
from
'
../actions/ui
'
;
import
Search
from
'
material-ui-icons/Search
'
import
Search
Icon
from
'
material-ui-icons/Search
'
import
Input
from
'
material-ui/Input
'
;
import
Paper
from
'
material-ui/Paper
'
;
import
classNames
from
'
classnames
'
;
class
SearchBar
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
);
this
.
state
=
{
isFocused
:
false
,
value
:
''
};
}
handleChange
=
(
e
)
=>
{
this
.
setState
({
value
:
e
.
target
.
value
,
...
...
@@ -16,23 +24,36 @@ class SearchBar extends React.Component {
this
.
props
.
setSearchTerm
(
e
.
target
.
value
)
};
handleFocus
=
()
=>
{
this
.
setState
({
isFocused
:
true
});
};
handleBlur
=
()
=>
{
this
.
setState
({
isFocused
:
false
});
};
render
()
{
return
(
<
Paper
className
=
{
'
search-bar-paper-background
'
}
elevation
=
{
3
}
>
<
Paper
className
=
{
classNames
(
'
search-bar-paper-background
'
,
this
.
state
.
isFocused
&&
'
search-bar-focus
'
)}
>
<
div
className
=
{
'
search-bar-left-search-container
'
}
>
<
SearchIcon
className
=
{
'
search-bar-search-icon
'
}
/
>
<
/div
>
<
Input
placeholder
=
"
names, locations, etc
"
disableUnderline
fullWidth
placeholder
=
"
Names, Locations, etc.
"
autoFocus
className
=
{
'
search-bar-no-suggest-input
'
}
disableUnderline
className
=
{
'
search-bar-input
'
}
onChange
=
{
this
.
handleChange
}
onFocus
=
{
this
.
handleFocus
}
onBlur
=
{
this
.
handleBlur
}
inputProps
=
{{
'
aria-label
'
:
'
Description
'
,
'
aria-label
'
:
'
Search Bar
'
,
}}
/
>
<
div
className
=
{
'
search-bar-right-search-container
'
}
>
<
Search
className
=
{
'
search-bar-search-icon
'
}
/
>
<
/div
>
<
/Paper
>
);
}
...
...
src/styles/containers/searchBar.scss
View file @
f3afc915
.search-bar-paper-background
{
height
:
54px
;
max-width
:
600px
;
width
:
90%
;
height
:
44px
;
width
:
400px
;
display
:
flex
;
margin
:
0
auto
16px
auto
;
border-radius
:
4px
!
important
;
background-color
:
rgba
(
0
,
0
,
0
,
0
.04
)
!
important
;
box-shadow
:
none
!
important
;
&
.search-bar-focus
{
background-color
:
rgba
(
255
,
255
,
255
,
1
)
!
important
;
box-shadow
:
0
1px
1px
rgba
(
0
,
0
,
0
,
0
.24
)
!
important
;
}
}
.search-bar-
righ
t-search-container
{
.search-bar-
lef
t-search-container
{
height
:
100%
;
display
:
flex
;
align-items
:
center
;
...
...
@@ -18,8 +24,9 @@
color
:
rgba
(
0
,
0
,
0
,
0
.54
);
}
.search-bar-
no-suggest-
input
{
.search-bar-input
{
display
:
flex
!
important
;
align-items
:
center
!
important
;
margin-left
:
8px
!
important
;
transition
:
ease-in-out
width
250ms
;
width
:
100%
}
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment