feat(Assistant): Add FAB on search page for mobile

cozy · Oct 23, 2024 · 1fe8219 · 1fe8219
1 parent d32a2f0
commit 1fe8219
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 1 deletion.
diff --git a/src/assistant/Search/SearchSubmitFab.jsx b/src/assistant/Search/SearchSubmitFab.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import Fab from 'cozy-ui/transpiled/react/Fab'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PaperplaneIcon from 'cozy-ui/transpiled/react/Icons/Paperplane'
+import { makeStyles } from 'cozy-ui/transpiled/react/styles'
+import { getFlagshipMetadata } from 'cozy-device-helper'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+const useStyles = makeStyles({
+  root: {
+    right: '1rem',
+    bottom: '1rem',
+    position: 'fixed',
+    marginBottom: ({ immersive }) =>
+      immersive ? 'var(--flagship-bottom-height)' : 0
+  }
+})
+
+const SearchSubmitFab = ({ searchValue, onClick }) => {
+  const { t } = useI18n()
+  const styles = useStyles({ immersive: getFlagshipMetadata().immersive })
+
+  return (
+    <Fab
+      aria-label={t('assistant.search.send')}
+      color="primary"
+      size="medium"
+      classes={styles}
+      disabled={!searchValue}
+      onClick={onClick}
+    >
+      <Icon icon={PaperplaneIcon} />
+    </Fab>
+  )
+}
+
+export default SearchSubmitFab
diff --git a/src/assistant/Views/SearchDialog.jsx b/src/assistant/Views/SearchDialog.jsx
@@ -7,6 +7,7 @@ import { useAssistant } from '../AssistantProvider'
 import ResultMenuContent from '../ResultMenu/ResultMenuContent'
 import { useSearch } from '../Search/SearchProvider'
 import SearchBar from '../Search/SearchBar'
+import SearchSubmitFab from '../Search/SearchSubmitFab'
 
 const SearchDialog = () => {
   const { onAssistantExecute } = useAssistant()
@@ -37,7 +38,10 @@ const SearchDialog = () => {
       }}
       title={<SearchBar />}
       content={
-        searchValue !== '' && <ResultMenuContent onClick={handleClick} />
+        <>
+          {searchValue !== '' && <ResultMenuContent onClick={handleClick} />}
+          <SearchSubmitFab searchValue={searchValue} onClick={handleClick} />
+        </>
       }
       onClose={handleClose}
     />

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -2,6 +2,7 @@
   "assistant": {
     "search": {
       "placeholder": "Eine Frage?",
+      "send": "Senden",
       "result": "Den Assistenten fragen"
     },
     "dialog": {

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -2,6 +2,7 @@
   "assistant": {
     "search": {
       "placeholder": "Any question?",
+      "send": "Send",
       "result": "Ask the assistant"
     },
     "dialog": {

diff --git a/src/locales/es.json b/src/locales/es.json
@@ -2,6 +2,7 @@
   "assistant": {
     "search": {
       "placeholder": "¿Tiene alguna pregunta?",
+      "send": "Enviar",
       "result": "Pregunte al asistente"
     },
     "dialog": {

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -2,6 +2,7 @@
   "assistant": {
     "search": {
       "placeholder": "Une question ?",
+      "send": "Envoyer",
       "result": "Demander à l'assistant"
     },
     "dialog": {

diff --git a/src/locales/it.json b/src/locales/it.json
@@ -2,6 +2,7 @@
   "assistant": {
     "search": {
       "placeholder": "Avete una domanda?",
+      "send": "Inviare",
       "result": "Chiedete all'assistente"
     },
     "dialog": {

diff --git a/src/locales/ja.json b/src/locales/ja.json
@@ -2,6 +2,7 @@
   "assistant": {
     "search": {
       "placeholder": "質問はありますか？",
+      "send": "送る",
       "result": "アシスタントに聞く"
     },
     "dialog": {

diff --git a/src/locales/nl_NL.json b/src/locales/nl_NL.json
@@ -2,6 +2,7 @@
   "assistant": {
     "search": {
       "placeholder": "Heb je een vraag?",
+      "send": "Verzenden",
       "result": "Vraag het de assistent"
     },
     "dialog": {