From 2b90ab8464af9b53880123dc3a69a07f61bc65a9 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 23 Sep 2016 15:35:17 +0800 Subject: [PATCH 1/7] docs: fix typo, ref: #3146 --- docs/react/practical-projects.en-US.md | 2 +- docs/react/practical-projects.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/practical-projects.en-US.md b/docs/react/practical-projects.en-US.md index 0401f48bae..a1b0d83c05 100644 --- a/docs/react/practical-projects.en-US.md +++ b/docs/react/practical-projects.en-US.md @@ -58,7 +58,7 @@ $ npm install antd babel-plugin-import --save Edit `webpack.config.js` to integrate `babel-plugin-import`. ```diff -+ webpackConfig.babel.plugins.push(['antd', { ++ webpackConfig.babel.plugins.push(['import', { + libraryName: 'antd', + style: 'css', + }]); diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index d3be5ddf99..c5e5ff5961 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -58,7 +58,7 @@ $ npm install antd babel-plugin-import --save 编辑 `webpack.config.js`，使 `babel-plugin-import` 插件生效。 ```diff -+ webpackConfig.babel.plugins.push(['antd', { ++ webpackConfig.babel.plugins.push(['import', { + libraryName: 'antd', + style: 'css', + }]); From feb7a88c09cf7c9f0933005cecf7685668bd5b64 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 26 Sep 2016 10:13:15 +0800 Subject: [PATCH 2/7] fix: should generate style/css for BackTop, close: #3153 --- components/back-top/style/{index.js => index.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename components/back-top/style/{index.js => index.tsx} (100%) diff --git a/components/back-top/style/index.js b/components/back-top/style/index.tsx similarity index 100% rename from components/back-top/style/index.js rename to components/back-top/style/index.tsx From 4663995f69eea14ea001c3c4161da059a0abec78 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 26 Sep 2016 10:24:18 +0800 Subject: [PATCH 3/7] fix: should follow the targetKeys' order, close: #3152 --- components/transfer/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index fed0f54641..605bfe9c8a 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -121,7 +121,13 @@ export default class Transfer extends React.Component { } const leftDataSource = dataSource.filter(({ key }) => targetKeys.indexOf(key) === -1); - const rightDataSource = dataSource.filter(({ key }) => targetKeys.indexOf(key) >= 0); + const rightDataSource = []; + targetKeys.forEach((targetKey) => { + const targetItem = dataSource.filter(record => record.key === targetKey)[0]; + if (targetItem) { + rightDataSource.push(targetItem); + } + }); this.splitedDataSource = { leftDataSource, From 0375f104a3fed81f77e2150728d1a7ef040064c0 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 26 Sep 2016 10:26:04 +0800 Subject: [PATCH 4/7] chore: fix warning message --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index cd7a83566a..c672262baa 100644 --- a/index.js +++ b/index.js @@ -29,6 +29,6 @@ req.keys().forEach((mod) => { if (process.env.NODE_ENV !== 'production') { if (typeof console !== 'undefined' && console.warn) { console.warn(`You are using prebuilt antd, -please use https://github.com/ant-design/babel-plugin-import to reduce app bundle size.`); +please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.`); } } From 4bf80a2e26f6083be8f0d67f81cddf53e546fcac Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 26 Sep 2016 10:26:58 +0800 Subject: [PATCH 5/7] bump 2.0.0-beta.12 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c175a5cb08..432a5ccacd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "2.0.0-beta.11", + "version": "2.0.0-beta.12", "title": "Ant Design", "description": "An enterprise-class UI design language and React-based implementation", "homepage": "http://ant.design/", From b43d40d47b512afb186970a7b0c2d3d92c99fb53 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 26 Sep 2016 11:08:27 +0800 Subject: [PATCH 6/7] docs: translate category for specification --- docs/spec/alignment.en-US.md | 2 +- docs/spec/colors.md | 4 +++- docs/spec/contrast.en-US.md | 2 +- docs/spec/direct.md | 4 +++- docs/spec/font.md | 4 +++- docs/spec/invitation.en-US.md | 2 +- docs/spec/layout/index.md | 4 +++- docs/spec/lightweight.en-US.md | 2 +- docs/spec/motion.md | 4 +++- docs/spec/principle.en-US.md | 2 +- docs/spec/proximity.en-US.md | 2 +- docs/spec/reaction.en-US.md | 2 +- docs/spec/repetition.en-US.md | 2 +- docs/spec/stay.en-US.md | 2 +- docs/spec/transition.en-US.md | 2 +- docs/spec/typography.md | 4 +++- site/theme/index.js | 4 ++-- site/theme/template/Content/MainContent.jsx | 8 ++++++-- site/theme/template/utils.jsx | 4 ++-- 19 files changed, 38 insertions(+), 22 deletions(-) diff --git a/docs/spec/alignment.en-US.md b/docs/spec/alignment.en-US.md index ba10bf01ec..53c79e46bf 100644 --- a/docs/spec/alignment.en-US.md +++ b/docs/spec/alignment.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 2 title: Alignment --- diff --git a/docs/spec/colors.md b/docs/spec/colors.md index eb49f722d9..2496b311fe 100644 --- a/docs/spec/colors.md +++ b/docs/spec/colors.md @@ -1,5 +1,7 @@ --- -category: 设计基础 +category: + zh-CN: 设计基础 + en-US: Design Fundamental order: 2 title: zh-CN: 色彩 diff --git a/docs/spec/contrast.en-US.md b/docs/spec/contrast.en-US.md index 3051d88249..2633f737de 100644 --- a/docs/spec/contrast.en-US.md +++ b/docs/spec/contrast.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 3 title: Contrast --- diff --git a/docs/spec/direct.md b/docs/spec/direct.md index a3fa91a951..f009d0bb46 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -1,5 +1,7 @@ --- -category: 十大原则 +category: + zh-CN: 十大原则 + en-US: Principles order: 5 title: zh-CN: 直截了当 diff --git a/docs/spec/font.md b/docs/spec/font.md index b74ec5f237..bb7974998f 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -1,5 +1,7 @@ --- -category: 设计基础 +category: + zh-CN: 设计基础 + en-US: Design Fundamental order: 0 title: zh-CN: 字体 diff --git a/docs/spec/invitation.en-US.md b/docs/spec/invitation.en-US.md index 093bbc9957..85b8f0cdf3 100644 --- a/docs/spec/invitation.en-US.md +++ b/docs/spec/invitation.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 8 title: Provide an Invitation --- diff --git a/docs/spec/layout/index.md b/docs/spec/layout/index.md index c2215c30d9..dd88f055c1 100644 --- a/docs/spec/layout/index.md +++ b/docs/spec/layout/index.md @@ -1,6 +1,8 @@ --- template: component -category: 设计基础 +category: + zh-CN: 设计基础 + en-US: Design Fundamental order: 4 cols: 1 title: diff --git a/docs/spec/lightweight.en-US.md b/docs/spec/lightweight.en-US.md index 223a89a15e..e2430427ac 100644 --- a/docs/spec/lightweight.en-US.md +++ b/docs/spec/lightweight.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 6 title: Keep it Lightweight --- diff --git a/docs/spec/motion.md b/docs/spec/motion.md index 78df289144..5fa06ad2fa 100644 --- a/docs/spec/motion.md +++ b/docs/spec/motion.md @@ -1,5 +1,7 @@ --- -category: 设计基础 +category: + zh-CN: 设计基础 + en-US: Design Fundamental order: 5 title: zh-CN: 组件动画 diff --git a/docs/spec/principle.en-US.md b/docs/spec/principle.en-US.md index 5330850b5a..ca2856c94f 100644 --- a/docs/spec/principle.en-US.md +++ b/docs/spec/principle.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 0 title: Introduction --- diff --git a/docs/spec/proximity.en-US.md b/docs/spec/proximity.en-US.md index f8929117c1..0d5173d48e 100644 --- a/docs/spec/proximity.en-US.md +++ b/docs/spec/proximity.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 1 title: Proximity --- diff --git a/docs/spec/reaction.en-US.md b/docs/spec/reaction.en-US.md index f7a44bdc50..00e781d5dd 100644 --- a/docs/spec/reaction.en-US.md +++ b/docs/spec/reaction.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 10 title: React Immediately --- diff --git a/docs/spec/repetition.en-US.md b/docs/spec/repetition.en-US.md index 56283f09cb..cbcc9e4dbb 100644 --- a/docs/spec/repetition.en-US.md +++ b/docs/spec/repetition.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 4 title: Repetition --- diff --git a/docs/spec/stay.en-US.md b/docs/spec/stay.en-US.md index be8105a2bb..ef03da06b0 100644 --- a/docs/spec/stay.en-US.md +++ b/docs/spec/stay.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 6 title: Stay on the Page --- diff --git a/docs/spec/transition.en-US.md b/docs/spec/transition.en-US.md index dc7f6259ac..16299eae81 100644 --- a/docs/spec/transition.en-US.md +++ b/docs/spec/transition.en-US.md @@ -1,5 +1,5 @@ --- -category: 十大原则 +category: Principles order: 9 title: Use Transition --- diff --git a/docs/spec/typography.md b/docs/spec/typography.md index f6ea94f2a7..c9fa6d58bc 100644 --- a/docs/spec/typography.md +++ b/docs/spec/typography.md @@ -1,5 +1,7 @@ --- -category: 设计基础 +category: + zh-CN: 设计基础 + en-US: Design Fundamental order: 1 title: zh-CN: 排版 diff --git a/site/theme/index.js b/site/theme/index.js index 66de73d90c..696a19c3fb 100644 --- a/site/theme/index.js +++ b/site/theme/index.js @@ -2,10 +2,10 @@ const contentTmpl = './template/Content/index'; module.exports = { categoryOrder: { - 组件: 0, 十大原则: 0, + Principles: 0, 设计基础: 1, - 动画: 2, + 'Design Fundamental': 1, }, typeOrder: { Basic: 0, diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index 475fdc4704..c17a67c318 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -31,7 +31,9 @@ export default class MainContent extends React.Component { } if (prevModule !== this.currentModule) { const moduleData = this.getModuleData(nextProps); - const shouldOpenKeys = Object.keys(utils.getMenuItems(moduleData)); + const shouldOpenKeys = Object.keys(utils.getMenuItems( + moduleData, this.context.intl.locale + )); this.setState({ openKeys: shouldOpenKeys }); } } @@ -128,7 +130,9 @@ export default class MainContent extends React.Component { getMenuItems() { const moduleData = this.getModuleData(this.props); - const menuItems = utils.getMenuItems(moduleData); + const menuItems = utils.getMenuItems( + moduleData, this.context.intl.locale + ); const topLevel = this.generateSubMenuItems(menuItems.topLevel); const subMenu = Object.keys(menuItems).filter(this.isNotTopLevel) .sort((a, b) => config.categoryOrder[a] - config.categoryOrder[b]) diff --git a/site/theme/template/utils.jsx b/site/theme/template/utils.jsx index 09945ce487..e4c40842b8 100644 --- a/site/theme/template/utils.jsx +++ b/site/theme/template/utils.jsx @@ -1,10 +1,10 @@ -export function getMenuItems(moduleData) { +export function getMenuItems(moduleData, locale) { const menuMeta = moduleData.map(item => item.meta); const menuItems = {}; menuMeta.sort( (a, b) => (a.order || 0) - (b.order || 0) ).forEach((meta) => { - const category = meta.category || 'topLevel'; + const category = (meta.category && meta.category[locale]) || meta.category || 'topLevel'; if (!menuItems[category]) { menuItems[category] = {}; } From d68c3c655c7b49f3b306829e128ce3eddb6306e0 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 26 Sep 2016 12:12:44 +0800 Subject: [PATCH 7/7] site: update menu --- site/theme/static/responsive.less | 58 ++++++------- site/theme/template/Layout/Header.jsx | 120 ++++++++++++-------------- 2 files changed, 79 insertions(+), 99 deletions(-) diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less index 0f17753ff9..acbf9542ef 100644 --- a/site/theme/static/responsive.less +++ b/site/theme/static/responsive.less @@ -1,3 +1,14 @@ +.nav-phone-icon { + display: none; + position: absolute; + right: 30px; + top: 32px; + z-index: 1; + width: 16px; + height: 50px; + cursor: pointer; +} + @media only screen and (min-width: 320px) and (max-width: 1200px) { #search-box { display: none; @@ -42,34 +53,23 @@ text-align: center; } - .nav { - position: fixed; - z-index: 1000; - top: 0; - left: 0; - background: #fff; - line-height: 60px; - margin-right: 0; - width: 50%; - height: 100%; - box-shadow: 10px 0 12px rgba(0,0,0,0.1); - transform: translateX(-100%); - overflow-x: hidden; - overflow-y: auto; - opacity: 0; - transition: transform .3s, opacity .3s; - text-align: center; - - #lang { - margin: 0; - float: none; - color: #666; - } + #nav, #lang { + float: none; + } + button#lang { + display: block; + margin: 29px auto 16px; + color: #666; + border-color: #666; } - .nav.nav-show { - transform: translateX(0); - opacity: 1; + .nav { + .ant-popover-inner-content { + padding: 0; + } + .ant-menu-item-selected { + border-right: 1px solid #e9e9e9; + } } ul#nav, @@ -93,12 +93,6 @@ .nav-phone-icon { display: block; - width: 16px; - height: 50px; - position: absolute; - left: 30px; - top: 32px; - cursor: pointer; } .nav-phone-icon:before { diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx index c211b31d99..a578d3135c 100644 --- a/site/theme/template/Layout/Header.jsx +++ b/site/theme/template/Layout/Header.jsx @@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl'; import enquire from 'enquire.js'; import debounce from 'lodash.debounce'; import classNames from 'classnames'; -import { Select, Menu, Row, Col, Icon, Button } from 'antd'; +import { Select, Menu, Row, Col, Icon, Button, Popover } from 'antd'; const Option = Select.Option; @@ -27,17 +27,7 @@ export default class Header extends React.Component { } }, 100); - this.onDocumentClick = (e) => { - if (document.querySelector('#header .nav').contains(e.target)) { - return; - } - this.setState({ - menuVisible: false, - }); - }; - this.state = { - menuVisible: false, menuMode: 'horizontal', isFirstFrame: true, }; @@ -46,9 +36,6 @@ export default class Header extends React.Component { componentDidMount() { window.addEventListener('scroll', this.onScroll); - document.addEventListener('click', this.onDocumentClick); - document.addEventListener('touchstart', this.onDocumentClick); - enquire.register('only screen and (min-width: 320px) and (max-width: 940px)', { match: () => { this.setState({ menuMode: 'inline' }); @@ -61,16 +48,6 @@ export default class Header extends React.Component { componentWillUnmount() { window.removeEventListener('scroll', this.onScroll); - document.removeEventListener('click', this.onDocumentClick); - document.removeEventListener('touchstart', this.onDocumentClick); - } - - handleMenuIconClick = (e) => { - e.stopPropagation(); - e.nativeEvent.stopImmediatePropagation(); - this.setState({ - menuVisible: true, - }); } handleSearch = (value) => { @@ -121,24 +98,67 @@ export default class Header extends React.Component { 'home-nav-white': !this.state.isFirstFrame, }); + const menuMode = this.state.menuMode; + const menu = [ + , + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + , + ]; + const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search...'; return (