[ARVADOS-WORKBENCH2] created: 1.2.0-542-g83e8293
Git user
git at public.curoverse.com
Thu Oct 4 09:15:16 EDT 2018
at 83e82935bee3fd0047c6e647c1256c4f3a9870aa (commit)
commit 83e82935bee3fd0047c6e647c1256c4f3a9870aa
Author: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
Date: Thu Oct 4 15:15:01 2018 +0200
search-basic-VIEW
Feature #14275
Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk at contractors.roche.com>
diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx
index 366d705..5021c7c 100644
--- a/src/components/search-bar/search-bar.tsx
+++ b/src/components/search-bar/search-bar.tsx
@@ -10,22 +10,45 @@ import {
withStyles,
WithStyles,
Tooltip,
- InputAdornment, Input
+ InputAdornment, Input,
+ List, ListItem, ListItemText
} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
-type CssRules = 'container' | 'input';
+type CssRules = 'container' | 'input' | 'advanced' | 'searchQueryList' | 'list' | 'searchView' | 'searchBar';
const styles: StyleRulesCallback<CssRules> = theme => {
return {
container: {
position: 'relative',
- width: '100%'
+ width: '100%',
+ borderRadius: '0px'
},
input: {
border: 'none',
- borderRadius: theme.spacing.unit / 4,
- padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px`
+ padding: `0px ${theme.spacing.unit}px`
+ },
+ advanced: {
+ display: 'flex',
+ justifyContent: 'flex-end',
+ paddingRight: theme.spacing.unit * 2,
+ paddingBottom: theme.spacing.unit,
+ fontSize: '14px'
+ },
+ searchQueryList: {
+ padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
+ background: '#f2f2f2',
+ fontSize: '14px'
+ },
+ list: {
+ padding: '0px'
+ },
+ searchView: {
+ color: '#000',
+ zIndex: 1000
+ },
+ searchBar: {
+ height: '30px'
}
};
};
@@ -43,6 +66,7 @@ type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<Css
interface SearchBarState {
value: string;
+ isSearchViewOpen: boolean;
}
export const DEFAULT_SEARCH_DEBOUNCE = 1000;
@@ -50,15 +74,16 @@ export const DEFAULT_SEARCH_DEBOUNCE = 1000;
export const SearchBar = withStyles(styles)(
class extends React.Component<SearchBarProps> {
state: SearchBarState = {
- value: ""
+ value: "",
+ isSearchViewOpen: false
};
timeout: number;
render() {
const { classes } = this.props;
- return <Paper className={classes.container}>
- <form onSubmit={this.handleSubmit}>
+ return <Paper className={classes.container} onBlur={this.closeSearchView}>
+ <form onSubmit={this.handleSubmit} className={classes.searchBar}>
<Input
className={classes.input}
onChange={this.handleChange}
@@ -66,6 +91,7 @@ export const SearchBar = withStyles(styles)(
value={this.state.value}
fullWidth={true}
disableUnderline={true}
+ onFocus={this.openSearchView}
endAdornment={
<InputAdornment position="end">
<Tooltip title='Search'>
@@ -74,7 +100,21 @@ export const SearchBar = withStyles(styles)(
</IconButton>
</Tooltip>
</InputAdornment>
- }/>
+ } />
+ {this.state.isSearchViewOpen
+ ? <Paper className={classes.searchView}>
+ <div className={classes.searchQueryList}>Saved search queries</div>
+ <List component="nav" className={classes.list}>
+ {this.renderListItem('Trash')}
+ {this.renderListItem('Spam')}
+ </List>
+ <div className={classes.searchQueryList}>Recent search queries</div>
+ <List component="nav" className={classes.list}>
+ {this.renderListItem('Trash')}
+ {this.renderListItem('Spam')}
+ </List>
+ <div className={classes.advanced}>Advanced</div>
+ </Paper> : null}
</form>
</Paper>;
}
@@ -93,6 +133,19 @@ export const SearchBar = withStyles(styles)(
clearTimeout(this.timeout);
}
+ closeSearchView = () =>
+ this.setState({ isSearchViewOpen: false })
+
+
+ openSearchView = () =>
+ this.setState({ isSearchViewOpen: true })
+
+
+ renderListItem = (text: string) =>
+ <ListItem button>
+ <ListItemText secondary={text} />
+ </ListItem>
+
handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
clearTimeout(this.timeout);
diff --git a/src/views-components/dialog-forms/file-selection-dialog.ts b/src/views-components/dialog-forms/file-selection-dialog.ts
index 4a3f2af..7c883cb 100644
--- a/src/views-components/dialog-forms/file-selection-dialog.ts
+++ b/src/views-components/dialog-forms/file-selection-dialog.ts
@@ -14,7 +14,6 @@ export const FileSelectionDialog = compose(
reduxForm({
form: FILE_SELECTION,
onSubmit: (data, dispatch) => {
- console.log(data);
dispatch(dialogActions.CLOSE_DIALOG({ id: FILE_SELECTION }));
return data;
}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list