💄 Enhance component demo (ant-design#15511)

gobhi · Mar 21, 2019 · c5a4eef · c5a4eef
1 parent 0c6a3b3
commit c5a4eef
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 148 deletions.
diff --git a/site/theme/en-US.js b/site/theme/en-US.js
@@ -20,8 +20,11 @@ module.exports = {
     'app.component.examples': 'Examples',
     'app.component.examples.expand': 'Expand all code',
     'app.component.examples.collpse': 'Collpse all code',
+    'app.demo.debug': "Debug only, won't display at online",
     'app.demo.copy': 'Copy code',
     'app.demo.copied': 'Copied!',
+    'app.demo.code.show': 'Show code',
+    'app.demo.code.hide': 'Hide code',
     'app.demo.codepen': 'Open in CodePen',
     'app.demo.codesandbox': 'Open in CodeSandbox',
     'app.demo.riddle': 'Open in Riddle',

diff --git a/site/theme/static/common.less b/site/theme/static/common.less
@@ -103,10 +103,6 @@ a {
   font-size: 12px;
 }
 
-.outside-link.internal {
-  display: none;
-}
-
 // reset menu text color
 .menu-site .ant-menu-item > a {
   color: @site-text-color;

diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
@@ -33,7 +33,7 @@
   &-title {
     position: absolute;
     top: -14px;
-    margin-left: -8px;
+    margin-left: 16px;
     padding: 1px 8px;
     color: #777;
     background: #fff;
@@ -48,6 +48,10 @@
     }
   }
 
+  &-description {
+    padding: 18px 24px 12px;
+  }
+
   a.edit-button {
     position: absolute;
     top: 7px;
@@ -74,7 +78,6 @@
     &.markdown {
       position: relative;
       width: 100%;
-      padding: 18px 32px;
       font-size: @font-size-base;
       border-radius: 0 0 @border-radius-sm @border-radius-sm;
       transition: background-color 0.4s;
@@ -105,13 +108,6 @@
   }
 
   .code-expand-icon {
-    position: absolute;
-    right: 16px;
-    bottom: 23px;
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
-    text-align: center;
     cursor: pointer;
   }
 
@@ -168,14 +164,33 @@
   }
 
   &-actions {
-    position: absolute;
-    top: 10px;
-    right: 12px;
-    text-align: right;
+    padding-top: 12px;
+    text-align: center;
+    border-top: 1px dashed @site-border-color-split;
+    opacity: .7;
+    transition: opacity .3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
     > i,
-    > form {
+    > form,
+    > span {
+      position: relative;
       display: inline-block;
-      margin-left: 8px;
+      width: 16px;
+      height: 16px;
+      margin-left: 16px;
+      vertical-align: top;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    > form {
+      top: -2px;
     }
   }
 
@@ -189,7 +204,6 @@
     background: #fff;
     border-radius: 20px;
     cursor: pointer;
-    opacity: 0;
     transition: all 0.24s;
 
     &:hover {
@@ -212,11 +226,11 @@
       no-repeat;
     border: 0;
     cursor: pointer;
-    opacity: 0;
     transition: all 0.3s;
   }
 
   &-riddle {
+    display: none;
     width: 20px;
     height: 20px;
     overflow: hidden;
@@ -226,7 +240,6 @@
       no-repeat;
     border: 0;
     cursor: pointer;
-    opacity: 0;
     transition: all 0.3s;
   }
 
@@ -240,7 +253,6 @@
       no-repeat;
     border: 0;
     cursor: pointer;
-    opacity: 0;
     transition: all 0.3s;
   }
 
@@ -259,4 +271,16 @@
       border: none;
     }
   }
+
+  &-debug {
+    border-color: @purple-3;
+  }
+
+  &-debug &-title a {
+    color: @purple-6;
+  }
+}
+
+.show-riddle-button .code-box-riddle {
+  display: block;
 }
diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less
@@ -38,6 +38,11 @@
       overflow: hidden;
     }
   }
+  .code-boxes-col-2-1,
+  .code-boxes-col-1-1 {
+    float: none;
+    width: 100%;
+  }
 }
 
 @media only screen and (max-width: 767.99px) {
@@ -54,11 +59,6 @@
   #search-box {
     display: none;
   }
-  .code-boxes-col-2-1,
-  .code-boxes-col-1-1 {
-    float: none;
-    width: 100%;
-  }
   .preview-image-boxes {
     float: none;
     width: 100%;

diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx
@@ -5,37 +5,12 @@ import DocumentTitle from 'react-document-title';
 import { getChildren } from 'jsonml.js/lib/utils';
 import { Timeline, Alert, Affix } from 'antd';
 import EditButton from './EditButton';
-import { ping } from '../utils';
 
 export default class Article extends React.Component {
   static contextTypes = {
     intl: PropTypes.object.isRequired,
   };
 
-  componentDidMount() {
-    this.componentDidUpdate();
-  }
-
-  componentDidUpdate() {
-    const links = [...document.querySelectorAll('.outside-link.internal')];
-    if (links.length === 0) {
-      return;
-    }
-    this.pingTimer = ping(status => {
-      if (status !== 'timeout' && status !== 'error') {
-        links.forEach(link => {
-          link.style.display = 'block'; // eslint-disable-line
-        });
-      } else {
-        links.forEach(link => link.parentNode.removeChild(link));
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.pingTimer);
-  }
-
   onResourceClick = e => {
     if (!window.gtag) {
       return;

diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
@@ -7,6 +7,7 @@ import { Row, Col, Icon, Affix, Tooltip } from 'antd';
 import { getChildren } from 'jsonml.js/lib/utils';
 import Demo from './Demo';
 import EditButton from './EditButton';
+import { ping } from '../utils';
 
 export default class ComponentDoc extends React.Component {
   static contextTypes = {
@@ -15,8 +16,23 @@ export default class ComponentDoc extends React.Component {
 
   state = {
     expandAll: false,
+    showRiddleButton: false,
   };
 
+  componentDidMount() {
+    this.pingTimer = ping(status => {
+      if (status !== 'timeout' && status !== 'error') {
+        this.setState({
+          showRiddleButton: true,
+        });
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.pingTimer);
+  }
+
   handleExpandToggle = () => {
     const { expandAll } = this.state;
     this.setState({
@@ -32,7 +48,7 @@ export default class ComponentDoc extends React.Component {
       intl: { locale },
     } = this.context;
     const demos = Object.keys(props.demos).map(key => props.demos[key]);
-    const { expandAll } = this.state;
+    const { expandAll, showRiddleButton } = this.state;
 
     const isSingleCol = meta.cols === 1;
     const leftChildren = [];
@@ -74,9 +90,12 @@ export default class ComponentDoc extends React.Component {
     });
 
     const { title, subtitle, filename } = meta;
+    const articleClassName = classNames({
+      'show-riddle-button': showRiddleButton,
+    });
     return (
       <DocumentTitle title={`${subtitle || ''} ${title[locale] || title} - Ant Design`}>
-        <article>
+        <article className={articleClassName}>
           <Affix className="toc-affix" offsetTop={16}>
             <ul id="demo-toc" className="toc">
               {jumper}