From 9fa16a9e0215416bcb3d5799e271613735c5ec4f Mon Sep 17 00:00:00 2001 From: Katherina Marcenko <45818654+KatvonRivia@users.noreply.github.com> Date: Wed, 22 Apr 2020 10:53:44 +0200 Subject: [PATCH] feat(share): add share component (#335) * refactor(compass): add new icon, rotate compass on hover * refactor(navigation): add new icons * refactor(button): remove focus style * refactor(layer-info): add font, remove icon * refactor(stories): add share button, fix styles * refactor(play-button): disable button when no stories are selected * refactor(button): add disabled property * style(button): change classnames function * feat(share): add share component * refactor(share): add border radius * refactor(share): add urls to config file * feat(share): remove instagram and youtube share * feat(share): add translation --- i18n/de.json | 5 +- i18n/en.json | 5 +- src/scripts/components/icons/copy-icon.tsx | 11 +++ .../components/icons/facebook-icon.tsx | 15 ++++ .../components/icons/instagram-icon.tsx | 11 +++ src/scripts/components/icons/twitter-icon.tsx | 11 +++ src/scripts/components/icons/youtube-icon.tsx | 11 +++ .../components/layer-info/layer-info.styl | 1 + .../components/navigation/navigation.tsx | 10 +-- src/scripts/components/overlay/overlay.styl | 5 +- src/scripts/components/overlay/overlay.tsx | 24 +++-- .../presentation-selector.tsx | 5 +- src/scripts/components/share/share.styl | 63 +++++++++++++ src/scripts/components/share/share.tsx | 88 +++++++++++++++++++ .../stories-selector/stories-selector.tsx | 8 +- src/scripts/components/story/story.tsx | 7 +- src/scripts/config/main.ts | 9 +- 17 files changed, 251 insertions(+), 38 deletions(-) create mode 100644 src/scripts/components/icons/copy-icon.tsx create mode 100644 src/scripts/components/icons/facebook-icon.tsx create mode 100644 src/scripts/components/icons/instagram-icon.tsx create mode 100644 src/scripts/components/icons/twitter-icon.tsx create mode 100644 src/scripts/components/icons/youtube-icon.tsx create mode 100644 src/scripts/components/share/share.styl create mode 100644 src/scripts/components/share/share.tsx diff --git a/i18n/de.json b/i18n/de.json index f23212e5a..33f93b1a5 100644 --- a/i18n/de.json +++ b/i18n/de.json @@ -21,11 +21,8 @@ "modes": "Modi", "offline": "Offline Modus", "download": "Anwendung herunterladen", - "twitter": "Twitter", - "facebook": "Facebook", - "whatsApp": "WhatsApp", + "share": "Teile mit der Welt", "copyLink": "Link kopieren", - "share": "Inhalt teilen", "export": "Daten exportieren", "info": "Weitere Informationen", "about": "Über das Projekt", diff --git a/i18n/en.json b/i18n/en.json index 50b5bc91b..bc543a510 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -21,11 +21,8 @@ "modes": "Modes", "offline": "Offline Mode", "download": "Download App", - "twitter": "Twitter", - "facebook": "Facebook", - "whatsApp": "WhatsApp", + "share": "Share with the world", "copyLink": "Copy Link", - "share": "Share Content", "export": "Export Data", "info": "More Information", "about": "About this project", diff --git a/src/scripts/components/icons/copy-icon.tsx b/src/scripts/components/icons/copy-icon.tsx new file mode 100644 index 000000000..ee6c43a1e --- /dev/null +++ b/src/scripts/components/icons/copy-icon.tsx @@ -0,0 +1,11 @@ +import React, {FunctionComponent} from 'react'; + +export const CopyIcon: FunctionComponent = () => ( + + + +); diff --git a/src/scripts/components/icons/facebook-icon.tsx b/src/scripts/components/icons/facebook-icon.tsx new file mode 100644 index 000000000..755225d16 --- /dev/null +++ b/src/scripts/components/icons/facebook-icon.tsx @@ -0,0 +1,15 @@ +import React, {FunctionComponent} from 'react'; + +export const FacebookIcon: FunctionComponent = () => ( + + + +); diff --git a/src/scripts/components/icons/instagram-icon.tsx b/src/scripts/components/icons/instagram-icon.tsx new file mode 100644 index 000000000..eb1ea2857 --- /dev/null +++ b/src/scripts/components/icons/instagram-icon.tsx @@ -0,0 +1,11 @@ +import React, {FunctionComponent} from 'react'; + +export const InstagramIcon: FunctionComponent = () => ( + + + +); diff --git a/src/scripts/components/icons/twitter-icon.tsx b/src/scripts/components/icons/twitter-icon.tsx new file mode 100644 index 000000000..e7d8541f1 --- /dev/null +++ b/src/scripts/components/icons/twitter-icon.tsx @@ -0,0 +1,11 @@ +import React, {FunctionComponent} from 'react'; + +export const TwitterIcon: FunctionComponent = () => ( + + + +); diff --git a/src/scripts/components/icons/youtube-icon.tsx b/src/scripts/components/icons/youtube-icon.tsx new file mode 100644 index 000000000..dbf0b9b1c --- /dev/null +++ b/src/scripts/components/icons/youtube-icon.tsx @@ -0,0 +1,11 @@ +import React, {FunctionComponent} from 'react'; + +export const YoutubeIcon: FunctionComponent = () => ( + + + +); diff --git a/src/scripts/components/layer-info/layer-info.styl b/src/scripts/components/layer-info/layer-info.styl index 5404db3f3..e538e6d3b 100644 --- a/src/scripts/components/layer-info/layer-info.styl +++ b/src/scripts/components/layer-info/layer-info.styl @@ -4,6 +4,7 @@ display: flex flex-direction: column justify-content: center + width: 50% font-family: NotesEsa .layerType diff --git a/src/scripts/components/navigation/navigation.tsx b/src/scripts/components/navigation/navigation.tsx index 3d51b980e..cfdc3e72b 100644 --- a/src/scripts/components/navigation/navigation.tsx +++ b/src/scripts/components/navigation/navigation.tsx @@ -7,10 +7,10 @@ import Menu from '../menu/menu'; import {LayersIcon} from '../icons/layers-icon'; import {StoryIcon} from '../icons/story-icon'; import showLayerSelectorAction from '../../actions/show-layer-selector'; +import Share from '../share/share'; +import {MenuIcon} from '../icons/menu-icon'; import styles from './navigation.styl'; -import {MenuIcon} from '../icons/menu-icon'; -import {ShareIcon} from '../icons/share-icon'; const Navigation: FunctionComponent = () => { const [showMenu, setShowMenu] = useState(false); @@ -30,11 +30,7 @@ const Navigation: FunctionComponent = () => { onClick={() => dispatch(showLayerSelectorAction(true))} icon={LayersIcon} /> -