fix: make text selectable, limit text input content width and execute actions onEnter

ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml

@@ -51,16 +51,18 @@ Rectangle {
         TextField {
             id: txtData
             text: ""
-            leftPadding: 0
             padding: 0
             font.pixelSize: 14
             placeholderText: qsTr("Type a message...")
             anchors.right: chatSendBtn.left
             anchors.rightMargin: 16
             anchors.top: parent.top
-            anchors.topMargin: 24
+            anchors.topMargin: 0
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 0
             anchors.left: parent.left
-            anchors.leftMargin: 24
+            leftPadding: 24
+            selectByMouse: true
             Keys.onEnterPressed: {
                 chatsModel.sendMessage(txtData.text)
                 txtData.text = ""
@@ -73,15 +75,6 @@ Rectangle {
                 color: "#00000000"
             }
         }
-
-        MouseArea {
-            id: mouseArea1
-            anchors.rightMargin: 50
-            anchors.fill: parent
-            onClicked: {
-                txtData.forceActiveFocus(Qt.MouseFocusReason)
-            }
-        }
     }
 }
 /*##^##

ui/app/AppLayouts/Chat/ContactsColumn.qml

@@ -10,7 +10,7 @@ import "./ContactsColumn"
 
 Item {
     property alias chatGroupsListViewCount: channelList.channelListCount
-    property alias searchStr: searchBox.searchStr
+    property alias searchStr: searchBox.text
 
     id: contactsColumn
     width: 300
@@ -38,9 +38,16 @@ Item {
 
     SearchBox {
         id: searchBox
+        anchors.top: parent.top
+        anchors.topMargin: 59
+        anchors.right: addChat.left
+        anchors.rightMargin: Theme.padding
+        anchors.left: parent.left
+        anchors.leftMargin: Theme.padding
     }
 
     AddChat {
+        id: "addChat"
     }
 
     StackLayout {

ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml

@@ -13,7 +13,6 @@ Item {
 
     ListView {
         id: chatGroupsListView
-        anchors.topMargin: 24
         anchors.fill: parent
         model: chatsModel.chats
         delegate: Channel {}

ui/app/AppLayouts/Chat/ContactsColumn/SearchBox.qml

@@ -1,49 +0,0 @@
-import QtQuick 2.3
-import QtQuick.Controls 2.3
-import QtQuick.Layouts 1.3
-import Qt.labs.platform 1.1
-import "../../../../shared"
-import "../../../../imports"
-
-Rectangle {
-    property alias searchStr: searchText.text
-    id: searchBox
-    height: 36
-    color: Theme.grey
-    anchors.top: parent.top
-    anchors.topMargin: 59
-    radius: 8
-    anchors.right: parent.right
-    anchors.rightMargin: 65
-    anchors.left: parent.left
-    anchors.leftMargin: 16
-
-    TextField {
-        id: searchText
-        placeholderText: qsTr("Search")
-        anchors.left: parent.left
-        anchors.leftMargin: 32
-        anchors.verticalCenter: parent.verticalCenter
-        font.pixelSize: 12
-        background: Rectangle {
-            color: "#00000000"
-        }
-    }
-
-    Image {
-        id: image4
-        anchors.left: parent.left
-        anchors.leftMargin: 10
-        anchors.verticalCenter: parent.verticalCenter
-        fillMode: Image.PreserveAspectFit
-        source: "../../../img/search.svg"
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        onClicked: {
-            searchText.forceActiveFocus(Qt.MouseFocusReason)
-        }
-    }
-}

ui/app/AppLayouts/Chat/ContactsColumn/qmldir

@@ -1,3 +1,2 @@
 EmptyView 1.0 EmptyView.qml
 ChannelList 1.0 ChannelList.qml
-SearchBox 1.0 SearchBox.qml

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

@@ -6,6 +6,13 @@ import "../../../../shared"
 import "./"
 
 ModalPopup {
+
+    function doJoin(){
+        if(chatKey.text === "") return;
+        chatsModel.joinChat(chatKey.text, Constants.chatTypeOneToOne);
+        popup.close();
+    }
+
     id: popup
     title: qsTr("New chat")
 
@@ -14,38 +21,12 @@ ModalPopup {
         chatKey.forceActiveFocus(Qt.MouseFocusReason)
     }
 
-    Rectangle {
+    Input {
-        id: chatKeyBox
-        height: 44
-        color: Theme.grey
-        anchors.top: parent.top
-        radius: 8
-        anchors.right: parent.right
-        anchors.left: parent.left
-
-        TextField {
         id: chatKey
         placeholderText: qsTr("Enter ENS username or chat key")
-            anchors.left: parent.left
+        Keys.onEnterPressed: doJoin()
-            anchors.leftMargin: 16
+        Keys.onReturnPressed: doJoin()
-            anchors.verticalCenter: parent.verticalCenter
-            font.pixelSize: 15
-            background: Rectangle {
-                color: "#00000000"
     }
-            width: chatKeyBox.width - 32
-        }
-
-        MouseArea {
-            id: mouseArea
-            anchors.fill: parent
-            onClicked : {
-                chatKey.forceActiveFocus(Qt.MouseFocusReason)
-            }
-        }
-    }
-
-
 
     footer: Button {
         width: 44
@@ -62,11 +43,7 @@ ModalPopup {
             id: btnMAnewChat
             cursorShape: Qt.PointingHandCursor
             anchors.fill: parent
-            onClicked : {
+            onClicked : doJoin()
-                if(chatKey.text === "") return;
-                chatsModel.joinChat(chatKey.text, Constants.chatTypeOneToOne);
-                popup.close();
-            }
         }
     }
 }

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

@@ -7,6 +7,14 @@ import "./"
 
 
 ModalPopup {
+    function doJoin() {
+        if(channelName.text === "") return;
+        chatsModel.joinChat(channelName.text, Constants.chatTypePublic);
+        popup.close();
+        
+    }
+
+
     id: popup
     title: qsTr("Join public chat")
 
@@ -30,45 +38,16 @@ ModalPopup {
         }
     }
 
-    Rectangle {
+    Input {
-        id: channelNameBox
-        height: 44
-        color: Theme.grey
-        anchors.top: description.bottom
-        radius: 8
-        anchors.right: parent.right
-        anchors.left: parent.left
-
-        TextField {
         id: channelName
+        anchors.top: description.bottom
+        anchors.topMargin: Theme.padding
         placeholderText: qsTr("chat-name")
-            anchors.left: parent.left
+        Keys.onEnterPressed: doJoin()
-            anchors.leftMargin: 32
+        Keys.onReturnPressed: doJoin()
-            anchors.verticalCenter: parent.verticalCenter
+        icon: "../../../img/hash.svg"
-            font.pixelSize: 15
-            background: Rectangle {
-                color: "#00000000"
-            }
-            width: channelNameBox.width - 32
     }
     
-        Image {
-            id: image4
-            anchors.left: parent.left
-            anchors.leftMargin: 10
-            anchors.verticalCenter: parent.verticalCenter
-            fillMode: Image.PreserveAspectFit
-            source: "../../../img/hash.svg"
-        }
-
-        MouseArea {
-            id: mouseArea
-            anchors.fill: parent
-            onClicked : {
-                channelName.forceActiveFocus(Qt.MouseFocusReason)
-            }
-        }
-    }
 
     RowLayout {
         id: row
@@ -78,7 +57,7 @@ ModalPopup {
         anchors.rightMargin: 65
         anchors.left: parent.left
         anchors.leftMargin: 65
-        anchors.top: channelNameBox.bottom
+        anchors.top: channelName.bottom
         anchors.topMargin: 37
 
         Flow {
@@ -120,12 +99,7 @@ ModalPopup {
             id: btnMAJoinChat
             cursorShape: Qt.PointingHandCursor
             anchors.fill: parent
-            onClicked : {
+            onClicked : doJoin()
-                if(channelName.text === "") return;
-                    chatsModel.joinChat(channelName.text, Constants.chatTypePublic);
-                    popup.close();
         }
     }
 }
-    
-}

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

@@ -6,6 +6,11 @@ import "../../../../shared"
 import "./"
 
 Popup {
+    function doRename(){
+        chatsModel.renameGroup(groupName.text)
+        popup.close();
+    }
+
     id: popup
     modal: true
 
@@ -42,44 +47,27 @@ Popup {
             anchors.bottomMargin: Theme.padding
         }
 
-        Rectangle {
+        Input {
-            id: groupNameBox
+            id: groupName
-            height: 44
-            color: Theme.grey
             anchors.top: groupTitleLabel.bottom
-            radius: 8
+            anchors.topMargin: 7
-            anchors.right: parent.right
             anchors.left: parent.left
             anchors.leftMargin: Theme.padding
-            anchors.rightMargin: Theme.padding
-            anchors.topMargin: 7
-
-            TextField {
-                id: groupName
-                placeholderText: qsTr("Group Name")
-                anchors.left: parent.left
             anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
+            anchors.rightMargin: Theme.padding
-                font.pixelSize: 15
+            placeholderText: qsTr("Group Name")
-                background: Rectangle {
+            Keys.onEnterPressed: doRename()
-                    color: "#00000000"
+            Keys.onReturnPressed: doRename()
-                }
-                width: groupNameBox.width - 32
-                selectByMouse: true
-            }
         }
 
         StyledButton {
             id: saveBtn
-            anchors.top: groupNameBox.bottom
+            anchors.top: groupName.bottom
             anchors.topMargin: 22
             anchors.right: parent.right
             anchors.rightMargin: Theme.padding
             label: qsTr("Save")
-            onClicked : {
+            onClicked : doRename()
-                chatsModel.renameGroup(groupName.text)
-                popup.close();
-            }
         }
   }
 }

ui/app/AppLayouts/Wallet/Components/TokenSettingsModalContent.qml

@@ -56,8 +56,9 @@ Item {
 
         SearchBox {
             id: searchBox
+            customHeight: 36
+            fontPixelSize: 12
             anchors.top: modalBody.top
-            anchors.topMargin: 0
         }
 
         ListView {
@@ -79,7 +80,7 @@ Item {
                     anchors.left: parent.left
                     anchors.leftMargin: 10
                     width: parent.width
-                    property bool isVisible: searchBox.searchStr == "" || name.toLowerCase().includes(searchBox.searchStr.toLowerCase()) || symbol.toLowerCase().includes(searchBox.searchStr.toLowerCase())
+                    property bool isVisible: searchBox.text == "" || name.toLowerCase().includes(searchBox.text.toLowerCase()) || symbol.toLowerCase().includes(searchBox.text.toLowerCase())
                     visible: isVisible && symbol !== "" ? true : false
                     height: isVisible && symbol !== "" ? 40 : 0
 

ui/nim-status-client.pro

@@ -64,7 +64,6 @@ DISTFILES += \
     app/AppLayouts/Chat/ContactsColumn/Channel.qml \
     app/AppLayouts/Chat/ContactsColumn/ChannelList.qml \
     app/AppLayouts/Chat/ContactsColumn/EmptyView.qml \
-    app/AppLayouts/Chat/ContactsColumn/SearchBox.qml \
     app/AppLayouts/Chat/ContactsColumn/qmldir \
     app/AppLayouts/Chat/components/PublicChatPopup.qml \
     app/AppLayouts/Chat/components/PrivateChatPopup.qml \
@@ -174,6 +173,7 @@ DISTFILES += \
     shared/ModalPopup.qml \
     shared/PopupMenu.qml \
     shared/RoundImage.qml \
+    shared/SearchBox.qml \
     shared/Select.qml \
     shared/Separator.qml \
     shared/StatusTabButton.qml \

ui/shared/Input.qml

@@ -14,12 +14,16 @@ Item {
     property color bgColor: Theme.grey
     //    property url icon: "../app/img/hash.svg"
     property url icon: ""
+    property int iconHeight: 24
+    property int iconWidth: 24
+
     readonly property bool hasIcon: icon.toString() !== ""
     readonly property var forceActiveFocus: function () {
         inputValue.forceActiveFocus(Qt.MouseFocusReason)
     }
     readonly property int labelMargin: 7
     property int customHeight: 44
+    property int fontPixelSize: 15
 
     id: inputBox
     height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0)
@@ -47,16 +51,22 @@ Item {
         anchors.topMargin: inputBox.hasLabel ? inputBox.labelMargin : 0
         anchors.right: parent.right
         anchors.left: parent.left
-
         TextField {
             id: inputValue
             visible: !inputBox.isTextArea && !inputBox.isSelect
             placeholderText: inputBox.placeholderText
             text: inputBox.text
+            anchors.top: parent.top
+            anchors.topMargin: 0
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 0
+            anchors.right: parent.right
+            anchors.rightMargin: parent.rightMargin
             anchors.left: parent.left
-            anchors.leftMargin: inputBox.hasIcon ? 36 : Theme.padding
+            anchors.leftMargin: 0
-            anchors.verticalCenter: parent.verticalCenter
+            leftPadding: inputBox.hasIcon ? 36 : Theme.padding
-            font.pixelSize: 15
+            selectByMouse: true
+            font.pixelSize: fontPixelSize
             background: Rectangle {
                 color: "#00000000"
             }
@@ -64,8 +74,8 @@ Item {
 
         Image {
             id: iconImg
-            sourceSize.height: 24
+            sourceSize.height: iconHeight
-            sourceSize.width: 24
+            sourceSize.width: iconWidth
             anchors.left: parent.left
             anchors.leftMargin: 10
             anchors.verticalCenter: parent.verticalCenter
@@ -73,14 +83,6 @@ Item {
             source: inputBox.icon
         }
     }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        onClicked: {
-            inputValue.forceActiveFocus(Qt.MouseFocusReason)
-        }
-    }
 }
 
 /*##^##

ui/shared/SearchBox.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.3
+import "../imports"
+
+Input {
+    id: searchBox
+    placeholderText: qsTr("Search")
+    icon: "../app/img/search.svg"
+    iconWidth: 17
+    iconHeight: 17
+    customHeight: 36
+    fontPixelSize: 12
+}

ui/shared/qmldir

@@ -6,6 +6,7 @@ Separator 1.0 Separator.qml
 StatusTabButton 1.0 StatusTabButton.qml
 TextWithLabel 1.0 TextWithLabel.qml
 Input 1.0 Input.qml
+SearchBox 1.0 SearchBox.qml
 Select 1.0 Select.qml
 StyledTextArea 1.0 StyledTextArea.qml
 RoundImage 1.0 RoundImage.qml