Implemented source code popup markup

This commit is contained in:
ErickSkrauch 2020-07-09 21:59:54 +03:00
parent 1dfe85e736
commit af9bdcb20e
10 changed files with 249 additions and 6 deletions

View File

@ -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<MouseEventHandler<HTMLAnchorElement>>(
(event) => {
const createPopupHandler = useCallback(
(popup: ComponentType): MouseEventHandler<HTMLAnchorElement> => (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 */}
<a href="#" className={styles.footerItem}>
<a href="#" className={styles.footerItem} onClick={createPopupHandler(SourceCode)}>
<Message key="sourceCode" defaultMessage="Source code" />
</a>
</div>
<div className={styles.row}>
<a href="#" className={styles.footerItem} onClick={onLanguageSwitcherClick}>
<a href="#" className={styles.footerItem} onClick={createPopupHandler(LanguageSwitcher)}>
<span className={styles.langTriggerIcon} />
<Message key="siteLanguage" defaultMessage="Site language" />
</a>

View File

@ -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', () => <SourceCodePopup onClose={action('onClose')} />);

View File

@ -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<typeof Popup>['onClose'];
}
const SourceCodePopup: ComponentType<Props> = ({ onClose }) => (
<Popup
title={<Message key="title" defaultMessage="Source code" />}
wrapperClassName={styles.boundings}
data-testid="source-code-popup"
onClose={onClose}
>
<div className={styles.body}>
<div className={styles.item}>
<div className={styles.iconWrapper}>
<div className={styles.dbIcon} />
</div>
<div className={styles.contentWrapper}>
<a href="https://github.com/elyby/accounts" target="_blank" className={styles.itemLink}>
<div className={styles.projectTitle}>Backend</div>
<div className={styles.projectRepository}>
<span className={styles.githubIcon} />
elyby/accounts
</div>
</a>
<div className={styles.projectDescription}>
<Message
key="backendDescription"
defaultMessage="The service core and the linking point for all Ely.by's projects. Includes implementation of OAuth 2.0 protocol, authorization for Minecraft game servers and Mojangcompatible API."
/>
</div>
</div>
</div>
<div className={styles.item}>
<div className={styles.iconWrapper}>
<div className={clsx(styles.brushIcon, styles.blue)} />
</div>
<div className={styles.contentWrapper}>
<a href="https://github.com/elyby/accounts-frontend" target="_blank" className={styles.itemLink}>
<div className={clsx(styles.projectTitle, styles.blue)}>Frontend</div>
<div className={styles.projectRepository}>
<span className={styles.githubIcon} />
elyby/accounts-frontend
</div>
</a>
<div className={styles.projectDescription}>
<Message
key="frontendDescription"
defaultMessage="The interface that you're using right now. The mobilefriendly UI has been translated into multiple languages and has the feature to access multiple accounts simultaneously."
/>
</div>
</div>
</div>
<div className={styles.item}>
<div className={styles.iconWrapper}>
<div className={clsx(styles.envelopeIcon, styles.violet)} />
</div>
<div className={styles.contentWrapper}>
<a href="https://github.com/elyby/emails-renderer" target="_blank" className={styles.itemLink}>
<div className={clsx(styles.projectTitle, styles.violet)}>Mail rendering service</div>
<div className={styles.projectRepository}>
<span className={styles.githubIcon} />
elyby/emails-renderer
</div>
</a>
<div className={styles.projectDescription}>
<Message
key="mailRenderingServiceDescription"
defaultMessage="A support service that generates beautiful emails in your language. It allows us to use our favorite fonts even where they cannot be used =)"
/>
</div>
</div>
</div>
</div>
<div className={styles.footer}>
<div className={styles.heartIcon} />
<div className={styles.footerTitle}>Open Source</div>
<div className={styles.footerContent}>
<Message
key="weLoveOpenSource"
defaultMessage="Ely.by is an open source project. You can find this and many of our other projects on our organization's page at <githubLink>GitHub</githubLink>. Contributors are welcome!"
values={{
githubLink: (text: string) => (
<a href="https://github.com/elyby/accounts" target="_blank">
{text}
</a>
),
}}
/>
</div>
</div>
</Popup>
);
export default SourceCodePopup;

View File

@ -0,0 +1 @@
export { default } from './SourceCodePopup';

View File

@ -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;
}

View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="27">
<path d="M13.333 18.75V16H8v2.75H5.333v2.75H0v2.75h2.667V27h10.666v-2.75H16v-5.5z"/>
<path d="M26.571 0v2.714h-2.714v2.715h-2.714v2.714h-2.714v2.714h-2.715v2.714H13v2.715h2.714V19h2.715v-2.714h2.714v-2.715h2.714v-2.714h2.714V8.143h2.715V5.429H32V0z"/>
</svg>

After

Width:  |  Height:  |  Size: 331 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="36">
<path d="M25.6 3.2V0H6.4v3.2H0v9.6h6.4V16h19.2v-3.2H32V3.2zm0 12.8v3.088H6.4V16H0v6.175h6.4v3.088h19.2v-3.088H32V16zm0 10.105v3.088H6.4v-3.088H0v6.176h6.4v3.087h19.2v-3.087H32v-6.176z"/>
</svg>

After

Width:  |  Height:  |  Size: 262 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="30">
<path d="M29.333 13v2.833H24v2.834h-5.333V21.5h-5.334v-2.833H8v-2.834H2.667V13H0v17h32V13zM0 7.5V10h32V7.5h-2.667V5H24V2.5h-5.333V0h-5.334v2.5H8V5H2.667v2.5z"/>
</svg>

After

Width:  |  Height:  |  Size: 236 B

View File

@ -0,0 +1,3 @@
<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg">
<path d="M5 0C2.239 0 0 2.295 0 5.127 0 7.392 1.433 9.313 3.42 9.99c.25.048.341-.111.341-.247l-.007-.954c-1.39.31-1.684-.605-1.684-.605-.228-.592-.555-.75-.555-.75-.454-.318.034-.312.034-.312.502.036.766.528.766.528.446.784 1.17.558 1.455.427.045-.332.175-.558.318-.686-1.11-.13-2.278-.57-2.278-2.534 0-.56.195-1.017.515-1.376-.052-.129-.223-.65.048-1.356 0 0 .42-.138 1.376.525.398-.114.826-.17 1.251-.173.425.002.853.06 1.253.173.954-.663 1.373-.525 1.373-.525.272.706.101 1.227.05 1.356.32.36.514.817.514 1.376 0 1.97-1.17 2.403-2.283 2.53.18.16.339.471.339.95 0 .686-.006 1.238-.006 1.406 0 .137.09.297.343.247C8.57 9.31 10 7.39 10 5.127 10 2.295 7.761 0 5 0z" />
</svg>

After

Width:  |  Height:  |  Size: 743 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="18">
<path d="M18.333 3.6V1.8h-1.666V0h-5v1.8H8.333V0h-5v1.8H1.667v1.8H0V9h1.667v1.8h1.666v1.8H5v1.8h1.667v1.8h1.666V18h3.334v-1.8h1.666v-1.8H15v-1.8h1.667v-1.8h1.666V9H20V3.6z"/>
</svg>

After

Width:  |  Height:  |  Size: 250 B