From 0bb08fc852f277fa85a0cad5bec0eb58d99c051b Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Mon, 29 Jun 2020 17:23:28 +0200
Subject: [PATCH] feat(ProfilePopup): implement copy-to-clipboard button

Closes #282
---
 src/app/chat/view.nim                         |  3 +
 .../Chat/components/ProfilePopup.qml          | 56 +++++++++----------
 ui/shared/CopyToClipBoardIcon.qml             | 34 +++++++++++
 ui/shared/img/copy-to-clipboard-icon.svg      |  4 ++
 ui/shared/qmldir                              |  1 +
 5 files changed, 69 insertions(+), 29 deletions(-)
 create mode 100644 ui/shared/CopyToClipBoardIcon.qml
 create mode 100644 ui/shared/img/copy-to-clipboard-icon.svg

diff --git a/src/app/chat/view.nim b/src/app/chat/view.nim
index ce1bccdb53..42ebef3e4c 100644
--- a/src/app/chat/view.nim
+++ b/src/app/chat/view.nim
@@ -164,6 +164,9 @@ QtObject:
   proc addRecentStickerToList*(self: ChatsView, sticker: Sticker) =
     self.stickers[RECENT_STICKERS].addStickerToList(sticker)
   
+  proc copyToClipboard*(self: ChatsView, content: string) {.slot.} =
+    setClipBoardText(content)
+
   proc sendSticker*(self: ChatsView, hash: string, pack: int) {.slot.} =
     let sticker = Sticker(hash: hash, packId: pack)
     self.addRecentStickerToList(sticker)
diff --git a/ui/app/AppLayouts/Chat/components/ProfilePopup.qml b/ui/app/AppLayouts/Chat/components/ProfilePopup.qml
index f7c399e4fd..62045daf9d 100644
--- a/ui/app/AppLayouts/Chat/components/ProfilePopup.qml
+++ b/ui/app/AppLayouts/Chat/components/ProfilePopup.qml
@@ -143,6 +143,15 @@ ModalPopup {
             anchors.topMargin: Theme.smallPadding
         }
 
+        CopyToClipBoardIcon {
+          anchors.top: labelEnsUsername.bottom
+          anchors.left: valueEnsName.right
+          anchors.leftMargin: Theme.smallPadding
+          onClick: function (){
+            chatsModel.copyToClipboard(valueEnsName.text)
+          }
+        }
+
         StyledText {
             id: labelChatKey
             text: qsTr("Chat key")
@@ -167,6 +176,15 @@ ModalPopup {
             anchors.topMargin: Theme.smallPadding
         }
 
+        CopyToClipBoardIcon {
+          anchors.top: labelChatKey.bottom
+          anchors.left: valueChatKey.right
+          anchors.leftMargin: Theme.smallPadding
+          onClick: function (){
+            chatsModel.copyToClipboard(valueChatKey.text)
+          }
+        }
+
         Separator {
             id: separator
             anchors.top: valueChatKey.bottom
@@ -199,37 +217,17 @@ ModalPopup {
             anchors.top: labelShareURL.bottom
             anchors.topMargin: Theme.smallPadding
         }
+
+        CopyToClipBoardIcon {
+          anchors.top: labelShareURL.bottom
+          anchors.left: valueShareURL.right
+          anchors.leftMargin: Theme.smallPadding
+          onClick: function (){
+            chatsModel.copyToClipboard("https://join.status.im/u/" + fromAuthor)
+          }
+        }
     }
 
-    // TODO(pascal): implement copy to clipboard component
-    // Rectangle {
-    //     id: copyToClipboardButton
-    //     height: 32
-    //     width: 32
-    //     anchors.top: labelShareURL.bottom
-    //     anchors.topMargin: Theme.padding
-    //     anchors.left: valueShareURL.right
-    //     anchors.leftMargin: Theme.padding
-    //     radius: 8
-
-    //     SVGImage {
-    //         source: "../../../../shared/img/copy-to-clipboard-icon.svg"
-    //         anchors.horizontalCenter: parent.horizontalCenter
-    //         anchors.verticalCenter: parent.verticalCenter
-    //     }
-
-    //     MouseArea {
-    //         cursorShape: Qt.PointingHandCursor
-    //         anchors.fill: parent
-    //         hoverEnabled: true
-    //         onExited: {
-    //             copyToClipboardButton.color = Theme.white
-    //         }
-    //         onEntered:{
-    //             copyToClipboardButton.color = Theme.grey
-    //         }
-    //     }
-    // }
     footer: Item {
         width: parent.width
         height: children[0].height
diff --git a/ui/shared/CopyToClipBoardIcon.qml b/ui/shared/CopyToClipBoardIcon.qml
new file mode 100644
index 0000000000..c582764ca1
--- /dev/null
+++ b/ui/shared/CopyToClipBoardIcon.qml
@@ -0,0 +1,34 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../imports"
+
+Rectangle {
+    id: copyToClipboardButton
+    height: 32
+    width: 32
+    radius: 8
+    property var onClick: function() {}
+
+    SVGImage {
+        width: 20
+        height: 20
+        source: "./img/copy-to-clipboard-icon.svg"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    MouseArea {
+        cursorShape: Qt.PointingHandCursor
+        anchors.fill: parent
+        hoverEnabled: true
+        onExited: {
+            parent.color = Theme.white
+        }
+        onEntered:{
+            parent.color = Theme.grey
+        }
+        onClicked: onClick()
+    }
+}
+
+
diff --git a/ui/shared/img/copy-to-clipboard-icon.svg b/ui/shared/img/copy-to-clipboard-icon.svg
new file mode 100644
index 0000000000..aae5708761
--- /dev/null
+++ b/ui/shared/img/copy-to-clipboard-icon.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.25 8.5C4.66421 8.5 5 8.16421 5 7.75C5 7.33579 4.66421 7 4.25 7H4C1.79086 7 0 8.79086 0 11V16C0 18.2091 1.79086 20 4 20H9C11.2091 20 13 18.2091 13 16V15.75C13 15.3358 12.6642 15 12.25 15C11.8358 15 11.5 15.3358 11.5 15.75V16C11.5 17.3807 10.3807 18.5 9 18.5H4C2.61929 18.5 1.5 17.3807 1.5 16V11C1.5 9.61929 2.61929 8.5 4 8.5H4.25Z" fill="#4360DF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 4C7 1.79086 8.79086 0 11 0H16C18.2091 0 20 1.79086 20 4V9C20 11.2091 18.2091 13 16 13H11C8.79086 13 7 11.2091 7 9V4ZM11 1.5H16C17.3807 1.5 18.5 2.61929 18.5 4V9C18.5 10.3807 17.3807 11.5 16 11.5H11C9.61929 11.5 8.5 10.3807 8.5 9V4C8.5 2.61929 9.61929 1.5 11 1.5Z" fill="#4360DF"/>
+</svg>
diff --git a/ui/shared/qmldir b/ui/shared/qmldir
index c2e702db1a..fd1e183601 100644
--- a/ui/shared/qmldir
+++ b/ui/shared/qmldir
@@ -15,3 +15,4 @@ StyledTextEdit 1.0 StyledTextEdit.qml
 Identicon 1.0 Identicon.qml
 RoundedImage 1.0 RoundedImage.qml
 SplitViewHandle 1.0 SplitViewHandle.qml
+CopyToClipBoardIcon 1.0 CopyToClipBoardIcon.qml