feat(menuLinks): add about page and links to menu (#439)

* feat(menuLinks): add about page and links to menu * feat(menuLinks): add translations to about page * feat(menuLinks): add links * feat(menuLinks): add download links * style(menuLinks): sort imports * refactor(links): move urls to config file * refactor(menu): hide menu items when about project page is open
ubilabs · Jul 29, 2020 · 33cd0b8 · 33cd0b8
1 parent 7905ffa
commit 33cd0b8
Show file tree

Hide file tree

Showing 11 changed files with 227 additions and 61 deletions.
diff --git a/i18n/de.json b/i18n/de.json
@@ -37,6 +37,7 @@
   "dataInfo": "Dateninformation",
   "storiesSelected": "{numberSelected, number} {numberSelected, plural, one {Geschichte} other {Geschichten}} ausgewählt",
   "resetFilters": "Filter löschen",
+  "projectDescription": "# Über das Projekt\n\nClimate from Space Anwendung für ESAs CCI+ Programm.\n\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis natus praesentium reprehenderit veritatis mollitia quisquam distinctio nihil voluptate rerum ut placeat sint tenetur, tempora facere, velit in sed. Ex, sapiente.",
   "tags.nature": "Natur",
   "tags.biomass": "Biomasse",
   "tags.university": "Universität",

diff --git a/i18n/en.json b/i18n/en.json
@@ -37,6 +37,7 @@
   "dataInfo": "Data Information",
   "storiesSelected": "{numberSelected, number} {numberSelected, plural, one {Story} other {Stories}} selected",
   "resetFilters": "Reset Filters",
+  "projectDescription": "# About the project\n\nClimate from Space application for ESAs CCI+ program.\n\nLorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis natus praesentium reprehenderit veritatis mollitia quisquam distinctio nihil voluptate rerum ut placeat sint tenetur, tempora facere, velit in sed. Ex, sapiente.",
   "tags.nature": "Nature",
   "tags.biomass": "Biomass",
   "tags.university": "University",

diff --git a/i18n/fr.json b/i18n/fr.json
@@ -37,6 +37,7 @@
   "dataInfo": "Data Information",
   "storiesSelected": "{numberSelected, number} {numberSelected, plural, one {Story} other {Stories}} selected",
   "resetFilters": "Reset Filters",
+  "projectDescription": "Climate from Space application for ESAs CCI+ program.",
   "tags.nature": "Nature",
   "tags.biomass": "Biomass",
   "tags.university": "University",

diff --git a/src/scripts/components/about-project/about-project.styl b/src/scripts/components/about-project/about-project.styl
@@ -0,0 +1,14 @@
+@require '../../../variables.styl'
+
+.aboutProject
+  display: flex
+  flex-direction: column
+  justify-content: center
+  width: 50%
+  color: $textDefault
+  font-family: NotesEsa
+
+  h1
+    display: flex
+    justify-content: space-between
+    color: $textDefault
diff --git a/src/scripts/components/about-project/about-project.tsx b/src/scripts/components/about-project/about-project.tsx
@@ -0,0 +1,32 @@
+import React, {FunctionComponent} from 'react';
+import {useIntl} from 'react-intl';
+import ReactMarkdown from 'react-markdown';
+
+import styles from './about-project.styl';
+
+const AboutProject: FunctionComponent = () => {
+  const intl = useIntl();
+
+  return (
+    <div className={styles.aboutProject}>
+      <ReactMarkdown
+        source={intl.formatMessage({id: 'projectDescription'})}
+        linkTarget="_blank"
+        allowedTypes={[
+          'heading',
+          'text',
+          'paragraph',
+          'break',
+          'strong',
+          'emphasis',
+          'image',
+          'imageReference',
+          'list',
+          'listItem'
+        ]}
+      />
+    </div>
+  );
+};
+
+export default AboutProject;
diff --git a/src/scripts/components/icons/apple-icon.tsx b/src/scripts/components/icons/apple-icon.tsx
@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const AppleIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z" />
+  </svg>
+);
diff --git a/src/scripts/components/icons/linux-icon.tsx b/src/scripts/components/icons/linux-icon.tsx
@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const LinuxIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M14.34,7.74C14.92,8.07 15.65,7.87 16,7.3C16.31,6.73 16.12,6 15.54,5.66C14.97,5.33 14.23,5.5 13.9,6.1C13.57,6.67 13.77,7.41 14.34,7.74M11.88,15.5C11.35,15.5 10.85,15.39 10.41,15.18L9.57,16.68C10.27,17 11.05,17.22 11.88,17.22C12.37,17.22 12.83,17.15 13.28,17.03C13.36,16.54 13.64,16.1 14.1,15.84C14.56,15.57 15.08,15.55 15.54,15.72C16.43,14.85 17,13.66 17.09,12.33L15.38,12.31C15.22,14.1 13.72,15.5 11.88,15.5M11.88,8.5C13.72,8.5 15.22,9.89 15.38,11.69L17.09,11.66C17,10.34 16.43,9.15 15.54,8.28C15.08,8.45 14.55,8.42 14.1,8.16C13.64,7.9 13.36,7.45 13.28,6.97C12.83,6.85 12.37,6.78 11.88,6.78C11.05,6.78 10.27,6.97 9.57,7.32L10.41,8.82C10.85,8.61 11.35,8.5 11.88,8.5M8.37,12C8.37,10.81 8.96,9.76 9.86,9.13L9,7.65C7.94,8.36 7.15,9.43 6.83,10.69C7.21,11 7.45,11.47 7.45,12C7.45,12.53 7.21,13 6.83,13.31C7.15,14.56 7.94,15.64 9,16.34L9.86,14.87C8.96,14.24 8.37,13.19 8.37,12M14.34,16.26C13.77,16.59 13.57,17.32 13.9,17.9C14.23,18.47 14.97,18.67 15.54,18.34C16.12,18 16.31,17.27 16,16.7C15.65,16.12 14.92,15.93 14.34,16.26M5.76,10.8C5.1,10.8 4.56,11.34 4.56,12C4.56,12.66 5.1,13.2 5.76,13.2C6.43,13.2 6.96,12.66 6.96,12C6.96,11.34 6.43,10.8 5.76,10.8Z" />
+  </svg>
+);
diff --git a/src/scripts/components/icons/windows-icon.tsx b/src/scripts/components/icons/windows-icon.tsx
@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const WindowsIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path d="M3,12V6.75L9,5.43V11.91L3,12M20,3V11.75L10,11.9V5.21L20,3M3,13L9,13.09V19.9L3,18.75V13M20,13.25V22L10,20.09V13.1L20,13.25Z" />
+  </svg>
+);
diff --git a/src/scripts/components/menu/menu.styl b/src/scripts/components/menu/menu.styl
@@ -36,8 +36,14 @@
   color: $textDefault
 
 .menuButton
+  display: flex
+  align-items: center
   color: $textDefault
 
+  svg
+    padding-right: emCalc(10px)
+    fill: $textDefault
+
 .logo
   position: absolute
   bottom: 1.5em

diff --git a/src/scripts/components/menu/menu.tsx b/src/scripts/components/menu/menu.tsx
@@ -1,4 +1,4 @@
-import React, {FunctionComponent} from 'react';
+import React, {FunctionComponent, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import LanguageSelector from '../language-selector/language-selector';
@@ -8,67 +8,135 @@ import {LanguageIcon} from '../icons/language-icon';
 import {InfoIcon} from '../icons/info-icon';
 import {DownloadIcon} from '../icons/download-icon';
 import {CCILogo} from '../icons/cci-logo';
+import AboutProject from '../about-project/about-project';
+import Overlay from '../overlay/overlay';
+import {WindowsIcon} from '../icons/windows-icon';
+import {LinuxIcon} from '../icons/linux-icon';
+import {AppleIcon} from '../icons/apple-icon';
+import config from '../../config/main';
 
 import styles from './menu.styl';
 
-const Menu: FunctionComponent = () => (
-  <React.Fragment>
-    <nav className={styles.menuContainer}>
-      <ul className={styles.menuList}>
-        <li className={styles.menuItemTitle}>
-          <PresenterIcon /> <FormattedMessage id={'modes'} />
-        </li>
-        <li className={styles.menuListItem}>
-          <Button
-            className={styles.menuButton}
-            label={'presenterMode'}
-            link={'/present'}
-          />
-        </li>
-        <li className={styles.menuListItem}>
-          <Button
-            className={styles.menuButton}
-            label={'showcaseMode'}
-            link={'/showcase'}
-          />
-        </li>
-        <li className={styles.subMenuTitle}>
-          <DownloadIcon /> <FormattedMessage id={'offline'} />
-        </li>
-        <li className={styles.menuListItem}>
-          <Button className={styles.menuButton} label={'download'} />
-        </li>
-      </ul>
-      <ul className={styles.menuList}>
-        <li className={styles.menuItemTitle}>
-          <LanguageIcon /> <FormattedMessage id={'language'} />
-        </li>
-        <li>
-          <LanguageSelector className={styles.menuListItem} />
-        </li>
-      </ul>
-      <ul className={styles.menuList}>
-        <li className={styles.menuItemTitle}>
-          <InfoIcon /> <FormattedMessage id={'info'} />
-        </li>
-        <li className={styles.menuListItem}>
-          <Button className={styles.menuButton} label={'about'} />
-        </li>
-        <li className={styles.menuListItem}>
-          <Button className={styles.menuButton} label={'EsaWebsite'} />
-        </li>
-        <li className={styles.menuListItem}>
-          <Button className={styles.menuButton} label={'CCIWebsite'} />
-        </li>
-        <li className={styles.menuListItem}>
-          <Button className={styles.menuButton} label={'github'} />
-        </li>
-      </ul>
-    </nav>
-    <div className={styles.logo}>
-      <CCILogo />
-    </div>
-  </React.Fragment>
-);
+const Menu: FunctionComponent = () => {
+  const [showOverlay, setShowOverlay] = useState(false);
+
+  return (
+    <React.Fragment>
+      <nav className={styles.menuContainer}>
+        {showOverlay ? (
+          <Overlay onClose={() => setShowOverlay(false)}>
+            <AboutProject />
+          </Overlay>
+        ) : (
+          <React.Fragment>
+            <ul className={styles.menuList}>
+              <li className={styles.menuItemTitle}>
+                <PresenterIcon /> <FormattedMessage id={'modes'} />
+              </li>
+              <li className={styles.menuListItem}>
+                <Button
+                  className={styles.menuButton}
+                  label={'presenterMode'}
+                  link={'/present'}
+                />
+              </li>
+              <li className={styles.menuListItem}>
+                <Button
+                  className={styles.menuButton}
+                  label={'showcaseMode'}
+                  link={'/showcase'}
+                />
+              </li>
+              <li className={styles.subMenuTitle}>
+                <DownloadIcon /> <FormattedMessage id={'offline'} />
+              </li>
+              <li className={styles.menuListItem}>
+                <a
+                  href={config.downloadUrls.windows}
+                  target={'_blank'}
+                  rel="noopener noreferrer"
+                  className={styles.menuButton}>
+                  <WindowsIcon />
+                  Windows
+                </a>
+              </li>
+              <li className={styles.menuListItem}>
+                <a
+                  href={config.downloadUrls.macOS}
+                  target={'_blank'}
+                  rel="noopener noreferrer"
+                  className={styles.menuButton}>
+                  <AppleIcon />
+                  macOS
+                </a>
+              </li>
+              <li className={styles.menuListItem}>
+                <a
+                  href={config.downloadUrls.linux}
+                  target={'_blank'}
+                  rel="noopener noreferrer"
+                  className={styles.menuButton}>
+                  <LinuxIcon />
+                  Linux
+                </a>
+              </li>
+            </ul>
+
+            <ul className={styles.menuList}>
+              <li className={styles.menuItemTitle}>
+                <LanguageIcon /> <FormattedMessage id={'language'} />
+              </li>
+              <li>
+                <LanguageSelector className={styles.menuListItem} />
+              </li>
+            </ul>
+            <ul className={styles.menuList}>
+              <li className={styles.menuItemTitle}>
+                <InfoIcon /> <FormattedMessage id={'info'} />
+              </li>
+              <li className={styles.menuListItem}>
+                <Button
+                  className={styles.menuButton}
+                  label={'about'}
+                  onClick={() => setShowOverlay(true)}
+                />
+              </li>
+              <li className={styles.menuListItem}>
+                <a
+                  href="https://www.esa.int/"
+                  target={'_blank'}
+                  rel="noopener noreferrer"
+                  className={styles.menuButton}>
+                  <FormattedMessage id={'EsaWebsite'} />
+                </a>
+              </li>
+              <li className={styles.menuListItem}>
+                <a
+                  href="https://climate.esa.int/"
+                  target={'_blank'}
+                  rel="noopener noreferrer"
+                  className={styles.menuButton}>
+                  <FormattedMessage id={'CCIWebsite'} />
+                </a>
+              </li>
+              <li className={styles.menuListItem}>
+                <a
+                  href="https://github.com/ubilabs/esa-climate-from-space"
+                  target={'_blank'}
+                  rel="noopener noreferrer"
+                  className={styles.menuButton}>
+                  <FormattedMessage id={'github'} />
+                </a>
+              </li>
+            </ul>
+          </React.Fragment>
+        )}
+      </nav>
+      <div className={styles.logo}>
+        <CCILogo />
+      </div>
+    </React.Fragment>
+  );
+};
 
 export default Menu;
diff --git a/src/scripts/config/main.ts b/src/scripts/config/main.ts
@@ -49,6 +49,12 @@ const basemapUrlsOffline = {
   dark: 'basemaps/dark'
 };
 
+const downloadUrls = {
+  windows: `https://storage.googleapis.com/esa-cfs-versions/electron/${version}/esa-climate-from-space-${version}-win.exe`,
+  macOS: `https://storage.googleapis.com/esa-cfs-versions/electron/${version}/esa-climate-from-space-${version}-mac.zip`,
+  linux: `https://storage.googleapis.com/esa-cfs-versions/electron/${version}/esa-climate-from-space-${version}-linux.zip`
+};
+
 export default {
   api: {
     layers: `${baseUrlStorage}/layers/layers-{lang}.json`,
@@ -69,5 +75,6 @@ export default {
       'https://www.facebook.com/sharer/sharer.php?u={currentUrl}&text=ESAClimateFromSpace',
     twitter:
       'http://twitter.com/intent/tweet?text=ESA%20Climate%20From%20Space&url={currentUrl}'
-  }
+  },
+  downloadUrls
 };