Browse Source

add button to copy to clipboard

Yuki Takei 9 years ago
parent
commit
8f05b4c06f
4 changed files with 43 additions and 0 deletions
  1. 1 0
      package.json
  2. 6 0
      resource/css/_page.scss
  3. 4 0
      resource/js/components/Page/PagePath.js
  4. 32 0
      yarn.lock

+ 1 - 0
package.json

@@ -103,6 +103,7 @@
     "normalize-path": "^2.1.1",
     "normalize-path": "^2.1.1",
     "optimize-js-plugin": "0.0.4",
     "optimize-js-plugin": "0.0.4",
     "react": "^15.4.2",
     "react": "^15.4.2",
+    "react-clipboard.js": "^1.0.1",
     "react-dom": "^15.4.2",
     "react-dom": "^15.4.2",
     "redis": "^2.7.1",
     "redis": "^2.7.1",
     "reveal.js": "~3.4.0",
     "reveal.js": "~3.4.0",

+ 6 - 0
resource/css/_page.scss

@@ -101,6 +101,12 @@
             color: inherit;
             color: inherit;
           }
           }
         }
         }
+
+        // copy to clipboard
+        button {
+          padding: 2px 4px;
+          border: none;
+        }
       }
       }
     }
     }
 
 

+ 4 - 0
resource/js/components/Page/PagePath.js

@@ -1,4 +1,5 @@
 import React from 'react';
 import React from 'react';
+import ClipboardButton from 'react-clipboard.js';
 
 
 export default class PagePath extends React.Component {
 export default class PagePath extends React.Component {
 
 
@@ -61,6 +62,9 @@ export default class PagePath extends React.Component {
           <a href="/">/</a>
           <a href="/">/</a>
         </span>
         </span>
         {afterElements}
         {afterElements}
+        <ClipboardButton className="btn btn-default" data-clipboard-text={this.props.pagePath}>
+          <i className="fa fa-clone"></i>
+        </ClipboardButton>
       </span>
       </span>
     );
     );
   }
   }

+ 32 - 0
yarn.lock

@@ -1184,6 +1184,14 @@ cli@~1.0.1:
     exit "0.1.2"
     exit "0.1.2"
     glob "^7.1.1"
     glob "^7.1.1"
 
 
+clipboard@^1.4.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.6.1.tgz#65c5b654812466b0faab82dc6ba0f1d2f8e4be53"
+  dependencies:
+    good-listener "^1.2.0"
+    select "^1.1.2"
+    tiny-emitter "^1.0.0"
+
 cliui@^2.1.0:
 cliui@^2.1.0:
   version "2.1.0"
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -1756,6 +1764,10 @@ delayed-stream@~1.0.0:
   version "1.0.0"
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
 
 
+delegate@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.2.tgz#1e1bc6f5cadda6cb6cbf7e6d05d0bcdd5712aebe"
+
 delegates@^1.0.0:
 delegates@^1.0.0:
   version "1.0.0"
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -2461,6 +2473,12 @@ globule@^1.0.0:
     lodash "~4.16.4"
     lodash "~4.16.4"
     minimatch "~3.0.2"
     minimatch "~3.0.2"
 
 
+good-listener@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  dependencies:
+    delegate "^3.1.2"
+
 google-auth-library@~0.9.7:
 google-auth-library@~0.9.7:
   version "0.9.10"
   version "0.9.10"
   resolved "https://registry.yarnpkg.com/google-auth-library/-/google-auth-library-0.9.10.tgz#4993dc07bb4834b8ca0350213a6873a32c6051b9"
   resolved "https://registry.yarnpkg.com/google-auth-library/-/google-auth-library-0.9.10.tgz#4993dc07bb4834b8ca0350213a6873a32c6051b9"
@@ -4606,6 +4624,12 @@ rc@^1.1.7:
     minimist "^1.2.0"
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
     strip-json-comments "~2.0.1"
 
 
+react-clipboard.js@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-clipboard.js/-/react-clipboard.js-1.0.1.tgz#56dea0547c13977cd1a1650fc740e0349aa90bdf"
+  dependencies:
+    clipboard "^1.4.0"
+
 react-dom@^15.4.2:
 react-dom@^15.4.2:
   version "15.5.4"
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
@@ -4990,6 +5014,10 @@ sax@~1.2.1:
   version "1.2.2"
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
 
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@~5.3.0:
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@~5.3.0:
   version "5.3.0"
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -5474,6 +5502,10 @@ timers-browserify@^2.0.2:
   dependencies:
   dependencies:
     setimmediate "^1.0.4"
     setimmediate "^1.0.4"
 
 
+tiny-emitter@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-1.2.0.tgz#6dc845052cb08ebefc1874723b58f24a648c3b6f"
+
 tinycolor@0.x:
 tinycolor@0.x:
   version "0.0.1"
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/tinycolor/-/tinycolor-0.0.1.tgz#320b5a52d83abb5978d81a3e887d4aefb15a6164"
   resolved "https://registry.yarnpkg.com/tinycolor/-/tinycolor-0.0.1.tgz#320b5a52d83abb5978d81a3e887d4aefb15a6164"