Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 23:12:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

SearchBar component styles and logic improved for accessibility

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-08-22 16:43:50 +03:00
parent 5203f6ef97
commit f68d44352d
2 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/common/NavBar/SearchBar/SearchBar.js
View file

@ -21,19 +21,23 @@ const SearchBar = ({ className }) => {
const query = (active && queryParams.has('q')) ? queryParams.get('q') : ''; const query = (active && queryParams.has('q')) ? queryParams.get('q') : '';
return [active, query]; return [active, query];
}, [locationHash]); }, [locationHash]);
const navigateToSearch = React.useCallback(() => { const searchBarOnClick = React.useCallback(() => {
window.location = '#/search'; if (!active) {
}, []); window.location = '#/search';
}
}, [active]);
const queryInputOnSubmit = React.useCallback(() => { const queryInputOnSubmit = React.useCallback(() => {
window.location.replace(`#/search?q=${searchInputRef.current.value}`); if (active) {
}, []); window.location.replace(`#/search?q=${searchInputRef.current.value}`);
}
}, [active]);
React.useEffect(() => { React.useEffect(() => {
if (active && focusable) { if (active && focusable) {
searchInputRef.current.focus(); searchInputRef.current.focus();
} }
}, [active, focusable]); }, [active, focusable]);
return ( return (
<label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={!active ? navigateToSearch : null}> <label className={classnames(className, styles['search-bar-container'], { 'active': active })} onClick={searchBarOnClick}>
{ {
active ? active ?
<TextInput <TextInput
@ -55,8 +59,8 @@ const SearchBar = ({ className }) => {
<div className={styles['placeholder']}>Search</div> <div className={styles['placeholder']}>Search</div>
</div> </div>
} }
<Button className={styles['submit-button']} tabIndex={-1} onClick={active ? queryInputOnSubmit : null}> <Button className={styles['submit-button']} tabIndex={-1} onClick={queryInputOnSubmit}>
<Icon className={styles['submit-icon']} icon={'ic_search'} /> <Icon className={styles['icon']} icon={'ic_search'} />
</Button> </Button>
</label> </label>
); );

8
src/common/NavBar/SearchBar/styles.less
View file

@ -30,13 +30,10 @@
cursor: text; cursor: text;
&::placeholder, .placeholder { &::placeholder, .placeholder {
max-height: 1.2em;
opacity: 1; opacity: 1;
color: var(--color-surfacelight); color: var(--color-surfacelight);
} }
.placeholder {
max-height: 1.2em;
}
} }
.submit-button { .submit-button {
@ -48,9 +45,8 @@
width: 3.2rem; width: 3.2rem;
height: 3.2rem; height: 3.2rem;
background-color: var(--color-secondarylight60); background-color: var(--color-secondarylight60);
cursor: pointer;
.submit-icon { .icon {
flex: none; flex: none;
width: 1.1rem; width: 1.1rem;
height: 1.1rem; height: 1.1rem;