From 16dff49e46933e1bae5ee02d94e4e55951dd3aa0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 19 Sep 2019 12:27:02 +0800 Subject: [PATCH] :lipstick: transfer footer to rc-footer --- package.json | 1 + site/theme/en-US.js | 4 +- site/theme/static/footer.less | 86 +--- site/theme/static/responsive.less | 25 -- site/theme/template/Layout/Footer.jsx | 596 ++++++++++++-------------- site/theme/zh-CN.js | 4 +- 6 files changed, 291 insertions(+), 425 deletions(-) diff --git a/package.json b/package.json index 13b3294026ca..4cad7fde62e8 100644 --- a/package.json +++ b/package.json @@ -201,6 +201,7 @@ "prettier": "^1.17.1", "pretty-quick": "^1.11.0", "querystring": "^0.2.0", + "rc-footer": "^0.2.3", "rc-queue-anim": "^1.6.12", "rc-scroll-anim": "^2.5.8", "rc-tween-one": "^2.4.1", diff --git a/site/theme/en-US.js b/site/theme/en-US.js index ba9ca7fb6a0d..ff9574256988 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -76,8 +76,8 @@ module.exports = { 'app.footer.feedback': 'Feedback', 'app.footer.stackoverflow': 'StackOverflow', 'app.footer.segmentfault': 'SegmentFault', - 'app.footer.discuss-en': 'Chat Room (English)', - 'app.footer.discuss-cn': 'Chat Room (中文)', + 'app.footer.discuss-en': 'Chat Room 🇺🇸', + 'app.footer.discuss-cn': 'Chat Room 🇨🇳', 'app.footer.bug-report': 'Bug Report', 'app.footer.issues': 'Issues', 'app.footer.version': 'Version: ', diff --git a/site/theme/static/footer.less b/site/theme/static/footer.less index 5b394325379a..d68893a57894 100644 --- a/site/theme/static/footer.less +++ b/site/theme/static/footer.less @@ -1,86 +1,2 @@ +@import '~rc-footer/assets/index.css'; @import './colors'; - -@padding-space: 40px; - -footer { - position: relative; - z-index: 9; - clear: both; - margin-left: -1px; - color: rgba(255, 255, 255, 0.4); - font-size: 14px; - background-color: #000; - - .footer-wrap { - position: relative; - padding: 60px @padding-space; - text-align: center; - border-bottom: 1px solid rgba(255, 255, 255, 0.25); - - .footer-center { - display: inline-block; - text-align: left; - - > h2 { - position: relative; - margin: 0 auto 24px; - font-weight: 500; - font-size: 16px; - - > .title-icon { - width: 27px; - margin-right: 16px; - } - > .anticon { - position: absolute; - top: 3px; - left: -22px; - color: #aaa; - font-size: 16px; - } - } - > div { - margin: 12px 0; - - > span { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - } - } - } - } - - .bottom-bar { - margin: 0; - padding: 16px @padding-space; - overflow: hidden; - font-size: 16px; - font-family: Avenir, @font-family, sans-serif; - line-height: 32px; - text-align: center; - - a { - margin-left: 4px; - color: rgba(255, 255, 255, 0.65); - &:hover { - color: #fff; - } - } - .translate-button { - text-align: left; - } - .heart { - color: #f73f51; - font-size: 22px; - } - } - a { - color: rgba(255, 255, 255, 0.9); - } - h2 { - color: rgba(255, 255, 255, 1); - & > span { - color: rgba(255, 255, 255, 1); - } - } -} diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less index 3a37636ee1ad..3328a60ad96a 100644 --- a/site/theme/static/responsive.less +++ b/site/theme/static/responsive.less @@ -151,31 +151,6 @@ border-radius: 0; } - #footer { - text-align: center; - .footer-wrap { - padding: 40px; - .ant-row { - padding: 0; - > div { - &:nth-child(2), - &:nth-child(4) { - display: none; - } - a { - font-weight: 300; - } - } - } - } - .footer-center { - text-align: center; - } - h2 { - margin-top: 16px; - } - } - .prev-next-nav { width: ~'calc(100% - 32px)'; margin-left: 16px; diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx index 08cc8f4410c2..f9361e78a21b 100644 --- a/site/theme/template/Layout/Footer.jsx +++ b/site/theme/template/Layout/Footer.jsx @@ -2,19 +2,16 @@ import React from 'react'; import { FormattedMessage, injectIntl } from 'react-intl'; import { Modal, message, Row, Col, Icon } from 'antd'; import { Link } from 'bisheng/router'; +import RcFooter from 'rc-footer'; import { isLocalStorageNameSupported, loadScript, getLocalizedPathname } from '../utils'; import ColorPicker from '../Color/ColorPicker'; class Footer extends React.Component { - constructor(props) { - super(props); + lessLoaded = false; - this.lessLoaded = false; - - this.state = { - color: '#1890ff', - }; - } + state = { + color: '#1890ff', + }; componentDidMount() { // for some iOS @@ -33,6 +30,275 @@ class Footer extends React.Component { } } + getColumns() { + const { intl = {} } = this.props; + const { color } = this.state; + const isZhCN = intl.locale === 'zh-CN'; + return [ + { + title: , + items: [ + { + title: 'Ant Design Pro', + url: 'https://pro.ant.design', + openExternal: true, + }, + { + title: 'Ant Design Mobile', + url: 'https://mobile.ant.design', + openExternal: true, + }, + { + title: 'NG-ZORRO', + description: 'Ant Design of Angular', + url: 'https://ng.ant.design', + openExternal: true, + }, + { + title: 'NG-ZORRO-MOBILE', + url: 'https://ng.mobile.ant.design', + openExternal: true, + }, + { + title: 'Ant Design Vue', + url: 'https://vue.ant.design', + openExternal: true, + }, + { + title: 'Ant Design Landing', + description: , + url: 'https://landing.ant.design', + openExternal: true, + }, + { + title: 'Scaffolds', + description: , + url: 'https://scaffolds.ant.design', + openExternal: true, + }, + { + title: 'Umi', + description: , + url: 'https://umijs.org', + openExternal: true, + }, + { + title: 'Dva', + description: , + url: 'https://dvajs.com', + openExternal: true, + }, + { + title: 'Ant Motion', + description: , + url: 'https://motion.ant.design', + openExternal: true, + }, + { + title: , + url: getLocalizedPathname('/docs/spec/download', isZhCN), + }, + { + title: , + url: 'https://ant-design.gitee.io/', + }, + ], + }, + { + title: , + items: [ + { + icon: , + title: , + url: 'https://github.com/websemantics/awesome-ant-design', + openExternal: true, + }, + { + icon: , + title: 'Medium', + url: 'http://medium.com/ant-design/', + openExternal: true, + }, + { + icon: , + title: 'Twitter', + url: 'http://twitter.com/antdesignui', + openExternal: true, + }, + { + icon: , + title: , + url: 'http://zhuanlan.zhihu.com/antdesign', + openExternal: true, + }, + { + icon: , + title: , + url: 'http://zhuanlan.zhihu.com/xtech', + openExternal: true, + }, + { + icon: , + title: 'SEE Conf', + description: , + url: 'http://zhuanlan.zhihu.com/xtech', + openExternal: true, + }, + { + icon: , + title: , + url: getLocalizedPathname('/docs/spec/work-with-us', isZhCN), + }, + ], + }, + { + title: , + items: [ + { + icon: , + title: 'GitHub', + url: 'https://github.com/ant-design/ant-design', + openExternal: true, + }, + { + icon: , + title: , + url: getLocalizedPathname('/changelog', isZhCN), + }, + { + icon: , + title: , + url: getLocalizedPathname('/docs/react/faq', isZhCN), + }, + { + icon: , + title: , + url: 'https://www.yuque.com/ant-design/course', + openExternal: true, + }, + { + icon: , + title: , + url: 'https://gitter.im/ant-design/ant-design', + openExternal: true, + }, + { + icon: , + title: , + url: 'https://gitter.im/ant-design/ant-design-english', + openExternal: true, + }, + { + icon: , + title: , + url: 'https://new-issue.ant.design/', + openExternal: true, + }, + { + icon: , + title: , + url: 'https://github.com/ant-design/ant-design/issues', + openExternal: true, + }, + { + icon: , + title: , + url: 'http://stackoverflow.com/questions/tagged/antd', + openExternal: true, + }, + { + icon: , + title: , + url: 'https://segmentfault.com/t/antd', + openExternal: true, + }, + ], + }, + { + icon: ( + AFX Cloud + ), + title: , + items: [ + { + icon: ( + yuque + ), + title: '语雀', + url: 'https://yuque.com', + description: '知识创作与分享工具', + openExternal: true, + }, + { + icon: ( + yunfengdie + ), + title: '云凤蝶', + url: 'https://yunfengdie.com', + description: '中台建站平台', + openExternal: true, + }, + { + icon: ( + AntV + ), + title: 'AntV', + url: 'https://antv.alipay.com', + description: '数据可视化', + openExternal: true, + }, + { + icon: ( + Egg + ), + title: 'Egg', + url: 'https://eggjs.org', + description: '企业级 Node 开发框架', + openExternal: true, + }, + { + icon: ( + kitchen + ), + title: 'Kitchen', + description: , + url: 'https://kitchen.alipay.com', + openExternal: true, + }, + { + icon: ( + xtech + ), + title: '蚂蚁体验科技', + url: 'https://xtech.antfin.com/', + openExternal: true, + }, + ], + }, + ]; + } + handleColorChange = color => { const changeColor = () => { const { @@ -99,310 +365,18 @@ class Footer extends React.Component { } render() { - const { intl = {} } = this.props; - const { color } = this.state; - const isZhCN = intl.locale === 'zh-CN'; return ( - + + Made with ❤ by{' '} + + + + + } + /> ); } } diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js index aa22b6b20b7e..c38749949e7f 100644 --- a/site/theme/zh-CN.js +++ b/site/theme/zh-CN.js @@ -73,8 +73,8 @@ module.exports = { 'app.footer.feedback': '反馈和建议', 'app.footer.stackoverflow': 'StackOverflow', 'app.footer.segmentfault': 'SegmentFault', - 'app.footer.discuss-en': '在线讨论 (English)', - 'app.footer.discuss-cn': '在线讨论 (中文)', + 'app.footer.discuss-en': '在线讨论 🇺🇸', + 'app.footer.discuss-cn': '在线讨论 🇨🇳', 'app.footer.bug-report': '报告 Bug', 'app.footer.issues': '讨论列表', 'app.footer.version': '文档版本：',