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: introduce StatusLoadingIndicator component 

A `StatusIcon` that rotates infinitely and can be used for indicating
pending states.

Usage:

```
StatusLoadingIndicator {
    width: 24 // default: 17
    height: 24 // default: 17
    color: "red" // default: loading asset color
}
```

This also removes `LoadingImage` component from `ui/shared`.

Closes #2360
This commit is contained in:
Pascal Precht 2021-04-26 12:25:01 +02:00 committed by Iuri Matias
parent 17e9e30454
commit aa8d9a7f48
12 changed files with 35 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/app/AppLayouts/Browser/DownloadElement.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.1
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import "../../../shared"
import "../../../shared/status/core"
import "../../../shared/status"
import "../../../imports"
@ -65,7 +66,7 @@ Rectangle {
Component {
id: loadingImageComponent
LoadingImage {}
StatusLoadingIndicator {}
}
Component {
id: fileImageComponent

3
ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status/core"
import "../../../../shared/status"
import "./Contacts"
@ -115,7 +116,7 @@ Item {
Component {
id: loadingIndicator
LoadingImage {
StatusLoadingIndicator {
width: 12
height: 12
}

3
ui/app/AppLayouts/Profile/Sections/Ens/ENSDetails.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Layouts 1.3
import QtQuick.Controls 2.14
import "../../../../../imports"
import "../../../../../shared"
import "../../../../../shared/status/core"
import "../../../../../shared/status"
Item {
@ -25,7 +26,7 @@ Item {
Component {
id: loadingImageComponent
LoadingImage {}
StatusLoadingIndicator {}
}
Loader {

3
ui/app/AppLayouts/Wallet/HistoryTab.qml
View File

@ -5,6 +5,7 @@ import "./components"
import "./data"
import "../../../imports"
import "../../../shared"
import "../../../shared/status/core"
import "../../../shared/status"
Item {
@ -54,7 +55,7 @@ Item {
Component {
id: loadingImageComponent
LoadingImage {}
StatusLoadingIndicator {}
}
Connections {

4
ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml
View File

@ -2,6 +2,8 @@ import QtQuick 2.13
import QtGraphicalEffects 1.13
import "../../../../../imports"
import "../../../../../shared"
import "../../../../../shared/status/core"
import "../../../../../shared/status"
Rectangle {
property url collectibleIconSource: "../../../../img/collectibles/CryptoKitties.png"
@ -60,7 +62,7 @@ Rectangle {
Component {
id: loadingComponent
LoadingImage {}
StatusLoadingIndicator {}
}
Component {

4
ui/shared/EnsResolver.qml
View File

@ -3,6 +3,8 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import "../imports"
import "./status/core"
import "./status"
Item {
id: root
@ -32,7 +34,7 @@ Item {
Component {
id: loadingIndicator
LoadingImage {
StatusLoadingIndicator {
width: root.width
height: root.height
}

11
ui/shared/ImageLoader.qml
View File

@ -1,6 +1,8 @@
import QtQuick 2.3
import QtGraphicalEffects 1.13
import "../imports"
import "./status/core"
import "./status"
Rectangle {
id: root
@ -98,15 +100,10 @@ Rectangle {
Component {
id: loadingIndicator
LoadingImage {
StatusLoadingIndicator {
width: 23
height: 23
ColorOverlay {
anchors.fill: parent
source: parent
color: Style.current.secondaryText
antialiasing: true
}
color: Style.current.secondaryText
}
}

3
ui/shared/status/StatusButton.qml
View File

@ -4,6 +4,7 @@ import QtQml 2.14
import QtGraphicalEffects 1.13
import "../../imports"
import "../../shared"
import "./core"
Button {
property string type: "primary"
@ -95,7 +96,7 @@ Button {
Component {
id: loadingComponent
LoadingImage {}
StatusLoadingIndicator {}
}
Loader {

18
ui/shared/status/StatusRoundButton.qml
View File

@ -4,6 +4,7 @@ import QtGraphicalEffects 1.13
import QtQml 2.14
import "../../imports"
import "../../shared"
import "./core"
RoundButton {
property string type: "primary"
@ -162,8 +163,10 @@ RoundButton {
Component {
id: loadingComponent
LoadingImage {
StatusLoadingIndicator {
color: control.size === "medium" || control.size === "small" ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
Style.current.roundedButtonDisabledForegroundColor
}
}
@ -193,17 +196,6 @@ RoundButton {
}
antialiasing: true
}
ColorOverlay {
id: loadingOverlay
visible: loadingIndicator.active
anchors.fill: loadingIndicator
source: loadingIndicator
color: control.size === "medium" || control.size === "small" ?
Style.current.roundedButtonSecondaryDisabledForegroundColor :
Style.current.roundedButtonDisabledForegroundColor
antialiasing: true
}
}
MouseArea {

3
ui/shared/status/StatusStickersPopup.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import "../../imports"
import "../../shared"
import "../../shared/status/core"
import "../../shared/status"
import "../../app/AppLayouts/Chat/ChatColumn/samples"
@ -152,7 +153,7 @@ Popup {
Component {
id: loadingImageComponent
LoadingImage {
StatusLoadingIndicator {
width: 50
height: 50
}

3
ui/shared/status/assets/img/icons/loading.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4026 7.61613C15.1003 6.27604 14.3668 5.06612 13.3089 4.16834C12.2508 3.27037 10.9252 2.73329 9.52966 2.6397C8.13414 2.54611 6.74648 2.90125 5.5742 3.65036C4.40214 4.39934 3.50926 5.50117 3.02621 6.78932C2.54323 8.07728 2.49501 9.48441 2.88849 10.8014C3.28202 12.1185 4.09701 13.277 5.21455 14.1023C6.3323 14.9278 7.6921 15.375 9.09086 15.375L9.09086 17.625C7.21319 17.625 5.38448 17.0249 3.87789 15.9123C2.3711 14.7995 1.26676 13.2331 0.732658 11.4455C0.198503 9.65769 0.264129 7.74689 0.919466 5.9993C1.57473 4.2519 2.78355 2.76349 4.36265 1.75441C5.94153 0.745467 7.80684 0.269103 9.68023 0.394746C11.5536 0.520391 13.3374 1.24153 14.7648 2.45282C16.1923 3.66429 17.187 5.30147 17.5974 7.12107L15.4026 7.61613Z" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 887 B

11
ui/shared/LoadingImage.qml → ui/shared/status/core/StatusLoadingIndicator.qml
View File

@ -1,14 +1,13 @@
import QtQuick 2.13
import "."
SVGImage {
id: loadingImg
source: "../app/img/loading.svg"
width: 17
StatusIcon {
id: root
icon: "loading"
height: 17
fillMode: Image.Stretch
width: 17
RotationAnimator {
target: loadingImg;
target: root;
from: 0;
to: 360;
duration: 1200