From cd96b956512eed3fdf961377dc9f0bfb7b5bf1d3 Mon Sep 17 00:00:00 2001 From: Meeeeow Date: Mon, 29 Jan 2018 01:28:03 +0800 Subject: [PATCH 1/4] feat: new footer, close #486 --- .eslintrc | 3 ++ src/webui/src/components/Footer/footer.scss | 41 +++++++++++++++++ src/webui/src/components/Footer/index.js | 44 +++++++++++++++++++ src/webui/src/components/Footer/logo.svg | 1 + .../components/PackageList/packageList.scss | 4 ++ src/webui/src/router.js | 4 +- src/webui/src/styles/global.scss | 6 +++ src/webui/template/index.html | 1 + tools/getPackageVersion.js | 9 ++++ tools/webpack.config.js | 2 +- tools/webpack.dev.config.babel.js | 2 + tools/webpack.prod.config.babel.js | 2 + 12 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 src/webui/src/components/Footer/footer.scss create mode 100644 src/webui/src/components/Footer/index.js create mode 100644 src/webui/src/components/Footer/logo.svg create mode 100644 tools/getPackageVersion.js diff --git a/.eslintrc b/.eslintrc index 9e1b57f9a..39a03d571 100644 --- a/.eslintrc +++ b/.eslintrc @@ -26,6 +26,9 @@ "es6": true, "jest": true }, + "globals": { + "__APP_VERSION__": true + }, "rules": { "no-tabs": 0, "keyword-spacing": 0, diff --git a/src/webui/src/components/Footer/footer.scss b/src/webui/src/components/Footer/footer.scss new file mode 100644 index 000000000..e6283e550 --- /dev/null +++ b/src/webui/src/components/Footer/footer.scss @@ -0,0 +1,41 @@ +@import '../../styles/variable'; + +.wrap { + margin-top: auto; + border-top: 1px solid $border-color; + background: #f9f9f9; +} +footer.footer { + display: flex; + margin-top: 0; + padding: 20px 0; + font-size: 14px; + line-height: 18px; + height: 18px; + color: #999; + + span { + display: inline-block; + height: 18px; + vertical-align: middle; + } + + :global { + .emoji { + width: 18px; + height: 18px; + } + [data-type="flags"] .emoji { + margin-left: 8px; + } + } + + .right { + margin-left: auto; + } + .logo { + vertical-align: top; + height: 18px; + width: 20px; + } +} diff --git a/src/webui/src/components/Footer/index.js b/src/webui/src/components/Footer/index.js new file mode 100644 index 000000000..cb07b1660 --- /dev/null +++ b/src/webui/src/components/Footer/index.js @@ -0,0 +1,44 @@ +import React from 'react'; + +import classes from './footer.scss'; +import logo from './logo.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' + }); + } + } + + render() { + return ( +
+
+ Made with  + ❤ +  in + 🇧🇷 + 🇨🇳 + 🇮🇳 + 🇳🇮 + 🇵🇰 + 🇪🇸 + {/* Countries are order by alphabets */} + +
+ Powered by  + Verdaccio +  /  + {__APP_VERSION__} +
+
+
+ ); + } +} diff --git a/src/webui/src/components/Footer/logo.svg b/src/webui/src/components/Footer/logo.svg new file mode 100644 index 000000000..80985c9f3 --- /dev/null +++ b/src/webui/src/components/Footer/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/webui/src/components/PackageList/packageList.scss b/src/webui/src/components/PackageList/packageList.scss index 899403208..2bf00468d 100644 --- a/src/webui/src/components/PackageList/packageList.scss +++ b/src/webui/src/components/PackageList/packageList.scss @@ -5,6 +5,10 @@ li { border-bottom: 1px solid #e4e8f1; list-style: none; + + &:last-child { + border-bottom: none; + } } .listTitle { diff --git a/src/webui/src/router.js b/src/webui/src/router.js index e918f6f30..c732eb154 100644 --- a/src/webui/src/router.js +++ b/src/webui/src/router.js @@ -4,11 +4,12 @@ import {HashRouter as Router, Route, Switch} from 'react-router-dom'; import Header from './components/Header'; import Home from './modules/home'; import Detail from './modules/detail'; +import Footer from './components/Footer'; const RouterApp = () => { return ( -
+
@@ -17,6 +18,7 @@ const RouterApp = () => {
+
); diff --git a/src/webui/src/styles/global.scss b/src/webui/src/styles/global.scss index 54bfd514e..c5f8528f8 100644 --- a/src/webui/src/styles/global.scss +++ b/src/webui/src/styles/global.scss @@ -22,4 +22,10 @@ ul { margin-top: 0 !important; } } + + .page-full-height { + display: flex; + flex-direction: column; + min-height: 100vh; + } } diff --git a/src/webui/template/index.html b/src/webui/template/index.html index 02022ad79..96e85d88d 100644 --- a/src/webui/template/index.html +++ b/src/webui/template/index.html @@ -8,6 +8,7 @@ +
diff --git a/tools/getPackageVersion.js b/tools/getPackageVersion.js new file mode 100644 index 000000000..f54310430 --- /dev/null +++ b/tools/getPackageVersion.js @@ -0,0 +1,9 @@ +import fs from 'fs'; +import path from 'path'; + +export default function getPackageVersion() { + let packageJSON = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json'))); + + return packageJSON.version; +} + diff --git a/tools/webpack.config.js b/tools/webpack.config.js index 3c26eb27a..d656fd637 100644 --- a/tools/webpack.config.js +++ b/tools/webpack.config.js @@ -41,7 +41,7 @@ module.exports = { use: 'babel-loader', }, { - test: /\.(jpe?g|png|gif|svg)$/, + test: /\.(jpe?g|png|gif)$/, use: 'file-loader?name=[name].[ext]', }, { diff --git a/tools/webpack.dev.config.babel.js b/tools/webpack.dev.config.babel.js index 6b998e5d2..eaf871257 100644 --- a/tools/webpack.dev.config.babel.js +++ b/tools/webpack.dev.config.babel.js @@ -4,6 +4,7 @@ import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin'; import baseConfig from './webpack.config'; import env from '../src/config/env'; import StyleLintPlugin from 'stylelint-webpack-plugin'; +import getPackageVersion from './getPackageVersion'; export default { ...baseConfig, @@ -25,6 +26,7 @@ export default { new webpack.DefinePlugin({ '__DEBUG__': true, 'process.env.NODE_ENV': '"development"', + '__APP_VERSION__': `"${getPackageVersion()}"`, }), new HTMLWebpackPlugin({ title: 'Verdaccio', diff --git a/tools/webpack.prod.config.babel.js b/tools/webpack.prod.config.babel.js index 0da8d1d95..8d84a951c 100644 --- a/tools/webpack.prod.config.babel.js +++ b/tools/webpack.prod.config.babel.js @@ -5,6 +5,7 @@ const baseConfig = require('./webpack.config'); const env = require('../src/config/env'); const _ = require('lodash'); const merge = require('webpack-merge'); +import getPackageVersion from './getPackageVersion'; const prodConf = { entry: { @@ -19,6 +20,7 @@ const prodConf = { new webpack.DefinePlugin({ '__DEBUG__': false, 'process.env.NODE_ENV': '"production"', + '__APP_VERSION__': `"${getPackageVersion()}"`, }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, From da610e562f425307de25ca1ffec6163b5e360f63 Mon Sep 17 00:00:00 2001 From: Meeeeow Date: Sat, 3 Feb 2018 19:39:01 +0800 Subject: [PATCH 2/4] 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 (
-