[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