diff options
author | Quentin Gliech <quentingliech@gmail.com> | 2020-01-30 02:05:36 +0100 |
---|---|---|
committer | Quentin Gliech <quentingliech@gmail.com> | 2020-01-30 02:05:36 +0100 |
commit | ead5bad7854bc2342e0998c8a45f62e9aace7887 (patch) | |
tree | f4c38f38ac2d746597ad0b639661cd08cadca6fe /webui/src/list/ListQuery.js | |
parent | 4d97e3a19a96e2361b35a0ccc0be74e0ba887214 (diff) | |
download | git-bug-ead5bad7854bc2342e0998c8a45f62e9aace7887.tar.gz |
webui: implement issue list sort
Diffstat (limited to 'webui/src/list/ListQuery.js')
-rw-r--r-- | webui/src/list/ListQuery.js | 21 |
1 files changed, 14 insertions, 7 deletions
diff --git a/webui/src/list/ListQuery.js b/webui/src/list/ListQuery.js index b6a29702..01113f6c 100644 --- a/webui/src/list/ListQuery.js +++ b/webui/src/list/ListQuery.js @@ -45,11 +45,13 @@ const useStyles = makeStyles(theme => ({ borderWidth: '1px', backgroundColor: fade(theme.palette.primary.main, 0.05), padding: theme.spacing(0, 1), - ':focus': { - // TODO - borderColor: fade(theme.palette.primary.main, 0.4), - backgroundColor: theme.palette.background.paper, - }, + width: ({ searching }) => (searching ? '20rem' : '15rem'), + transition: theme.transitions.create(), + }, + searchFocused: { + borderColor: fade(theme.palette.primary.main, 0.4), + backgroundColor: theme.palette.background.paper, + width: '20rem!important', }, placeholderRow: { padding: theme.spacing(1), @@ -182,7 +184,6 @@ const Error = ({ error }) => { }; function ListQuery() { - const classes = useStyles(); const location = useLocation(); const history = useHistory(); const params = new URLSearchParams(location.search); @@ -190,6 +191,8 @@ function ListQuery() { const [input, setInput] = useState(query); + const classes = useStyles({ searching: !!input }); + // TODO is this the right way to do it? const lastQuery = useRef(); useEffect(() => { @@ -291,9 +294,13 @@ function ListQuery() { <h1>Issues</h1> <form onSubmit={formSubmit}> <InputBase + placeholder="Filter" value={input} onInput={e => setInput(e.target.value)} - className={classes.search} + classes={{ + root: classes.search, + focused: classes.searchFocused, + }} /> <button type="submit" hidden> Search |