feat(globe-navigation): add projection switch and navigation icons

i18n/de.json

@@ -9,8 +9,8 @@
   "projection": "Projektion",
   "layers": "Daten Layers",
   "more": "Mehr",
-  "zoomIn": "Hereinzoomen",
-  "zoomOut": "Herauszoomen",
+  "2D": "2D",
+  "3D": "3D",
   "presenterMode": "Präsentation",
   "showcaseMode": "Show Case",
   "language": "Sprache wechseln",

i18n/en.json

@@ -9,8 +9,8 @@
   "projection": "Projection",
   "layers": "Data Layers",
   "more": "More",
-  "zoomIn": "Zoom In",
-  "zoomOut": "Zoom Out",
+  "2D": "2D",
+  "3D": "3D",
   "presenterMode": "Presentation",
   "showcaseMode": "Show Case",
   "language": "Change language",

src/scripts/components/app/app.tsx

@@ -13,7 +13,7 @@ import LayerLoader from '../layer-loader/layer-loader';
 import Init from '../init/init';
 import LayerSelector from '../layer-selector/layer-selector';
 import Navigation from '../navigation/navigation';
-import GlobeZoom from '../globe-zoom/globe-zoom';
+import GlobeNavigation from '../globe-navigation/globe-navigation';
 import {EsaLogo} from '../icons/esa-logo';
 import Globes from '../globes/globes';
 import TimeSlider from '../time-slider/time-slider';
@@ -49,7 +49,7 @@ const TranslatedApp: FunctionComponent = () => {
             {false && <div>StoryMedia</div>}
           </main>
           <Navigation />
-          <GlobeZoom />
+          <GlobeNavigation />
           <TimeSlider />
           <LayerSelector />
         </div>

src/scripts/components/globe-navigation/globe-navigation.styl

@@ -0,0 +1,14 @@
+@require '../../../variables.styl'
+
+.globeNavigation
+  position: absolute
+  right: emCalc(10px)
+  bottom: emCalc(22px)
+  display: flex
+
+.compassIcon svg, .downloadIcon svg
+  fill: $textWhite
+
+.compassIcon
+  padding-right: emCalc(16px)
+  padding-left: emCalc(25px)

src/scripts/components/globe-navigation/globe-navigation.tsx

@@ -0,0 +1,45 @@
+import React, {FunctionComponent} from 'react';
+
+import Button from '../button/button';
+import {CompassIcon} from '../icons/compass-icon';
+import {DownloadIcon} from '../icons/download-icon';
+import {GlobeProjection} from '../../types/globe-projection';
+import setGlobeProjectionAction from '../../actions/set-globe-projection';
+import {projectionSelector} from '../../selectors/globe/projection';
+
+import styles from './globe-navigation.styl';
+import {useDispatch, useSelector} from 'react-redux';
+
+const GlobeNavigation: FunctionComponent = () => {
+  const dispatch = useDispatch();
+  const projectionState = useSelector(projectionSelector);
+  const label =
+    projectionState.projection === GlobeProjection.Sphere ? '2D' : '3D';
+
+  const onProjectionHandler = () => {
+    const newProjection =
+      projectionState.projection === GlobeProjection.Sphere
+        ? GlobeProjection.PlateCaree
+        : GlobeProjection.Sphere;
+
+    dispatch(setGlobeProjectionAction(newProjection, 2));
+  };
+
+  return (
+    <div className={styles.globeNavigation}>
+      <Button label={label} onClick={() => onProjectionHandler()} />
+      <Button
+        className={styles.compassIcon}
+        icon={CompassIcon}
+        onClick={() => console.log('placeholder')}
+      />
+      <Button
+        className={styles.downloadIcon}
+        icon={DownloadIcon}
+        onClick={() => console.log('placeholder')}
+      />
+    </div>
+  );
+};
+
+export default GlobeNavigation;

src/scripts/components/icons/compass-icon.tsx

@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const CompassIcon: FunctionComponent = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.19 14.19L6 18L9.81 9.81L18 6L14.19 14.19ZM12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2ZM12 10.9C11.7083 10.9 11.4285 11.0159 11.2222 11.2222C11.0159 11.4285 10.9 11.7083 10.9 12C10.9 12.2917 11.0159 12.5715 11.2222 12.7778C11.4285 12.9841 11.7083 13.1 12 13.1C12.2917 13.1 12.5715 12.9841 12.7778 12.7778C12.9841 12.5715 13.1 12.2917 13.1 12C13.1 11.7083 12.9841 11.4285 12.7778 11.2222C12.5715 11.0159 12.2917 10.9 12 10.9Z" />
+  </svg>
+);

src/scripts/components/icons/download-icon.tsx

@@ -0,0 +1,16 @@
+import React, {FunctionComponent} from 'react';
+
+export const DownloadIcon: FunctionComponent = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z"
+    />
+  </svg>
+);