[Client] Improve usability

src/client/app/common/scripts/copy-to-clipboard.ts

@@ -2,12 +2,32 @@
  * Clipboardに値をコピー(TODO: 文字列以外も対応)
  */
 export default val => {
-	const form = document.createElement('textarea');
+	// 空div 生成
-	form.textContent = val;
+	const tmp = document.createElement('div');
-	document.body.appendChild(form);
+	// 選択用のタグ生成
-	form.select();
+	const pre = document.createElement('pre');
+
+	// 親要素のCSSで user-select: none だとコピーできないので書き換える
+	pre.style.webkitUserSelect = 'auto';
+	pre.style.userSelect = 'auto';
+
+	tmp.appendChild(pre).textContent = val;
+
+	// 要素を画面外へ
+	const s = tmp.style;
+	s.position = 'fixed';
+	s.right = '200%';
+
+	// body に追加
+	document.body.appendChild(tmp);
+	// 要素を選択
+	document.getSelection().selectAllChildren(tmp);
+
+	// クリップボードにコピー
 	const result = document.execCommand('copy');
-	document.body.removeChild(form);
+
+	// 要素削除
+	document.body.removeChild(tmp);
 
 	return result;
 };

src/client/app/common/views/components/note-menu.vue

@@ -87,10 +87,18 @@ export default Vue.extend({
 
 		copyContent() {
 			copyToClipboard(this.note.text);
+			this.$root.dialog({
+				type: 'success',
+				splash: true
+			});
 		},
 
 		copyLink() {
 			copyToClipboard(`${url}/notes/${this.note.id}`);
+			this.$root.dialog({
+				type: 'success',
+				splash: true
+			});
 		},
 
 		pin() {