status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Richard Ramos 2020-06-15 12:24:21 -04:00 committed by Iuri Matias
parent b842925ba4
commit b0a8bc3368
13 changed files with 92 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/app/AppLayouts/Chat/ChatColumn/ChatInput.qml
View File

@ -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)
}
}
}
}
/*##^##

9
ui/app/AppLayouts/Chat/ContactsColumn.qml
View File

@ -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 {

1
ui/app/AppLayouts/Chat/ContactsColumn/ChannelList.qml
View File

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

49
ui/app/AppLayouts/Chat/ContactsColumn/SearchBox.qml
View File

@ -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)
}
}
}

1
ui/app/AppLayouts/Chat/ContactsColumn/qmldir
View File

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

49
ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml
View File

@ -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,39 +21,13 @@ ModalPopup {
chatKey.forceActiveFocus(Qt.MouseFocusReason)
}
Rectangle {
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
anchors.leftMargin: 16
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)
}
}
Input {
id: chatKey
placeholderText: qsTr("Enter ENS username or chat key")
Keys.onEnterPressed: doJoin()
Keys.onReturnPressed: doJoin()
}
footer: Button {
width: 44
height: 44
@ -62,11 +43,7 @@ ModalPopup {
id: btnMAnewChat
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked : {
if(chatKey.text === "") return;
chatsModel.joinChat(chatKey.text, Constants.chatTypeOneToOne);
popup.close();
}
onClicked : doJoin()
}
}
}

64
ui/app/AppLayouts/Chat/components/PublicChatPopup.qml
View File

@ -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 {
id: channelNameBox
height: 44
color: Theme.grey
Input {
id: channelName
anchors.top: description.bottom
radius: 8
anchors.right: parent.right
anchors.left: parent.left
TextField {
id: channelName
placeholderText: qsTr("chat-name")
anchors.left: parent.left
anchors.leftMargin: 32
anchors.verticalCenter: parent.verticalCenter
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)
}
}
anchors.topMargin: Theme.padding
placeholderText: qsTr("chat-name")
Keys.onEnterPressed: doJoin()
Keys.onReturnPressed: doJoin()
icon: "../../../img/hash.svg"
}
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 : {
if(channelName.text === "") return;
chatsModel.joinChat(channelName.text, Constants.chatTypePublic);
popup.close();
}
}
onClicked : doJoin()
}
}
}

40
ui/app/AppLayouts/Chat/components/RenameGroupPopup.qml
View File

@ -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 {
id: groupNameBox
height: 44
color: Theme.grey
Input {
id: groupName
anchors.top: groupTitleLabel.bottom
radius: 8
anchors.right: parent.right
anchors.topMargin: 7
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.right: parent.right
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
font.pixelSize: 15
background: Rectangle {
color: "#00000000"
}
width: groupNameBox.width - 32
selectByMouse: true
}
placeholderText: qsTr("Group Name")
Keys.onEnterPressed: doRename()
Keys.onReturnPressed: doRename()
}
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 : {
chatsModel.renameGroup(groupName.text)
popup.close();
}
onClicked : doRename()
}
}
}

5
ui/app/AppLayouts/Wallet/Components/TokenSettingsModalContent.qml
View File

@ -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

2
ui/nim-status-client.pro
View File

@ -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 \

30
ui/shared/Input.qml
View File

@ -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.verticalCenter: parent.verticalCenter
font.pixelSize: 15
anchors.leftMargin: 0
leftPadding: inputBox.hasIcon ? 36 : Theme.padding
selectByMouse: true
font.pixelSize: fontPixelSize
background: Rectangle {
color: "#00000000"
}
@ -64,8 +74,8 @@ Item {
Image {
id: iconImg
sourceSize.height: 24
sourceSize.width: 24
sourceSize.height: iconHeight
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)
}
}
}
/*##^##

12
ui/shared/SearchBox.qml Normal file
View File

@ -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
}

1
ui/shared/qmldir
View File

@ -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