import QtQuick 2.14 import QtQuick.Controls 2.14 import QtQml.Models 2.14 import QtQuick.Layouts 1.14 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 import StatusQ.Core.Utils 0.1 ColumnLayout { spacing: 5 StatusNavigationListItem { title: "Menu Item" } StatusNavigationListItem { title: "Menu Item" asset.name: "info" } StatusNavigationListItem { title: "Menu Item" asset.name: "info" badge.value: 1 } StatusNavigationListItem { title: "Menu Item (selected) with very long text" selected: true asset.name: "info" badge.value: 1 } StatusChatListItem { id: test name: "public-channel" type: StatusChatListItem.Type.PublicChat } StatusChatListCategoryItem { title: "Chat list category" opened: false showActionButtons: true } StatusChatListCategoryItem { title: "Chat list category (opened)" opened: true showActionButtons: true } StatusChatListCategoryItem { title: "Chat list category (no buttons)" opened: true } StatusChatListCategoryItem { id: categoryItemInteractive title: "Chat category interactive" showActionButtons: true onAddButtonClicked: testEventsList.eventTriggered("Add button clicked") onMenuButtonClicked: testEventsList.eventTriggered("Menu button clicked") onToggleButtonClicked: { opened = !opened testEventsList.eventTriggered("Toggle button clicked") } onTitleClicked: { testEventsList.eventTriggered("Title clicked") } onClicked: { opened = !opened testEventsList.eventTriggered("Item clicked", itemId) } } ListView { id: testEventsList Layout.fillWidth: true Layout.preferredHeight: categoryItemInteractive.opened ? 20 * count : 0 clip: true function eventTriggered(message) { let obj = eventDelegateComponent.createObject() obj.text = message model.insert(0, obj) } Component { id: eventDelegateComponent ItemDelegate { implicitHeight: 20 property int index: ObjectModel.index Timer { interval: 5000; running: true onTriggered: testObjectModel.remove(index) } } } model: ObjectModel { id: testObjectModel } } StatusChatListItem { name: "group-chat" type: StatusChatListItem.Type.GroupChat } StatusChatListItem { name: "community-channel" type: StatusChatListItem.Type.CommunityChat } StatusChatListItem { name: "community-channel-emoji" type: StatusChatListItem.Type.CommunityChat asset.emoji: "😁" } StatusChatListItem { name: "community-channel-with-image" asset.isImage: true asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" type: StatusChatListItem.Type.CommunityChat } StatusChatListItem { name: "Weird Crazy Otter" asset.isImage: true asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" type: StatusChatListItem.Type.OneToOneChat } StatusChatListItem { name: "has-unread-messages" type: StatusChatListItem.Type.PublicChat hasUnreadMessages: true } StatusChatListItem { name: "has-mentions" type: StatusChatListItem.Type.PublicChat hasUnreadMessages: true notificationsCount: 1 } StatusChatListItem { name: "is-muted" type: StatusChatListItem.Type.PublicChat muted: true onUnmute: muted = false } StatusChatListItem { name: "muted-with-mentions" type: StatusChatListItem.Type.PublicChat muted: true hasUnreadMessages: true notificationsCount: 1 } StatusChatListItem { name: "selected-channel" type: StatusChatListItem.Type.PublicChat selected: true } StatusChatListItem { name: "selected-muted-channel" type: StatusChatListItem.Type.PublicChat selected: true muted: true } StatusChatListItem { name: "selected-muted-channel-with-unread-messages" type: StatusChatListItem.Type.PublicChat selected: true muted: true hasUnreadMessages: true } StatusChatListItem { name: "selected-muted-with-mentions" type: StatusChatListItem.Type.PublicChat selected: true muted: true hasUnreadMessages: true notificationsCount: 1 } StatusListItem { title: "Title" } StatusListItem { title: "Title" subTitle: "Subtitle" } StatusListItem { title: "Title" subTitle: "Subtitle" tertiaryTitle: "Tertiary title" statusListItemTitle.font.pixelSize: 17 statusListItemTitle.font.weight: Font.Bold } StatusListItem { title: "Title" subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves." tertiaryTitle: "Tertiary title" asset.name: "info" statusListItemTitle.font.pixelSize: 17 statusListItemTitle.font.weight: Font.Bold } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" } StatusListItem { title: "Title" subTitle: "Subtitle" asset.isImage: true asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" } StatusListItem { title: "Title" subTitle: "Subtitle" asset.isImage: true asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/ nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" asset.imgIsIdenticon: true } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" components: [StatusButton { text: "Button" size: StatusBaseButton.Size.Small }] } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" components: [StatusSwitch {}] } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" components: [StatusRadioButton {}] } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" components: [StatusCheckBox {}] } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" label: "Text" } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" label: "Text" components: [ StatusButton { text: "Button" size: StatusBaseButton.Size.Small } ] } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" label: "Text" components: [StatusSwitch {}] } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" label: "Text" components: [ StatusRadioButton {} ] } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" label: "Text" components: [StatusCheckBox {}] } StatusListItem { title: "Title" subTitle: "Subtitle" asset.name: "info" label: "Text" components: [ StatusBadge { value: 1 }, StatusIcon { icon: "info" color: Theme.palette.baseColor1 width: 20 height: 20 } ] } StatusListItem { title: "Title" asset.name: "info" type: StatusListItem.Type.Secondary } StatusListItem { title: "Title" asset.isLetterIdenticon: true asset.color: "orange" } StatusListItem { title: "Title" titleAsideText: "test" } StatusListItem { title: "Title" asset.name: "delete" type: StatusListItem.Type.Danger } StatusListItem { title: "List Item with Badge" subTitle: "Subtitle" asset.isImage: true asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/ nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" asset.imgIsIdenticon: true badge.asset.isImage: true badge.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg" badge.primaryText: "CryptoKitties" badge.secondaryText: "#test" } StatusListItem { title: "List Item with Badge 2" subTitle: "Subtitle" asset.isLetterIdenticon: true badge.primaryText: "CryptoKitties" badge.secondaryText: "#test" badge.asset.color: "orange" badge.asset.isLetterIdenticon: true } StatusListItem { title: "List Item with Tags" asset.isLetterIdenticon: true bottomModel: 3 bottomDelegate: StatusListItemTag { title: "tag" asset.isLetterIdenticon: true } } StatusListItem { title: "List Item with Inline Tags" asset.isLetterIdenticon: true tagsModel: ListModel{ ListElement { name: "helloworld.eth" emoji: "😁" } ListElement { name: "account1" emoji: "😁" } ListElement { name: "account2" emoji: "😁" } ListElement { name: "account3" emoji: "😁" } ListElement { name: "account4" emoji: "😁" } } tagsDelegate: StatusListItemTag { color: "blue" height: 24 radius: 6 closeButtonVisible: false asset.emoji: model.emoji asset.emojiSize: Emoji.size.verySmall asset.isLetterIdenticon: true title: model.name titleText.font.pixelSize: 12 titleText.color: Theme.palette.indirectColor1 } } StatusListItem { title: "List Item with Emoji" subTitle: "Emoji" asset.emoji: "😁" asset.color: "yellow" asset.letterSize: 14 asset.isLetterIdenticon: true } StatusDescriptionListItem { title: "Title" subTitle: "Subtitle" } StatusDescriptionListItem { title: "Title" subTitle: "Subtitle" value: "None" sensor.enabled: true } StatusDescriptionListItem { title: "Title" subTitle: "Subtitle" tooltip.text: "Tooltip" asset.name: "info" iconButton.onClicked: tooltip.visible = !tooltip.visible } StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 } StatusMemberListItem { nickName: "This is an example" userName: "annabelle" pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04" isVerified: true isContact: true asset.isImage: true asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/ nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" asset.imgIsIdenticon: true status: 1 // FIXME: use enum ringSettings.ringSpecModel: ListModel { ListElement {colorId: 13; segmentLength: 5} ListElement {colorId: 31; segmentLength: 5} ListElement {colorId: 10; segmentLength: 1} ListElement {colorId: 2; segmentLength: 5} ListElement {colorId: 26; segmentLength: 2} ListElement {colorId: 19; segmentLength: 4} ListElement {colorId: 28; segmentLength: 3} } ringSettings.distinctiveColors: Theme.palette.identiconRingColors } StatusMemberListItem { nickName: "carmen.eth" isUntrustworthy: true asset.isLetterIdenticon: true } StatusMemberListItem { nickName: "very-long-annoying-nickname.eth" isUntrustworthy: true asset.isLetterIdenticon: true } StatusMemberListItem { nickName: "untrusted-admin.eth" asset.isLetterIdenticon: true isUntrustworthy: true isAdmin: true isContact: true } StatusMemberListItem { nickName: "This girl I know from work" userName: "annabelle" asset.isLetterIdenticon: true status: 1 // FIXME: use enum } StatusMemberListItem { nickName: "Mark Cuban" userName: "annabelle" pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04" isContact: true asset.isImage: true asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/ nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" asset.imgIsIdenticon: true } StatusMemberListItem { nickName: "admin.guy" userName: "adguy" isAdmin: true asset.isLetterIdenticon: true isUntrustworthy: true } StatusBaseText { Layout.fillWidth: true Layout.topMargin: 16 text: "Loading features:" font.pixelSize: 17 } StatusListItem { title: "Nokia 3310" subTitle: "Incoming device" label: "loading: true" asset.width: 40 asset.height: 40 asset.emoji: "😁" asset.color: "hotpink" asset.letterSize: 14 asset.isLetterIdenticon: true loading: true } StatusListItem { title: "Nokia 3310" subTitle: "Device" label: "loadingFailed: true" asset.width: 40 asset.height: 40 asset.emoji: "😁" asset.color: "hotpink" asset.letterSize: 14 asset.isLetterIdenticon: true loadingFailed: true } StatusListItem { implicitWidth: 600 title: "List Item with Tags" subTitle: "03:32" asset.isLetterIdenticon: true inlineTagModel: 6 inlineTagDelegate: StatusListItemTag { height: 24 title: "tag" asset.isLetterIdenticon: true } components: [ ColumnLayout { Row { Layout.alignment: Qt.AlignRight spacing: 4 StatusIcon { color: Theme.palette.successColor1 icon: "arrow-up" rotation: 135 height: 18 } StatusBaseText { text: "0.0000015 ETH" font.pixelSize: 15 color: Theme.palette.directColor1 } } StatusBaseText { Layout.alignment: Qt.AlignRight text: "1201.10 USD" font.pixelSize: 15 color: Theme.palette.baseColor1 } } ] } }