From 33cd0b8fc84af21a4a96223d463739b1694d4aac Mon Sep 17 00:00:00 2001 From: Katherina Marcenko <45818654+KatvonRivia@users.noreply.github.com> Date: Wed, 29 Jul 2020 17:12:42 +0200 Subject: [PATCH] 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 --- i18n/de.json | 1 + i18n/en.json | 1 + i18n/fr.json | 1 + .../about-project/about-project.styl | 14 ++ .../about-project/about-project.tsx | 32 +++ src/scripts/components/icons/apple-icon.tsx | 12 ++ src/scripts/components/icons/linux-icon.tsx | 12 ++ src/scripts/components/icons/windows-icon.tsx | 12 ++ src/scripts/components/menu/menu.styl | 6 + src/scripts/components/menu/menu.tsx | 188 ++++++++++++------ src/scripts/config/main.ts | 9 +- 11 files changed, 227 insertions(+), 61 deletions(-) create mode 100644 src/scripts/components/about-project/about-project.styl create mode 100644 src/scripts/components/about-project/about-project.tsx create mode 100644 src/scripts/components/icons/apple-icon.tsx create mode 100644 src/scripts/components/icons/linux-icon.tsx create mode 100644 src/scripts/components/icons/windows-icon.tsx diff --git a/i18n/de.json b/i18n/de.json index acbe0a989..634c45fee 100644 --- 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 index 856324578..541c9da7a 100644 --- 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 index 856324578..05a43edd6 100644 --- 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 new file mode 100644 index 000000000..e417ead35 --- /dev/null +++ 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 new file mode 100644 index 000000000..d3208dc25 --- /dev/null +++ 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 ( +
+ +
+ ); +}; + +export default AboutProject; diff --git a/src/scripts/components/icons/apple-icon.tsx b/src/scripts/components/icons/apple-icon.tsx new file mode 100644 index 000000000..cd3ba9136 --- /dev/null +++ b/src/scripts/components/icons/apple-icon.tsx @@ -0,0 +1,12 @@ +import React, {FunctionComponent} from 'react'; + +export const AppleIcon: FunctionComponent = () => ( + + + +); diff --git a/src/scripts/components/icons/linux-icon.tsx b/src/scripts/components/icons/linux-icon.tsx new file mode 100644 index 000000000..e212004dc --- /dev/null +++ b/src/scripts/components/icons/linux-icon.tsx @@ -0,0 +1,12 @@ +import React, {FunctionComponent} from 'react'; + +export const LinuxIcon: FunctionComponent = () => ( + + + +); diff --git a/src/scripts/components/icons/windows-icon.tsx b/src/scripts/components/icons/windows-icon.tsx new file mode 100644 index 000000000..c3bc2d4a9 --- /dev/null +++ b/src/scripts/components/icons/windows-icon.tsx @@ -0,0 +1,12 @@ +import React, {FunctionComponent} from 'react'; + +export const WindowsIcon: FunctionComponent = () => ( + + + +); diff --git a/src/scripts/components/menu/menu.styl b/src/scripts/components/menu/menu.styl index 013a1e641..0ff4a536c 100644 --- 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 index eaeb69efd..42d2c7347 100644 --- 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 = () => ( - - -
- -
- -); +const Menu: FunctionComponent = () => { + const [showOverlay, setShowOverlay] = useState(false); + + return ( + + +
+ +
+ + ); +}; export default Menu; diff --git a/src/scripts/config/main.ts b/src/scripts/config/main.ts index 032a2b17d..8a6b63eff 100644 --- 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 };