import QtQuick 2.14 import QtQuick.Controls 2.14 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 import StatusQ.Layout 0.1 import StatusQ.Popups 0.1 Rectangle { id: demoApp height: 602 width: 902 border.width: 1 border.color: Theme.palette.baseColor2 Row { anchors.top: demoApp.top anchors.left: demoApp.left anchors.topMargin: 14 anchors.leftMargin: 14 spacing: 6 z: statusAppLayout.z + 1 Rectangle { color: "#E24640" height: 12 width: 12 radius: 6 } Rectangle { color: "#FFC12F" height: 12 width: 12 radius: 6 } Rectangle { color: "#2ACB42" height: 12 width: 12 radius: 6 } } StatusAppLayout { id: statusAppLayout anchors.top: demoApp.top anchors.left: demoApp.left anchors.topMargin: demoApp.border.width anchors.leftMargin: demoApp.border.width height: demoApp.height - demoApp.border.width * 2 width: demoApp.width - demoApp.border.width * 2 appNavBar: StatusAppNavBar { id: navBar navBarChatButton: StatusNavBarTabButton { icon.name: "chat" tooltip.text: "Chat" checked: appView.sourceComponent == statusAppChatView onClicked: { appView.sourceComponent = statusAppChatView } } navBarCommunityTabButtons.model: ListModel { ListElement { name: "Status Community" tooltipText: "Status Community" } } navBarCommunityTabButtons.delegate: StatusNavBarTabButton { id: communityBtn anchors.horizontalCenter: parent.horizontalCenter name: model.name tooltip.text: model.tooltipText icon.color: Theme.palette.miscColor6 icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" checked: appView.sourceComponent == statusAppCommunityView onClicked: { appView.sourceComponent = statusAppCommunityView } popupMenu: StatusPopupMenu { StatusMenuItem { text: qsTr("Invite People") icon.name: "share-ios" } StatusMenuItem { text: qsTr("View Community") icon.name: "group" } StatusMenuItem { text: qsTr("Edit Community") icon.name: "edit" enabled: false } StatusMenuSeparator {} StatusMenuItem { text: qsTr("Leave Community") icon.name: "arrow-right" icon.width: 14 iconRotation: 180 type: StatusMenuItem.Type.Danger } } } navBarTabButtons: [ StatusNavBarTabButton { icon.name: "wallet" tooltip.text: "Wallet" }, StatusNavBarTabButton { icon.name: "browser" tooltip.text: "Browser" }, StatusNavBarTabButton { icon.name: "status-update" tooltip.text: "Timeline" }, StatusNavBarTabButton { id: profileNavButton icon.name: "profile" badge.visible: true badge.anchors.rightMargin: 4 badge.anchors.topMargin: 5 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor badge.border.width: 2 tooltip.text: "Profile" checked: appView.sourceComponent == statusAppProfileSettingsView onClicked: { appView.sourceComponent = statusAppProfileSettingsView } } ] } appView: Loader { id: appView anchors.fill: parent sourceComponent: statusAppChatView } } 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" } StatusChatListAndCategories { anchors.top: headline.bottom anchors.topMargin: 16 anchors.bottom: parent.bottom width: parent.width chatList.model: demoChatListItems selectedChatId: "0" onChatItemSelected: selectedChatId = id onChatItemUnmuted: { for (var i = 0; i < demoChatListItems.count; i++) { let item = demoChatListItems.get(i); if (item.chatId === id) { demoChatListItems.setProperty(i, "muted", false) } } } } } 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 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 } } } } } } Component { id: statusAppCommunityView StatusAppTwoPanelLayout { leftPanel: Item { anchors.fill: parent 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" } } } StatusChatListAndCategories { anchors.top: statusChatInfoToolBar.bottom anchors.topMargin: 8 anchors.bottom: parent.bottom width: parent.width chatList.model: demoCommunityChatListItems categoryList.model: demoCommunityCategoryItems showCategoryActionButtons: true onChatItemSelected: selectedChatId = id categoryPopupMenu: StatusPopupMenu { property string categoryId 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 } } 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" } } } } rightPanel: Item { anchors.fill: parent 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 } } } } Component { id: statusAppProfileSettingsView StatusAppTwoPanelLayout { leftPanel: Item { anchors.fill: parent StatusNavigationPanelHeadline { id: profileHeadline anchors.top: parent.top anchors.topMargin: 16 anchors.horizontalCenter: parent.horizontalCenter text: "Profile" } ScrollView { anchors.top: profileHeadline.bottom anchors.topMargin: 16 anchors.bottom: parent.bottom width: parent.width contentHeight: profileMenuItems.height + 8 contentWidth: parent.width clip: true Column { id: profileMenuItems anchors.horizontalCenter: parent.horizontalCenter spacing: 4 Repeater { model: demoProfileGeneralMenuItems delegate: StatusNavigationListItem { title: model.title icon.name: model.icon } } StatusListSectionHeadline { text: "Settings" } Repeater { model: demoProfileSettingsMenuItems delegate: StatusNavigationListItem { title: model.title icon.name: model.icon } } Item { id: invisibleSeparator height: 16 width: parent.width } Repeater { model: demoProfileOtherMenuItems delegate: StatusNavigationListItem { title: model.title icon.name: model.icon } } } } } rightPanel: Item { anchors.fill: parent } } } StatusModal { id: demoCommunityDetailModal anchors.centerIn: parent header.title: "Cryptokitties" header.subTitle: "Public Community" header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" content: Column { width: demoCommunityDetailModal.width StatusModalDivider { bottomPadding: 8 } StatusBaseText { text: "A community of cat lovers, meow!" verticalAlignment: Text.AlignVCenter font.pixelSize: 15 height: 46 color: Theme.palette.directColor1 anchors.left: parent.left anchors.right: parent.right anchors.leftMargin: 16 anchors.rightMargin: 16 } StatusModalDivider { topPadding: 8 bottomPadding: 8 } StatusDescriptionListItem { title: "Share community" subTitle: "https://join.status.im/u/0x04...45f19" tooltip.text: "Copy to clipboard" icon.name: "copy" iconButton.onClicked: tooltip.visible = !tooltip.visible width: parent.width } StatusModalDivider { topPadding: 8 bottomPadding: 8 } StatusListItem { anchors.horizontalCenter: parent.horizontalCenter statusListItemTitle.font.pixelSize: 17 title: "Members" icon.name: "group-chat" label: "184" components: [ StatusIcon { icon: "chevron-down" rotation: 270 color: Theme.palette.baseColor1 } ] } StatusListItem { anchors.horizontalCenter: parent.horizontalCenter statusListItemTitle.font.pixelSize: 17 title: "Notifications" icon.name: "notification" components: [ StatusSwitch {} ] } StatusModalDivider { topPadding: 8 bottomPadding: 8 } StatusListItem { anchors.horizontalCenter: parent.horizontalCenter statusListItemTitle.font.pixelSize: 17 title: "Edit community" icon.name: "edit" type: StatusListItem.Type.Secondary } StatusListItem { anchors.horizontalCenter: parent.horizontalCenter statusListItemTitle.font.pixelSize: 17 title: "Transfer ownership" icon.name: "exchange" type: StatusListItem.Type.Secondary } StatusListItem { anchors.horizontalCenter: parent.horizontalCenter statusListItemTitle.font.pixelSize: 17 title: "Leave community" icon.name: "arrow-right" icon.rotation: 180 type: StatusListItem.Type.Secondary } } } ListModel { id: demoChatListItems ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ListElement { chatId: "1" name: "#status-desktop" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: true iconColor: "red" unreadMessagesCount: 1 } ListElement { chatId: "2" name: "Amazing Funny Squirrel" chatType: StatusChatListItem.Type.OneToOneChat muted: false hasUnreadMessages: false iconColor: "green" identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" unreadMessagesCount: 0 } ListElement { chatId: "3" name: "Black Ops" chatType: StatusChatListItem.Type.GroupChat muted: false hasUnreadMessages: false iconColor: "purple" unreadMessagesCount: 0 } ListElement { chatId: "4" name: "Spectacular Growing Otter" chatType: StatusChatListItem.Type.OneToOneChat muted: true hasUnreadMessages: false iconColor: "Orange" unreadMessagesCount: 0 } } ListModel { id: demoCommunityChatListItems ListElement { chatId: "0" name: "general" chatType: StatusChatListItem.Type.CommunityChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "orange" } ListElement { chatId: "1" name: "random" chatType: StatusChatListItem.Type.CommunityChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "orange" categoryId: "public" } ListElement { chatId: "2" name: "watercooler" chatType: StatusChatListItem.Type.CommunityChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "orange" categoryId: "public" } ListElement { chatId: "3" name: "language-design" chatType: StatusChatListItem.Type.CommunityChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "orange" categoryId: "dev" } } ListModel { id: demoCommunityCategoryItems ListElement { categoryId: "public" name: "Public" } ListElement { categoryId: "dev" name: "Development" } } ListModel { id: demoProfileGeneralMenuItems ListElement { title: "My Profile" icon: "profile" } ListElement { title: "Contacts" icon: "contact" } ListElement { title: "ENS Usernames" icon: "username" } } ListModel { id: demoProfileSettingsMenuItems ListElement { title: "Privacy & Security" icon: "security" } ListElement { title: "Appearance" icon: "appearance" } ListElement { title: "Browser" icon: "browser" } ListElement { title: "Sounds" icon: "sound" } ListElement { title: "Language" icon: "language" } ListElement { title: "Notifications" icon: "notification" } ListElement { title: "Sync settings" icon: "mobile" } ListElement { title: "Advanced" icon: "settings" } } ListModel { id: demoProfileOtherMenuItems ListElement { title: "Need help?" icon: "help" } ListElement { title: "About" icon: "info" } ListElement { title: "Sign out & Quit" icon: "logout" } } }