diff --git a/ui/app/AppLayouts/Browser/DownloadElement.qml b/ui/app/AppLayouts/Browser/DownloadElement.qml index a89aaa95bb..271833ee17 100644 --- a/ui/app/AppLayouts/Browser/DownloadElement.qml +++ b/ui/app/AppLayouts/Browser/DownloadElement.qml @@ -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 diff --git a/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml b/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml index f57fa10e26..b8b2e8a877 100644 --- a/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml +++ b/ui/app/AppLayouts/Profile/Sections/ContactsContainer.qml @@ -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 } diff --git a/ui/app/AppLayouts/Profile/Sections/Ens/ENSDetails.qml b/ui/app/AppLayouts/Profile/Sections/Ens/ENSDetails.qml index 342569ec81..691a46d3b9 100644 --- a/ui/app/AppLayouts/Profile/Sections/Ens/ENSDetails.qml +++ b/ui/app/AppLayouts/Profile/Sections/Ens/ENSDetails.qml @@ -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 { diff --git a/ui/app/AppLayouts/Wallet/HistoryTab.qml b/ui/app/AppLayouts/Wallet/HistoryTab.qml index 6dd519a09d..062434b273 100644 --- a/ui/app/AppLayouts/Wallet/HistoryTab.qml +++ b/ui/app/AppLayouts/Wallet/HistoryTab.qml @@ -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 { diff --git a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml index a7a2da4426..14e58a4daa 100644 --- a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml +++ b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml @@ -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 { diff --git a/ui/shared/EnsResolver.qml b/ui/shared/EnsResolver.qml index 13eec0e707..381cc1be81 100644 --- a/ui/shared/EnsResolver.qml +++ b/ui/shared/EnsResolver.qml @@ -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 } diff --git a/ui/shared/ImageLoader.qml b/ui/shared/ImageLoader.qml index 4802aa59c9..9e4e63ed75 100644 --- a/ui/shared/ImageLoader.qml +++ b/ui/shared/ImageLoader.qml @@ -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 } } diff --git a/ui/shared/status/StatusButton.qml b/ui/shared/status/StatusButton.qml index 891d145881..3dc3c8ff7c 100644 --- a/ui/shared/status/StatusButton.qml +++ b/ui/shared/status/StatusButton.qml @@ -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 { diff --git a/ui/shared/status/StatusRoundButton.qml b/ui/shared/status/StatusRoundButton.qml index 4cb299a949..7876e18848 100644 --- a/ui/shared/status/StatusRoundButton.qml +++ b/ui/shared/status/StatusRoundButton.qml @@ -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 { diff --git a/ui/shared/status/StatusStickersPopup.qml b/ui/shared/status/StatusStickersPopup.qml index ec8239fd22..dfb86803b5 100644 --- a/ui/shared/status/StatusStickersPopup.qml +++ b/ui/shared/status/StatusStickersPopup.qml @@ -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 } diff --git a/ui/shared/status/assets/img/icons/loading.svg b/ui/shared/status/assets/img/icons/loading.svg new file mode 100644 index 0000000000..9cae82127e --- /dev/null +++ b/ui/shared/status/assets/img/icons/loading.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/shared/LoadingImage.qml b/ui/shared/status/core/StatusLoadingIndicator.qml similarity index 62% rename from ui/shared/LoadingImage.qml rename to ui/shared/status/core/StatusLoadingIndicator.qml index f244011f9e..9cd3d359ab 100644 --- a/ui/shared/LoadingImage.qml +++ b/ui/shared/status/core/StatusLoadingIndicator.qml @@ -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