Transform search bar

src/components/CanvasAnnotations.js

@@ -8,10 +8,13 @@ import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 import SearchIcon from '@material-ui/icons/SearchSharp';
 import InputBase from '@material-ui/core/InputBase';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import TextField from '@material-ui/core/TextField';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import { ScrollTo } from './ScrollTo';
 import AnnotationManifestsAccordion from '../containers/AnnotationManifestsAccordion';
 import { filterAnnotation } from '../helper/utils';
+import { MiradorMenuButton } from './MiradorMenuButton';
 
 /**
  * CanvasAnnotations ~
@@ -77,31 +80,29 @@ export class CanvasAnnotations extends Component {
 
     let { annotations } = this.props;
 
+    if (annotations.length === 0) return null;
+
     const { inputSearch } = this.state;
 
     if (inputSearch != undefined && inputSearch !== '') {
       annotations = filterAnnotation(annotations, inputSearch);
     }
 
-
     return (
       <>
-        <Typography className={classes.sectionHeading} variant="overline">
-          {t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })}
-        </Typography>
-
-        <div className={classes.search}>
-          <div className={classes.searchIcon}>
+        <div className={classes.form}>
+          <TextField
+            label={t('searchPlaceholderAnnotation')}
+            onChange={this.handleAnnotationSearch}
+            InputProps={{
+              endAdornment: (
+                <div className={classes.endAdornment}>
+                  <MiradorMenuButton aria-label={t('searchSubmitAria')} type="submit">
                     <SearchIcon />
+                  </MiradorMenuButton>
                 </div>
-          <InputBase
-            placeholder="Search…"
-            classes={{
-              input: classes.inputInput,
-              root: classes.inputRoot,
+              ),
             }}
-            inputProps={{ 'aria-label': 'search' }}
-            onChange={this.handleAnnotationSearch}
           />
         </div>
         <MenuList autoFocusItem variant="selectedMenu">

src/containers/CanvasAnnotations.js

@@ -69,6 +69,9 @@ const styles = theme => ({
     marginRight: theme.spacing(0.5),
     marginTop: theme.spacing(1),
   },
+  form: {
+    padding: theme.spacing(0, 1, 0, 1),
+  },
   grow: {
     flexGrow: 1,
   },

src/locales/en/translation.json

@@ -125,6 +125,7 @@
     "searchResultsRemaining": "{{numLeft}} remaining",
     "searchSubmitAria": "Submit search",
     "searchTitle": "Search",
+    "searchPlaceholderAnnotation" : "Search...",
     "selectWorkspaceMenu": "Select workspace type",
     "showingNumAnnotations_one": "Showing {{number}} annotation",
     "showingNumAnnotations_other": "Showing {{number}} annotations",

src/locales/fr/translation.json

@@ -117,6 +117,7 @@
     "searchInputLabel": "Chercher un mot",
     "searchNextResult": "Résultat suivant",
     "searchNoResults": "Aucun résultat trouvé",
+    "searchPlaceholderAnnotation" : "Rechercher...",
     "searchPreviousResult": "Résultat précédent",
     "searchSubmitAria": "Lancer la recherche",
     "searchTitle": "Rechercher",