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

feat(StatusSmartIdenticon): Created a new StatusQ componnent to accomodate: 

1. A StatusRoundedImage
2. StatusRoundIcon
3. LetterIdenticon

Fallback in case of an error in loading Image to the LetterIdenticon
This commit is contained in:
Khushboo Mehta 2021-10-20 16:35:54 +02:00 committed by r4bbit.eth
parent 074dc22ba5
commit 1452748331
11 changed files with 154 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sandbox/ListItems.qml
View File

@ -286,7 +286,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem {
title: "Title"
icon.isLetterIdenticon: true
icon.background.color: "orange"
icon.color: "orange"
}
StatusListItem {

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

@ -20,9 +20,15 @@ Rectangle {
property bool hasUnreadMessages: false
property bool hasMention: false
property bool muted: false
property StatusImageSettings image: StatusImageSettings {}
property StatusImageSettings image: StatusImageSettings {
width: 24
height: 24
}
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
color: Theme.palette.miscColor5
letterSize: 15
}
property int type: StatusChatListItem.Type.PublicChat
property bool highlighted: false
@ -67,50 +73,14 @@ Rectangle {
onClicked: statusChatListItem.clicked(mouse)
Loader {
StatusSmartIdenticon {
id: identicon
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusChatListItem.image.source.toString() ?
statusRoundedImageCmp : statusLetterIdenticonCmp
}
Component {
id: statusLetterIdenticonCmp
StatusLetterIdenticon {
height: 24
width: 24
name: statusChatListItem.name
letterSize: 15
color: statusChatListItem.icon.color
}
}
Component {
id: statusRoundedImageCmp
Item {
height: 24
width: 24
StatusRoundedImage {
id: statusRoundedImage
width: parent.width
height: parent.height
image.source: statusChatListItem.image.source
showLoadingIndicator: true
color: statusChatListItem.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusChatListItem.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
Loader {
sourceComponent: statusLetterIdenticonCmp
active: statusRoundedImage.image.status === Image.Error
}
}
image: statusChatListItem.image
icon: statusChatListItem.icon
name: statusChatListItem.name
}
StatusIcon {

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

@ -18,6 +18,8 @@ Rectangle {
property bool expanded: false
property StatusIconSettings icon: StatusIconSettings {
width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
color: Theme.palette.directColor1
background: StatusIconBackgroundSettings {
width: 32
@ -55,44 +57,17 @@ Rectangle {
visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
}
Loader {
StatusSmartIdenticon {
id: identicon
anchors.top: parent.top
anchors.topMargin: 25
anchors.left: parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 0 : 11
image: statusExpandableItem.image
icon: statusExpandableItem.icon
name: primaryText.text
active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
sourceComponent: !!statusExpandableItem.image.source.toString() ? roundedImage :
!!statusExpandableItem.icon.name.toString() ? roundedIcon : letterIdenticon
}
Component {
id: roundedImage
StatusRoundedImage {
image.source: statusExpandableItem.image.source
}
}
Component {
id: roundedIcon
StatusRoundIcon {
icon.background.width: statusExpandableItem.icon.background.width
icon.background.height: statusExpandableItem.icon.background.height
icon.background.color: statusExpandableItem.icon.background.color
icon.color: statusExpandableItem.icon.color
icon.name: statusExpandableItem.icon.name
}
}
Component {
id: letterIdenticon
StatusLetterIdenticon {
height: 40
width: 40
name: primaryText.text
letterSize: 20
color: Theme.palette.miscColor5
}
}
StatusBaseText {

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

@ -47,11 +47,12 @@ Rectangle {
property real rightPadding: 16
property bool enabled: true
property StatusIconSettings icon: StatusIconSettings {
height: 20
width: 20
height: isLetterIdenticon ? 40 : 20
width: isLetterIdenticon ? 40 : 20
rotation: 0
isLetterIdenticon: false
color: type === StatusListItem.Type.Danger ?
letterSize: 21
color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor1 : Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
@ -110,62 +111,20 @@ Rectangle {
statusListItem.clicked(statusListItem.itemId)
}
Loader {
StatusSmartIdenticon {
id: iconOrImage
anchors.left: parent.left
anchors.leftMargin: statusListItem.leftPadding
anchors.top: parent.top
anchors.topMargin: 12
sourceComponent: {
if (statusListItem.icon.isLetterIdenticon) {
return statusLetterIdenticon
}
return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
}
image: statusListItem.image
icon: statusListItem.icon
name: statusListItem.title
active: statusListItem.icon.isLetterIdenticon ||
!!statusListItem.icon.name ||
!!statusListItem.image.source.toString()
}
Component {
id: statusRoundedIcon
StatusRoundIcon {
icon.width: statusListItem.icon.width
icon.height: statusListItem.icon.height
icon.name: statusListItem.icon.name
icon.rotation: statusListItem.icon.rotation
icon.color: statusListItem.icon.color
color: statusListItem.icon.background.color
width: statusListItem.icon.background.width
height: statusListItem.icon.background.height
}
}
Component {
id: statusRoundedImage
StatusRoundedImage {
image.source: statusListItem.image.source
image.height: statusListItem.image.height
image.width: statusListItem.image.width
color: statusListItem.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusListItem.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
}
Component {
id: statusLetterIdenticon
StatusLetterIdenticon {
width: statusListItem.icon.background.width
height: statusListItem.icon.background.height
color: statusListItem.icon.background.color
name: statusListItem.title
}
}
Item {
id: statusListItemTitleArea
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left

78
src/StatusQ/Components/StatusSmartIdenticon.qml Normal file
View File

@ -0,0 +1,78 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Loader {
id: statusSmartIdenticon
property string name: ""
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
}
sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
!!statusSmartIdenticon.image.source.toString() ? roundedImage :
!!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon
Component {
id: roundedImage
Item {
width: statusSmartIdenticon.image.width
height: statusSmartIdenticon.image.height
StatusRoundedImage {
id: statusRoundImage
width: parent.width
height: parent.height
image.source: statusSmartIdenticon.image.source
showLoadingIndicator: true
border.width: statusSmartIdenticon.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
color: statusSmartIdenticon.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
}
Loader {
anchors.centerIn: parent
active: statusRoundImage.image.status === Image.Error
sourceComponent: letterIdenticon
onLoaded: {
item.color = Theme.palette.miscColor5
item.width = statusSmartIdenticon.image.width
item.height = statusSmartIdenticon.image.height
}
}
}
}
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
}
}
Component {
id: letterIdenticon
StatusLetterIdenticon {
width: statusSmartIdenticon.icon.width
height: statusSmartIdenticon.icon.height
color: statusSmartIdenticon.icon.color
name: statusSmartIdenticon.name
letterSize: statusSmartIdenticon.icon.letterSize
}
}
}

1
src/StatusQ/Components/qmldir
View File

@ -22,3 +22,4 @@ StatusRoundedImage 0.1 StatusRoundedImage.qml
StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
StatusListItemBadge 0.1 StatusListItemBadge.qml
StatusExpandableItem 0.1 StatusExpandableItem.qml
StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml

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

@ -18,8 +18,15 @@ Rectangle {
property string subTitle: ""
property bool muted: false
property int pinnedMessagesCount: 0
property StatusImageSettings image: StatusImageSettings {}
property StatusIconSettings icon: StatusIconSettings {}
property StatusImageSettings image: StatusImageSettings {
width: 36
height: 36
}
property StatusIconSettings icon: StatusIconSettings {
width: 36
height: 36
letterSize: 20
}
property int type: StatusChatInfoButton.Type.PublicChat
property alias tooltip: statusToolTip
property alias sensor: sensor
@ -50,51 +57,14 @@ Rectangle {
onClicked: statusChatInfoButton.clicked(mouse)
Loader {
StatusSmartIdenticon {
id: identicon
anchors.left: parent.left
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusChatInfoButton.image.source.toString() ?
statusRoundImageComponent :
statusLetterIdenticonComponent
}
Component {
id: statusRoundImageComponent
Item {
width: 36
height: 36
StatusRoundedImage {
id: statusRoundImage
width: parent.width
height: parent.height
image.source: statusChatInfoButton.image.source
showLoadingIndicator: true
border.width: statusChatInfoButton.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
Loader {
sourceComponent: statusLetterIdenticonComponent
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
active: statusRoundImage.image.status === Image.Error
}
}
}
Component {
id: statusLetterIdenticonComponent
StatusLetterIdenticon {
width: 36
height: 36
name: statusChatInfoButton.title
color: statusChatInfoButton.icon.color
}
image: statusChatInfoButton.image
icon: statusChatInfoButton.icon
name: statusChatInfoButton.title
}
Item {

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

@ -20,56 +20,20 @@ TabButton {
contentItem: Item {
anchors.fill: parent
Loader {
active: true
StatusSmartIdenticon {
id: identicon
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
sourceComponent: statusIconTabButton.name !== "" && !icon.source.toString() ? letterIdenticon :
!!icon.source.toString() ? imageIcon : defaultIcon
}
Component {
id: defaultIcon
StatusIcon {
icon: statusIconTabButton.icon.name
height: statusIconTabButton.icon.height
width: statusIconTabButton.icon.width
color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
}
}
Component {
id: imageIcon
Item {
width: 28
height: 28
StatusRoundedImage {
id: statusRoundImage
showLoadingIndicator: true
width: parent.width
height: parent.height
image.source: icon.source
}
Loader {
sourceComponent:letterIdenticon
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
active: statusRoundImage.image.status === Image.Error
}
}
}
Component {
id: letterIdenticon
StatusLetterIdenticon {
width: 26
height: 26
letterSize: 15
name: statusIconTabButton.name
color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
}
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()
icon.letterSize: 15
name: statusIconTabButton.name
}
}

1
src/StatusQ/Core/StatusIconSettings.qml
View File

@ -12,5 +12,6 @@ QtObject {
property url source
property int rotation
property bool isLetterIdenticon
property int letterSize
property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
}

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

@ -113,11 +113,16 @@ StatusModal {
property string primaryText: ""
property string secondaryText: ""
property StatusIconSettings iconSettings: StatusIconSettings {
width: 16
height: 16
name: ""
isLetterIdenticon: false
letterSize: 11
}
property StatusImageSettings image: StatusImageSettings {
width: 16
height: 16
source: ""
isIdenticon: false
}
@ -155,67 +160,17 @@ StatusModal {
font.weight: Font.Medium
}
Loader {
StatusSmartIdenticon {
id: identicon
Layout.preferredWidth: active ? 16 : 0
Layout.preferredHeight: 16
image: searchOptionsMenuButton.image
icon: searchOptionsMenuButton.iconSettings
name: searchOptionsMenuButton.primaryText
active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText &&
(searchOptionsMenuButton.iconSettings.name ||
searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
!!searchOptionsMenuButton.image.source.toString())
sourceComponent: {
if (!!searchOptionsMenuButton.image.source.toString()) {
return statusRoundedImageCmp
}
if (!!searchOptionsMenuButton.iconSettings.isLetterIdenticon || !searchOptionsMenuButton.iconSettings.name) {
return statusLetterIdenticonCmp
}
return statusIconCmp
}
}
Component {
id: statusIconCmp
StatusIcon {
width: 16
icon: searchOptionsMenuButton.iconSettings.name
color: searchOptionsMenuButton.iconSettings.color
}
}
Component {
id: statusRoundedImageCmp
Item {
width: 16
height: 16
StatusRoundedImage {
id: statusRoundedImage
implicitWidth: parent.width
implicitHeight: parent.height
image.source: searchOptionsMenuButton.image.source
color: searchOptionsMenuButton.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: searchOptionsMenuButton.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
Loader {
sourceComponent: statusLetterIdenticonCmp
active: statusRoundedImage.image.status === Image.Error
}
}
}
Component {
id: statusLetterIdenticonCmp
StatusLetterIdenticon {
implicitWidth: 16
implicitHeight: 16
letterSize: 11
color: searchOptionsMenuButton.iconSettings.color
name: searchOptionsMenuButton.primaryText
}
}
StatusBaseText {

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

@ -22,7 +22,8 @@ MenuItem {
isLetterIdenticon: (root.image.source.toString() === ""
&& root.iconSettings.name.toString() === "")
background: StatusIconBackgroundSettings {}
color: "transparent"
color: (name === "channel") ? Theme.palette.directColor1 : "transparent"
letterSize: 11
}
background: Rectangle {
@ -32,30 +33,17 @@ MenuItem {
contentItem: RowLayout {
anchors.left: parent.left
anchors.leftMargin: 12
StatusIcon {
Layout.preferredWidth: visible ? root.iconSettings.width : 0
Layout.preferredHeight: visible ? root.iconSettings.height : 0
Item {
Layout.preferredWidth: root.iconSettings.width
Layout.preferredHeight: root.iconSettings.height
Layout.alignment: Qt.AlignVCenter
visible: !!root.iconSettings.name && !root.image.source.toString()
icon: root.iconSettings.name
color: (icon === "channel")? Theme.palette.directColor1 : root.iconSettings.color
}
StatusRoundedImage {
Layout.preferredWidth: visible ? root.image.width : 0
Layout.preferredHeight: visible ? root.image.height : 0
Layout.alignment: Qt.AlignVCenter
visible: root.image.source.toString() !== ""
image.source: root.image.source
border.width: root.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
StatusLetterIdenticon {
Layout.preferredWidth: visible ? root.iconSettings.width : 0
Layout.preferredHeight: visible ? root.iconSettings.height : 0
visible: root.iconSettings.isLetterIdenticon && !root.iconSettings.name && !root.image.source.toString()
color: root.iconSettings.color
name: root.text
letterSize: 11
StatusSmartIdenticon {
id: identicon
anchors.centerIn: parent
image: root.image
icon: root.iconSettings
name: root.text
}
}
StatusBaseText {
Layout.fillWidth: true