Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Alexandra Betouni
|
5adbc8d158 | ||
|
Alexandra Betouni
|
314945db06 | ||
|
Noelia
|
372659ed7f |
+12
-509
@@ -10,6 +10,7 @@ import StatusQ.Popups 0.1
|
||||
import StatusQ.Platform 0.1
|
||||
|
||||
import "demoapp"
|
||||
import "demoapp/data" 1.0
|
||||
|
||||
Rectangle {
|
||||
id: demoApp
|
||||
@@ -33,15 +34,15 @@ Rectangle {
|
||||
}
|
||||
|
||||
function setActiveItem(sectionId) {
|
||||
for (var i = 0; i < models.demoAppSectionsModel.count; i++) {
|
||||
let item = models.demoAppSectionsModel.get(i)
|
||||
for (var i = 0; i < Models.demoAppSectionsModel.count; i++) {
|
||||
let item = Models.demoAppSectionsModel.get(i)
|
||||
if (item.sectionId !== sectionId)
|
||||
{
|
||||
models.demoAppSectionsModel.setProperty(i, "active", false)
|
||||
Models.demoAppSectionsModel.setProperty(i, "active", false)
|
||||
continue
|
||||
}
|
||||
|
||||
models.demoAppSectionsModel.setProperty(i, "active", true);
|
||||
Models.demoAppSectionsModel.setProperty(i, "active", true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,7 +78,7 @@ Rectangle {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: models.demoAppSectionsModel
|
||||
sectionModel: Models.demoAppSectionsModel
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
@@ -185,514 +186,16 @@ Rectangle {
|
||||
|
||||
Component {
|
||||
id: statusAppChatView
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: headline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Chat"
|
||||
}
|
||||
|
||||
Item {
|
||||
id: searchInputWrapper
|
||||
anchors.top: headline.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
height: searchInput.height
|
||||
|
||||
StatusBaseInput {
|
||||
id: searchInput
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.right: actionButton.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
|
||||
height: 36
|
||||
topPadding: 8
|
||||
bottomPadding: 0
|
||||
placeholderText: "Search"
|
||||
icon.name: "search"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
id: actionButton
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "add"
|
||||
state: "default"
|
||||
|
||||
onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
|
||||
states: [
|
||||
State {
|
||||
name: "default"
|
||||
PropertyChanges {
|
||||
target: actionButton
|
||||
icon.rotation: 0
|
||||
highlighted: false
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "pressed"
|
||||
PropertyChanges {
|
||||
target: actionButton
|
||||
icon.rotation: 45
|
||||
highlighted: true
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
from: "default"
|
||||
to: "pressed"
|
||||
|
||||
RotationAnimation {
|
||||
duration: 150
|
||||
direction: RotationAnimation.Clockwise
|
||||
easing.type: Easing.InCubic
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
from: "pressed"
|
||||
to: "default"
|
||||
RotationAnimation {
|
||||
duration: 150
|
||||
direction: RotationAnimation.Counterclockwise
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
StatusPopupMenu {
|
||||
id: chatContextMenu
|
||||
|
||||
onOpened: {
|
||||
actionButton.state = "pressed"
|
||||
}
|
||||
|
||||
onClosed: {
|
||||
actionButton.state = "default"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Start new chat"
|
||||
icon.name: "private-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Start group chat"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Join public chat"
|
||||
icon.name: "public-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Communities"
|
||||
icon.name: "communities"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.top: searchInputWrapper.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
spacing: 8
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
sensor.onClicked: demoContactRequestsModal.open()
|
||||
}
|
||||
|
||||
StatusChatList {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
model: models.demoChatListItems
|
||||
onChatItemUnmuted: {
|
||||
for (var i = 0; i < models.demoChatListItems.count; i++) {
|
||||
let item = models.demoChatListItems.get(i);
|
||||
if (item.chatId === id) {
|
||||
models.demoChatListItems.setProperty(i, "muted", false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
openHandler: function (id) {
|
||||
chatId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "View Profile"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusChatToolBar {
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "Amazing Funny Squirrel"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
|
||||
searchButton.visible: false
|
||||
membersButton.visible: false
|
||||
notificationCount: 1
|
||||
|
||||
onNotificationButtonClicked: notificationCount = 0
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
id: contextMenu
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Clear History"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Leave Chat"
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusAppChatView { }
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusAppCommunityView
|
||||
|
||||
StatusAppThreePanelLayout {
|
||||
id: root
|
||||
|
||||
handle: Rectangle {
|
||||
implicitWidth: 5
|
||||
color: SplitHandle.pressed ? Theme.palette.baseColor2
|
||||
: (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
|
||||
}
|
||||
leftPanel: Item {
|
||||
id: leftPanel
|
||||
|
||||
StatusChatInfoToolBar {
|
||||
id: statusChatInfoToolBar
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
chatInfoButton.title: "CryptoKitties"
|
||||
chatInfoButton.subTitle: "128 Members"
|
||||
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.onClicked: demoCommunityDetailModal.open()
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
id: scrollView
|
||||
|
||||
anchors.top: statusChatInfoToolBar.bottom
|
||||
anchors.topMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
width: leftPanel.width
|
||||
|
||||
contentHeight: communityCategories.height
|
||||
clip: true
|
||||
|
||||
StatusChatListAndCategories {
|
||||
id: communityCategories
|
||||
width: leftPanel.width
|
||||
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
|
||||
|
||||
draggableItems: true
|
||||
draggableCategories: false
|
||||
model: models.demoCommunityChatListItems
|
||||
showCategoryActionButtons: true
|
||||
|
||||
categoryPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string categoryId
|
||||
|
||||
openHandler: function (id) {
|
||||
categoryId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Category"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Edit Category"
|
||||
icon.name: "edit"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete Category"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
chatListPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Item {
|
||||
StatusChatToolBar {
|
||||
id: statusChatToolBar
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "general"
|
||||
chatInfoButton.subTitle: "Community Chat"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
|
||||
onSearchButtonClicked: {
|
||||
searchButton.highlighted = !searchButton.highlighted;
|
||||
searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
|
||||
"",
|
||||
demoCommunityDetailModal.header.image.source);
|
||||
searchPopup.open();
|
||||
}
|
||||
membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
|
||||
onMembersButtonClicked: {
|
||||
root.showRightPanel = !root.showRightPanel;
|
||||
}
|
||||
}
|
||||
|
||||
StatusSearchPopup {
|
||||
id: searchPopup
|
||||
searchOptionsPopupMenu: searchPopupMenu
|
||||
onAboutToHide: {
|
||||
if (searchPopupMenu.visible) {
|
||||
searchPopupMenu.close();
|
||||
}
|
||||
//clear menu
|
||||
for (var i = 2; i < searchPopupMenu.count; i++) {
|
||||
searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
|
||||
}
|
||||
}
|
||||
onClosed: {
|
||||
statusChatToolBar.searchButton.highlighted = false
|
||||
searchPopupMenu.dismiss();
|
||||
}
|
||||
onSearchTextChanged: {
|
||||
if (searchPopup.searchText !== "") {
|
||||
searchPopup.loading = true;
|
||||
searchModelSimTimer.start();
|
||||
} else {
|
||||
searchPopup.searchResults = [];
|
||||
searchModelSimTimer.stop();
|
||||
}
|
||||
}
|
||||
Timer {
|
||||
id: searchModelSimTimer
|
||||
interval: 500
|
||||
onTriggered: {
|
||||
if (searchPopup.searchText.startsWith("c")) {
|
||||
searchPopup.searchResults = models.searchResultsA;
|
||||
} else {
|
||||
searchPopup.searchResults = models.searchResultsB;
|
||||
}
|
||||
searchPopup.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusSearchLocationMenu {
|
||||
id: searchPopupMenu
|
||||
searchPopup: searchPopup
|
||||
locationModel: models.optionsModel
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
id: rightPanel
|
||||
StatusBaseText {
|
||||
id: titleText
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin:16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
font.pixelSize: 15
|
||||
text: qsTr("Members")
|
||||
}
|
||||
|
||||
ListView {
|
||||
anchors.top: titleText.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 16
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
model: ["John", "Nick", "Maria", "Mike"]
|
||||
delegate: Row {
|
||||
width: parent.width
|
||||
height: 30
|
||||
spacing: 8
|
||||
Rectangle {
|
||||
width: 24
|
||||
height: 24
|
||||
radius: width/2
|
||||
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
|
||||
}
|
||||
StatusBaseText {
|
||||
height: parent.height
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
text: modelData
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusAppCommunityView {
|
||||
communityDetailModalTitle: demoCommunityDetailModal.header.title
|
||||
communityDetailModalImage: demoCommunityDetailModal.header.image.source
|
||||
onChatInfoButtonClicked: {
|
||||
demoCommunityDetailModal.open();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtQml.Models 2.2
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
ListView {
|
||||
id: messageList
|
||||
anchors.fill: parent
|
||||
anchors.margins: 15
|
||||
clip: true
|
||||
delegate: StatusMessage {
|
||||
id: delegate
|
||||
width: parent.width
|
||||
|
||||
audioMessageInfoText: "Audio Message"
|
||||
cancelButtonText: "Cancel"
|
||||
saveButtonText: "Save"
|
||||
loadingImageText: "Loading image..."
|
||||
errorLoadingImageText: "Error loading the image"
|
||||
resendText: "Resend"
|
||||
pinnedMsgInfoText: "Pinned by"
|
||||
|
||||
messageDetails: StatusMessageDetails {
|
||||
contentType: model.contentType
|
||||
messageContent: model.messageContent
|
||||
amISender: model.amIsender
|
||||
displayName: model.userName
|
||||
secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
|
||||
chatID: model.chatKey
|
||||
profileImage: StatusImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
source: model.profileImage
|
||||
isIdenticon: model.isIdenticon
|
||||
}
|
||||
messageText: model.message
|
||||
hasMention: model.hasMention
|
||||
contactType: model.contactType
|
||||
isPinned: model.isPinned
|
||||
pinnedBy: model.pinnedBy
|
||||
hasExpired: model.hasExpired
|
||||
}
|
||||
timestamp.text: "10:00 am"
|
||||
timestamp.tooltip.text: "10:01 am"
|
||||
// reply related data
|
||||
isAReply: model.isReply
|
||||
replyDetails: StatusMessageDetails {
|
||||
amISender: model.isReply ? model.replyAmISender : ""
|
||||
displayName: model.isReply ? model.replySenderName: ""
|
||||
profileImage: StatusImageSettings {
|
||||
width: 20
|
||||
height: 20
|
||||
source: model.isReply ? model.replyProfileImage: ""
|
||||
isIdenticon: model.isReply ? model.replyIsIdenticon: ""
|
||||
}
|
||||
messageText: model.isReply ? model.replyMessageText: ""
|
||||
contentType: model.replyContentType
|
||||
messageContent: model.replyMessageContent
|
||||
}
|
||||
quickActions: [
|
||||
StatusFlatRoundButton {
|
||||
id: emojiBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "reaction-b"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Add reaction"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: replyBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "reply"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Reply"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "tiny/edit"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Edit"
|
||||
onClicked: {
|
||||
delegate.editMode = !delegate.editMode
|
||||
}
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: otherBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "more"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "More"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtQml.Models 2.2
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Page {
|
||||
id: root
|
||||
anchors.fill: parent
|
||||
anchors.margins: 16
|
||||
property ListModel contactsModel: null
|
||||
background: null
|
||||
|
||||
header: RowLayout {
|
||||
id: headerRow
|
||||
width: parent.width
|
||||
height: tagSelector.height
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
|
||||
StatusTagSelector {
|
||||
id: tagSelector
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
Layout.leftMargin: 17
|
||||
implicitHeight: 44
|
||||
toLabelText: qsTr("To: ")
|
||||
warningText: qsTr("5 USER LIMIT REACHED")
|
||||
//simulate model filtering, TODO this
|
||||
//makes more sense to be provided by the backend
|
||||
//figure how real implementation should look like
|
||||
property ListModel sortedList: ListModel { }
|
||||
onTextChanged: {
|
||||
sortedList.clear();
|
||||
if (text !== "") {
|
||||
for (var i = 0; i < contactsModel.count; i++ ) {
|
||||
var entry = contactsModel.get(i);
|
||||
if (entry.name.toLowerCase().includes(text.toLowerCase())) {
|
||||
sortedList.insert(sortedList.count, {"publicId": entry.publicId, "name": entry.name,
|
||||
"icon": entry.icon, "isIdenticon": entry.isIdenticon,
|
||||
"onlineStatus": entry.onlineStatus});
|
||||
userListView.model = sortedList;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
userListView.model = contactsModel;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
implicitHeight: 44
|
||||
enabled: (tagSelector.namesModel.count > 0)
|
||||
text: "Confirm"
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: headerRow.height + 16
|
||||
|
||||
Item {
|
||||
anchors.fill: parent
|
||||
visible: (contactsModel.count > 0)
|
||||
|
||||
StatusBaseText {
|
||||
id: contactsLabel
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.baseColor1
|
||||
text: "Contacts"
|
||||
}
|
||||
Control {
|
||||
width: 360
|
||||
anchors {
|
||||
top: contactsLabel.bottom
|
||||
topMargin: 8//Style.current.padding
|
||||
bottom: parent.bottom
|
||||
bottomMargin: 20//Style.current.bigPadding
|
||||
}
|
||||
background: Rectangle {
|
||||
id: statusPopupMenuBackgroundContent
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: (userListView.height + 8)
|
||||
visible: (tagSelector.sortedList.count > 0)
|
||||
color: Theme.palette.statusPopupMenu.backgroundColor
|
||||
radius: 8
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
width: statusPopupMenuBackgroundContent.width
|
||||
height: statusPopupMenuBackgroundContent.height
|
||||
x: statusPopupMenuBackgroundContent.x
|
||||
visible: statusPopupMenuBackgroundContent.visible
|
||||
source: statusPopupMenuBackgroundContent
|
||||
horizontalOffset: 0
|
||||
verticalOffset: 4
|
||||
radius: 12
|
||||
samples: 25
|
||||
spread: 0.2
|
||||
color: Theme.palette.dropShadow
|
||||
}
|
||||
}
|
||||
contentItem: ListView {
|
||||
id: userListView
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: (count * 64) > parent.height ? parent.height : (count * 64)
|
||||
clip: true
|
||||
model: contactsModel
|
||||
ScrollBar.vertical: ScrollBar {
|
||||
policy: ScrollBar.AsNeeded
|
||||
}
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
delegate: Item {
|
||||
id: wrapper
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
height: 64
|
||||
property bool hovered: false
|
||||
Rectangle {
|
||||
id: rectangle
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 8
|
||||
anchors.rightMargin: 8
|
||||
anchors.leftMargin: 8
|
||||
radius: 8
|
||||
visible: (tagSelector.sortedList.count > 0)
|
||||
color: (wrapper.hovered) ? Theme.palette.baseColor2 : "transparent"
|
||||
}
|
||||
|
||||
StatusSmartIdenticon {
|
||||
id: contactImage
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16//Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
name: model.name
|
||||
icon: StatusIconSettings {
|
||||
width: 28
|
||||
height: 28
|
||||
letterSize: 15
|
||||
}
|
||||
image: StatusImageSettings {
|
||||
width: 28
|
||||
height: 28
|
||||
source: model.icon
|
||||
isIdenticon: model.isIdenticon
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: contactInfo
|
||||
text: model.name
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.left: contactImage.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
elide: Text.ElideRight
|
||||
color: Theme.palette.directColor1
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 15
|
||||
}
|
||||
|
||||
StatusBadge {
|
||||
id: statusBadge
|
||||
width: 15
|
||||
height: 15
|
||||
anchors.left: contactImage.right
|
||||
anchors.leftMargin: -8
|
||||
anchors.bottom: contactImage.bottom
|
||||
border.width: 3
|
||||
border.color: Theme.palette.statusAppNavBar.backgroundColor
|
||||
color: {
|
||||
if (model.onlineStatus === 1)
|
||||
return Theme.palette.successColor1;
|
||||
else if (model.onlineStatus === 2)
|
||||
return Theme.palette.pinColor1;
|
||||
else if (model.onlineStatus === 3)
|
||||
return Theme.palette.dangerColor1;
|
||||
|
||||
return "transparent"
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: {
|
||||
wrapper.hovered = true;
|
||||
}
|
||||
onExited: {
|
||||
wrapper.hovered = false;
|
||||
}
|
||||
onClicked: {
|
||||
tagSelector.insertTag(model.name, model.publicId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Component.onCompleted: {
|
||||
if (visible) {
|
||||
tagSelector.textEdit.forceActiveFocus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
visible: (contactsModel.count === 0)
|
||||
anchors.centerIn: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.baseColor1
|
||||
text: qsTr("You can only send direct messages to your Contacts. \n\n
|
||||
Send a contact request to the person you would like to chat with, you will be\n able to
|
||||
chat with them once they have accepted your contact request.")
|
||||
Component.onCompleted: {
|
||||
if (visible) {
|
||||
tagSelector.enabled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
@@ -11,6 +12,7 @@ import "data" 1.0
|
||||
|
||||
StatusAppThreePanelLayout {
|
||||
id: root
|
||||
property bool createChat: false
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
@@ -23,113 +25,35 @@ StatusAppThreePanelLayout {
|
||||
text: "Chat"
|
||||
}
|
||||
|
||||
Item {
|
||||
RowLayout {
|
||||
id: searchInputWrapper
|
||||
anchors.top: headline.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
height: searchInput.height
|
||||
anchors.top: headline.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
|
||||
StatusBaseInput {
|
||||
id: searchInput
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.right: actionButton.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
|
||||
height: 36
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
Layout.leftMargin: 17
|
||||
implicitHeight: 36
|
||||
topPadding: 8
|
||||
bottomPadding: 0
|
||||
placeholderText: "Search"
|
||||
icon.name: "search"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
id: actionButton
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
width: 32
|
||||
height: 32
|
||||
StatusIconTabButton {
|
||||
icon.name: "public-chat"
|
||||
}
|
||||
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "add"
|
||||
state: "default"
|
||||
|
||||
onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
|
||||
states: [
|
||||
State {
|
||||
name: "default"
|
||||
PropertyChanges {
|
||||
target: actionButton
|
||||
icon.rotation: 0
|
||||
highlighted: false
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "pressed"
|
||||
PropertyChanges {
|
||||
target: actionButton
|
||||
icon.rotation: 45
|
||||
highlighted: true
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
from: "default"
|
||||
to: "pressed"
|
||||
|
||||
RotationAnimation {
|
||||
duration: 150
|
||||
direction: RotationAnimation.Clockwise
|
||||
easing.type: Easing.InCubic
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
from: "pressed"
|
||||
to: "default"
|
||||
RotationAnimation {
|
||||
duration: 150
|
||||
direction: RotationAnimation.Counterclockwise
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
StatusPopupMenu {
|
||||
id: chatContextMenu
|
||||
|
||||
onOpened: {
|
||||
actionButton.state = "pressed"
|
||||
}
|
||||
|
||||
onClosed: {
|
||||
actionButton.state = "default"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Start new chat"
|
||||
icon.name: "private-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Start group chat"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Join public chat"
|
||||
icon.name: "public-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Communities"
|
||||
icon.name: "communities"
|
||||
}
|
||||
StatusIconTabButton {
|
||||
icon.name: "edit"
|
||||
onClicked: {
|
||||
root.createChat = !root.createChat;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -149,10 +73,7 @@ StatusAppThreePanelLayout {
|
||||
|
||||
StatusChatList {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
chatListItems.model: Models.demoChatListItems
|
||||
selectedChatId: "0"
|
||||
onChatItemSelected: selectedChatId = id
|
||||
model: Models.demoChatListItems
|
||||
onChatItemUnmuted: {
|
||||
for (var i = 0; i < Models.demoChatListItems.count; i++) {
|
||||
let item = Models.demoChatListItems.get(i);
|
||||
@@ -204,6 +125,25 @@ StatusAppThreePanelLayout {
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Loader {
|
||||
anchors.fill: parent
|
||||
sourceComponent: root.createChat ? createChatView : chatChannelView
|
||||
}
|
||||
|
||||
Component {
|
||||
id: createChatView
|
||||
CreateChatView {
|
||||
contactsModel: Models.dummyContactsModel
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: chatChannelView
|
||||
ChatChannelView {
|
||||
model: Models.chatMessagesModel
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
@@ -251,98 +191,4 @@ StatusAppThreePanelLayout {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: ListView {
|
||||
id: messageList
|
||||
anchors.fill: parent
|
||||
anchors.margins: 15
|
||||
clip: true
|
||||
model: Models.chatMessagesModel
|
||||
delegate: StatusMessage {
|
||||
id: delegate
|
||||
width: parent.width
|
||||
|
||||
audioMessageInfoText: "Audio Message"
|
||||
cancelButtonText: "Cancel"
|
||||
saveButtonText: "Save"
|
||||
loadingImageText: "Loading image..."
|
||||
errorLoadingImageText: "Error loading the image"
|
||||
resendText: "Resend"
|
||||
pinnedMsgInfoText: "Pinned by"
|
||||
|
||||
messageDetails: StatusMessageDetails {
|
||||
contentType: model.contentType
|
||||
messageContent: model.messageContent
|
||||
amISender: model.amIsender
|
||||
displayName: model.userName
|
||||
secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
|
||||
chatID: model.chatKey
|
||||
profileImage: StatusImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
source: model.profileImage
|
||||
isIdenticon: model.isIdenticon
|
||||
}
|
||||
messageText: model.message
|
||||
hasMention: model.hasMention
|
||||
contactType: model.contactType
|
||||
isPinned: model.isPinned
|
||||
pinnedBy: model.pinnedBy
|
||||
hasExpired: model.hasExpired
|
||||
}
|
||||
timestamp.text: "10:00 am"
|
||||
timestamp.tooltip.text: "10:01 am"
|
||||
// reply related data
|
||||
isAReply: model.isReply
|
||||
replyDetails: StatusMessageDetails {
|
||||
amISender: model.isReply ? model.replyAmISender : ""
|
||||
displayName: model.isReply ? model.replySenderName: ""
|
||||
profileImage: StatusImageSettings {
|
||||
width: 20
|
||||
height: 20
|
||||
source: model.isReply ? model.replyProfileImage: ""
|
||||
isIdenticon: model.isReply ? model.replyIsIdenticon: ""
|
||||
}
|
||||
messageText: model.isReply ? model.replyMessageText: ""
|
||||
contentType: model.replyContentType
|
||||
messageContent: model.replyMessageContent
|
||||
}
|
||||
quickActions: [
|
||||
StatusFlatRoundButton {
|
||||
id: emojiBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "reaction-b"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Add reaction"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: replyBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "reply"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Reply"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "tiny/edit"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Edit"
|
||||
onClicked: {
|
||||
delegate.editMode = !delegate.editMode
|
||||
}
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: otherBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "more"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "More"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,11 +77,9 @@ StatusAppThreePanelLayout {
|
||||
|
||||
draggableItems: true
|
||||
draggableCategories: false
|
||||
chatList.model: Models.demoCommunityChatListItems
|
||||
categoryList.model: Models.demoCommunityCategoryItems
|
||||
model: Models.demoCommunityChatListItems
|
||||
|
||||
showCategoryActionButtons: true
|
||||
onChatItemSelected: selectedChatId = id
|
||||
|
||||
categoryPopupMenu: StatusPopupMenu {
|
||||
|
||||
|
||||
+328
-81
@@ -4,122 +4,268 @@ import StatusQ.Components 0.1
|
||||
|
||||
QtObject {
|
||||
|
||||
property ListModel demoChatListItems: ListModel {
|
||||
property ListModel dummyContactsModel: ListModel {
|
||||
ListElement {
|
||||
publicId: "0x0"
|
||||
name: "Maria"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 3
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x1"
|
||||
name: "James"
|
||||
icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
isIdenticon: false
|
||||
onlineStatus: 1
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x2"
|
||||
name: "Paul"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 2
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x3"
|
||||
name: "Tracy"
|
||||
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
isIdenticon: true
|
||||
onlineStatus: 3
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x4"
|
||||
name: "Nick"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 3
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x5"
|
||||
name: "Steven"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 2
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x6"
|
||||
name: "Helen"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 3
|
||||
}
|
||||
}
|
||||
|
||||
property var demoChatListItems: ListModel {
|
||||
id: demoChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
itemId: "x012340000"
|
||||
name: "#status"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
mentionsCount: 0
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "blue"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 0
|
||||
isCategory: false
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
itemId: "x012340001"
|
||||
name: "status-desktop"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "red"
|
||||
unreadMessagesCount: 1
|
||||
mentionsCount: 1
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 1
|
||||
muted: false
|
||||
active: false
|
||||
position: 1
|
||||
isCategory: false
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
itemId: "x012340002"
|
||||
name: "Amazing Funny Squirrel"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: false
|
||||
color: "green"
|
||||
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
unreadMessagesCount: 0
|
||||
position: 2
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "Black Ops"
|
||||
chatType: StatusChatListItem.Type.GroupChat
|
||||
muted: false
|
||||
color: "purple"
|
||||
unreadMessagesCount: 0
|
||||
position: 3
|
||||
}
|
||||
ListElement {
|
||||
chatId: "4"
|
||||
name: "Spectacular Growing Otter"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: true
|
||||
color: "Orange"
|
||||
unreadMessagesCount: 0
|
||||
position: 4
|
||||
}
|
||||
ListElement {
|
||||
chatId: "5"
|
||||
name: "channel-with-a-super-duper-long-name"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
isIdenticon: true
|
||||
color: "green"
|
||||
unreadMessagesCount: 0
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.OneToOneChat
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: true
|
||||
position: 2
|
||||
isCategory: false
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
itemId: "x012340003"
|
||||
name: "Black Ops"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "purple"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.OneToOneChat
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 3
|
||||
isCategory: false
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
itemId: "x012340004"
|
||||
name: "Spectacular Growing Otter"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.OneToOneChat
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 4
|
||||
isCategory: false
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
itemId: "x012340005"
|
||||
name: "channel-with-a-super-duper-long-name"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "green"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 5
|
||||
isCategory: false
|
||||
subItems: []
|
||||
}
|
||||
}
|
||||
|
||||
property var demoCommunityChatListItems: ListModel {
|
||||
id: demoCommunityChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
itemId: "x012340000"
|
||||
name: "general"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.Unknown0
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 0
|
||||
isCategory: true
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "random"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
itemId: "x0125340000"
|
||||
name: "Pink Channel"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "pink"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
active: false
|
||||
position: 0
|
||||
isCategory: false
|
||||
subItems: []
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "watercooler"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
position: 1
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "language-design"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "dev"
|
||||
position: 0
|
||||
}
|
||||
}
|
||||
|
||||
property var demoCommunityCategoryItems: ListModel {
|
||||
id: demoCommunityCategoryItems
|
||||
ListElement {
|
||||
categoryId: "public"
|
||||
itemId: "x012340001"
|
||||
name: "Public"
|
||||
position: 0
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.Unknown0
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: true
|
||||
position: 1
|
||||
isCategory: true
|
||||
subItems: [
|
||||
ListElement {
|
||||
itemId: "x012340002"
|
||||
parentItemId: "x012340001"
|
||||
name: "random"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 4
|
||||
muted: false
|
||||
active: false
|
||||
position: 0
|
||||
},
|
||||
ListElement {
|
||||
itemId: "x012340003"
|
||||
parentItemId: "x012340001"
|
||||
name: "watercooler"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: true
|
||||
position: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
ListElement {
|
||||
categoryId: "dev"
|
||||
itemId: "x012340004"
|
||||
name: "Development"
|
||||
position: 1
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
type: StatusChatListItem.Type.Unknown0
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: false
|
||||
active: false
|
||||
position: 2
|
||||
isCategory: true
|
||||
subItems: [
|
||||
ListElement {
|
||||
itemId: "x012340005"
|
||||
parentItemId: "x012340004"
|
||||
name: "language-design"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
color: "orange"
|
||||
description: ""
|
||||
hasUnreadMessages: false
|
||||
notificationsCount: 0
|
||||
muted: true
|
||||
active: false
|
||||
position: 0
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -746,12 +892,20 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
|
||||
}
|
||||
ListElement {
|
||||
nickName: "carmen.eth"
|
||||
userName: ""
|
||||
chatKey: ""
|
||||
trustIndicator: StatusMemberListItem.TrustedType.Untrustworthy
|
||||
isMutualContact: false
|
||||
isOnline: false
|
||||
source: ""
|
||||
isIdenticon: false
|
||||
}
|
||||
ListElement {
|
||||
nickName: "This girl I know from work"
|
||||
userName: "annabelle"
|
||||
chatKey: ""
|
||||
trustIndicator: StatusMemberListItem.TrustedType.None
|
||||
isMutualContact: false
|
||||
isOnline: true
|
||||
source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
|
||||
ExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
|
||||
@@ -769,4 +923,97 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
|
||||
isIdenticon: true
|
||||
}
|
||||
}
|
||||
|
||||
// App Section Types:
|
||||
// chat: 0
|
||||
// community: 1
|
||||
// wallet: 2
|
||||
// browser: 3
|
||||
// nodeManagement: 4
|
||||
// profileSettings: 5
|
||||
// apiDocumentation: 100
|
||||
// demoApp: 101
|
||||
|
||||
property ListModel mainAppSectionsModel: ListModel {
|
||||
ListElement {
|
||||
sectionId: "mainApp"
|
||||
sectionType: 100
|
||||
name: "API Documentation"
|
||||
active: true
|
||||
image: ""
|
||||
icon: "edit"
|
||||
color: ""
|
||||
hasNotification: false
|
||||
notificationsCount: 0
|
||||
}
|
||||
ListElement {
|
||||
sectionId: "demoApp"
|
||||
sectionType: 101
|
||||
name: "Demo Application"
|
||||
active: false
|
||||
image: ""
|
||||
icon: "status"
|
||||
color: ""
|
||||
hasNotification: false
|
||||
notificationsCount: 0
|
||||
}
|
||||
}
|
||||
|
||||
property ListModel demoAppSectionsModel: ListModel {
|
||||
ListElement {
|
||||
sectionId: "chat"
|
||||
sectionType: 0
|
||||
name: "Chat"
|
||||
active: true
|
||||
image: ""
|
||||
icon: "chat"
|
||||
color: ""
|
||||
hasNotification: false
|
||||
notificationsCount: 0
|
||||
}
|
||||
ListElement {
|
||||
sectionId: "0x123456789"
|
||||
sectionType: 1
|
||||
name: "Status Community"
|
||||
active: false
|
||||
image: "https://assets.brandfetch.io/51a495de903c46a.png"
|
||||
icon: ""
|
||||
color: ""
|
||||
hasNotification: false
|
||||
notificationsCount: 0
|
||||
}
|
||||
ListElement {
|
||||
sectionId: "wallet"
|
||||
sectionType: 2
|
||||
name: "Wallet"
|
||||
active: false
|
||||
image: ""
|
||||
icon: "wallet"
|
||||
color: ""
|
||||
hasNotification: false
|
||||
notificationsCount: 0
|
||||
}
|
||||
ListElement {
|
||||
sectionId: "browser"
|
||||
sectionType: 3
|
||||
name: "Browser"
|
||||
active: false
|
||||
image: ""
|
||||
icon: "bigger/browser"
|
||||
color: ""
|
||||
hasNotification: false
|
||||
notificationsCount: 0
|
||||
}
|
||||
ListElement {
|
||||
sectionId: "profile"
|
||||
sectionType: 6
|
||||
name: "Profile"
|
||||
active: false
|
||||
image: ""
|
||||
icon: "bigger/settings"
|
||||
color: ""
|
||||
hasNotification: true
|
||||
notificationsCount: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+13
-11
@@ -12,6 +12,8 @@ import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Platform 0.1
|
||||
|
||||
import "demoapp/data" 1.0
|
||||
|
||||
StatusWindow {
|
||||
id: rootWindow
|
||||
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
|
||||
@@ -46,20 +48,15 @@ StatusWindow {
|
||||
readonly property int demoApp: 101
|
||||
}
|
||||
|
||||
Models {
|
||||
id: models
|
||||
}
|
||||
|
||||
function setActiveItem(sectionId) {
|
||||
for (var i = 0; i < models.mainAppSectionsModel.count; i++) {
|
||||
let item = models.mainAppSectionsModel.get(i)
|
||||
if (item.sectionId !== sectionId)
|
||||
{
|
||||
models.mainAppSectionsModel.setProperty(i, "active", false)
|
||||
for (var i = 0; i < Models.mainAppSectionsModel.count; i++) {
|
||||
let item = Models.mainAppSectionsModel.get(i)
|
||||
if (item.sectionId !== sectionId) {
|
||||
Models.mainAppSectionsModel.setProperty(i, "active", false);
|
||||
continue
|
||||
}
|
||||
|
||||
models.mainAppSectionsModel.setProperty(i, "active", true);
|
||||
Models.mainAppSectionsModel.setProperty(i, "active", true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,7 +69,7 @@ StatusWindow {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: models.mainAppSectionsModel
|
||||
sectionModel: Models.mainAppSectionsModel
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
@@ -258,6 +255,11 @@ StatusWindow {
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page("StatusExpandableSettingsItem");
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusTagSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Popup" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPopupMenu"
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
anchors.fill: parent
|
||||
|
||||
property ListModel asortedContacts: ListModel {
|
||||
ListElement {
|
||||
publicId: "0x0"
|
||||
name: "Maria"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 3
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x1"
|
||||
name: "James"
|
||||
icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
isIdenticon: false
|
||||
onlineStatus: 1
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x2"
|
||||
name: "Paul"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 2
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x3"
|
||||
name: "Tracy"
|
||||
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
isIdenticon: true
|
||||
onlineStatus: 3
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x4"
|
||||
name: "Nick"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 3
|
||||
}
|
||||
}
|
||||
|
||||
StatusTagSelector {
|
||||
id: tagSelector
|
||||
width: 650
|
||||
height: 44
|
||||
anchors.centerIn: parent
|
||||
namesModel: root.asortedContacts
|
||||
toLabelText: qsTr("To: ")
|
||||
warningText: qsTr("5 USER LIMIT REACHED")
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
implicitWidth: 448
|
||||
implicitHeight: 44
|
||||
|
||||
property alias textEdit: edit
|
||||
property alias text: edit.text
|
||||
property string warningText: ""
|
||||
property string toLabelText: ""
|
||||
property int nameCountLimit: 5
|
||||
property ListModel namesModel: ListModel { }
|
||||
|
||||
function find(model, criteria) {
|
||||
for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i);
|
||||
return null;
|
||||
}
|
||||
|
||||
function insertTag(name, id) {
|
||||
if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) {
|
||||
namesModel.insert(namesModel.count, {"name": name, "publicId": id});
|
||||
edit.clear();
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: 8
|
||||
color: Theme.palette.baseColor2
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
spacing: 8
|
||||
StatusBaseText {
|
||||
Layout.preferredWidth: 22
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
color: Theme.palette.baseColor1
|
||||
text: root.toLabelText
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: namesList
|
||||
Layout.preferredWidth: (count >= 5) ? (parent.width - warningTextLabel.width - 30) : childrenRect.width
|
||||
implicitHeight: 30
|
||||
visible: (count > 0)
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
model: namesModel
|
||||
orientation: ListView.Horizontal
|
||||
spacing: 8
|
||||
clip: true
|
||||
onWidthChanged: {
|
||||
positionViewAtEnd();
|
||||
}
|
||||
|
||||
delegate: Rectangle {
|
||||
id: nameDelegate
|
||||
width: (nameText.contentWidth + 34)
|
||||
height: 30
|
||||
color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
|
||||
radius: 8
|
||||
StatusBaseText {
|
||||
id: nameText
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: Theme.palette.indirectColor1
|
||||
text: name
|
||||
}
|
||||
StatusIcon {
|
||||
anchors.left: nameText.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: Theme.palette.indirectColor1
|
||||
icon: "close"
|
||||
}
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
namesModel.remove(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TextEdit {
|
||||
id: edit
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 44
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: (namesModel.count < 5)
|
||||
enabled: visible
|
||||
focus: true
|
||||
font.pixelSize: 15
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: Theme.palette.directColor1
|
||||
Keys.onPressed: {
|
||||
if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
|
||||
&& getText(cursorPosition, (cursorPosition-1)) === "") {
|
||||
namesModel.remove((namesList.count-1), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: warningTextLabel
|
||||
visible: (namesModel.count === 5)
|
||||
Layout.preferredWidth: 120
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
|
||||
font.pixelSize: 10
|
||||
color: Theme.palette.dangerColor1
|
||||
text: root.warningText
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -26,3 +26,4 @@ StatusExpandableItem 0.1 StatusExpandableItem.qml
|
||||
StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
|
||||
StatusMessage 0.1 StatusMessage.qml
|
||||
StatusMessageDetails 0.1 StatusMessageDetails.qml
|
||||
StatusTagSelector 0.1 StatusTagSelector.qml
|
||||
|
||||
@@ -320,5 +320,6 @@
|
||||
<file>src/StatusQ/Controls/StatusProgressBar.qml</file>
|
||||
<file>src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml</file>
|
||||
<file>src/StatusQ/Components/StatusMemberListItem.qml</file>
|
||||
<file>src/StatusQ/Components/StatusTagSelector.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
||||
Reference in New Issue
Block a user