diff --git a/src/nim_status_client.nim b/src/nim_status_client.nim index 3f56d8816f..f7437f1842 100644 --- a/src/nim_status_client.nim +++ b/src/nim_status_client.nim @@ -82,10 +82,10 @@ proc mainProc() = ) # accountsModel.appEvents.on("accountsReady") do(a: Args): - appEvents.on("accountsReady") do(a: Args): - appState.addChannel("test") - appState.addChannel("test2") - appState.addChannel("status") + # appEvents.on("accountsReady") do(a: Args): + # appState.addChannel("test") + # appState.addChannel("test2") + # appState.addChannel("status") engine.load("../ui/main.qml") diff --git a/ui/app/AppLayouts/Chat/ChatColumn.qml b/ui/app/AppLayouts/Chat/ChatColumn.qml index 1756116430..da30b67848 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn.qml @@ -4,308 +4,333 @@ import QtQuick.Layouts 1.3 import Qt.labs.platform 1.1 import "../../../imports" -ColumnLayout { - id: chatColumn - spacing: 0 - anchors.left: contactsColumn.right - anchors.leftMargin: 0 - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - anchors.top: parent.top - anchors.topMargin: 0 +StackLayout { + property int chatGroupsListViewCount: 0 + Layout.fillHeight: true + Layout.fillWidth: true - RowLayout { - id: chatTopBar - Layout.alignment: Qt.AlignHCenter | Qt.AlignTop - Layout.fillWidth: true - z: 60 + currentIndex: chatGroupsListViewCount > 0 ? 0 : 1 - Rectangle { - property string channelNameStr: "#" + chatsModel.activeChannel + ColumnLayout { + id: chatColumn - id: chatTopBarContent - color: "white" - height: 56 + RowLayout { + id: chatTopBar + Layout.alignment: Qt.AlignHCenter | Qt.AlignTop Layout.fillWidth: true - border.color: Theme.grey - border.width: 1 + z: 60 - // TODO this should be the Identicon if it's a private chat Rectangle { - id: channelIcon - width: 36 - height: 36 - anchors.left: parent.left - anchors.leftMargin: Theme.padding - anchors.top: parent.top - anchors.topMargin: Theme.smallPadding - color: { - if (!chatsModel.activeChannel) { - return Theme.transparent + property string channelNameStr: "#" + chatsModel.activeChannel + + id: chatTopBarContent + color: "white" + height: 56 + Layout.fillWidth: true + border.color: Theme.grey + border.width: 1 + + // TODO this should be the Identicon if it's a private chat + Rectangle { + id: channelIcon + width: 36 + height: 36 + anchors.left: parent.left + anchors.leftMargin: Theme.padding + anchors.top: parent.top + anchors.topMargin: Theme.smallPadding + color: { + if (!chatsModel.activeChannel) { + return Theme.transparent + } + const color = chatsModel.getChannelColor(chatsModel.activeChannel) + if (!color) { + return Theme.transparent + } + return color } - const color = chatsModel.getChannelColor(chatsModel.activeChannel) - if (!color) { - return Theme.transparent + radius: 50 + + Text { + id: channelIconText + color: "white" + opacity: 0.7 + text: chatTopBarContent.channelNameStr.substring(1, 2).toUpperCase() + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Bold + font.pixelSize: 18 } - return color } - radius: 50 + + TextEdit { + id: channelName + width: 80 + height: 20 + text: chatTopBarContent.channelNameStr + anchors.left: channelIcon.right + anchors.leftMargin: Theme.smallPadding + anchors.top: parent.top + anchors.topMargin: Theme.smallPadding + font.weight: Font.Medium + font.pixelSize: 15 + selectByMouse: true + readOnly: true + } Text { - id: channelIconText - color: "white" - opacity: 0.7 - text: chatTopBarContent.channelNameStr.substring(1, 2).toUpperCase() - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - font.weight: Font.Bold - font.pixelSize: 18 - } - } - - TextEdit { - id: channelName - width: 80 - height: 20 - text: chatTopBarContent.channelNameStr - anchors.left: channelIcon.right - anchors.leftMargin: Theme.smallPadding - anchors.top: parent.top - anchors.topMargin: Theme.smallPadding - font.weight: Font.Medium - font.pixelSize: 15 - selectByMouse: true - readOnly: true - } - - Text { - id: channelIdentifier - color: Theme.darkGrey - // TODO change this in case of private message - text: "Public chat" - font.pixelSize: 12 - anchors.left: channelIcon.right - anchors.leftMargin: Theme.smallPadding - anchors.top: channelName.bottom - anchors.topMargin: 0 - } - - Text { - id: moreActionsBtn - text: "..." - font.letterSpacing: 0.5 - font.bold: true - lineHeight: 1.4 - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - anchors.rightMargin: 20 - font.pixelSize: 25 - - MouseArea { - id: mouseArea - // The negative margins are for the mouse area to be a bit more wide around the button and have more space for the click - anchors.topMargin: -10 - anchors.bottomMargin: -10 - anchors.rightMargin: -15 - anchors.leftMargin: -15 - anchors.fill: parent - onClicked: console.log("Options click. Will do something later...") - cursorShape: Qt.PointingHandCursor - } - } - } - } - - RowLayout { - id: chatContainer - Layout.fillWidth: true - Layout.fillHeight: true - Layout.alignment: Qt.AlignLeft | Qt.AlignTop - - Component { - id: chatLogViewDelegate - Rectangle { - id: chatBox - height: 60 + chatText.height - color: "#00000000" - border.color: "#00000000" - Layout.alignment: Qt.AlignLeft | Qt.AlignTop - Layout.fillWidth: true - width: chatLogView.width - - Image { - id: chatImage - width: 30 - height: 30 - anchors.left: !isCurrentUser ? parent.left : undefined - anchors.leftMargin: !isCurrentUser ? Theme.padding : 0 - anchors.right: !isCurrentUser ? undefined : parent.right - anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding - anchors.top: parent.top - anchors.topMargin: Theme.padding - fillMode: Image.PreserveAspectFit - source: identicon - } - - TextEdit { - id: chatName - text: userName - anchors.top: parent.top - anchors.topMargin: 22 - anchors.left: !isCurrentUser ? chatImage.right : undefined - anchors.leftMargin: Theme.padding - anchors.right: !isCurrentUser ? undefined : chatImage.left - anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding - font.bold: true - font.pixelSize: 14 - readOnly: true - wrapMode: Text.WordWrap - selectByMouse: true - } - - TextEdit { - id: chatText - text: message - horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight - font.family: "Inter" - wrapMode: Text.WordWrap - anchors.right: !isCurrentUser ? parent.right : chatName.right - anchors.rightMargin: !isCurrentUser ? 60 : 0 - anchors.left: !isCurrentUser ? chatName.left : parent.left - anchors.leftMargin: !isCurrentUser ? 0 : 60 - anchors.top: chatName.bottom - anchors.topMargin: Theme.padding - font.pixelSize: 14 - readOnly: true - selectByMouse: true - Layout.fillWidth: true - } - - TextEdit { - id: chatTime + id: channelIdentifier color: Theme.darkGrey - font.family: "Inter" - text: timestamp - anchors.top: chatText.bottom - anchors.bottomMargin: Theme.padding - anchors.right: !isCurrentUser ? parent.right : undefined - anchors.rightMargin: !isCurrentUser ? Theme.padding : 0 - anchors.left: !isCurrentUser ? undefined : parent.left - anchors.leftMargin: !isCurrentUser ? 0 : Theme.padding - font.pixelSize: 10 - readOnly: true - selectByMouse: true + // TODO change this in case of private message + text: "Public chat" + font.pixelSize: 12 + anchors.left: channelIcon.right + anchors.leftMargin: Theme.smallPadding + anchors.top: channelName.bottom + anchors.topMargin: 0 + } + + Text { + id: moreActionsBtn + text: "..." + font.letterSpacing: 0.5 + font.bold: true + lineHeight: 1.4 + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: 20 + font.pixelSize: 25 + + MouseArea { + id: mouseArea + // The negative margins are for the mouse area to be a bit more wide around the button and have more space for the click + anchors.topMargin: -10 + anchors.bottomMargin: -10 + anchors.rightMargin: -15 + anchors.leftMargin: -15 + anchors.fill: parent + onClicked: console.log("Options click. Will do something later...") + cursorShape: Qt.PointingHandCursor + } } } } - ListView { - id: chatLogView - anchors.fill: parent - model: chatsModel.messageList + RowLayout { + id: chatContainer Layout.fillWidth: true Layout.fillHeight: true - delegate: chatLogViewDelegate - highlightFollowsCurrentItem: true - onCountChanged: { - if (!this.atYEnd) { - // User has scrolled up, we don't want to scroll back - return; - } + Layout.alignment: Qt.AlignLeft | Qt.AlignTop - // positionViewAtEnd doesn't work well. Instead, we use highlightFollowsCurrentItem - // and set the current Item/Index to the latest item - while (this.currentIndex < this.count - 1) { - this.incrementCurrentIndex() - } + Component { + id: chatLogViewDelegate + Rectangle { + id: chatBox + height: 60 + chatText.height + color: "#00000000" + border.color: "#00000000" + Layout.alignment: Qt.AlignLeft | Qt.AlignTop + Layout.fillWidth: true + width: chatLogView.width + Image { + id: chatImage + width: 30 + height: 30 + anchors.left: !isCurrentUser ? parent.left : undefined + anchors.leftMargin: !isCurrentUser ? Theme.padding : 0 + anchors.right: !isCurrentUser ? undefined : parent.right + anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding + anchors.top: parent.top + anchors.topMargin: Theme.padding + fillMode: Image.PreserveAspectFit + source: identicon + } + + TextEdit { + id: chatName + text: userName + anchors.top: parent.top + anchors.topMargin: 22 + anchors.left: !isCurrentUser ? chatImage.right : undefined + anchors.leftMargin: Theme.padding + anchors.right: !isCurrentUser ? undefined : chatImage.left + anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding + font.bold: true + font.pixelSize: 14 + readOnly: true + wrapMode: Text.WordWrap + selectByMouse: true + } + + TextEdit { + id: chatText + text: message + horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight + font.family: "Inter" + wrapMode: Text.WordWrap + anchors.right: !isCurrentUser ? parent.right : chatName.right + anchors.rightMargin: !isCurrentUser ? 60 : 0 + anchors.left: !isCurrentUser ? chatName.left : parent.left + anchors.leftMargin: !isCurrentUser ? 0 : 60 + anchors.top: chatName.bottom + anchors.topMargin: Theme.padding + font.pixelSize: 14 + readOnly: true + selectByMouse: true + Layout.fillWidth: true + } + + TextEdit { + id: chatTime + color: Theme.darkGrey + font.family: "Inter" + text: timestamp + anchors.top: chatText.bottom + anchors.bottomMargin: Theme.padding + anchors.right: !isCurrentUser ? parent.right : undefined + anchors.rightMargin: !isCurrentUser ? Theme.padding : 0 + anchors.left: !isCurrentUser ? undefined : parent.left + anchors.leftMargin: !isCurrentUser ? 0 : Theme.padding + font.pixelSize: 10 + readOnly: true + selectByMouse: true + } + } + } + + ListView { + id: chatLogView + anchors.fill: parent + model: chatsModel.messageList + Layout.fillWidth: true + Layout.fillHeight: true + delegate: chatLogViewDelegate + highlightFollowsCurrentItem: true + onCountChanged: { + if (!this.atYEnd) { + // User has scrolled up, we don't want to scroll back + return; + } + + // positionViewAtEnd doesn't work well. Instead, we use highlightFollowsCurrentItem + // and set the current Item/Index to the latest item + while (this.currentIndex < this.count - 1) { + this.incrementCurrentIndex() + } + + } } } - } - RowLayout { - id: chatInputContainer - height: 70 - Layout.fillWidth: true - Layout.bottomMargin: 0 - Layout.alignment: Qt.AlignLeft | Qt.AlignBottom - transformOrigin: Item.Bottom - - Rectangle { - id: element2 - width: 200 + RowLayout { + id: chatInputContainer height: 70 Layout.fillWidth: true - color: "white" - border.width: 0 + Layout.bottomMargin: 0 + Layout.alignment: Qt.AlignLeft | Qt.AlignBottom + transformOrigin: Item.Bottom Rectangle { - id: rectangle - color: "#00000000" - border.color: Theme.grey - anchors.fill: parent + id: element2 + width: 200 + height: 70 + Layout.fillWidth: true + color: "white" + border.width: 0 - Button { - id: chatSendBtn - x: 100 - width: 30 - height: 30 - text: "\u2191" - font.bold: true - font.pointSize: 12 - anchors.top: parent.top - anchors.topMargin: 20 - anchors.right: parent.right - anchors.rightMargin: 16 - onClicked: { - chatsModel.onSend(txtData.text) - txtData.text = "" - } - enabled: txtData.text !== "" - background: Rectangle { - color: parent.enabled ? Theme.blue : Theme.grey - radius: 50 - } - } - - 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.left: parent.left - anchors.leftMargin: 24 - Keys.onEnterPressed: { - chatsModel.onSend(txtData.text) - txtData.text = "" - } - Keys.onReturnPressed: { - chatsModel.onSend(txtData.text) - txtData.text = "" - } - background: Rectangle { - color: "#00000000" - } - } - - MouseArea { - id: mouseArea1 - anchors.rightMargin: 50 + Rectangle { + id: rectangle + color: "#00000000" + border.color: Theme.grey anchors.fill: parent - onClicked : { - txtData.forceActiveFocus(Qt.MouseFocusReason) + + Button { + id: chatSendBtn + x: 100 + width: 30 + height: 30 + text: "\u2191" + font.bold: true + font.pointSize: 12 + anchors.top: parent.top + anchors.topMargin: 20 + anchors.right: parent.right + anchors.rightMargin: 16 + onClicked: { + chatsModel.onSend(txtData.text) + txtData.text = "" + } + enabled: txtData.text !== "" + background: Rectangle { + color: parent.enabled ? Theme.blue : Theme.grey + radius: 50 + } + } + + 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.left: parent.left + anchors.leftMargin: 24 + Keys.onEnterPressed: { + chatsModel.onSend(txtData.text) + txtData.text = "" + } + Keys.onReturnPressed: { + chatsModel.onSend(txtData.text) + txtData.text = "" + } + background: Rectangle { + color: "#00000000" + } + } + + MouseArea { + id: mouseArea1 + anchors.rightMargin: 50 + anchors.fill: parent + onClicked : { + txtData.forceActiveFocus(Qt.MouseFocusReason) + } } } } } + + } + + ColumnLayout { + Layout.margins: 0 + Layout.fillHeight: false + Layout.fillWidth: false + anchors.left: parent.left + anchors.leftMargin: 200 + anchors.right: parent.right + anchors.rightMargin: 200 + anchors.bottom: parent.bottom + anchors.bottomMargin: 200 + anchors.top: parent.top + anchors.topMargin: 100 + Image { + source: "../../../onboarding/img/chat@2x.jpg" + } + + Text { + text: "Select a chat to start messaging" + font.weight: Font.DemiBold + font.pixelSize: 15 + color: Theme.darkGrey + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + } } } diff --git a/ui/app/AppLayouts/Chat/ChatLayout.qml b/ui/app/AppLayouts/Chat/ChatLayout.qml index 882a40d0e1..97dcdc1a90 100644 --- a/ui/app/AppLayouts/Chat/ChatLayout.qml +++ b/ui/app/AppLayouts/Chat/ChatLayout.qml @@ -24,6 +24,7 @@ SplitView { ChatColumn { id: chatColumn + chatGroupsListViewCount: contactsColumn.chatGroupsListViewCount } } diff --git a/ui/app/AppLayouts/Chat/ContactsColumn.qml b/ui/app/AppLayouts/Chat/ContactsColumn.qml index c0ce7d8506..af8b11feb8 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn.qml @@ -3,8 +3,10 @@ import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Qt.labs.platform 1.1 import "../../../imports" +import "./components" Item { + property alias chatGroupsListViewCount: chatGroupsListView.count property alias searchStr: searchText.text id: contactsColumn @@ -98,7 +100,7 @@ Item { font.pixelSize: 28 } - MouseArea { + MouseArea { anchors.fill: parent onClicked : { chatGroupsListView.currentIndex = chatsModel.joinChat(searchText.text); @@ -108,118 +110,185 @@ Item { } } - Item { + StackLayout { Layout.fillHeight: true Layout.fillWidth: true - Component { - id: chatViewDelegate + currentIndex: chatGroupsListView.count > 0 ? 1 : 0 + Item { + id: element1 + Layout.fillHeight: true + Layout.fillWidth: true - Rectangle { - id: wrapper - color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent + ColumnLayout { anchors.right: parent.right - anchors.rightMargin: Theme.padding - anchors.top: applicationWindow.top - anchors.topMargin: 0 + anchors.rightMargin: 20 anchors.left: parent.left - anchors.leftMargin: Theme.padding - radius: 8 - // Hide the box if it is filtered out - property bool isVisible: searchStr == "" || name.includes(searchStr) - visible: isVisible ? true : false - height: isVisible ? 64 : 0 + anchors.leftMargin: 20 + anchors.top: parent.top + anchors.topMargin: 20 + Layout.fillHeight: true + Layout.fillWidth: true + Row { + id: description + Layout.fillHeight: false + Layout.fillWidth: true + width: parent.width - MouseArea { - cursorShape: Qt.PointingHandCursor; - anchors.fill: parent - onClicked: { - chatsModel.setActiveChannelByIndex(index) - chatGroupsListView.currentIndex = index + Text { + width: parent.width + text: qsTr("Follow your interests in one of the many Public Chats.") + font.pointSize: 15 + wrapMode: Text.WordWrap + verticalAlignment: Text.AlignTop + horizontalAlignment: Text.AlignHCenter + fontSizeMode: Text.FixedSize + renderType: Text.QtRendering + onLinkActivated: console.log(link) } } - Rectangle { - id: contactImage - width: 40 - color: Theme.darkGrey + RowLayout { + id: row + Layout.fillHeight: false + Layout.fillWidth: true + anchors.right: parent.right + anchors.rightMargin: 0 anchors.left: parent.left - anchors.leftMargin: Theme.padding - anchors.top: parent.top - anchors.topMargin: 12 - anchors.bottom: parent.bottom - anchors.bottomMargin: 12 - radius: 50 - } + anchors.leftMargin: 0 + anchors.top: description.bottom + anchors.topMargin: 20 - Text { - id: contactInfo - text: name - anchors.right: contactTime.left - anchors.rightMargin: Theme.smallPadding - elide: Text.ElideRight - font.weight: Font.Medium - font.pixelSize: 15 - anchors.left: contactImage.right - anchors.leftMargin: Theme.padding - anchors.top: parent.top - anchors.topMargin: Theme.smallPadding - color: "black" - } - Text { - id: lastChatMessage - text: lastMessage || qsTr("No messages") - anchors.right: contactNumberChatsCircle.left - anchors.rightMargin: Theme.smallPadding - elide: Text.ElideRight - anchors.bottom: parent.bottom - anchors.bottomMargin: Theme.smallPadding - font.pixelSize: 15 - anchors.left: contactImage.right - anchors.leftMargin: Theme.padding - color: Theme.darkGrey - } - Text { - id: contactTime - text: timestamp - anchors.right: parent.right - anchors.rightMargin: Theme.padding - anchors.top: parent.top - anchors.topMargin: Theme.smallPadding - font.pixelSize: 11 - color: Theme.darkGrey - } - Rectangle { - id: contactNumberChatsCircle - width: 22 - height: 22 - radius: 50 - anchors.bottom: parent.bottom - anchors.bottomMargin: Theme.smallPadding - anchors.right: parent.right - anchors.rightMargin: Theme.padding - color: Theme.blue - visible: unviewedMessagesCount > 0 - Text { - id: contactNumberChats - text: unviewedMessagesCount - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - color: "white" + Flow { + Layout.fillHeight: false + Layout.fillWidth: true + spacing: 6 + + SuggestedChannel { channel: "introductions" } + SuggestedChannel { channel: "chitchat" } + SuggestedChannel { channel: "status" } + SuggestedChannel { channel: "crypto" } + SuggestedChannel { channel: "tech" } + SuggestedChannel { channel: "music" } + SuggestedChannel { channel: "movies" } + SuggestedChannel { channel: "test" } + SuggestedChannel { channel: "test2" } } } } } - ListView { - id: chatGroupsListView - anchors.topMargin: 24 - anchors.fill: parent - model: chatsModel.chats - delegate: chatViewDelegate + Item { + Component { + id: chatViewDelegate + + Rectangle { + id: wrapper + color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent + anchors.right: parent.right + anchors.rightMargin: Theme.padding + anchors.top: applicationWindow.top + anchors.topMargin: 0 + anchors.left: parent.left + anchors.leftMargin: Theme.padding + radius: 8 + // Hide the box if it is filtered out + property bool isVisible: searchStr == "" || name.includes(searchStr) + visible: isVisible ? true : false + height: isVisible ? 64 : 0 + + MouseArea { + cursorShape: Qt.PointingHandCursor; + anchors.fill: parent + onClicked: { + chatsModel.setActiveChannelByIndex(index) + chatGroupsListView.currentIndex = index + } + } + + Rectangle { + id: contactImage + width: 40 + color: Theme.darkGrey + anchors.left: parent.left + anchors.leftMargin: Theme.padding + anchors.top: parent.top + anchors.topMargin: 12 + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + radius: 50 + } + + Text { + id: contactInfo + text: name + anchors.right: contactTime.left + anchors.rightMargin: Theme.smallPadding + elide: Text.ElideRight + font.weight: Font.Medium + font.pixelSize: 15 + anchors.left: contactImage.right + anchors.leftMargin: Theme.padding + anchors.top: parent.top + anchors.topMargin: Theme.smallPadding + color: "black" + } + Text { + id: lastChatMessage + text: lastMessage || qsTr("No messages") + anchors.right: contactNumberChatsCircle.left + anchors.rightMargin: Theme.smallPadding + elide: Text.ElideRight + anchors.bottom: parent.bottom + anchors.bottomMargin: Theme.smallPadding + font.pixelSize: 15 + anchors.left: contactImage.right + anchors.leftMargin: Theme.padding + color: Theme.darkGrey + } + Text { + id: contactTime + text: timestamp + anchors.right: parent.right + anchors.rightMargin: Theme.padding + anchors.top: parent.top + anchors.topMargin: Theme.smallPadding + font.pixelSize: 11 + color: Theme.darkGrey + } + Rectangle { + id: contactNumberChatsCircle + width: 22 + height: 22 + radius: 50 + anchors.bottom: parent.bottom + anchors.bottomMargin: Theme.smallPadding + anchors.right: parent.right + anchors.rightMargin: Theme.padding + color: Theme.blue + visible: unviewedMessagesCount > 0 + Text { + id: contactNumberChats + text: unviewedMessagesCount + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + color: "white" + } + } + } + } + + ListView { + id: chatGroupsListView + anchors.topMargin: 24 + anchors.fill: parent + model: chatsModel.chats + delegate: chatViewDelegate + } } } } + } diff --git a/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml b/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml new file mode 100644 index 0000000000..813006b763 --- /dev/null +++ b/ui/app/AppLayouts/Chat/components/SuggestedChannel.qml @@ -0,0 +1,30 @@ +import QtQuick 2.0 +import "../../../../imports" + +Rectangle { + property string channel: "status" + + border.width: 1 + radius: 8 + width: children[0].width + 10 + height: 32 + border.color: Theme.grey + Text { + id: suggestedChannelText + text: "#" + channel + font.weight: Font.Medium + color: Theme.blue; + anchors.top: parent.top; + anchors.topMargin: 5; + anchors.left: parent.left; + anchors.leftMargin: 5; + horizontalAlignment: Text.AlignLeft; + font.pixelSize: 15 + } + + MouseArea { + anchors.fill: parent + onClicked: chatsModel.joinChat(channel) + cursorShape: Qt.PointingHandCursor + } +} diff --git a/ui/app/AppLayouts/Chat/components/qmldir b/ui/app/AppLayouts/Chat/components/qmldir new file mode 100644 index 0000000000..ce59d59180 --- /dev/null +++ b/ui/app/AppLayouts/Chat/components/qmldir @@ -0,0 +1 @@ +SuggestedChannel 1.0 SuggestedChannel.qml diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index b5d525058e..9e364e0d96 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -53,6 +53,8 @@ DISTFILES += \ app/AppLayouts/Chat/ChatColumn.qml \ app/AppLayouts/Chat/ChatLayout.qml \ app/AppLayouts/Chat/ContactsColumn.qml \ + app/AppLayouts/Chat/components/SuggestedChannel.qml \ + app/AppLayouts/Chat/components/qmldir \ app/AppLayouts/Chat/qmldir \ app/AppLayouts/Node/NodeLayout.qml \ app/AppLayouts/Profile/ProfileLayout.qml \