site: fix collapse all button and import it, close ant-design#11113

shanika · Jul 1, 2018 · 5fe25d9 · 5fe25d9
1 parent a516358
commit 5fe25d9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/site/theme/en-US.js b/site/theme/en-US.js
@@ -17,6 +17,8 @@ module.exports = {
     'app.content.edit-page': 'Edit this page on GitHub!',
     'app.content.edit-demo': 'Edit this demo on GitHub!',
     'app.component.examples': 'Examples',
+    'app.component.examples.expand': 'Expand all code',
+    'app.component.examples.collpse': 'Collpse all code',
     'app.demo.copy': 'Copy code',
     'app.demo.copied': 'Copied!',
     'app.demo.codepen': 'Open in CodePen',

diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
@@ -23,16 +23,12 @@
   &-expand-trigger {
     cursor: pointer;
     font-size: 14px;
-    color: #9199ac;
-    margin-left: 5px;
+    color: #3b4357;
+    margin-left: 8px;
     opacity: .8;
     transition: all .3s;
     top: -2px;
     position: relative;
-
-    &-active {
-      color: #3b4357;
-    }
   }
 
   &-title {

diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import DocumentTitle from 'react-document-title';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { Row, Col, Icon, Affix } from 'antd';
+import { Row, Col, Icon, Affix, Tooltip } from 'antd';
 import { getChildren } from 'jsonml.js/lib/utils';
 import Demo from './Demo';
 import EditButton from './EditButton';
@@ -34,7 +34,7 @@ export default class ComponentDoc extends React.Component {
     const { content, meta } = doc;
     const { intl: { locale } } = this.context;
     const demos = Object.keys(props.demos).map(key => props.demos[key]);
-    const { expandAll: { expand } } = this.state;
+    const { expandAll } = this.state;
 
     const isSingleCol = meta.cols === 1;
     const leftChildren = [];
@@ -48,7 +48,7 @@ export default class ComponentDoc extends React.Component {
             {...demoData}
             key={demoData.meta.filename}
             utils={props.utils}
-            expand={expand}
+            expand={expandAll}
             location={location}
           />
         );
@@ -60,7 +60,7 @@ export default class ComponentDoc extends React.Component {
       });
     const expandTriggerClass = classNames({
       'code-box-expand-trigger': true,
-      'code-box-expand-trigger-active': expand,
+      'code-box-expand-trigger-active': expandAll,
     });
 
     const jumper = showedDemo.map((demo) => {
@@ -100,12 +100,15 @@ export default class ComponentDoc extends React.Component {
             }
             <h2>
               <FormattedMessage id="app.component.examples" />
-              <Icon
-                type="appstore"
-                className={expandTriggerClass}
-                title={expand ? '收起全部代码' : '展开全部代码'}
-                onClick={this.handleExpandToggle}
-              />
+              <Tooltip
+                title={<FormattedMessage id={`app.component.examples.${expandAll ? 'collpse' : 'expand'}`} />}
+              >
+                <Icon
+                  type={`${expandAll ? 'appstore' : 'appstore-o'}`}
+                  className={expandTriggerClass}
+                  onClick={this.handleExpandToggle}
+                />
+              </Tooltip>
             </h2>
           </section>
           <Row gutter={16}>

diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js
@@ -17,6 +17,8 @@ module.exports = {
     'app.content.edit-page': '在 Github 上编辑此页！',
     'app.content.edit-demo': '在 Github 上编辑此示例！',
     'app.component.examples': '代码演示',
+    'app.component.examples.expand': '展开全部代码',
+    'app.component.examples.collpse': '收起全部代码',
     'app.demo.copy': '复制代码',
     'app.demo.copied': '复制成功',
     'app.demo.codepen': '在 CodePen 中打开',