From da610e562f425307de25ca1ffec6163b5e360f63 Mon Sep 17 00:00:00 2001 From: Meeeeow Date: Sat, 3 Feb 2018 19:39:01 +0800 Subject: [PATCH] refactor: re-design footer --- src/webui/src/components/Footer/earth.svg | 1 + .../Footer/flags/brazil-1f1e7-1f1f7.svg | 2 + .../Footer/flags/china-1f1e8-1f1f3.svg | 2 + .../Footer/flags/india-1f1ee-1f1f3.svg | 2 + .../Footer/flags/nicaragua-1f1f3-1f1ee.svg | 2 + .../Footer/flags/pakistan-1f1f5-1f1f0.svg | 2 + .../Footer/flags/spain-1f1ea-1f1f8.svg | 2 + src/webui/src/components/Footer/footer.scss | 45 +++++++++++-- src/webui/src/components/Footer/index.js | 64 +++++++++++++------ src/webui/template/index.html | 1 - 10 files changed, 100 insertions(+), 23 deletions(-) create mode 100644 src/webui/src/components/Footer/earth.svg create mode 100644 src/webui/src/components/Footer/flags/brazil-1f1e7-1f1f7.svg create mode 100644 src/webui/src/components/Footer/flags/china-1f1e8-1f1f3.svg create mode 100644 src/webui/src/components/Footer/flags/india-1f1ee-1f1f3.svg create mode 100644 src/webui/src/components/Footer/flags/nicaragua-1f1f3-1f1ee.svg create mode 100644 src/webui/src/components/Footer/flags/pakistan-1f1f5-1f1f0.svg create mode 100644 src/webui/src/components/Footer/flags/spain-1f1ea-1f1f8.svg diff --git a/src/webui/src/components/Footer/earth.svg b/src/webui/src/components/Footer/earth.svg new file mode 100644 index 000000000..609dd5c93 --- /dev/null +++ b/src/webui/src/components/Footer/earth.svg @@ -0,0 +1 @@ +image/svg+xml diff --git a/src/webui/src/components/Footer/flags/brazil-1f1e7-1f1f7.svg b/src/webui/src/components/Footer/flags/brazil-1f1e7-1f1f7.svg new file mode 100644 index 000000000..9194735ef --- /dev/null +++ b/src/webui/src/components/Footer/flags/brazil-1f1e7-1f1f7.svg @@ -0,0 +1,2 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/webui/src/components/Footer/flags/china-1f1e8-1f1f3.svg b/src/webui/src/components/Footer/flags/china-1f1e8-1f1f3.svg new file mode 100644 index 000000000..aaf4dd997 --- /dev/null +++ b/src/webui/src/components/Footer/flags/china-1f1e8-1f1f3.svg @@ -0,0 +1,2 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/webui/src/components/Footer/flags/india-1f1ee-1f1f3.svg b/src/webui/src/components/Footer/flags/india-1f1ee-1f1f3.svg new file mode 100644 index 000000000..fc57a59c3 --- /dev/null +++ b/src/webui/src/components/Footer/flags/india-1f1ee-1f1f3.svg @@ -0,0 +1,2 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/webui/src/components/Footer/flags/nicaragua-1f1f3-1f1ee.svg b/src/webui/src/components/Footer/flags/nicaragua-1f1f3-1f1ee.svg new file mode 100644 index 000000000..aaee63198 --- /dev/null +++ b/src/webui/src/components/Footer/flags/nicaragua-1f1f3-1f1ee.svg @@ -0,0 +1,2 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/webui/src/components/Footer/flags/pakistan-1f1f5-1f1f0.svg b/src/webui/src/components/Footer/flags/pakistan-1f1f5-1f1f0.svg new file mode 100644 index 000000000..4a319ed59 --- /dev/null +++ b/src/webui/src/components/Footer/flags/pakistan-1f1f5-1f1f0.svg @@ -0,0 +1,2 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/webui/src/components/Footer/flags/spain-1f1ea-1f1f8.svg b/src/webui/src/components/Footer/flags/spain-1f1ea-1f1f8.svg new file mode 100644 index 000000000..a6a0c7c5d --- /dev/null +++ b/src/webui/src/components/Footer/flags/spain-1f1ea-1f1f8.svg @@ -0,0 +1,2 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/webui/src/components/Footer/footer.scss b/src/webui/src/components/Footer/footer.scss index e6283e550..de6646476 100644 --- a/src/webui/src/components/Footer/footer.scss +++ b/src/webui/src/components/Footer/footer.scss @@ -10,7 +10,6 @@ footer.footer { margin-top: 0; padding: 20px 0; font-size: 14px; - line-height: 18px; height: 18px; color: #999; @@ -20,14 +19,52 @@ footer.footer { vertical-align: middle; } + .tooltip { + margin-left: 5px; + position: relative; + margin-top: -2px; + height: 20px; + background: #d3dddd; + padding: 1px 4px; + border-radius: 2px; + transform: scaleX(0); + transition: transform 0.3s cubic-bezier(.12,.76,.14,.99); + transform-origin: left; + &:before { + position: absolute; + top: 3px; + left: -7px; + display: block; + content: ''; + width: 7px; + height: 15px; + background: #d3dddd; + background-image: linear-gradient(45deg, white, white 30%, transparent 30%), linear-gradient(-225deg, white, white 30%, transparent 30%); + } + + + span:not(:first-child) { + margin-left: 8px; + } + } + + // Footer Hover + &.showAuthorsGeographic .tooltip, + &:hover .tooltip { + display: block; + transform: scaleX(1); + } + + .earth { + margin-left: 8px; + margin-right: 8px; + } + :global { .emoji { width: 18px; height: 18px; } - [data-type="flags"] .emoji { - margin-left: 8px; - } } .right { diff --git a/src/webui/src/components/Footer/index.js b/src/webui/src/components/Footer/index.js index cb07b1660..1da348d50 100644 --- a/src/webui/src/components/Footer/index.js +++ b/src/webui/src/components/Footer/index.js @@ -2,33 +2,61 @@ import React from 'react'; import classes from './footer.scss'; import logo from './logo.svg'; +import earth from './earth.svg'; + +// Vectors from Twitter Emoji (Open Source) +import brazilFlag from './flags/brazil-1f1e7-1f1f7.svg'; +import chinaFlag from './flags/china-1f1e8-1f1f3.svg'; +import indiaFlag from './flags/india-1f1ee-1f1f3.svg'; +import nicaraguaFlag from './flags/nicaragua-1f1f3-1f1ee.svg'; +import pakistanFlag from './flags/pakistan-1f1f5-1f1f0.svg'; +import spainFlag from './flags/spain-1f1ea-1f1f8.svg'; export default class Footer extends React.Component { - componentDidMount() { - // Scripts inserted at top of `template/index.html` - if (typeof window.twemoji === 'object' && typeof window.twemoji.parse === 'function') { - window.twemoji.parse(document.getElementById('global-footer'), { - // JSDeliver is the fattest open source cdn in all region, see https://www.jsdelivr.com/network - base: 'https://cdn.jsdelivr.net/npm/twemoji@2.5.0/2/', - ext: '.svg', - size: 'svg' - }); - } + constructor(props) { + super(props); + this.handleEarthIconClick = this.handleEarthIconClick.bind(this); + this.state = { + showAuthorsGeographic: false + }; + } + + handleEarthIconClick() { + this.setState({ + showAuthorsGeographic: true + }); } render() { return (
-