feat: add help buttons to location components

geops · Apr 28, 2020 · d1225dc · d1225dc
1 parent 556a209
commit d1225dc
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 21 deletions.
diff --git a/src/components/HelpModal.js b/src/components/HelpModal.js
@@ -6,25 +6,27 @@ import { ReactComponent as InfoIcon } from '../icons/info.svg';
 
 import styles from './HelpModal.module.css';
 
-function HelpModal({ children, header }) {
+function HelpModal({ children, color, header }) {
   return (
     <Modal
       actions={[{ key: 'done', content: 'Ok' }]}
       content={
         <Modal.Content className={styles.text}>{children}</Modal.Content>
       }
       header={header || undefined}
-      trigger={<InfoIcon fill="white" className={styles.icon} />}
+      trigger={<InfoIcon fill={color} className={styles.icon} />}
     />
   );
 }
 
 HelpModal.propTypes = {
   children: PropTypes.node.isRequired,
+  color: PropTypes.string,
   header: PropTypes.string,
 };
 
 HelpModal.defaultProps = {
+  color: 'white',
   header: '',
 };
 

diff --git a/src/components/LocationForm.js b/src/components/LocationForm.js
@@ -2,13 +2,14 @@ import intersection from 'lodash.intersection';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { Accordion, Form, Label, Segment } from 'semantic-ui-react';
+import { Accordion, Form, Header, Label, Segment } from 'semantic-ui-react';
 // eslint-disable-next-line import/no-unresolved
 import { info } from 'lib/src';
 
 import Button from './Button';
 import Checkbox from './Checkbox';
 import Dropdown from './Dropdown';
+import HelpModal from './HelpModal';
 import Input from './Input';
 import styles from './LocationForm.module.css';
 import { setFormLocation } from '../store/actions';
@@ -422,6 +423,12 @@ function LocationForm() {
           value={location.silverFirArea}
         />
       )}
+      <div className={styles.help}>
+        <HelpModal color="#006268" header={t('location.header')}>
+          {t('location.help')}
+        </HelpModal>
+      </div>
+      <Header>{t('location.header')}</Header>
       <Accordion fluid panels={panels} styled />
       {intersection(Object.keys(formLocation), filterFields).length > 0 && (
         <Button

diff --git a/src/components/LocationForm.module.css b/src/components/LocationForm.module.css
@@ -2,6 +2,12 @@
   margin: 0 20px;
 }
 
+.help {
+  position: absolute;
+  right: 10px;
+  margin-top: 15px;
+}
+
 .resetButton:global(.ui.button) {
   margin-top: 1em;
 }
diff --git a/src/components/LocationResult.js b/src/components/LocationResult.js
@@ -9,6 +9,7 @@ import { info } from 'lib/src';
 import Dropdown from './Dropdown';
 import Ecogram from './Ecogram';
 import ForestTypeButton from './ForestTypeButton';
+import HelpModal from './HelpModal';
 import { setFormLocation } from '../store/actions';
 import styles from './LocationResult.module.css';
 
@@ -37,28 +38,44 @@ function LocationResult() {
 
   return forestTypes ? (
     <Form className={styles.form}>
-      {hasMainGroup && <Header>{t('forestType.group.main')}</Header>}
+      {hasMainGroup && (
+        <>
+          <Header>{t('forestType.group.main')}</Header>
+          <div className={styles.mainHelp}>
+            <HelpModal color="#006268" header={t('forestType.group.main')}>
+              {t('location.mainResultHelp')}
+            </HelpModal>
+          </div>
+        </>
+      )}
       {hasMainGroup && ecogram && (
         <Ecogram data={ecogram} selectForestType={selectForestType} />
       )}
       {hasMainGroup && !ecogram && <Message>{t('location.noEcogram')}</Message>}
       {hasOtherGroup && (
-        <Dropdown
-          search
-          label={t('forestType.group.other')}
-          options={forestTypes.other.map((key) => ({
-            key,
-            content: (
-              <>
-                <ForestTypeButton code={key} compact />
-                {key} - {info('forestType', key)[i18n.language]}
-              </>
-            ),
-            text: `${key} - ${info('forestType', key)[i18n.language]}`,
-            value: key,
-          }))}
-          value={formLocation.forestType}
-        />
+        <>
+          <div className={styles.otherHelp}>
+            <HelpModal color="#006268" header={t('forestType.group.other')}>
+              {t('location.otherResultHelp')}
+            </HelpModal>
+          </div>
+          <Dropdown
+            search
+            label={t('forestType.group.other')}
+            options={forestTypes.other.map((key) => ({
+              key,
+              content: (
+                <>
+                  <ForestTypeButton code={key} compact />
+                  {key} - {info('forestType', key)[i18n.language]}
+                </>
+              ),
+              text: `${key} - ${info('forestType', key)[i18n.language]}`,
+              value: key,
+            }))}
+            value={formLocation.forestType}
+          />
+        </>
       )}
     </Form>
   ) : null;

diff --git a/src/components/LocationResult.module.css b/src/components/LocationResult.module.css
@@ -3,3 +3,13 @@
   padding: 1em;
   box-shadow: 0 -20px 20px -20px #777;
 }
+
+.mainHelp {
+  position: absolute;
+  right: 15px;
+  margin-top: -35px;
+}
+.otherHelp {
+  position: absolute;
+  right: 15px;
+}
diff --git a/src/i18n/resources/de/translation.json b/src/i18n/resources/de/translation.json
@@ -38,7 +38,11 @@
     "impressum": "Die Tree App ist ein Umsetzungsprodukt des Forschungsprogramms „Wald und Klimawandel“ von BAFU und WSL."
   },
   "location": {
-    "reset": "Filter zurücksetzen",
+    "header": "Filterkriterien",
+    "help": "TODO",
+    "mainResultHelp": "TODO",
+    "otherResultHelp": "TODO",
+    "reset": "Filterkriterien zurücksetzen",
     "noEcogram": "Kein Ökogram gefunden."
   },
   "map": {