add RevisionUrl component

lib/views/page.html

@@ -28,12 +28,14 @@
       </div>
       {% endif %}
     </div>
+
+    <div id="revision-url" class="url-line"></div>
   </header>
   {% else %}
   {# trash/* #}
   <header id="page-header">
     <div class="flex-title-line">
-      <h1 class="title flex-item-title">{{ path|insertSpaceToEachSlashes }}</h1>
+      <h1 class="title flex-item-title"></h1>
       <div class="flex-item-action">
         <a href="#" title="Bookmark" class="bookmark-link" id="bookmark-button" data-csrftoken="{{ csrf() }}" data-bookmarked="0"><i class="fa fa-star-o"></i></a>
       </div>

lib/views/page_list.html

@@ -16,7 +16,7 @@
   <header class="portal-header {% if page %}has-page{% endif %}">
     <div class="flex-title-line">
       <h1 class="title flex-item-title">
-        <span id="revision-path">{{ path|insertSpaceToEachSlashes }}</span>
+        <span id="revision-path"></span>
         {% if searchConfigured() && !isTopPage() && !isTrashPage() %}
         <form class="input-group search-input-group hidden-xs hidden-sm" data-toggle="tooltip" data-placement="bottom" title="{{ path }} 以下から検索" id="search-listpage-form">
           <input type="text" class="search-listpage-input form-control" data-path="{{ path }}" id="search-listpage-input">

resource/css/_layout.scss

@@ -73,7 +73,7 @@
       }
 
       .content-main {
-        padding: 16px;
+        padding: 8px 16px;
       }
     }
 

resource/css/_page.scss

@@ -65,6 +65,7 @@
       }
 
       .flex-title-line {
+        line-height: 1;
         display: -webkit-flex;
         display: flex;
         -webkit-align-items: center;
@@ -102,11 +103,11 @@
           }
         }
 
-        // copy to clipboard
-        button {
-          padding: 2px 4px;
-          border: none;
-        }
+      }
+
+      .url-line {
+        color: #999;
+        font-size: 1rem;
       }
     }
 

resource/js/app.js

@@ -9,7 +9,8 @@ import SearchPage       from './components/SearchPage';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
 import SeenUserList     from './components/SeenUserList';
-import PagePath         from './components/Page/PagePath';
+import RevisionPath     from './components/Page/RevisionPath';
+import RevisionUrl      from './components/Page/RevisionUrl';
 //import PageComment  from './components/PageComment';
 
 if (!window) {
@@ -46,7 +47,8 @@ const componentMappings = {
   //'revision-history': <PageHistory pageId={pageId} />,
   //'page-comment': <PageComment />,
   'seen-user-list': <SeenUserList />,
-  'revision-path': <PagePath pagePath={pagePath} />,
+  'revision-path': <RevisionPath pagePath={pagePath} />,
+  'revision-url': <RevisionUrl pagePath={pagePath} url={location.href} />,
 };
 
 Object.keys(componentMappings).forEach((key) => {

resource/js/components/CopyButton.js

@@ -3,17 +3,31 @@ import ClipboardButton from 'react-clipboard.js';
 
 export default class CopyButton extends React.Component {
 
+  constructor(props) {
+    super(props);
+
+    this.showToolTip = this.showToolTip.bind(this);
+  }
+
   showToolTip() {
-    $('#btnCopy').tooltip('show');
+    const buttonId = `#${this.props.buttonId}`;
+    $(buttonId).tooltip('show');
     setTimeout(() => {
-      $('#btnCopy').tooltip('hide');
+      $(buttonId).tooltip('hide');
     }, 1000);
   }
 
   render() {
+    let style = Object.assign({
+      fontSize: "inherit",
+      padding: "2px",
+      border: 'none'
+    }, this.props.buttonStyle);
+
     return (
       <ClipboardButton className={this.props.buttonClassName}
-          button-id="btnCopy" button-data-toggle="tooltip" button-title="copied!" button-data-placement="bottom" button-data-trigger="manual"
+          button-id={this.props.buttonId} button-data-toggle="tooltip" button-title="copied!" button-data-placement="bottom" button-data-trigger="manual"
+          button-style={style}
           data-clipboard-text={this.props.text} onSuccess={this.showToolTip}>
 
         <i className={this.props.iconClassName}></i>
@@ -24,6 +38,12 @@ export default class CopyButton extends React.Component {
 
 CopyButton.propTypes = {
   text: React.PropTypes.string.isRequired,
+  buttonId: React.PropTypes.string.isRequired,
   buttonClassName: React.PropTypes.string.isRequired,
+  buttonStyle: React.PropTypes.object,
   iconClassName: React.PropTypes.string.isRequired,
 };
+CopyButton.defaultProps = {
+  buttonId: 'btnCopy',
+  buttonStyle: {},
+};

resource/js/components/Page/PagePath.js → resource/js/components/Page/RevisionPath.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import CopyButton from '../CopyButton';
 
-export default class PagePath extends React.Component {
+export default class RevisionPath extends React.Component {
 
   constructor(props) {
     super(props);
@@ -63,18 +63,23 @@ export default class PagePath extends React.Component {
       );
     });
 
+    const buttonStyle = {
+      fontSize: '1.5rem'
+    }
+
     return (
       <span className="page-path">
         <span className="separator">
           <a href="/">/</a>
         </span>
         {afterElements}
-        <CopyButton buttonClassName="btn btn-default" text={this.props.pagePath} iconClassName="fa fa-clone text-muted" />
+        <CopyButton buttonId="btnCopyRevisionPath" text={this.props.pagePath}
+            buttonClassName="btn btn-default" buttonStyle={buttonStyle} iconClassName="fa fa-clone text-muted" />
       </span>
     );
   }
 }
 
-PagePath.propTypes = {
+RevisionPath.propTypes = {
   pagePath: React.PropTypes.string.isRequired,
 };

resource/js/components/Page/RevisionUrl.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import CopyButton from '../CopyButton';
+
+export default class RevisionUrl extends React.Component {
+
+  showToolTip() {
+    $('#btnCopy').tooltip('show');
+    setTimeout(() => {
+      $('#btnCopy').tooltip('hide');
+    }, 1000);
+  }
+
+  render() {
+    const text = this.props.pagePath + '\n' + this.props.url;
+    return (
+      <span>
+        {this.props.url}
+        <CopyButton buttonId="btnCopyRevisionUrl" text={text}
+            buttonClassName="btn btn-default" iconClassName="fa fa-clone text-muted" />
+      </span>
+    );
+  }
+}
+
+RevisionUrl.propTypes = {
+  pagePath: React.PropTypes.string.isRequired,
+  url: React.PropTypes.string.isRequired,
+};