From 1b69accf2df0e6c06811b73a5c02a0c08ad598b6 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Wed, 17 Aug 2016 12:06:38 +0800
Subject: [PATCH] site: add edit button for demo and doc, close: #2325

---
 site/theme/static/demo.less                  | 18 ++++++++++++++----
 site/theme/template/Content/Article.jsx      |  4 +++-
 site/theme/template/Content/ComponentDoc.jsx |  4 +++-
 site/theme/template/Content/Demo.jsx         |  2 ++
 site/theme/template/Content/EditButton.jsx   | 15 +++++++++++++++
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 site/theme/template/Content/EditButton.jsx

diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
index 6f65b68045..57375c8b49 100644
--- a/site/theme/static/demo.less
+++ b/site/theme/static/demo.less
@@ -53,12 +53,22 @@
 .code-box:target .code-box-title {
   background: #fbfbfb;
   box-shadow: 0 -1.2px 0 #e9e9e9;
+
+  .edit-button {
+    display: inline;
+  }
 }
 
-.code-box .code-box-title a,
-.code-box .code-box-title a:hover {
-  color: #666;
-  font-size: 14px;
+.code-box .code-box-title {
+  a,
+  a:hover {
+    color: #666;
+    font-size: 14px;
+  }
+
+  .edit-button {
+    display: none;
+  }
 }
 
 .code-box .code-box-demo {
diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx
index 70af998b4f..a2d11f55a3 100644
--- a/site/theme/template/Content/Article.jsx
+++ b/site/theme/template/Content/Article.jsx
@@ -2,6 +2,7 @@ import React, { Children, cloneElement } from 'react';
 import DocumentTitle from 'react-document-title';
 import { getChildren } from 'jsonml.js/lib/utils';
 import { Timeline } from 'antd';
+import EditButton from './EditButton';
 import * as utils from '../utils';
 
 export default class Article extends React.Component {
@@ -54,7 +55,7 @@ export default class Article extends React.Component {
     const content = props.content;
 
     const { meta, description } = content;
-    const { title, subtitle, chinese, english } = meta;
+    const { title, subtitle, chinese, english, filename } = meta;
 
     return (
       <DocumentTitle title={`${title || chinese || english} - Ant Design`}>
@@ -65,6 +66,7 @@ export default class Article extends React.Component {
               (!subtitle && !chinese) ? null :
                 <span className="subtitle">{subtitle || chinese}</span>
             }
+            <EditButton title="在 Github 上编辑此页！" filename={filename} />
           </h1>
           {
             !description ? null :
diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
index 4ec3722974..6a8948c0c8 100644
--- a/site/theme/template/Content/ComponentDoc.jsx
+++ b/site/theme/template/Content/ComponentDoc.jsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { Row, Col, Icon, Affix } from 'antd';
 import { getChildren } from 'jsonml.js/lib/utils';
 import Demo from './Demo';
+import EditButton from './EditButton';
 
 export default class ComponentDoc extends React.Component {
   static contextTypes = {
@@ -71,7 +72,7 @@ export default class ComponentDoc extends React.Component {
       );
     });
 
-    const { title, subtitle, chinese, english } = meta;
+    const { title, subtitle, chinese, english, filename } = meta;
     return (
       <DocumentTitle title={`${subtitle || chinese || ''} ${title || english} - Ant Design`}>
         <article>
@@ -87,6 +88,7 @@ export default class ComponentDoc extends React.Component {
                 (!subtitle && !chinese) ? null :
                   <span className="subtitle">{subtitle || chinese}</span>
               }
+              <EditButton title="在 Github 上编辑此页！" filename={filename} />
             </h1>
             {
               props.utils.toReactComponent(
diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx
index 8a7c9a4bf8..f7b33562cb 100644
--- a/site/theme/template/Content/Demo.jsx
+++ b/site/theme/template/Content/Demo.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
+import EditButton from './EditButton';
 
 export default class Demo extends React.Component {
   static contextTypes = {
@@ -74,6 +75,7 @@ export default class Demo extends React.Component {
             <a href={`#${meta.id}`}>
               {localizedTitle}
             </a>
+            <EditButton title="在 Github 上编辑此示例！" filename={meta.filename} />
           </div>
           {introChildren}
           <span className="collapse anticon anticon-circle-o-right"
diff --git a/site/theme/template/Content/EditButton.jsx b/site/theme/template/Content/EditButton.jsx
new file mode 100644
index 0000000000..e3d3bdd9f0
--- /dev/null
+++ b/site/theme/template/Content/EditButton.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tooltip, Icon } from 'antd';
+
+const branchUrl = 'https://github.com/ant-design/ant-design/blob/1.x-stable/';
+const linkStyle = { color: 'inherit' };
+const iconStyle = { fontSize: 14, marginLeft: 8, cursor: 'pointer' };
+export default function EditButton({ title, filename }) {
+  return (
+    <Tooltip title={title}>
+      <a className="edit-button" href={`${branchUrl}${filename}`} style={linkStyle}>
+        <Icon type="edit" style={iconStyle} />
+      </a>
+    </Tooltip>
+  );
+}