Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-16 09:16:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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') : '';
return [active, query];
}, [locationHash]);
const navigateToSearch = React.useCallback(() => {
window.location = '#/search';
}, []);
const searchBarOnClick = React.useCallback(() => {
if (!active) {
window.location = '#/search';
}
}, [active]);
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(() => {
if (active && focusable) {
searchInputRef.current.focus();
}
}, [active, focusable]);
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 ?
<TextInput
@ -55,8 +59,8 @@ const SearchBar = ({ className }) => {
<div className={styles['placeholder']}>Search</div>
</div>
}
<Button className={styles['submit-button']} tabIndex={-1} onClick={active ? queryInputOnSubmit : null}>
<Icon className={styles['submit-icon']} icon={'ic_search'} />
<Button className={styles['submit-button']} tabIndex={-1} onClick={queryInputOnSubmit}>
<Icon className={styles['icon']} icon={'ic_search'} />
</Button>
</label>
);

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

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