site: improve code collapse icon design

yfge · Aug 15, 2017 · 48f7d22 · 48f7d22
1 parent 1f6bcf9
commit 48f7d22
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
@@ -111,31 +111,26 @@
 
   .collapse {
     position: absolute;
-    right: 14px;
-    bottom: 22px;
+    right: 16px;
+    bottom: 23px;
     cursor: pointer;
     width: 16px;
     height: 16px;
-    font-size: 16px;
     line-height: 16px;
-    opacity: 0.5;
+    opacity: 0.55;
     text-align: center;
     transition: all 0.3s;
-    color: #999;
-    background: #fff;
     user-select: none;
-    border-radius: 100%;
-  }
-
-  &.expand .collapse {
-    color: shade(@primary-color, 20%);
-    transform: rotate(-180deg);
 
     &:hover {
       opacity: 1;
     }
   }
 
+  &.expand .collapse {
+    transform: rotate(90deg);
+  }
+
   .highlight-wrapper {
     display: none;
     overflow: auto;

diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx
@@ -1,3 +1,4 @@
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
@@ -55,7 +56,7 @@ export default class Demo extends React.Component {
     });
   }
 
-  handleCodeExapnd = () => {
+  handleCodeExpand = () => {
     this.setState({ codeExpand: !this.state.codeExpand });
   }
 
@@ -158,7 +159,14 @@ export default class Demo extends React.Component {
             <EditButton title={<FormattedMessage id="app.content.edit-page" />} filename={meta.filename} />
           </div>
           {introChildren}
-          <Icon type="down-circle-o" title="Show Code" className="collapse" onClick={this.handleCodeExapnd} />
+          <Tooltip title={codeExpand ? 'Hide Code' : 'Show Code'}>
+            <img
+              alt="expand code"
+              src="https://gw.alipayobjects.com/zos/rmsportal/NBjNKmzFsnATotIWoZmP.svg"
+              className="collapse"
+              onClick={this.handleCodeExpand}
+            />
+          </Tooltip>
         </section>
         <section className={highlightClass}
           key="code"