From 70070ef516762922db63fc61131ff01e613aa4aa Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Thu, 9 Jul 2020 02:50:40 +0300 Subject: [PATCH 1/3] Prepare footer for new item --- .../footerMenu/FooterMenu.story.tsx | 2 +- .../app/components/footerMenu/FooterMenu.tsx | 37 +++++++++++++------ .../app/components/footerMenu/footerMenu.scss | 18 +++------ 3 files changed, 32 insertions(+), 25 deletions(-) diff --git a/packages/app/components/footerMenu/FooterMenu.story.tsx b/packages/app/components/footerMenu/FooterMenu.story.tsx index e5458ba..89a9103 100644 --- a/packages/app/components/footerMenu/FooterMenu.story.tsx +++ b/packages/app/components/footerMenu/FooterMenu.story.tsx @@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react'; import FooterMenu from './FooterMenu'; const PreviewWrapper: ComponentType<{ style?: CSSProperties }> = ({ style, children }) => ( -
{children}
+
{children}
); storiesOf('Components', module).add('FooterMenu', () => ( diff --git a/packages/app/components/footerMenu/FooterMenu.tsx b/packages/app/components/footerMenu/FooterMenu.tsx index 0ea11e6..f59ab29 100644 --- a/packages/app/components/footerMenu/FooterMenu.tsx +++ b/packages/app/components/footerMenu/FooterMenu.tsx @@ -20,18 +20,33 @@ const FooterMenu: ComponentType = () => { return (
- - - - - - - - - +
+ + + - + + + +
+ diff --git a/packages/app/components/footerMenu/footerMenu.scss b/packages/app/components/footerMenu/footerMenu.scss index bf15007..1be8be0 100644 --- a/packages/app/components/footerMenu/footerMenu.scss +++ b/packages/app/components/footerMenu/footerMenu.scss @@ -7,23 +7,15 @@ line-height: 12px; } +.row { + margin-bottom: 2px; +} + .footerItem { display: inline-block; - margin: 2px 5px 2px 0; + margin: 2px 2px; color: #666; border-bottom-color: #666; - - &:last-of-type { - margin-right: 0; - } -} - -.langTriggerContainer { - margin-top: 1px; -} - -.langTrigger { - composes: footerItem; } .langTriggerIcon { From 1dfe85e736a7e91cac187a87a99604e1e11a2f98 Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Thu, 9 Jul 2020 21:59:17 +0300 Subject: [PATCH 2/3] Improve storybook's performance by not building all possible locales/countries flags --- .storybook/webpack.config.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 8fa7048..61605e0 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -1,8 +1,12 @@ +// @ts-nocheck +const { ContextReplacementPlugin } = require('webpack'); + const rootConfig = require('../webpack.config'); module.exports = async ({ config }) => ({ ...config, resolve: rootConfig.resolve, + module: { ...config.module, // our rules should satisfy all storybook needs, @@ -11,4 +15,9 @@ module.exports = async ({ config }) => ({ }, resolveLoader: rootConfig.resolveLoader, + + plugins: [ + ...config.plugins, + ...rootConfig.plugins.filter((plugin) => plugin instanceof ContextReplacementPlugin), + ], }); From af9bdcb20e2acb368c4da373e7c96d0ca93ff7c2 Mon Sep 17 00:00:00 2001 From: ErickSkrauch Date: Thu, 9 Jul 2020 21:59:54 +0300 Subject: [PATCH 3/3] 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 @@ + + +