From af9bdcb20e2acb368c4da373e7c96d0ca93ff7c2 Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Thu, 9 Jul 2020 21:59:54 +0300 Subject: [PATCH] Implemented source code popup markup --- .../app/components/footerMenu/FooterMenu.tsx | 13 +- .../sourceCode/SourceCodePopup.story.tsx | 7 ++ .../components/sourceCode/SourceCodePopup.tsx | 105 ++++++++++++++++ packages/app/components/sourceCode/index.ts | 1 + .../sourceCode/sourceCodePopup.scss | 113 ++++++++++++++++++ packages/app/icons/webfont/brush.svg | 4 + packages/app/icons/webfont/database.svg | 3 + packages/app/icons/webfont/envelope-open.svg | 3 + packages/app/icons/webfont/github.svg | 3 + packages/app/icons/webfont/heart.svg | 3 + 10 files changed, 249 insertions(+), 6 deletions(-) create mode 100644 packages/app/components/sourceCode/SourceCodePopup.story.tsx create mode 100644 packages/app/components/sourceCode/SourceCodePopup.tsx create mode 100644 packages/app/components/sourceCode/index.ts create mode 100644 packages/app/components/sourceCode/sourceCodePopup.scss create mode 100644 packages/app/icons/webfont/brush.svg create mode 100644 packages/app/icons/webfont/database.svg create mode 100644 packages/app/icons/webfont/envelope-open.svg create mode 100644 packages/app/icons/webfont/github.svg create mode 100644 packages/app/icons/webfont/heart.svg diff --git a/packages/app/components/footerMenu/FooterMenu.tsx b/packages/app/components/footerMenu/FooterMenu.tsx index f59ab29..8bd1e62 100644 --- a/packages/app/components/footerMenu/FooterMenu.tsx +++ b/packages/app/components/footerMenu/FooterMenu.tsx @@ -3,6 +3,7 @@ import { useDispatch } from 'react-redux'; import { Link } from 'react-router-dom'; import { FormattedMessage as Message } from 'react-intl'; import LanguageSwitcher from 'app/components/languageSwitcher'; +import SourceCode from 'app/components/sourceCode'; import { create as createPopup } from 'app/components/ui/popup/actions'; import { ContactLink } from 'app/components/contact'; @@ -10,10 +11,11 @@ import styles from './footerMenu.scss'; const FooterMenu: ComponentType = () => { const dispatch = useDispatch(); - const onLanguageSwitcherClick = useCallback>( - (event) => { + + const createPopupHandler = useCallback( + (popup: ComponentType): MouseEventHandler => (event) => { event.preventDefault(); - dispatch(createPopup({ Popup: LanguageSwitcher })); + dispatch(createPopup({ Popup: popup })); }, [dispatch], ); @@ -39,14 +41,13 @@ const FooterMenu: ComponentType = () => { {'ꞏ'} - {/* TODO: on click open the source code popup */} - +
- + diff --git a/packages/app/components/sourceCode/SourceCodePopup.story.tsx b/packages/app/components/sourceCode/SourceCodePopup.story.tsx new file mode 100644 index 0000000..d4e1c4f --- /dev/null +++ b/packages/app/components/sourceCode/SourceCodePopup.story.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; + +import SourceCodePopup from './SourceCodePopup'; + +storiesOf('Components/Popups', module).add('SourceCodePopup', () => ); diff --git a/packages/app/components/sourceCode/SourceCodePopup.tsx b/packages/app/components/sourceCode/SourceCodePopup.tsx new file mode 100644 index 0000000..6b3f061 --- /dev/null +++ b/packages/app/components/sourceCode/SourceCodePopup.tsx @@ -0,0 +1,105 @@ +import React, { ComponentProps, ComponentType } from 'react'; +import { FormattedMessage as Message } from 'react-intl'; +import clsx from 'clsx'; + +import Popup from 'app/components/ui/popup'; + +import styles from './sourceCodePopup.scss'; + +interface Props { + onClose?: ComponentProps['onClose']; +} + +const SourceCodePopup: ComponentType = ({ onClose }) => ( + } + wrapperClassName={styles.boundings} + data-testid="source-code-popup" + onClose={onClose} + > +
+
+ + +
+ + + + +
+
+
Open Source
+
+ ( + + {text} + + ), + }} + /> +
+
+ +); + +export default SourceCodePopup; diff --git a/packages/app/components/sourceCode/index.ts b/packages/app/components/sourceCode/index.ts new file mode 100644 index 0000000..fda2d68 --- /dev/null +++ b/packages/app/components/sourceCode/index.ts @@ -0,0 +1 @@ +export { default } from './SourceCodePopup'; diff --git a/packages/app/components/sourceCode/sourceCodePopup.scss b/packages/app/components/sourceCode/sourceCodePopup.scss new file mode 100644 index 0000000..49b1711 --- /dev/null +++ b/packages/app/components/sourceCode/sourceCodePopup.scss @@ -0,0 +1,113 @@ +@import '~app/components/ui/popup/popup.scss'; +@import '~app/components/ui/colors.scss'; +@import '~app/components/ui/fonts.scss'; + +.boundings { + @include popupBounding(420px); +} + +.body { + padding: $popupPadding; + color: #666; +} + +.item { + display: flex; + margin-bottom: 15px; + + &:last-of-type { + margin-bottom: 0; + } +} + +.blue { + color: $blue; +} + +.violet { + color: $violet; +} + +.iconWrapper { + margin: 4px 12px 0 0; +} + +.dbIcon { + composes: database from '~app/components/ui/icons.scss'; + + font-size: 40px; +} + +.brushIcon { + composes: brush from '~app/components/ui/icons.scss'; + + font-size: 30px; +} + +.envelopeIcon { + composes: envelope-open from '~app/components/ui/icons.scss'; + + font-size: 33px; +} + +.contentWrapper { + flex-grow: 1; +} + +.itemLink { + display: inline-block; + border: none; +} + +.projectTitle { + font-family: $font-family-title; + font-size: 20px; +} + +.projectRepository { + font-family: $font-family-title; + font-size: 14px; + color: #9a9a9a; + margin: 0 0 5px 1px; // Add 1px from the left to make icon look visually aligned with texts +} + +.githubIcon { + composes: github from '~app/components/ui/icons.scss'; + + font-size: 12px; + margin-right: 2px; + position: relative; + bottom: 1px; +} + +.projectDescription { + font-size: 12px; + line-height: 1.4; +} + +.footer { + composes: body; + + background: #f5f5f5; + text-align: center; +} + +.heartIcon { + composes: heart from '~app/components/ui/icons.scss'; + + color: $red; + font-size: 22px; + margin-bottom: 5px; +} + +.footerTitle { + font-family: $font-family-title; + font-size: 22px; + color: #444; + margin-bottom: 15px; +} + +.footerContent { + font-size: 12px; + line-height: 1.4; +} diff --git a/packages/app/icons/webfont/brush.svg b/packages/app/icons/webfont/brush.svg new file mode 100644 index 0000000..487ab74 --- /dev/null +++ b/packages/app/icons/webfont/brush.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/app/icons/webfont/database.svg b/packages/app/icons/webfont/database.svg new file mode 100644 index 0000000..6ab12ab --- /dev/null +++ b/packages/app/icons/webfont/database.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/icons/webfont/envelope-open.svg b/packages/app/icons/webfont/envelope-open.svg new file mode 100644 index 0000000..284b47c --- /dev/null +++ b/packages/app/icons/webfont/envelope-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/icons/webfont/github.svg b/packages/app/icons/webfont/github.svg new file mode 100644 index 0000000..4fb12ca --- /dev/null +++ b/packages/app/icons/webfont/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/icons/webfont/heart.svg b/packages/app/icons/webfont/heart.svg new file mode 100644 index 0000000..9a0b9dd --- /dev/null +++ b/packages/app/icons/webfont/heart.svg @@ -0,0 +1,3 @@ + + +