feat: improve Copy button to copy directly and have an active state

ui/app/AppLayouts/Chat/components/ProfilePopup.qml

@@ -150,15 +150,13 @@ ModalPopup {
             anchors.topMargin: Style.current.smallPadding
         }
 
-        CopyToClipBoardIcon {
-          visible: isEnsVerified
-          height: isEnsVerified ? 20 : 0
-          anchors.top: labelEnsUsername.bottom
-          anchors.left: valueEnsName.right
-          anchors.leftMargin: Style.current.smallPadding
-          onClick: function (){
-            chatsModel.copyToClipboard(valueEnsName.text)
-          }
+        CopyToClipBoardButton {
+            visible: isEnsVerified
+            height: isEnsVerified ? 20 : 0
+            anchors.top: labelEnsUsername.bottom
+            anchors.left: valueEnsName.right
+            anchors.leftMargin: Style.current.smallPadding
+            textToCopy: valueEnsName.text
         }
 
         StyledText {
@@ -186,13 +184,11 @@ ModalPopup {
             anchors.topMargin: Style.current.smallPadding
         }
 
-        CopyToClipBoardIcon {
-          anchors.top: labelChatKey.bottom
-          anchors.left: valueChatKey.right
-          anchors.leftMargin: Style.current.smallPadding
-          onClick: function (){
-            chatsModel.copyToClipboard(valueChatKey.text)
-          }
+        CopyToClipBoardButton {
+            anchors.top: labelChatKey.bottom
+            anchors.left: valueChatKey.right
+            anchors.leftMargin: Style.current.smallPadding
+            textToCopy: valueChatKey.text
         }
 
         Separator {
@@ -229,13 +225,11 @@ ModalPopup {
             anchors.topMargin: Style.current.smallPadding
         }
 
-        CopyToClipBoardIcon {
-          anchors.top: labelShareURL.bottom
-          anchors.left: valueShareURL.right
-          anchors.leftMargin: Style.current.smallPadding
-          onClick: function (){
-            chatsModel.copyToClipboard("https://join.status.im/u/" + fromAuthor)
-          }
+        CopyToClipBoardButton {
+            anchors.top: labelShareURL.bottom
+            anchors.left: valueShareURL.right
+            anchors.leftMargin: Style.current.smallPadding
+            textToCopy: "https://join.status.im/u/" + fromAuthor
         }
     }
 

ui/nim-status-client.pro

@@ -220,6 +220,7 @@ DISTFILES += \
     shared/ModalPopup.qml \
     shared/PopupMenu.qml \
     shared/Identicon.qml \
+    shared/CopyToClipBoardButton.qml \
     shared/RoundedImage.qml \
     shared/SearchBox.qml \
     shared/Select.qml \

ui/shared/CopyToClipBoardButton.qml

@@ -8,6 +8,7 @@ Rectangle {
     width: 32
     radius: 8
     property var onClick: function() {}
+    property string textToCopy: ""
 
     SVGImage {
         width: 20
@@ -22,12 +23,23 @@ Rectangle {
         anchors.fill: parent
         hoverEnabled: true
         onExited: {
-            parent.color = Style.current.white
+            parent.color = Style.current.transparent
         }
         onEntered:{
             parent.color = Style.current.grey
         }
-        onClicked: onClick()
+        onPressed: {
+            parent.color = Style.current.darkGrey
+        }
+        onReleased: {
+            parent.color = Style.current.transparent
+        }
+        onClicked: {
+            if (textToCopy) {
+                chatsModel.copyToClipboard(textToCopy)
+            }
+            onClick()
+        }
     }
 }
 

ui/shared/qmldir

@@ -15,4 +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
+CopyToClipBoardButton 1.0 CopyToClipBoardButton.qml