status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusQ): Merging Icon, Background and Image Settings (#788) 

Closes #781
This commit is contained in:
Alexandra Betouni 2022-09-02 18:40:30 +03:00 committed by GitHub
parent e146ccaed4
commit 98d0d2163e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
70 changed files with 542 additions and 622 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sandbox/DemoApp.qml
View File

@ -197,7 +197,7 @@ Rectangle {
id: statusAppCommunityView
StatusAppCommunityView {
communityDetailModalTitle: demoCommunityDetailModal.header.title
communityDetailModalImage: demoCommunityDetailModal.header.image.source
communityDetailModalImage: demoCommunityDetailModal.header.asset.name
onChatInfoButtonClicked: {
demoCommunityDetailModal.open();
}

21
sandbox/controls/Controls.qml
View File

@ -126,8 +126,9 @@ GridLayout {
StatusChatInfoButton {
title: "Iuri Matias"
subTitle: "Contact"
icon.color: Theme.palette.miscColor7
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
asset.color: Theme.palette.miscColor7
asset.isImage: true
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
type: StatusChatInfoButton.Type.OneToOneChat
muted: true
pinnedMessagesCount: 1
@ -139,8 +140,9 @@ GridLayout {
StatusChatInfoButton {
title: "Iuri Matias elided"
subTitle: "Contact"
icon.color: Theme.palette.miscColor7
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
asset.color: Theme.palette.miscColor7
asset.isImage: true
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
type: StatusChatInfoButton.Type.OneToOneChat
muted: true
pinnedMessagesCount: 1
@ -154,8 +156,9 @@ GridLayout {
StatusChatInfoButton {
title: "Iuri Matias big not elided"
subTitle: "Contact"
icon.color: Theme.palette.miscColor7
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
asset.color: Theme.palette.miscColor7
asset.isImage: true
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
type: StatusChatInfoButton.Type.OneToOneChat
muted: true
pinnedMessagesCount: 1
@ -167,21 +170,21 @@ GridLayout {
title: "group"
subTitle: "Group Chat"
pinnedMessagesCount: 1
icon.color: Theme.palette.miscColor7
asset.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.GroupChat
}
StatusChatInfoButton {
title: "public-chat"
subTitle: "Public Chat"
icon.color: Theme.palette.miscColor7
asset.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.PublicChat
}
StatusChatInfoButton {
title: "community-channel"
subTitle: "Community Chat"
icon.color: Theme.palette.miscColor7
asset.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.CommunityChat
}

6
sandbox/controls/Layout.qml
View File

@ -18,7 +18,7 @@ Column {
width: Math.min(implicitWidth, parent.width)
title: "Some contact"
subTitle: "Contact"
icon.color: Theme.palette.miscColor7
asset.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.OneToOneChat
}
}
@ -30,7 +30,7 @@ Column {
width: Math.min(implicitWidth, parent.width)
title: "Some contact"
subTitle: "Contact"
icon.color: Theme.palette.miscColor7
asset.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.PublicChat
pinnedMessagesCount: 1
muted: true
@ -46,7 +46,7 @@ Column {
width: Math.min(implicitWidth, parent.width)
title: "Some contact"
subTitle: "Contact"
icon.color: Theme.palette.miscColor7
asset.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.OneToOneChat
pinnedMessagesCount: 1
}

132
sandbox/controls/ListItems.qml
View File

@ -17,18 +17,18 @@ ColumnLayout {
StatusNavigationListItem {
title: "Menu Item"
icon.name: "info"
asset.name: "info"
}
StatusNavigationListItem {
title: "Menu Item"
icon.name: "info"
asset.name: "info"
badge.value: 1
}
StatusNavigationListItem {
title: "Menu Item (selected) with very long text"
selected: true
icon.name: "info"
asset.name: "info"
badge.value: 1
}
@ -121,18 +121,20 @@ ColumnLayout {
StatusChatListItem {
name: "community-channel-emoji"
type: StatusChatListItem.Type.CommunityChat
icon.emoji: "😁"
asset.emoji: "😁"
}
StatusChatListItem {
name: "community-channel-with-image"
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
asset.isImage: true
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
type: StatusChatListItem.Type.CommunityChat
}
StatusChatListItem {
name: "Weird Crazy Otter"
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
asset.isImage: true
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
type: StatusChatListItem.Type.OneToOneChat
}
@ -217,7 +219,7 @@ ColumnLayout {
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"
icon.name: "info"
asset.name: "info"
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.weight: Font.Bold
@ -226,27 +228,29 @@ ColumnLayout {
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
asset.isImage: true
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
image.isIdenticon: true
asset.isImage: true
asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
asset.imgIsIdenticon: true
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
components: [StatusButton {
text: "Button"
size: StatusBaseButton.Size.Small
@ -256,35 +260,35 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
components: [StatusSwitch {}]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
components: [StatusRadioButton {}]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
components: [StatusCheckBox {}]
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
label: "Text"
}
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
label: "Text"
components: [
StatusButton {
@ -297,7 +301,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
label: "Text"
components: [StatusSwitch {}]
}
@ -305,7 +309,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
label: "Text"
components: [
StatusRadioButton {}
@ -315,7 +319,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
label: "Text"
components: [StatusCheckBox {}]
}
@ -323,7 +327,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "Title"
subTitle: "Subtitle"
icon.name: "info"
asset.name: "info"
label: "Text"
components: [
StatusBadge {
@ -340,14 +344,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "Title"
icon.name: "info"
asset.name: "info"
type: StatusListItem.Type.Secondary
}
StatusListItem {
title: "Title"
icon.isLetterIdenticon: true
icon.color: "orange"
asset.isLetterIdenticon: true
asset.color: "orange"
}
StatusListItem {
@ -357,17 +361,19 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "Title"
icon.name: "delete"
asset.name: "delete"
type: StatusListItem.Type.Danger
}
StatusListItem {
title: "List Item with Badge"
subTitle: "Subtitle"
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
image.isIdenticon: true
badge.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
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"
}
@ -375,26 +381,26 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "List Item with Badge 2"
subTitle: "Subtitle"
icon.isLetterIdenticon: true
asset.isLetterIdenticon: true
badge.primaryText: "CryptoKitties"
badge.secondaryText: "#test"
badge.icon.color: "orange"
badge.icon.isLetterIdenticon: true
badge.asset.color: "orange"
badge.asset.isLetterIdenticon: true
}
StatusListItem {
title: "List Item with Tags"
icon.isLetterIdenticon: true
asset.isLetterIdenticon: true
bottomModel: 3
bottomDelegate: StatusListItemTag {
title: "tag"
icon.isLetterIdenticon: true
asset.isLetterIdenticon: true
}
}
StatusListItem {
title: "List Item with Inline Tags"
icon.isLetterIdenticon: true
asset.isLetterIdenticon: true
tagsModel: ListModel{
ListElement {
name: "helloworld.eth"
@ -422,9 +428,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
height: 24
radius: 6
closeButtonVisible: false
icon.emoji: model.emoji
icon.emojiSize: Emoji.size.verySmall
icon.isLetterIdenticon: true
asset.emoji: model.emoji
asset.emojiSize: Emoji.size.verySmall
asset.isLetterIdenticon: true
title: model.name
titleText.font.pixelSize: 12
titleText.color: Theme.palette.indirectColor1
@ -434,10 +440,10 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "List Item with Emoji"
subTitle: "Emoji"
icon.emoji: "😁"
icon.color: "yellow"
icon.letterSize: 14
icon.isLetterIdenticon: true
asset.emoji: "😁"
asset.color: "yellow"
asset.letterSize: 14
asset.isLetterIdenticon: true
}
StatusDescriptionListItem {
@ -456,7 +462,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
title: "Title"
subTitle: "Subtitle"
tooltip.text: "Tooltip"
icon.name: "info"
asset.name: "info"
iconButton.onClicked: tooltip.visible = !tooltip.visible
}
@ -471,9 +477,10 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
isVerified: true
isContact: true
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
asset.isImage: true
asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
image.isIdenticon: true
asset.imgIsIdenticon: true
status: 1 // FIXME: use enum
ringSettings.ringSpecModel:
ListModel {
@ -491,16 +498,19 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusMemberListItem {
nickName: "carmen.eth"
isUntrustworthy: true
asset.isLetterIdenticon: true
}
StatusMemberListItem {
nickName: "very-long-annoying-nickname.eth"
isUntrustworthy: true
asset.isLetterIdenticon: true
}
StatusMemberListItem {
nickName: "This girl I know from work"
userName: "annabelle"
asset.isLetterIdenticon: true
status: 1 // FIXME: use enum
}
@ -509,15 +519,21 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
userName: "annabelle"
pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
isContact: true
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
asset.isImage: true
asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
image.isIdenticon: true
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 {
@ -531,10 +547,12 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
title: "Nokia 3310"
subTitle: "Incoming device"
label: "loading: true"
icon.emoji: "😁"
icon.color: "hotpink"
icon.letterSize: 14
icon.isLetterIdenticon: true
asset.width: 40
asset.height: 40
asset.emoji: "😁"
asset.color: "hotpink"
asset.letterSize: 14
asset.isLetterIdenticon: true
loading: true
}
@ -542,10 +560,12 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
title: "Nokia 3310"
subTitle: "Device"
label: "loadingFailed: true"
icon.emoji: "😁"
icon.color: "hotpink"
icon.letterSize: 14
icon.isLetterIdenticon: true
asset.width: 40
asset.height: 40
asset.emoji: "😁"
asset.color: "hotpink"
asset.letterSize: 14
asset.isLetterIdenticon: true
loadingFailed: true
}
}

2
sandbox/controls/Others.qml
View File

@ -40,7 +40,7 @@ ColumnLayout {
}
StatusRoundIcon {
icon.name: "info"
asset.name: "info"
}
}

36
sandbox/controls/Popups.qml
View File

@ -109,7 +109,8 @@ Column {
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
header.asset.isImage: true
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
}
StatusModal {
@ -117,7 +118,8 @@ Column {
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
header.asset.isImage: true
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
leftButtons: [
StatusBackButton { }
]
@ -136,7 +138,8 @@ Column {
anchors.centerIn: parent
header.title: "Some Title"
header.subTitle: "Subtitle"
header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
header.asset.isImage: true
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
@ -164,7 +167,8 @@ Column {
StatusModal {
id: modalExample
anchors.centerIn: parent
header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
header.asset.isImage: true
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
header.title: "Header"
header.subTitle: "SubTitle"
rightButtons: [
@ -227,8 +231,8 @@ Column {
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
header.icon.isLetterIdenticon: true
header.icon.background.color: "red"
header.asset.isLetterIdenticon: true
header.asset.bgColor: "red"
contentItem: StatusBaseText {
anchors.centerIn: parent
@ -252,9 +256,9 @@ Column {
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
header.image.isIdenticon: true
header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
header.asset.imgIsIdenticon: true
contentItem: StatusBaseText {
anchors.centerIn: parent
@ -279,9 +283,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
header.title: "Header"
header.subTitle: "SubTitle"
header.headerImageEditable: true
header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
header.image.isIdenticon: true
header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
header.asset.imgIsIdenticon: true
contentItem: StatusBaseText {
anchors.centerIn: parent
@ -306,9 +310,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
header.title: "Some super long text here that exceeds the available space"
header.subTitle: "Some super long text here that exceeds the available space"
header.subTitleElide: Text.ElideMiddle
header.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
header.image.isIdenticon: true
header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
header.asset.imgIsIdenticon: true
contentItem: StatusBaseText {
anchors.centerIn: parent
@ -340,7 +344,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
sourceComponent: popupMenu.delegate
onLoaded: {
item.action.text = model.name
item.action.iconSettings.name = model.iconName
item.action.assetSettings.name = model.iconName
}
}
}

8
sandbox/demoapp/ChatChannelView.qml
View File

@ -45,11 +45,11 @@ ListView {
sender.ensName: model.ensName
sender.isContact: model.isContact
sender.trustIndicator: model.trustIndicator
sender.profileImage {
sender.profileImage: StatusProfileImageSettings {
width: 40
height: 40
pubkey: model.senderId
source: model.profileImage || ""
name: model.profileImage || ""
colorId: 1
colorHash: ListModel {
ListElement { colorId: 13; segmentLength: 5 }
@ -70,11 +70,11 @@ ListView {
sender.id: model.replySenderId || ""
sender.userName: model.isReply ? model.replySenderName: ""
sender.ensName: model.isReply ? model.replySenderEnsName : ""
sender.profileImage {
sender.profileImage: StatusProfileImageSettings {
width: 20
height: 20
name: model.isReply ? model.replyProfileImage: ""
pubkey: model.replySenderId
source: model.isReply ? model.replyProfileImage: ""
colorId: 1
colorHash: ListModel {
ListElement { colorId: 13; segmentLength: 5 }

15
sandbox/demoapp/DemoCommunityDetailModal.qml
View File

@ -13,7 +13,8 @@ StatusModal {
header.title: "Cryptokitties"
header.subTitle: "Public Community"
header.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
header.asset.isImage: true
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
contentItem: Column {
width: root.width
@ -43,7 +44,7 @@ StatusModal {
title: "Share community"
subTitle: "https://join.status.im/u/0x04...45f19"
tooltip.text: "Copy to clipboard"
icon.name: "copy"
asset.name: "copy"
iconButton.onClicked: tooltip.visible = !tooltip.visible
width: parent.width
}
@ -57,7 +58,7 @@ StatusModal {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Members"
icon.name: "group-chat"
asset.name: "group-chat"
label: "184"
components: [
StatusIcon {
@ -72,7 +73,7 @@ StatusModal {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Notifications"
icon.name: "notification"
asset.name: "notification"
components: [
StatusSwitch {}
]
@ -87,7 +88,7 @@ StatusModal {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Edit community"
icon.name: "edit"
asset.name: "edit"
type: StatusListItem.Type.Secondary
}
@ -95,7 +96,7 @@ StatusModal {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Transfer ownership"
icon.name: "exchange"
asset.name: "exchange"
type: StatusListItem.Type.Secondary
}
@ -103,7 +104,7 @@ StatusModal {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Leave community"
icon.name: "arrow-left"
asset.name: "arrow-left"
type: StatusListItem.Type.Secondary
}
}

4
sandbox/demoapp/StatusAppChatView.qml
View File

@ -33,7 +33,7 @@ StatusSectionLayout {
Layout.leftMargin: padding
title: "Amazing Funny Squirrel"
subTitle: "Contact"
icon.color: Theme.palette.miscColor7
asset.color: Theme.palette.miscColor7
type: StatusChatInfoButton.Type.OneToOneChat
pinnedMessagesCount: 1
}
@ -179,7 +179,7 @@ StatusSectionLayout {
topPadding: 8
bottomPadding: 8
placeholderText: "Search"
input.icon.name: "search"
input.asset.name: "search"
}
Column {

10
sandbox/demoapp/StatusAppCommunitiesPortalView.qml
View File

@ -69,11 +69,11 @@ StatusSectionLayout {
height: 32
radius: 36
closeButtonVisible: false
icon.emoji: model.emoji
icon.height: 32
icon.width: icon.height
icon.color: "transparent"
icon.isLetterIdenticon: true
asset.emoji: model.emoji
asset.height: 32
asset.width: asset.height
asset.color: "transparent"
asset.isLetterIdenticon: true
title: model.name
titleText.font.pixelSize: 15
titleText.color: Theme.palette.primaryColor1

14
sandbox/demoapp/StatusAppCommunityView.qml
View File

@ -51,7 +51,7 @@ StatusSectionLayout {
Layout.fillHeight: true
title: "general"
subTitle: "Community Chat"
icon.color: Theme.palette.miscColor6
asset.color: Theme.palette.miscColor6
type: StatusChatInfoButton.Type.CommunityChat
}
@ -129,8 +129,9 @@ StatusSectionLayout {
chatInfoButton.title: "CryptoKitties"
chatInfoButton.subTitle: "128 Members"
chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
chatInfoButton.icon.color: Theme.palette.miscColor6
chatInfoButton.asset.isImage: true
chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
chatInfoButton.asset.color: Theme.palette.miscColor6
chatInfoButton.onClicked: { chatInfoButtonClicked(); }
popupMenu: StatusPopupMenu {
@ -262,7 +263,6 @@ StatusSectionLayout {
centerPanel: Item {
anchors.fill: parent
StatusBaseText {
id: titleText
anchors.centerIn: parent
font.pixelSize: 15
text: qsTr("Community content here")
@ -302,8 +302,10 @@ StatusSectionLayout {
isVerified: model.isVerified
isUntrustworthy: model.isUntrustworthy
isContact: model.isContact
image.source: model.icon
image.isIdenticon: false
asset.name: model.icon
asset.isImage: (asset.name !== "")
asset.isLetterIdenticon: (asset.name === "")
asset.imgIsIdenticon: false
status: model.onlineStatus
}
}

6
sandbox/demoapp/StatusAppProfileSettingsView.qml
View File

@ -41,7 +41,7 @@ StatusSectionLayout {
model: Models.demoProfileGeneralMenuItems
delegate: StatusNavigationListItem {
title: model.title
icon.name: model.icon
asset.name: model.icon
}
}
@ -51,7 +51,7 @@ StatusSectionLayout {
model: Models.demoProfileSettingsMenuItems
delegate: StatusNavigationListItem {
title: model.title
icon.name: model.icon
asset.name: model.icon
}
}
@ -65,7 +65,7 @@ StatusSectionLayout {
model: Models.demoProfileOtherMenuItems
delegate: StatusNavigationListItem {
title: model.title
icon.name: model.icon
asset.name: model.icon
}
}
}

13
sandbox/demoapp/data/Models.qml
View File

@ -45,8 +45,8 @@ QtObject {
ListElement {
itemId: "x012340002"
name: "Amazing Funny Squirrel"
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
emoji: ""
isIdenticon: true
colorHash: []
@ -368,7 +368,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
ListElement {
value: "sub_item_1_2"
text: "identicon item"
imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
iconName: ""
iconColor: ""
}]}
@ -439,8 +440,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
userName: "Ferocious Herringbone Sinewave"
ensName: ""
localName: ""
profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
contentType: StatusMessage.ContentType.Text
message: '<p>Long message<br>Adapted from &quot;The Colors of Animals&quot; by Sir John Lubbock in A Book of Natural History (1902, ed. David Starr Jordan)</p><p>The color of animals is by no means a matter of chance; it depends on many considerations, but in the majority of cases tends to protect the animal from danger by rendering it less conspicuous. Perhaps it may be said that if coloring is mainly protective, there ought to be but few brightly colored animals. There are, however, not a few cases in which vivid colors are themselves protective. The kingfisher itself, though so brightly colored, is by no means easy to see. The blue harmonizes with the water, and the bird as it darts along the stream looks almost like a flash of sunlight.</p><p>Desert animals are generally the color of the desert. Thus, for instance, the lion, the antelope, and the wild donkey are all sand-colored. “Indeed,” says Canon Tristram, “in the desert, where neither trees, brushwood, nor even undulation of the surface afford the slightest protection to its foes, a modification of color assimilated to that of the surrounding country is absolutely necessary. Hence, without exception, the upper plumage of every bird, and also the fur of all the smaller mammals and the skin of all the snakes and lizards, is of one uniform sand color.”</p><p>The next point is the color of the mature caterpillars, some of which are brown. This probably makes the caterpillar even more conspicuous among the green leaves than would otherwise be the case. Let us see, then, whether the habits of the insect will throw any light upon the riddle. What would you do if you were a big caterpillar? Why, like most other defenseless creatures, you would feed by night, and lie concealed by day. So do these caterpillars. When the morning light comes, they creep down the stem of the food plant, and lie concealed among the thick herbage and dry sticks and leaves, near the ground, and it is obvious that under such circumstances the brown color really becomes a protection. It might indeed be argued that the caterpillars, having become brown, concealed themselves on the ground, and that we were reversing the state of things. But this is not so, because, while we may say as a general rule that large caterpillars feed by night and lie concealed by day, it is by no means always the case that they are brown; some of them still retaining the green color. We may then conclude that the habit of concealing themselves by day came first, and that the brown color is a later adaptation.</p><p>The example of the mature caterpillar in the third paragraph is primarily intended to demonstrate _____________.</p>'
messageContent: ""
@ -1061,7 +1062,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
isContact: true
onlineStatus: 1
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
isAdmin: false
}
ListElement {

7
sandbox/examples/FilteringSorting.qml
View File

@ -35,7 +35,7 @@ ColumnLayout {
id: searchInput
Layout.fillWidth: true
input.icon.name: "search"
input.asset.name: "search"
placeholderText: "nickname.."
}
@ -43,7 +43,7 @@ ColumnLayout {
id: contactBtn
icon.name: "tiny/tiny-contact"
identicon.icon.color: Theme.palette.primaryColor1
identicon.asset.color: Theme.palette.primaryColor1
onClicked: highlighted = !highlighted
}
@ -51,7 +51,7 @@ ColumnLayout {
id: verifiedBtn
icon.name: "tiny/tiny-checkmark"
identicon.icon.color: Theme.palette.primaryColor1
identicon.asset.color: Theme.palette.primaryColor1
onClicked: highlighted = !highlighted
}
}
@ -94,6 +94,7 @@ ColumnLayout {
nickName: model.nick
isVerified: model.isVerified
isContact: model.isContact
asset.isLetterIdenticon: true
}
}

5
sandbox/pages/StatusChatInfoToolBarPage.qml
View File

@ -14,8 +14,9 @@ GridLayout {
StatusChatInfoToolBar {
chatInfoButton.title: "Cryptokitties"
chatInfoButton.subTitle: "128 Members"
chatInfoButton.image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
chatInfoButton.icon.color: Theme.palette.miscColor6
chatInfoButton.asset.isImage: true
chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
chatInfoButton.asset.color: Theme.palette.miscColor6
popupMenu: StatusPopupMenu {

2
sandbox/pages/StatusCommunityTagsPage.qml
View File

@ -36,7 +36,7 @@ Item {
leftPadding: 0
rightPadding: 0
label: qsTr("Select tags that will fit your Community")
input.icon.name: "search"
input.asset.name: "search"
placeholderText: qsTr("Search tags")
Layout.fillWidth: true
}

12
sandbox/pages/StatusExpandableSettingsItemPage.qml
View File

@ -26,7 +26,7 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter
expandable: false
icon.name: "seed-phrase"
asset.name: "seed-phrase"
primaryText: "Back up seed phrase"
secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD"
button.text: qsTr("Back up seed phrase")
@ -36,7 +36,7 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter
expandable: true
icon.name: "secret"
asset.name: "secret"
primaryText: "Account signing phrase"
secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed."
expandableComponent: notImplemented
@ -46,7 +46,7 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter
expandable: true
icon.name: "seed-phrase"
asset.name: "seed-phrase"
primaryText: "View private key"
secondaryText: "Back up your seed phrase now to secure this account"
expandableComponent: notImplemented
@ -74,7 +74,8 @@ Column {
type: StatusExpandableItem.Type.Secondary
expandable: true
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
asset.isImage: true
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
primaryText: "CryptoKitties"
additionalText: "1456 USD"
expandableComponent: notImplemented
@ -85,7 +86,8 @@ Column {
type: StatusExpandableItem.Type.Secondary
expandable: true
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
asset.isImage: true
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
additionalText: "564.90 USD"
expandableComponent: notImplemented

25
sandbox/pages/StatusInputPage.qml
View File

@ -33,9 +33,8 @@ Column {
StatusInput {
label: "Label"
input.icon.name: "search"
placeholderText: "Input with icon"
input.asset.name: "search"
input.placeholderText: "Input with icon"
}
StatusInput {
@ -112,9 +111,9 @@ Column {
StatusInput {
label: "StatusInput"
secondaryLabel: "with right icon"
input.icon.width: 15
input.icon.height: 11
input.icon.name: text !== "" ? "checkmark" : ""
input.asset.width: 15
input.asset.height: 11
input.asset.name: text !== "" ? "checkmark" : ""
input.leftIcon: false
}
@ -192,9 +191,9 @@ Column {
StatusInput {
property bool toggled: true
label: "Input with emoji icon"
placeholderText: "Enter Name"
input.icon.emoji: toggled ? "😁" : "🧸"
input.icon.color: "blue"
input.placeholderText: "Enter Name"
input.asset.emoji: toggled ? "😁" : "🧸"
input.asset.color: "blue"
input.isIconSelectable: true
onIconClicked: {
toggled = !toggled
@ -204,10 +203,10 @@ Column {
StatusInput {
property bool toggled: true
label: "Input with selectable icon which is not an emoji"
placeholderText: "Enter Name"
input.icon.emoji: ""
input.icon.name: toggled ? "filled-account" : "image"
input.icon.color: "blue"
input.placeholderText: "Enter Name"
input.asset.emoji: ""
input.asset.name: toggled ? "filled-account" : "image"
input.asset.color: "blue"
input.isIconSelectable: true
onIconClicked: {
toggled = !toggled

34
sandbox/pages/StatusPopupMenuPage.qml
View File

@ -55,30 +55,30 @@ GridLayout {
StatusMenuItem {
text: "One"
iconSettings.name: "info"
assetSettings.name: "info"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Two"
iconSettings.name: "info"
assetSettings.name: "info"
}
StatusMenuItem {
text: "Three"
iconSettings.name: "info"
assetSettings.name: "info"
}
StatusPopupMenu {
title: "Four"
StatusMenuItem {
text: "One"
iconSettings.name: "info"
assetSettings.name: "info"
}
StatusMenuItem {
text: "Three"
iconSettings.name: "info"
assetSettings.name: "info"
}
}
}
@ -108,14 +108,16 @@ GridLayout {
StatusMenuItem {
text: "vitalik.eth"
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
assetSettings.isImage: true
assetSettings.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
image.isIdenticon: true
assetSettings.imgIsIdenticon: true
}
StatusMenuItem {
text: "Pascal"
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
assetSettings.isImage: true
assetSettings.name: "qrc:/demoapp/data/profile-image-1.jpeg"
}
}
@ -124,21 +126,21 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusMenuItem {
text: "welcome"
iconSettings.name: "channel"
iconSettings.color: Theme.palette.directColor1
assetSettings.name: "channel"
assetSettings.color: Theme.palette.directColor1
}
StatusMenuItem {
text: "support"
iconSettings.name: "channel"
iconSettings.color: Theme.palette.directColor1
assetSettings.name: "channel"
assetSettings.color: Theme.palette.directColor1
}
StatusMenuHeadline { text: "Public" }
StatusMenuItem {
text: "news"
iconSettings.name: "channel"
iconSettings.color: Theme.palette.directColor1
assetSettings.name: "channel"
assetSettings.color: Theme.palette.directColor1
}
}
@ -147,8 +149,8 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusMenuItem {
text: "welcome"
iconSettings.isLetterIdenticon: true
iconSettings.background.color: "red"
assetSettings.isLetterIdenticon: true
assetSettings.bgColor: "red"
}
}
}

2
sandbox/pages/StatusSelectPage.qml
View File

@ -43,7 +43,7 @@ Column {
selectMenu.delegate: StatusMenuItemDelegate {
statusPopupMenu: select
action: StatusMenuItem {
iconSettings.name: "filled-account"
assetSettings.name: "filled-account"
text: name
onTriggered: {
selectedItem.text = name

10
src/StatusQ/Components/StatusCard.qml
View File

@ -239,7 +239,7 @@ Rectangle {
id: waitTimer
interval: lockTimeout
onTriggered: {
if(advancedInput.edit.text)
if(advancedInput.text)
advancedInput.locked = true
}
}
@ -311,7 +311,7 @@ Rectangle {
}
PropertyChanges {
target: advancedInput
edit.color: Theme.palette.directColor1
input.color: Theme.palette.directColor1
}
PropertyChanges {
target: basicInput
@ -370,7 +370,7 @@ Rectangle {
}
PropertyChanges {
target: advancedInput
edit.color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1
input.edit.color: disabled ? Theme.palette.directColor5 : Theme.palette.dangerColor1
}
PropertyChanges {
target: basicInput
@ -429,7 +429,7 @@ Rectangle {
}
PropertyChanges {
target: advancedInput
edit.color: Theme.palette.directColor1
input.color: Theme.palette.directColor1
}
PropertyChanges {
target: basicInput
@ -488,7 +488,7 @@ Rectangle {
}
PropertyChanges {
target: advancedInput
edit.color: Theme.palette.directColor1
input.color: Theme.palette.directColor1
}
PropertyChanges {
target: basicInput

15
src/StatusQ/Components/StatusChatList.qml
View File

@ -118,11 +118,10 @@ Column {
notificationsCount: model.notificationsCount
highlightWhenCreated: !!model.highlight
selected: (model.active && root.highlightItem)
icon.emoji: !!model.emoji ? model.emoji : ""
icon.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId]
image.isIdenticon: false
image.source: model.icon
asset.emoji: !!model.emoji ? model.emoji : ""
asset.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId]
asset.isImage: model.icon.includes("data")
asset.name: model.icon
ringSettings.ringSpecModel: model.colorHash
sensor.cursorShape: dragSensor.cursorShape
@ -228,9 +227,9 @@ Column {
notificationsCount: model.notificationsCount
selected: draggable.chatListItem.selected
icon.color: draggable.chatListItem.icon.color
image.isIdenticon: draggable.chatListItem.image.isIdenticon
image.source: draggable.chatListItem.image.source
asset.color: draggable.chatListItem.asset.color
asset.imgIsIdenticon: draggable.chatListItem.asset.imgIsIdenticon
asset.name: draggable.chatListItem.asset.name
}
}
}

10
src/StatusQ/Components/StatusChatListItem.qml
View File

@ -21,11 +21,8 @@ Rectangle {
property bool hasUnreadMessages: false
property int notificationsCount: 0
property bool muted: false
property StatusImageSettings image: StatusImageSettings {
width: 24
height: 24
}
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 24
height: 24
color: Theme.palette.miscColor5
@ -85,8 +82,7 @@ Rectangle {
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
image: root.image
icon: root.icon
asset: root.asset
name: root.name
}

10
src/StatusQ/Components/StatusCommunityCard.qml
View File

@ -360,11 +360,11 @@ Rectangle {
height: 24
radius: 20
closeButtonVisible: false
icon.emoji: model.emoji
icon.height: 24
icon.width: icon.height
icon.color: "transparent"
icon.isLetterIdenticon: true
asset.emoji: model.emoji
asset.width: 24
asset.height: 24
asset.color: "transparent"
asset.isLetterIdenticon: true
title: model.name
titleText.font.pixelSize: 13
titleText.color: d.fontColor

52
src/StatusQ/Components/StatusContactVerificationIcons.qml
View File

@ -9,16 +9,14 @@ Row {
property bool isContact: false
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
property StatusIconSettings mutualConnectionIcon: StatusIconSettings {
property StatusAssetSettings mutualConnectionIcon: StatusAssetSettings {
name: "tiny/tiny-contact"
color: Theme.palette.indirectColor1
width: dummyImage.width
height: dummyImage.height
background: StatusIconBackgroundSettings {
width: 10
height: 10
color: Theme.palette.primaryColor1
}
bgWidth: 10
bgHeight: 10
bgColor: Theme.palette.primaryColor1
// Only used to get implicit width and height from the actual image
property Image dummyImage: Image {
source: mutualConnectionIcon.name ? "../../assets/img/icons/" + mutualConnectionIcon.name + ".svg": ""
@ -26,17 +24,15 @@ Row {
}
}
property StatusIconSettings trustContactIcon: StatusIconSettings {
property StatusAssetSettings trustContactIcon: StatusAssetSettings {
// None and Untrustworthy types, same aspect (Icon will not be visible in case of None type):
name: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? "tiny/tiny-checkmark" : "tiny/subtract"
color: Theme.palette.indirectColor1
width: dummyImage.width
height: dummyImage.height
background: StatusIconBackgroundSettings {
width: 10
height: 10
color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
}
bgWidth: 10
bgHeight: 10
bgColor: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
// Only used to get implicit width and height from the actual image
property Image dummyImage: Image {
source: trustContactIcon.name ? "../../assets/img/icons/" + trustContactIcon.name + ".svg": ""
@ -55,25 +51,25 @@ Row {
StatusRoundIcon {
visible: root.isContact
icon.name: root.mutualConnectionIcon.name
icon.width: root.mutualConnectionIcon.width
icon.height: root.mutualConnectionIcon.height
icon.rotation: root.mutualConnectionIcon.rotation
icon.color: root.mutualConnectionIcon.color
icon.background.color: root.mutualConnectionIcon.background.color
icon.background.width: root.mutualConnectionIcon.background.width
icon.background.height: root.mutualConnectionIcon.background.height
asset.name: root.mutualConnectionIcon.name
asset.width: root.mutualConnectionIcon.width
asset.height: root.mutualConnectionIcon.height
asset.rotation: root.mutualConnectionIcon.rotation
asset.color: root.mutualConnectionIcon.color
asset.bgColor: root.mutualConnectionIcon.bgColor
asset.bgWidth: root.mutualConnectionIcon.bgWidth
asset.bgHeight: root.mutualConnectionIcon.bgHeight
}
StatusRoundIcon {
visible: root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None
icon.name: root.trustContactIcon.name
icon.width: root.trustContactIcon.width
icon.height: root.trustContactIcon.height
icon.rotation: root.trustContactIcon.rotation
icon.color: root.trustContactIcon.color
icon.background.color: root.trustContactIcon.background.color
icon.background.width: root.trustContactIcon.background.width
icon.background.height: root.trustContactIcon.background.height
asset.name: root.trustContactIcon.name
asset.width: root.trustContactIcon.width
asset.height: root.trustContactIcon.height
asset.rotation: root.trustContactIcon.rotation
asset.color: root.trustContactIcon.color
asset.bgColor: root.trustContactIcon.bgColor
asset.bgWidth: root.trustContactIcon.bgWidth
asset.bgHeight: root.trustContactIcon.bgHeight
}
}

10
src/StatusQ/Components/StatusDescriptionListItem.qml
View File

@ -10,7 +10,7 @@ Rectangle {
property string subTitle: ""
property alias subTitleComponent: statusDescriptionListItemSubTitle
property string value: ""
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 23
height: 23
}
@ -59,7 +59,7 @@ Rectangle {
StatusFlatRoundButton {
id: statusFlatRoundButton
visible: !!statusDescriptionListItem.icon.name
visible: !!statusDescriptionListItem.asset.name
anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
anchors.left: statusDescriptionListItemSubTitle.right
anchors.leftMargin: 4
@ -67,9 +67,9 @@ Rectangle {
width: 32
height: 32
icon.name: statusDescriptionListItem.icon.name
icon.width: statusDescriptionListItem.icon.width
icon.height: statusDescriptionListItem.icon.height
icon.name: statusDescriptionListItem.asset.name
icon.width: statusDescriptionListItem.asset.width
icon.height: statusDescriptionListItem.asset.height
StatusToolTip {
id: statusToolTip

29
src/StatusQ/Components/StatusExpandableItem.qml
View File

@ -18,19 +18,13 @@ Rectangle {
property bool expandable: true
property bool expanded: false
property StatusIconSettings icon: StatusIconSettings {
width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
property StatusAssetSettings asset: StatusAssetSettings {
width: !statusExpandableItem.asset.isImage ? 24 : 40
height: !statusExpandableItem.asset.isImage ? 24 : 40
color: Theme.palette.directColor1
background: StatusIconBackgroundSettings {
width: 32
height: 32
color: Theme.palette.primaryColor2
}
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
bgWidth: 32
bgHeight: 32
bgColor: Theme.palette.primaryColor2
}
enum Type {
@ -73,8 +67,7 @@ Rectangle {
anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
anchors.left: parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
image: statusExpandableItem.image
icon: statusExpandableItem.icon
asset: statusExpandableItem.asset
name: primaryText.text
active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
}
@ -89,10 +82,10 @@ Rectangle {
anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
parent.width - icon.background.width - additionalText.contentWidth - 110) :
(button.visible ? parent.width - icon.background.width - button.width - 70 :
parent.width - icon.background.width - 70)
width: !!additionalText.text ? (button.visible ? parent.width - asset.bgWidth - button.width - additionalText.contentWidth - 110 :
parent.width - asset.bgWidth - additionalText.contentWidth - 110) :
(button.visible ? parent.width - asset.bgWidth - button.width - 70 :
parent.width - asset.bgWidth - 70)
font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17

6
src/StatusQ/Components/StatusItemSelector.qml
View File

@ -170,7 +170,8 @@ Rectangle {
StatusListItemTag {
visible: itemsModel.count === 0
title: root.defaultItemText
image.source: root.defaultItemImageSource
asset.name: root.defaultItemImageSource
asset.isImage: true
color: Theme.palette.baseColor2
closeButtonVisible: false
titleText.color: Theme.palette.baseColor1
@ -200,7 +201,8 @@ Rectangle {
}
StatusListItemTag {
title: model.text
image.source: model.imageSource
asset.name: model.imageSource
asset.isImage: true
color: Theme.palette.primaryColor3
closeButtonVisible: false
titleText.color: Theme.palette.primaryColor1

45
src/StatusQ/Components/StatusListItem.qml
View File

@ -34,34 +34,29 @@ Rectangle {
property bool loading: false
property bool loadingFailed: false
property StatusIconSettings icon: StatusIconSettings {
height: isLetterIdenticon ? 40 : 20
width: isLetterIdenticon ? 40 : 20
property StatusAssetSettings asset: StatusAssetSettings {
height: isImage ? 40 : 20
width: isImage ? 40 : 20
rotation: 0
isLetterIdenticon: false
letterSize: 21
charactersLen: 1
color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
color: isLetterIdenticon ? bgColor : type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor1 : Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
height: 40
color: {
if (sensor.containsMouse) {
return type === StatusListItem.Type.Secondary ||
type === StatusListItem.Type.Danger ? "transparent" :
Theme.palette.primaryColor3
}
return type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor3 : Theme.palette.primaryColor3
bgWidth: 40
bgHeight: 40
bgColor: {
if (sensor.containsMouse) {
return type === StatusListItem.Type.Secondary ||
type === StatusListItem.Type.Danger ? "transparent" :
Theme.palette.primaryColor3
}
return type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor3 : Theme.palette.primaryColor3
}
imgIsIdenticon: false
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
isIdenticon: false
}
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
initalAngleRad: 0
ringPxSize: 1.5
@ -143,13 +138,11 @@ Rectangle {
anchors.top: parent.top
anchors.topMargin: 12
visible: !iconOrImageLoadingOverlay.visible
image: statusListItem.image
icon: statusListItem.icon
asset: statusListItem.asset
name: statusListItem.title
active: statusListItem.icon.isLetterIdenticon ||
!!statusListItem.icon.name ||
!!statusListItem.image.source.toString() ||
!!statusListItem.icon.emoji
active: statusListItem.asset.isLetterIdenticon ||
!!statusListItem.asset.name ||
!!statusListItem.asset.emoji
badge.border.color: statusListItem.color
ringSettings: statusListItem.ringSettings
}

31
src/StatusQ/Components/StatusListItemBadge.qml
View File

@ -13,17 +13,12 @@ Control {
property string primaryText: ""
property string secondaryText: ""
property StatusImageSettings image: StatusImageSettings {
height: 16
width: 16
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
height: 16
width: 16
isLetterIdenticon: false
background: StatusIconBackgroundSettings {}
color: "transparent"
imgIsIdenticon: false
}
background: Rectangle {
@ -43,22 +38,22 @@ Control {
anchors.horizontalCenterOffset: -spacing
spacing: 2
StatusRoundedImage {
implicitWidth: root.image.width
implicitHeight: root.image.height
visible: !root.icon.isLetterIdenticon
image.source: root.image.source
implicitWidth: root.asset.width
implicitHeight: root.asset.height
visible: !root.asset.isLetterIdenticon
image.source: root.asset.name
border.color: Theme.palette.baseColor1
border.width: root.image.isIdenticon ? 1 : 0
border.width: root.asset.imgIsIdenticon ? 1 : 0
}
StatusLetterIdenticon {
implicitWidth: root.icon.width
implicitHeight: root.icon.width
implicitWidth: root.asset.width
implicitHeight: root.asset.width
letterSize: 11
visible: root.icon.isLetterIdenticon
color: root.icon.color
visible: root.asset.isLetterIdenticon
color: root.asset.color
name: root.primaryText
emoji: root.icon.emoji
emojiSize: root.icon.emojiSize
emoji: root.asset.emoji
emojiSize: root.asset.emojiSize
}
StatusBaseText {
font.weight: Font.Medium

25
src/StatusQ/Components/StatusListItemTag.qml
View File

@ -17,24 +17,17 @@ Rectangle {
property bool closeButtonVisible: true
signal clicked()
property StatusImageSettings image: StatusImageSettings {
width: 20
height: 20
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
height: 20
width: 20
rotation: 0
isLetterIdenticon: false
letterSize: 10
color: Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 15
height: 15
color: Theme.palette.primaryColor3
}
bgWidth: 15
bgHeight: 15
bgColor: Theme.palette.primaryColor3
imgIsIdenticon: false
}
RowLayout {
@ -45,12 +38,10 @@ Rectangle {
StatusSmartIdenticon {
id: iconOrImage
Layout.leftMargin: 4
image: root.image
icon: root.icon
asset: root.asset
name: root.title
active: root.icon.isLetterIdenticon ||
!!root.icon.name ||
!!root.image.source.toString()
active: root.asset.isLetterIdenticon ||
!!root.asset.name
}
StatusBaseText {

8
src/StatusQ/Components/StatusListPicker.qml
View File

@ -294,7 +294,7 @@ Item {
bottomPadding: 0
placeholderText: root.placeholderSearchText
text: root.searchText
input.icon.name: "search"
input.asset.name: "search"
onTextChanged: root.searchText = text
}
@ -303,11 +303,11 @@ Item {
width: content.itemWidth
height: content.itemHeight
color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent"
image: StatusImageSettings {
source: root.proxy.imageSource(model) ? root.proxy.imageSource(model) : ""
asset: StatusAssetSettings {
name: root.proxy.imageSource(model) ? root.proxy.imageSource(model) : ""
width: 15
height: 15
isIdenticon: false
imgIsIdenticon: false
}
name: root.proxy.name(model)
shortName: root.proxy.shortName(model)

7
src/StatusQ/Components/StatusMemberListItem.qml
View File

@ -120,7 +120,6 @@ StatusListItem {
}
subTitle: d.composeSubtitile()
statusListItemSubTitle.font.pixelSize: 10
icon.isLetterIdenticon: !root.image.source.toString()
statusListItemIcon.badge.visible: true
statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
@ -129,10 +128,8 @@ StatusListItem {
implicitWidth: 256
implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
leftPadding: 8
image.width: 32
image.height: 32
icon.width: 32
icon.height: 32
asset.width: 32
asset.height: 32
statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
statusListItemIcon.anchors.top: undefined
statusListItemIcon.badge.border.width: 2

14
src/StatusQ/Components/StatusMessage.qml
View File

@ -226,20 +226,15 @@ Rectangle {
spacing: 8
Item {
implicitWidth: profileImage.width
implicitHeight: profileImage.visible ? profileImage.height : 0
Layout.alignment: Qt.AlignTop
implicitWidth: profileImage.effectiveSize.width
implicitHeight: profileImage.visible ? profileImage.effectiveSize.height : 0
StatusSmartIdenticon {
id: profileImage
active: root.showHeader
visible: active
name: root.messageDetails.sender.userName
image: root.messageDetails.sender.profileImage.imageSettings
icon: root.messageDetails.sender.profileImage.iconSettings
asset: root.messageDetails.sender.profileImage.assetSettings
ringSettings: root.messageDetails.sender.profileImage.ringSettings
MouseArea {
@ -324,7 +319,8 @@ Rectangle {
active: root.messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
visible: active
sourceComponent: StatusSticker {
image.source: root.messageDetails.messageContent
asset.isImage: true
asset.name: root.messageDetails.messageContent
onLoaded: root.stickerLoaded()
onClicked: {
root.stickerClicked()

4
src/StatusQ/Components/StatusMessageDetails.qml
View File

@ -6,14 +6,10 @@ QtObject {
id: msgDetails
property bool amISender: false
property StatusMessageSenderDetails sender: StatusMessageSenderDetails { }
property bool isEdited: false
property int contentType: 0
property string messageText: ""
property string messageContent: ""
property string messageOriginInfo: ""
}

6
src/StatusQ/Components/StatusNavigationListItem.qml
View File

@ -12,9 +12,9 @@ StatusListItem {
implicitWidth: 286
implicitHeight: 48
icon.background.width: 20
icon.background.height: 20
icon.background.color: "transparent"
asset.bgWidth: 20
asset.bgHeight: 20
asset.bgColor: "transparent"
statusListItemIcon.anchors.topMargin: 14

28
src/StatusQ/Components/StatusRoundIcon.qml
View File

@ -5,33 +5,31 @@ import StatusQ.Core.Theme 0.1
Rectangle {
id: statusRoundedIcon
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 24
height: 24
rotation: 0
color: Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
height: 40
color: Theme.palette.primaryColor3
}
bgWidth: 40
bgHeight: 40
bgColor: Theme.palette.primaryColor3
}
color: icon.background.color
implicitWidth: icon.background.width
implicitHeight: icon.background.height
radius: icon.background.width / 2
color: asset.bgColor
implicitWidth: asset.bgWidth
implicitHeight: asset.bgHeight
radius: asset.bgWidth / 2
StatusIcon {
id: statusIcon
anchors.centerIn: parent
width: statusRoundedIcon.icon.width
height: statusRoundedIcon.icon.height
width: statusRoundedIcon.asset.width
height: statusRoundedIcon.asset.height
color: statusRoundedIcon.icon.color
icon: statusRoundedIcon.icon.name
rotation: statusRoundedIcon.icon.rotation
color: statusRoundedIcon.asset.color
icon: statusRoundedIcon.asset.name
rotation: statusRoundedIcon.asset.rotation
}
}

79
src/StatusQ/Components/StatusSmartIdenticon.qml
View File

@ -4,7 +4,7 @@ import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
Loader {
id: statusSmartIdenticon
id: root
property string name: ""
property int dZ: 100
@ -12,55 +12,46 @@ Loader {
// Badge color properties must be set if badgeItem.visible = true
property alias badge: statusBadge
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
}
property StatusImageSettings image: StatusImageSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 40
height: 40
}
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
initalAngleRad: 0
ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / 24.0)
ringPxSize: Math.max(1.5, root.asset.width/ 24.0)
distinctiveColors: Theme.palette.identiconRingColors
}
readonly property size effectiveSize: !!statusSmartIdenticon.image.source.toString()
? Qt.size(statusSmartIdenticon.image.width, statusSmartIdenticon.image.width)
: Qt.size(statusSmartIdenticon.icon.width, statusSmartIdenticon.icon.height)
sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
!!statusSmartIdenticon.image.source.toString() ? roundedImage :
!!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon
sourceComponent: (root.asset.isLetterIdenticon || root.asset.name === "") ? letterIdenticon :
!root.asset.isImage ? roundedIcon : roundedImage
Component {
id: roundedImage
Item {
width: statusSmartIdenticon.image.width
height: statusSmartIdenticon.image.height
width: root.asset.width
height: root.asset.height
StatusRoundedImage {
id: statusRoundImage
width: parent.width
height: parent.height
image.source: statusSmartIdenticon.image.source
image.source: root.asset.name
showLoadingIndicator: true
border.width: statusSmartIdenticon.image.isIdenticon ? 1 : 0
border.width: root.asset.imgIsIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
color: statusSmartIdenticon.image.isIdenticon ?
color: root.asset.imgIsIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
}
Loader {
anchors.centerIn: parent
active: statusRoundImage.image.status === Image.Error
active: root.asset.imgStatus === Image.Error ||
statusRoundImage.image.status === Image.Error
sourceComponent: letterIdenticon
onLoaded: {
item.color = Theme.palette.miscColor5
item.width = statusSmartIdenticon.image.width
item.height = statusSmartIdenticon.image.height
item.width = root.asset.width
item.height = root.asset.height
}
}
}
@ -69,14 +60,14 @@ Loader {
Component {
id: roundedIcon
StatusRoundIcon {
icon.background.width: statusSmartIdenticon.icon.background.width
icon.background.height: statusSmartIdenticon.icon.background.height
icon.background.color: statusSmartIdenticon.icon.background.color
icon.width: statusSmartIdenticon.icon.width
icon.height: statusSmartIdenticon.icon.height
icon.name: statusSmartIdenticon.icon.name
icon.rotation: statusSmartIdenticon.icon.rotation
icon.color: statusSmartIdenticon.icon.color
asset.bgWidth: root.asset.bgWidth
asset.bgHeight: root.asset.bgHeight
asset.bgColor: root.asset.bgColor
asset.width: root.asset.width
asset.height: root.asset.height
asset.name: root.asset.name
asset.rotation: root.asset.rotation
asset.color: root.asset.color
}
}
@ -84,33 +75,33 @@ Loader {
id: letterIdenticon
StatusLetterIdenticon {
objectName: "statusSmartIdenticonLetter"
width: statusSmartIdenticon.icon.width
height: statusSmartIdenticon.icon.height
color: statusSmartIdenticon.icon.color
name: statusSmartIdenticon.name
emoji: statusSmartIdenticon.icon.emoji
emojiSize: statusSmartIdenticon.icon.emojiSize
letterSize: statusSmartIdenticon.icon.letterSize
charactersLen: statusSmartIdenticon.icon.charactersLen
width: root.asset.width
height: root.asset.height
color: root.asset.color
name: root.name
emoji: root.asset.emoji
emojiSize: root.asset.emojiSize
letterSize: root.asset.letterSize
charactersLen: root.asset.charactersLen
}
}
// Next components are painted above main sourceComponent
StatusIdenticonRing {
settings: statusSmartIdenticon.ringSettings
settings: root.ringSettings
anchors.fill: parent
z: statusSmartIdenticon.dZ/2
z: root.dZ/2
}
// State component
StatusBadge {
id: statusBadge
visible: false
anchors.bottom: statusSmartIdenticon.bottom
anchors.right: statusSmartIdenticon.right
anchors.bottom: root.bottom
anchors.right: root.right
border.width: 3
implicitHeight: 15
implicitWidth: 15
z: statusSmartIdenticon.dZ
z: root.dZ
}
}

8
src/StatusQ/Components/StatusTagSelector.qml
View File

@ -180,6 +180,7 @@ Item {
"isContact": entry.isContact,
"ringSpecModel": entry.ringSpecModel,
"icon": entry.icon,
"isImage": entry.isImage,
"onlineStatus": entry.onlineStatus,
"tagIcon": entry.tagIcon ? entry.tagIcon : "",
"isReadonly": !!entry.isReadonly});
@ -412,9 +413,10 @@ Item {
isVerified: model.isVerified
isUntrustworthy: model.isUntrustworthy
isContact: model.isContact
image.source: model.icon
image.isIdenticon: false
icon.color: Theme.palette.userCustomizationColors[root.colorIdForPubkeyGetter(model.pubKey)]
asset.name: model.icon
asset.color: Theme.palette.userCustomizationColors[root.colorIdForPubkeyGetter(model.pubKey)]
asset.isImage: (asset.name !== "")
asset.isLetterIdenticon: (asset.name === "")
status: model.onlineStatus
statusListItemIcon.badge.border.color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
ringSettings.ringSpecModel: root.ringSpecModelGetter(model.pubKey)

4
src/StatusQ/Components/StatusToastMessage.qml
View File

@ -75,10 +75,10 @@ Control {
property int duration: 0
/*!
\qmlproperty StatusIconSettings StatusToastMessage::icon
\qmlproperty StatusAssetSettings StatusToastMessage::icon
This property holds a set of settings for the icon of the ToastMessage.
*/
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings icon: StatusAssetSettings {
width: 23
height: 23
}

11
src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
View File

@ -58,10 +58,8 @@ Item {
id: profileImage
Layout.alignment: Qt.AlignTop
name: replyDetails.sender.userName
image: replyDetails.sender.profileImage.imageSettings
icon: replyDetails.sender.profileImage.iconSettings
asset: replyDetails.sender.profileImage.assetSettings
ringSettings: replyDetails.sender.profileImage.ringSettings
MouseArea {
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
@ -105,9 +103,10 @@ Item {
Layout.alignment: Qt.AlignLeft
visible: replyDetails.contentType === StatusMessage.ContentType.Sticker
StatusSticker {
image.width: 48
image.height: 48
image.source: replyDetails.messageContent
asset.width: 48
asset.height: 48
asset.name: replyDetails.messageContent
asset.isImage: true
}
}
Item {

8
src/StatusQ/Components/private/statusMessage/StatusSticker.qml
View File

@ -10,7 +10,7 @@ Loader {
property bool noHover: false
property bool noMouseArea: false
property StatusImageSettings image: StatusImageSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 140
height: 140
}
@ -26,8 +26,8 @@ Loader {
color: Theme.palette.baseColor2
radius: 16
width: image.width
height: image.height
width: asset.width
height: asset.height
function reload() {
// From the documentation (https://doc.qt.io/qt-5/qml-qtquick-image.html#sourceSize-prop)
@ -53,7 +53,7 @@ Loader {
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
cache: true
source: image.source
source: asset.name
onStatusChanged: {
if (status === Image.Ready) {

2
src/StatusQ/Controls/StatusBaseButton.qml
View File

@ -19,7 +19,7 @@ Rectangle {
Primary
}
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings icon: StatusAssetSettings {
width: 24
height: 24
}

46
src/StatusQ/Controls/StatusBaseInput.qml
View File

@ -218,21 +218,19 @@ Item {
property bool showBackground: true
/*!
\qmlproperty StatusIconSettings StatusBaseInput::icon
\qmlproperty StatusAssetSettings StatusBaseInput::icon
This property holds a set of settings for the icon of the StatusBaseInput.
*/
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 24
height: 24
name: ""
color: Theme.palette.baseColor1
emoji: ""
letterSize: emoji ? 11 : 14
background: StatusIconBackgroundSettings {
width: 30
height: 30
color: Theme.palette.indirectColor1
}
bgWidth: 30
bgHeight: 30
bgColor: Theme.palette.indirectColor1
}
/*!
@ -318,8 +316,8 @@ Item {
sourceComponent: {
if (root.leftComponent) return root.leftComponent
if (!root.leftIcon) return undefined
if (root.icon.emoji || root.icon.isLetterIdenticon) return identiconComponent
if (root.icon.name) return isIconSelectable ? identiconComponent : iconComponent
if (root.asset.emoji || root.asset.isLetterIdenticon) return identiconComponent
if (root.asset.name) return isIconSelectable ? identiconComponent : iconComponent
return undefined
}
}
@ -420,8 +418,8 @@ Item {
if (root.rightComponent) return root.rightComponent
if (root.clearable) return clearButton
if (root.leftIcon) return undefined
if (root.icon.emoji) return identiconComponent
if (root.icon.name) return isIconSelectable ? identiconComponent : iconComponent
if (root.asset.emoji) return identiconComponent
if (root.asset.name) return isIconSelectable ? identiconComponent : iconComponent
return undefined
}
}
@ -455,14 +453,16 @@ Item {
StatusSmartIdenticon {
id: identicon
icon.width: 24
icon.height: 24
icon.background: root.icon.background
icon.color: root.icon.color
icon.letterSize: root.icon.letterSize
icon.emoji: root.icon.emoji
icon.name: !root.icon.emoji ? root.icon.name : ""
icon.isLetterIdenticon: root.icon.isLetterIdenticon
asset.width: 24
asset.height: 24
asset.bgWidth: root.asset.bgWidth
asset.bgHeight: root.asset.bgHeight
asset.bgColor: root.asset.bgColor
asset.color: root.asset.color
asset.letterSize: root.asset.letterSize
asset.emoji: root.asset.emoji
asset.name: !root.asset.emoji ? root.asset.name : ""
asset.isLetterIdenticon: root.asset.isLetterIdenticon
name: root.letterIconName
MouseArea {
@ -482,10 +482,10 @@ Item {
StatusIcon {
id: statusIcon
icon: root.icon.name
width: root.icon.width
height: root.icon.height
color: root.icon.color
icon: root.asset.name
width: root.asset.width
height: root.asset.height
color: root.asset.color
}
}
}

19
src/StatusQ/Controls/StatusChatCommandButton.qml
View File

@ -16,10 +16,9 @@ Rectangle {
signal clicked(var mouse)
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings icon: StatusAssetSettings {
width: 24
height: 24
background: StatusIconBackgroundSettings {}
}
color: {
@ -41,14 +40,14 @@ Rectangle {
}
StatusRoundIcon {
icon.name: root.icon.name
icon.width: root.icon.width
icon.height: root.icon.height
icon.rotation: root.icon.rotation
icon.color: Theme.palette.white
icon.background.width: 40
icon.background.height: 40
icon.background.color: root.icon.color
asset.name: root.icon.name
asset.width: root.icon.width
asset.height: root.icon.height
asset.rotation: root.icon.rotation
asset.color: Theme.palette.white
asset.bgWidth: 40
asset.bgHeight: 40
asset.bgColor: root.icon.color
anchors.top: parent.top
anchors.topMargin: 8
anchors.left: parent.left

10
src/StatusQ/Controls/StatusChatInfoButton.qml
View File

@ -19,11 +19,8 @@ Rectangle {
property string subTitle: ""
property bool muted: false
property int pinnedMessagesCount: 0
property StatusImageSettings image: StatusImageSettings {
width: 36
height: 36
}
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 36
height: 36
charactersLen: 2
@ -65,8 +62,7 @@ Rectangle {
anchors.left: parent.left
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
image: statusChatInfoButton.image
icon: statusChatInfoButton.icon
asset: statusChatInfoButton.asset
name: statusChatInfoButton.title
}

2
src/StatusQ/Controls/StatusFlatRoundButton.qml
View File

@ -7,7 +7,7 @@ import StatusQ.Components 0.1
Rectangle {
id: statusFlatRoundButton
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings icon: StatusAssetSettings {
width: 23
height: 23
rotation: 0

2
src/StatusQ/Controls/StatusFloatingButtonsSelector.qml
View File

@ -118,7 +118,7 @@ Row {
hoverColor: Theme.palette.statusFloatingButtonHighlight
normalColor: Theme.palette.baseColor3
icon.name: "more"
icon.background.color: "transparent"
icon.bgColor: "transparent"
onClicked: popupMenu.popup(parent.x, y + height + 8)
}
}

15
src/StatusQ/Controls/StatusIconTabButton.qml
View File

@ -26,14 +26,13 @@ TabButton {
id: identicon
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
image.source: statusIconTabButton.icon.source
image.width: 28
image.height: 28
icon.height: statusIconTabButton.icon.height
icon.width: statusIconTabButton.icon.width
icon.name: statusIconTabButton.icon.name
icon.color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
icon.isLetterIdenticon: statusIconTabButton.name !== "" && !statusIconTabButton.icon.source.toString()
asset.isImage: (statusIconTabButton.icon.source.toString() !== "")
asset.name: asset.isImage ?
statusIconTabButton.icon.source : statusIconTabButton.icon.name
asset.width: asset.isImage ? 28 : statusIconTabButton.icon.width
asset.height: asset.isImage ? 28 : statusIconTabButton.icon.height
asset.color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
asset.isLetterIdenticon: statusIconTabButton.name !== "" && !asset.isImage
name: statusIconTabButton.name
}
}

14
src/StatusQ/Controls/StatusItemPicker.qml
View File

@ -39,10 +39,10 @@ Rectangle {
id: root
/*!
\qmlproperty string StatusItemPicker::image
This property holds the image settings information.
\qmlproperty string StatusItemPicker::asset
This property holds the asset(image/icon) settings information.
*/
property StatusImageSettings image
property StatusAssetSettings asset
/*!
\qmlproperty string StatusItemPicker::name
@ -127,10 +127,10 @@ Rectangle {
StatusIcon {
id: imageItem
anchors.verticalCenter: parent.verticalCenter
source: root.image && root.image.source ? root.image.source : ""
width: root.image ? root.image.width : 0
height: root.image ? root.image.height : 0
visible: root.image && root.image.source !== undefined
source: root.asset && root.asset.name ? root.asset.name : ""
width: root.asset ? root.asset.width : 0
height: root.asset ? root.asset.height : 0
visible: root.asset && root.asset.name !== undefined
}
StatusBaseText {

14
src/StatusQ/Controls/StatusPickerButton.qml
View File

@ -14,13 +14,13 @@ Button {
property var type: StatusPickerButton.Type.Next
/*!
\qmlproperty StatusImageSettings StatusPickerButton::image
\qmlproperty StatusAssetSettings StatusPickerButton::image
This property holds the image settings information.
*/
property StatusImageSettings image: StatusImageSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 20
height: 20
isIdenticon: false
imgIsIdenticon: false
}
enum Type {
@ -51,11 +51,11 @@ Button {
height: root.icon.height
}
StatusRoundedImage {
visible: root.image.source.toString() !== ""
visible: root.asset.name.toString() !== ""
Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: root.image.width
Layout.preferredHeight: root.image.height
image.source: root.image.source
Layout.preferredWidth: root.asset.width
Layout.preferredHeight: root.asset.height
image.source: root.asset.name
}
StatusBaseText {
Layout.fillWidth: true

2
src/StatusQ/Controls/StatusRoundButton.qml
View File

@ -7,7 +7,7 @@ import StatusQ.Components 0.1
Rectangle {
id: statusRoundButton
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings icon: StatusAssetSettings {
width: 23
height: 23
rotation: 0

1
src/StatusQ/Controls/StatusSelectableText.qml
View File

@ -7,6 +7,7 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
Item {
id: statusSelectableText

2
src/StatusQ/Controls/StatusTabBarIconButton.qml
View File

@ -6,7 +6,7 @@ import StatusQ.Core.Theme 0.1
Item {
id: root
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings icon: StatusAssetSettings {
width: 24
height: 24
name: ""

15
src/StatusQ/Core/StatusIconSettings.qml → src/StatusQ/Core/StatusAssetSettings.qml
View File

@ -4,22 +4,33 @@ import StatusQ.Core 0.1
QtObject {
id: root
//icon
property string name
property url source
property real width
property real height
property color color
property color disabledColor
property url source
property int rotation
property bool isLetterIdenticon
property int letterSize: emoji ? 11 : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize)
property int charactersLen: 1
property string emoji
property string emojiSize: _emojiSize
property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
// can't have QtObject { id: d } inside QtObject, using '_' to indicate private
readonly property int _oneLetterSize: Math.max(15, root.width / 2.0)
readonly property int _twoLettersSize: Math.max(12, root.width / 2.2)
readonly property string _emojiSize: "%1x%1".arg(Math.max(16, root.width * 0.6))
//icon bg
property real bgWidth
property real bgHeight
property int bgRadius
property color bgColor: "transparent"
//image
property bool isImage: false
property int imgStatus
property bool imgIsIdenticon: false
}

10
src/StatusQ/Core/StatusIconBackgroundSettings.qml
View File

@ -1,10 +0,0 @@
import QtQuick 2.13
QtObject {
id: statusIconBackgroundSettings
property color color: "transparent"
property real width
property real height
property int radius
}

11
src/StatusQ/Core/StatusImageSettings.qml
View File

@ -1,11 +0,0 @@
import QtQuick 2.13
QtObject {
id: statusImageSettings
property url source
property real width
property real height
property bool isIdenticon: false
}

8
src/StatusQ/Core/StatusModalHeaderSettings.qml
View File

@ -8,15 +8,11 @@ QtObject {
property bool headerImageEditable: false
property bool editable: false
property Component popupMenu
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 40
height: 40
isLetterIdenticon: false
imgIsIdenticon: false
}
}

15
src/StatusQ/Core/StatusProfileImageSettings.qml
View File

@ -3,30 +3,25 @@ import StatusQ.Core.Theme 0.1
QtObject {
id: root
property url source
property int width
property int height
property bool isIdenticon: false
property string name
property string pubkey
property string image
property bool showRing: true
property bool interactive: true
property int colorId // TODO: default value Utils.colorIdForPubkey(pubkey)
property var colorHash // TODO: default value Utils.getColorHashAsJson(pubkey)
property StatusImageSettings imageSettings: StatusImageSettings {
width: root.width
height: root.height
source: root.source
}
readonly property StatusIconSettings iconSettings: StatusIconSettings {
property StatusAssetSettings assetSettings: StatusAssetSettings {
width: root.width
height: root.height
name: root.name
isImage: name.includes("data")
isLetterIdenticon: (name === "")
imgIsIdenticon: root.isIdenticon
color: Theme.palette.userCustomizationColors[root.colorId]
charactersLen: 2
}

4
src/StatusQ/Core/qmldir
View File

@ -3,10 +3,8 @@ module StatusQ.Core
StatusBaseText 0.1 StatusBaseText.qml
StatusFontSettings 0.1 StatusFontSettings.qml
StatusIcon 0.1 StatusIcon.qml
StatusIconSettings 0.1 StatusIconSettings.qml
StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
StatusAssetSettings 0.1 StatusAssetSettings.qml
StatusIdenticonRingSettings 0.1 StatusIdenticonRingSettings.qml
StatusImageSettings 0.1 StatusImageSettings.qml
StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
StatusTooltipSettings 0.1 StatusTooltipSettings.qml
StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml

10
src/StatusQ/Platform/StatusMacNotification.qml
View File

@ -37,17 +37,13 @@ Rectangle {
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
image: StatusImageSettings {
width: 40
height: 40
source: root.identicon
isIdenticon: true
}
icon: StatusIconSettings {
asset: StatusAssetSettings {
width: 40
height: 40
name: root.identicon
letterSize: 15
color: Theme.palette.miscColor5
imgIsIdenticon: true
}
name: root.name
}

12
src/StatusQ/Popups/StatusMenuItem.qml
View File

@ -12,15 +12,13 @@ Action {
icon.color: "transparent"
property int type: StatusMenuItem.Type.Normal
property real iconRotation: 0
property StatusImageSettings image: StatusImageSettings {
height: 16
property StatusAssetSettings assetSettings: StatusAssetSettings {
width: 16
isIdenticon: false
}
property StatusIconSettings iconSettings: StatusIconSettings {
isLetterIdenticon: false
background: StatusIconBackgroundSettings {}
height: 16
color: "transparent"
isLetterIdenticon: false
imgIsIdenticon: false
name: statusMenuItem.icon.name
}
property StatusFontSettings fontSettings: StatusFontSettings {}

37
src/StatusQ/Popups/StatusMenuItemDelegate.qml
View File

@ -34,8 +34,7 @@ MenuItem {
StatusIcon {
anchors.centerIn: parent
width: {
let width = statusPopupMenuItem.action && statusPopupMenuItem.action.icon.width ||
statusPopupMenuItem.action.iconSettings && statusPopupMenuItem.action.iconSettings.width
let width = statusPopupMenuItem.action && statusPopupMenuItem.action.assetSettings.width
return !!width ? width : 18
}
rotation: !!statusPopupMenuItem.action.iconRotation ? statusPopupMenuItem.action.iconRotation : 0
@ -43,17 +42,16 @@ MenuItem {
if (statusPopupMenuItem.subMenu && !!statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] &&
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon.toString() !== "") {
return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon;
} else if (!!statusPopupMenuItem.action && statusPopupMenuItem.action.icon.name !== "") {
return statusPopupMenuItem.action.icon.name;
} else if (!!statusPopupMenuItem.action.iconSettings && statusPopupMenuItem.action.iconSettings.name !== "") {
return statusPopupMenuItem.action.iconSettings.name;
} else if (!!statusPopupMenuItem.action && statusPopupMenuItem.action.assetSettings.name !== "") {
return statusPopupMenuItem.action.assetSettings.name;
} else if (!!statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.name !== "") {
return statusPopupMenuItem.action.assetSettings.name;
} else {
return "";
}
}
color: {
let c = !!statusPopupMenuItem.action.iconSettings && statusPopupMenuItem.action.iconSettings.color ||
!!statusPopupMenuItem.action && statusPopupMenuItem.action.icon.color
let c = !!statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.color
if (!Qt.colorEqual(c, "transparent")) {
return c
@ -81,7 +79,7 @@ MenuItem {
height: 16
color: {
let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.iconSettings.background.color
return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.assetSettings.bgColor
}
name: statusPopupMenuItem.text
letterSize: 11
@ -97,13 +95,13 @@ MenuItem {
implicitHeight: 24
StatusRoundedImage {
anchors.centerIn: parent
width: statusPopupMenuItem.action.image.width
height: statusPopupMenuItem.action.image.height
width: statusPopupMenuItem.action.assetSettings.width
height: statusPopupMenuItem.action.assetSettings.height
image.source: statusPopupMenuItem.subMenu ?
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].source :
statusPopupMenuItem.action.image.source
statusPopupMenuItem.action.assetSettings.name
border.width: (statusPopupMenuItem.subMenu && statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].isIdenticon) ||
statusPopupMenuItem.action.image.isIdenticon ? 1 : 0
statusPopupMenuItem.action.assetSettings.imgIsIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
}
@ -114,12 +112,13 @@ MenuItem {
let subMenuItemIcon = statusPopupMenu.subMenuItemIcons && statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]
if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) ||
statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()) {
statusPopupMenuItem.action.assetSettings && !!statusPopupMenuItem.action.assetSettings.name.toString()
&& statusPopupMenuItem.action.assetSettings.isImage) {
return statusRoundImageCmp
}
return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) ||
(statusPopupMenuItem.action.iconsSettings && statusPopupMenuItem.action.iconSettings.isLetterIdenticon) ?
(statusPopupMenuItem.action.assetSettings && statusPopupMenuItem.action.assetSettings.isLetterIdenticon) ?
statusLetterIdenticonCmp : indicatorComponent
}
anchors.verticalCenter: parent.verticalCenter
@ -127,11 +126,11 @@ MenuItem {
anchors.leftMargin: 8
active: {
if (enabled) {
let hasIconSettings = !!statusPopupMenuItem.action.icon.name ||
(statusPopupMenuItem.action.iconSettings &&
(!!statusPopupMenuItem.action.iconSettings.name || !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon))
let hasIconSettings = !!statusPopupMenuItem.action.assetSettings.name ||
(statusPopupMenuItem.action.assetSettings &&
(!!statusPopupMenuItem.action.assetSettings.name || !!statusPopupMenuItem.action.assetSettings.isLetterIdenticon))
let hasImageSettings = statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()
let hasImageSettings = statusPopupMenuItem.action.assetSettings && !!statusPopupMenuItem.action.assetSettings.name.toString()
return enabled && (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]) || hasIconSettings || hasImageSettings
}

3
src/StatusQ/Popups/StatusModal.qml
View File

@ -224,8 +224,7 @@ QC.Popup {
titleElide: header.titleElide
subTitle: header.subTitle
subTitleElide: header.subTitleElide
image: header.image
icon: header.icon
asset: header.asset
popupMenu: header.popupMenu
headerImageEditable: header.headerImageEditable
editable: header.editable

26
src/StatusQ/Popups/StatusSearchLocationMenu.qml
View File

@ -49,11 +49,11 @@ StatusPopupMenu {
} else {
item.value = model.value
item.text = model.title;
item.iconSettings.name = model.iconName;
item.iconSettings.color = model.iconColor;
item.iconSettings.isLetterIdenticon = !model.imageSource && !model.iconName
item.image.source = model.imageSource;
item.image.isIdenticon = model.isIdenticon;
item.assetSettings.name = !!model.imageSource ? !!model.imageSource : model.iconName;
item.assetSettings.color = model.iconColor;
item.assetSettings.isImage = !!model.imageSource;
item.assetSettings.isLetterIdenticon = !model.imageSource && !model.iconName
item.assetSettings.imgIsIdenticon = model.isIdenticon;
root.insertItem(index + numDefaultItems, item);
}
}
@ -68,10 +68,10 @@ StatusPopupMenu {
searchPopup.resetSearchSelection()
searchPopup.setSearchSelection(text,
"",
image.source,
image.isIdenticon,
iconSettings.name,
iconSettings.color)
"",
assetSettings.isIdenticon,
assetSettings.name,
assetSettings.color)
root.itemClicked(value, "")
}
}
@ -102,10 +102,10 @@ StatusPopupMenu {
sourceComponent: StatusSearchPopupMenuItem {
value: model.value
text: model.text
image.source: model.imageSource
iconSettings.name: model.iconName
iconSettings.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.iconColor
iconSettings.charactersLen: model.isUserIcon ? 2 : 1
assetSettings.isImage: !!model.imageSource
assetSettings.name: !!model.imageSource ? model.imageSource : model.iconName
assetSettings.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.iconColor
assetSettings.charactersLen: model.isUserIcon ? 2 : 1
ringSettings.ringSpecModel: model.colorHash
onTriggered: {
searchPopup.resetSearchSelection()

45
src/StatusQ/Popups/StatusSearchPopup.qml
View File

@ -47,12 +47,12 @@ StatusModal {
colorHash = "") {
searchSelectionButton.primaryText = text
searchSelectionButton.secondaryText = secondaryText
searchSelectionButton.image.source = imageSource
searchSelectionButton.image.isIdenticon = isIdenticon
searchSelectionButton.iconSettings.name = iconName
searchSelectionButton.iconSettings.color = isUserIcon ? Theme.palette.userCustomizationColors[colorId] : iconColor
searchSelectionButton.iconSettings.isLetterIdenticon = !iconName && !imageSource
searchSelectionButton.iconSettings.charactersLen = isUserIcon ? 2 : 1
searchSelectionButton.asset.imgIsIdenticon = isIdenticon
searchSelectionButton.asset.isImage = !!imageSource
searchSelectionButton.asset.name = !!imageSource ? imageSource : iconName
searchSelectionButton.asset.color = isUserIcon ? Theme.palette.userCustomizationColors[colorId] : iconColor
searchSelectionButton.asset.isLetterIdenticon = !iconName && !imageSource
searchSelectionButton.asset.charactersLen = isUserIcon ? 2 : 1
searchSelectionButton.ringSettings.ringSpecModel = !!colorHash ? JSON.parse(colorHash) : {}
}
@ -131,19 +131,13 @@ StatusModal {
property string primaryText: ""
property string secondaryText: ""
property StatusIconSettings iconSettings: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 16
height: 16
name: ""
isLetterIdenticon: false
letterSize: charactersLen > 1 ? 8 : 11
}
property StatusImageSettings image: StatusImageSettings {
width: 16
height: 16
source: ""
isIdenticon: false
imgIsIdenticon: false
}
property alias ringSettings: identicon.ringSettings
@ -186,13 +180,11 @@ StatusModal {
id: identicon
Layout.preferredWidth: active ? 16 : 0
Layout.preferredHeight: 16
image: searchOptionsMenuButton.image
icon: searchOptionsMenuButton.iconSettings
asset: searchOptionsMenuButton.asset
name: searchOptionsMenuButton.primaryText
active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText &&
(searchOptionsMenuButton.iconSettings.name ||
searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
!!searchOptionsMenuButton.image.source.toString())
(searchOptionsMenuButton.asset.name ||
searchOptionsMenuButton.asset.isLetterIdenticon)
}
StatusBaseText {
@ -286,16 +278,17 @@ StatusModal {
statusListItemSubTitle.height: model.content !== "" ? 20 : 0
statusListItemSubTitle.elide: Text.ElideRight
statusListItemSubTitle.color: Theme.palette.directColor1
icon.isLetterIdenticon: (model.image === "")
icon.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.color
icon.charactersLen: model.isUserIcon ? 2 : 1
asset.isLetterIdenticon: (model.image === "")
asset.color: model.isUserIcon ? Theme.palette.userCustomizationColors[model.colorId] : model.color
asset.charactersLen: model.isUserIcon ? 2 : 1
titleAsideText: root.formatTimestampFn(model.time)
image.source: model.image
asset.name: model.image
asset.isImage: !!model.image
badge.primaryText: model.badgePrimaryText
badge.secondaryText: model.badgeSecondaryText
badge.image.source: model.badgeImage
badge.icon.isLetterIdenticon: model.badgeIsLetterIdenticon
badge.icon.color: model.badgeIconColor
badge.asset.name: model.badgeImage
badge.asset.isLetterIdenticon: model.badgeIsLetterIdenticon
badge.asset.color: model.badgeIconColor
ringSettings.ringSpecModel: model.colorHash
onClicked: {

20
src/StatusQ/Popups/StatusSearchPopupMenuItem.qml
View File

@ -11,20 +11,13 @@ MenuItem {
property string value: ""
property StatusImageSettings image: StatusImageSettings {
property StatusAssetSettings assetSettings: StatusAssetSettings {
height: 16
width: 16
isIdenticon: false
}
property StatusIconSettings iconSettings: StatusIconSettings {
height: 16
width: 16
isLetterIdenticon: (root.image.source.toString() === ""
&& root.iconSettings.name.toString() === "")
background: StatusIconBackgroundSettings {}
isLetterIdenticon: (name.toString() === "")
color: (name === "channel") ? Theme.palette.directColor1 : "transparent"
letterSize: charactersLen > 1 ? 8 : 11
imgIsIdenticon: false
}
property alias ringSettings: identicon.ringSettings
@ -37,14 +30,13 @@ MenuItem {
anchors.left: parent.left
anchors.leftMargin: 12
Item {
Layout.preferredWidth: root.iconSettings.width
Layout.preferredHeight: root.iconSettings.height
Layout.preferredWidth: root.assetSettings.width
Layout.preferredHeight: root.assetSettings.height
Layout.alignment: Qt.AlignVCenter
StatusSmartIdenticon {
id: identicon
anchors.centerIn: parent
image: root.image
icon: root.iconSettings
asset: root.assetSettings
name: root.text
ringSettings: root.ringSettings
}

37
src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml
View File

@ -17,16 +17,11 @@ Row {
signal editButtonClicked
signal headerImageClicked
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
property StatusAssetSettings asset: StatusAssetSettings {
width: 40
height: 40
isLetterIdenticon: false
imgIsIdenticon: false
}
spacing: 8
@ -36,21 +31,21 @@ Row {
anchors.verticalCenter: parent.verticalCenter
width: active ? 40 : 0
sourceComponent: {
if (statusImageWithTitle.icon.isLetterIdenticon) {
if (statusImageWithTitle.asset.isLetterIdenticon) {
return statusLetterIdenticon
}
return statusRoundedImageCmp
}
active: statusImageWithTitle.icon.isLetterIdenticon ||
!!statusImageWithTitle.image.source.toString()
active: statusImageWithTitle.asset.isLetterIdenticon ||
!!statusImageWithTitle.asset.name
}
Component {
id: statusLetterIdenticon
StatusLetterIdenticon {
width: statusImageWithTitle.icon.width
height: statusImageWithTitle.icon.height
color: statusImageWithTitle.icon.background.color
width: statusImageWithTitle.asset.width
height: statusImageWithTitle.asset.height
color: statusImageWithTitle.asset.bgColor
name: statusImageWithTitle.title
}
}
@ -58,18 +53,16 @@ Row {
Component {
id: statusRoundedImageCmp
Item {
width: statusImageWithTitle.image.width
height: statusImageWithTitle.image.height
width: statusImageWithTitle.asset.width
height: statusImageWithTitle.asset.height
StatusRoundedImage {
id: statusRoundedImage
objectName: "headerImage"
image.source: statusImageWithTitle.image.source
width: statusImageWithTitle.image.width
height: statusImageWithTitle.image.height
color: statusImageWithTitle.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusImageWithTitle.image.isIdenticon ? 1 : 0
image.source: statusImageWithTitle.asset.name
width: statusImageWithTitle.asset.width
height: statusImageWithTitle.asset.height
color: Theme.palette.statusRoundedImage.backgroundColor
border.width: 1
border.color: Theme.palette.directColor7
showLoadingIndicator: true
}

3
src/StatusQ/Popups/statusModal/StatusModalHeader.qml
View File

@ -15,8 +15,7 @@ Rectangle {
property int subTitleElide
property alias actionButton: actionButtonLoader.sourceComponent
property alias image: imageWithTitle.image
property alias icon: imageWithTitle.icon
property alias asset: imageWithTitle.asset
property bool editable: false
property alias headerImageEditable: imageWithTitle.headerImageEditable
property bool hasCloseButton: true

3
src/statusq.qrc
View File

@ -135,10 +135,7 @@
<file>StatusQ/Core/StatusBaseText.qml</file>
<file>StatusQ/Core/StatusFontSettings.qml</file>
<file>StatusQ/Core/StatusIcon.qml</file>
<file>StatusQ/Core/StatusIconBackgroundSettings.qml</file>
<file>StatusQ/Core/StatusIconSettings.qml</file>
<file>StatusQ/Core/StatusIdenticonRingSettings.qml</file>
<file>StatusQ/Core/StatusImageSettings.qml</file>
<file>StatusQ/Core/StatusModalHeaderSettings.qml</file>
<file>StatusQ/Core/StatusScrollView.qml</file>
<file>StatusQ/Core/StatusTooltipSettings.qml</file>