status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusListItem): Added `loading` and `loadingFailed` properties (#736)

This commit is contained in:
Igor Sirotin 2022-06-22 10:40:17 +03:00 committed by Michał Cieślak
parent 0a36c4c88d
commit acb56141fa
6 changed files with 135 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/StatusQ/sandbox/controls/ListItems.qml
View File

@ -445,4 +445,33 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
isAdmin: true
isUntrustworthy: true
}
StatusBaseText {
Layout.fillWidth: true
Layout.topMargin: 16
text: "Loading features:"
font.pixelSize: 17
}
StatusListItem {
title: "Nokia 3310"
subTitle: "Incoming device"
label: "loading: true"
icon.emoji: "😁"
icon.color: "hotpink"
icon.letterSize: 14
icon.isLetterIdenticon: true
loading: true
}
StatusListItem {
title: "Nokia 3310"
subTitle: "Device"
label: "loadingFailed: true"
icon.emoji: "😁"
icon.color: "hotpink"
icon.letterSize: 14
icon.isLetterIdenticon: true
loadingFailed: true
}
}

30
ui/StatusQ/src/StatusQ/Animations/SkeletonAnimation.qml Normal file
View File

@ -0,0 +1,30 @@
import QtQuick 2.14
import QtGraphicalEffects 1.14
Item {
id: root
property Item mask
property color color: "#F6F8FA"
Rectangle {
id: gradient
anchors.fill: parent
visible: false
gradient: Gradient {
orientation: Gradient.Horizontal
SkeletonGradientStop { color: "transparent"; from: -3; }
SkeletonGradientStop { color: "transparent"; from: -2; }
SkeletonGradientStop { color: root.color; from: -1 ; }
SkeletonGradientStop { color: "transparent"; from: 0; }
SkeletonGradientStop { color: "transparent"; from: 1; }
}
}
OpacityMask {
anchors.fill: parent
source: gradient
maskSource: root.mask
}
}

23
ui/StatusQ/src/StatusQ/Animations/SkeletonGradientStop.qml Normal file
View File

@ -0,0 +1,23 @@
import QtQuick 2.14
import QtGraphicalEffects 1.14
/*
TODO: This component should be implemented as inline component of `SkeletonAnimation.qml`
when we use Qt > 5.15
*/
GradientStop {
id: root
property real from: 0
color: "transparent"
NumberAnimation on position {
easing.type: Easing.Linear
loops: Animation.Infinite
from: root.from
to: from + 4
duration: 2000
}
}

4
ui/StatusQ/src/StatusQ/Animations/qmldir Normal file
View File

@ -0,0 +1,4 @@
module StatusQ.Animations
SkeletonAnimation 0.1 SkeletonAnimation.qml
SkeletonGradientStop 0.1 SkeletonGradientStop.qml

47
ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
View File

@ -5,6 +5,10 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Animations 0.1
import QtGraphicalEffects 1.14
import "private"
Rectangle {
id: statusListItem
@ -27,6 +31,8 @@ Rectangle {
property Component bottomDelegate
property var tagsModel: []
property Component tagsDelegate
property bool loading: false
property bool loadingFailed: false
property StatusIconSettings icon: StatusIconSettings {
height: isLetterIdenticon ? 40 : 20
@ -134,6 +140,7 @@ Rectangle {
anchors.leftMargin: statusListItem.leftPadding
anchors.top: parent.top
anchors.topMargin: 12
visible: !iconOrImageLoadingOverlay.visible
image: statusListItem.image
icon: statusListItem.icon
name: statusListItem.title
@ -145,6 +152,20 @@ Rectangle {
ringSettings: statusListItem.ringSettings
}
Rectangle {
id: iconOrImageLoadingOverlay
visible: statusListItem.loading || statusListItem.loadingFailed
anchors.fill: iconOrImage
radius: width / 2
color: statusListItem.loadingFailed ? Theme.palette.dangerColor2 : Theme.palette.baseColor1
SkeletonAnimation {
anchors.fill: parent
mask: parent
visible: statusListItem.loading && !statusListItem.loadingFailed
}
}
Item {
id: statusListItemTitleArea
@ -164,8 +185,29 @@ Rectangle {
height: childrenRect.height
Rectangle {
id: titleLoadingOverlay
visible: statusListItem.loading || statusListItem.loadingFailed
anchors {
left: statusListItemTitle.left
top: statusListItemTitle.top
bottom: statusListItemTitle.bottom
}
width: Math.max(95, statusListItemTitle.width)
radius: 4
color: statusListItem.loadingFailed ? Theme.palette.dangerColor2 : Theme.palette.baseColor1
SkeletonAnimation {
anchors.fill: parent
mask: parent
visible: statusListItem.loading && !statusListItem.loadingFailed
}
}
StatusBaseText {
id: statusListItemTitle
opacity: titleLoadingOverlay.visible ? 0 : 1
text: statusListItem.title
font.pixelSize: 15
height: visible ? contentHeight : 0
@ -235,7 +277,10 @@ Rectangle {
width: parent.width
text: statusListItem.subTitle
font.pixelSize: 15
color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
color: statusListItem.loadingFailed ? Theme.palette.dangerColor1
: !statusListItem.enabled || !statusListItem.tertiaryTitle
? Theme.palette.baseColor1
: Theme.palette.directColor1
height: visible ? contentHeight : 0
visible: !!statusListItem.subTitle
wrapMode: Text.WrapAtWordBoundaryOrAnywhere

3
ui/StatusQ/statusq.qrc
View File

@ -10502,5 +10502,8 @@
<file>src/assets/twemoji/LICENSE</file>
<file>src/StatusQ/Controls/StatusTabBar.qml</file>
<file>src/StatusQ/Controls/StatusTagItem.qml</file>
<file>src/StatusQ/Animations/SkeletonAnimation.qml</file>
<file>src/StatusQ/Animations/SkeletonGradientStop.qml</file>
<file>src/StatusQ/Animations/qmldir</file>
</qresource>
</RCC>