618 lines
16 KiB
QML
618 lines
16 KiB
QML
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
|
|
Component.onCompleted: {
|
|
print(asset.name, asset.isImage, asset.isLetterIdenticon)
|
|
}
|
|
}
|
|
|
|
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
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|