From aa7086f283f67063e200d85de294c45617916884 Mon Sep 17 00:00:00 2001
From: xmcp <xiaoyuanan2000@sina.com>
Date: Sun, 26 Aug 2018 15:06:10 +0800
Subject: [PATCH] improve ui

---
 package-lock.json | 13 +++++++++++++
 package.json      |  1 +
 src/Flows.js      |  9 ++++++++-
 src/Sidebar.css   |  1 +
 src/index.css     |  1 +
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index dcb6e40..5c2cdf2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2125,6 +2125,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.0.8",
+      "resolved": "http://registry.npm.taobao.org/copy-to-clipboard/download/copy-to-clipboard-3.0.8.tgz",
+      "integrity": "sha1-9OgvSogw3ORma3643tDJvMMTq6k=",
+      "requires": {
+        "toggle-selection": "1.0.6"
+      }
+    },
     "core-js": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
@@ -10185,6 +10193,11 @@
         "repeat-string": "1.6.1"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "http://registry.npm.taobao.org/toggle-selection/download/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
diff --git a/package.json b/package.json
index 607cf68..073f7f4 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "copy-to-clipboard": "^3.0.8",
     "load-script": "^1.0.0",
     "pressure": "^2.1.2",
     "react": "^16.4.2",
diff --git a/src/Flows.js b/src/Flows.js
index 7971bf0..a95c255 100644
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -1,4 +1,5 @@
 import React, {Component, PureComponent} from 'react';
+import copy from 'copy-to-clipboard';
 import {ColorPicker} from './color_picker';
 import {Time, TitleLine, HighlightedText} from './Common';
 import './Flows.css';
@@ -67,6 +68,11 @@ function Reply(props) {
 }
 
 function FlowItem(props) {
+    function copy_link(event) {
+        event.preventDefault();
+        copy(event.target.href);
+    }
+
     return (
         <div className="flow-item box">
             {parseInt(props.info.pid,10)>window.LATEST_POST_ID && <div className="flow-item-dot" /> }
@@ -83,7 +89,8 @@ function FlowItem(props) {
                         <span className="icon icon-reply" />
                     </span>
                 }
-                <code className="box-id">#{props.info.pid}</code>&nbsp;
+                <code className="box-id"><a href={'##'+props.info.pid} onClick={copy_link}>#{props.info.pid}</a></code>
+                &nbsp;
                 <Time stamp={props.info.timestamp} />
             </div>
             <HighlightedText text={props.info.text} color_picker={props.color_picker} show_pid={props.show_pid} />
diff --git a/src/Sidebar.css b/src/Sidebar.css
index 68cb33b..b48465e 100644
--- a/src/Sidebar.css
+++ b/src/Sidebar.css
@@ -16,6 +16,7 @@
 }
 
 .sidebar {
+    user-select: text;
     transition: left 150ms ease-out;
     position: fixed;
     left: 100%;
diff --git a/src/index.css b/src/index.css
index 432d015..9bdd6ec 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,6 +3,7 @@ body {
     padding: 0;
     background-size: cover;
     overflow-x: hidden;
+    user-select: none;
 }
 
 body::-webkit-scrollbar {