Use single qml file for sync states

CURA-7290

cura/API/Account.py

@@ -34,7 +34,7 @@ class Account(QObject):
     cloudPrintersDetectedChanged = pyqtSignal(bool)
     manualSyncRequested = pyqtSignal()
     lastSyncDateTimeChanged = pyqtSignal()
-    syncStateChanged = pyqtSignal()
+    syncStateChanged = pyqtSignal(str)
 
     SYNC_STATES = ["syncing", "success", "error"]
 
@@ -99,7 +99,7 @@ class Account(QObject):
             self._sync_state = "success"
 
         if self._sync_state != prev_state:
-            self.syncStateChanged.emit()
+            self.syncStateChanged.emit(self._sync_state)
 
             if self._sync_state == "success":
                 self._last_sync_str = datetime.now().strftime("%d/%m/%Y %H:%M")

resources/qml/Account/SyncState.qml

@@ -0,0 +1,81 @@
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import UM 1.4 as UM
+import Cura 1.1 as Cura
+
+Row // sync state icon + message
+{
+
+    property alias iconSource: icon.source
+    property alias labelText: stateLabel.text
+    property alias syncButtonVisible: accountSyncButton.visible
+    property alias animateIconRotation: updateAnimator.running
+
+    width: childrenRect.width
+    height: childrenRect.height
+    anchors.horizontalCenter: parent.horizontalCenter
+    spacing: UM.Theme.getSize("narrow_margin").height
+
+    UM.RecolorImage
+    {
+        id: icon
+        width: 20 * screenScaleFactor
+        height: width
+
+        source: UM.Theme.getIcon("update")
+        color: palette.text
+
+        RotationAnimator
+        {
+            id: updateAnimator
+            target: icon
+            from: 0
+            to: 360
+            duration: 1000
+            loops: Animation.Infinite
+            running: true
+
+            // reset rotation when stopped
+            onRunningChanged: {
+                if(!running)
+                {
+                    icon.rotation = 0
+                }
+            }
+        }
+    }
+
+    Column
+    {
+        width: childrenRect.width
+        height: childrenRect.height
+
+        Label
+        {
+            id: stateLabel
+            text: catalog.i18nc("@state", "Checking...")
+            color: UM.Theme.getColor("text")
+            font: UM.Theme.getFont("medium")
+            renderType: Text.NativeRendering
+        }
+
+        Label
+        {
+            id: accountSyncButton
+            text: catalog.i18nc("@button", "Check for account updates")
+            color: UM.Theme.getColor("secondary_button_text")
+            font: UM.Theme.getFont("medium")
+            renderType: Text.NativeRendering
+
+            MouseArea
+            {
+                anchors.fill: parent
+                onClicked: Cura.API.account.sync()
+                hoverEnabled: true
+                onEntered: accountSyncButton.font.underline = true
+                onExited: accountSyncButton.font.underline = false
+            }
+        }
+    }
+}

resources/qml/Account/SyncStateError.qml

@@ -1,38 +0,0 @@
-import QtQuick 2.10
-import QtQuick.Controls 2.3
-
-import UM 1.4 as UM
-import Cura 1.1 as Cura
-
-Row // sync state icon + message
-{
-    width: childrenRect.width
-    height: childrenRect.height
-    anchors.horizontalCenter: parent.horizontalCenter
-    spacing: UM.Theme.getSize("narrow_margin").height
-
-
-
-    UM.RecolorImage
-    {
-        id: updateImage
-        width: 20 * screenScaleFactor
-        height: width
-
-        source: UM.Theme.getIcon("warning_light")
-        color: palette.text
-
-        signal syncingChanged(bool newSyncing)
-        property double animationDuration: 1500
-
-    }
-
-    Label
-    {
-        id: syncStateSuccessLabel
-        text: catalog.i18nc("@info", "Something went wrong...\nPlease try again later.")
-        color: UM.Theme.getColor("text")
-        font: UM.Theme.getFont("medium")
-        renderType: Text.NativeRendering
-    }
-}

resources/qml/Account/SyncStateIdle.qml

@@ -1,44 +0,0 @@
-import QtQuick 2.10
-import QtQuick.Controls 2.3
-
-import UM 1.4 as UM
-import Cura 1.1 as Cura
-
-Row // sync state icon + message
-{
-    width: childrenRect.width
-    height: childrenRect.height
-    anchors.horizontalCenter: parent.horizontalCenter
-    spacing: UM.Theme.getSize("narrow_margin").height
-
-
-
-    UM.RecolorImage
-    {
-        id: updateImage
-        width: 20 * screenScaleFactor
-        height: width
-
-        source: UM.Theme.getIcon("update")
-        color: palette.text
-
-    }
-
-    Label
-    {
-        id: accountSyncButton
-        text: catalog.i18nc("@button", "Check for account updates")
-        color: UM.Theme.getColor("secondary_button_text")
-        font: UM.Theme.getFont("medium")
-        renderType: Text.NativeRendering
-
-        MouseArea
-        {
-            anchors.fill: parent
-            onClicked: Cura.API.account.sync()
-            hoverEnabled: true
-            onEntered: accountSyncButton.font.underline = true
-            onExited: accountSyncButton.font.underline = false
-        }
-    }
-}

resources/qml/Account/SyncStateSuccess.qml

@@ -1,32 +0,0 @@
-import QtQuick 2.10
-import QtQuick.Controls 2.3
-
-import UM 1.4 as UM
-import Cura 1.1 as Cura
-
-Row // sync state icon + message
-{
-    width: childrenRect.width
-    height: childrenRect.height
-    anchors.horizontalCenter: parent.horizontalCenter
-    spacing: UM.Theme.getSize("narrow_margin").height
-
-    UM.RecolorImage
-    {
-        id: updateImage
-        width: 20 * screenScaleFactor
-        height: width
-
-        source: UM.Theme.getIcon("checked")
-        color: palette.text
-    }
-
-    Label
-    {
-        id: syncStateSuccessLabel
-        text: catalog.i18nc("@info", "You are up to date")
-        color: UM.Theme.getColor("text")
-        font: UM.Theme.getFont("medium")
-        renderType: Text.NativeRendering
-    }
-}

resources/qml/Account/SyncStateSyncing.qml

@@ -1,43 +0,0 @@
-import QtQuick 2.10
-import QtQuick.Controls 2.3
-
-import UM 1.4 as UM
-import Cura 1.1 as Cura
-
-Row // sync state icon + message
-{
-    width: childrenRect.width
-    height: childrenRect.height
-    anchors.horizontalCenter: parent.horizontalCenter
-    spacing: UM.Theme.getSize("narrow_margin").height
-
-    UM.RecolorImage
-    {
-        id: updateImage
-        width: 20 * screenScaleFactor
-        height: width
-
-        source: UM.Theme.getIcon("update")
-        color: palette.text
-
-        RotationAnimator
-        {
-            id: updateAnimator
-            target: updateImage
-            from: 0
-            to: 360
-            duration: 1000
-            loops: Animation.Infinite
-            running: true
-        }
-    }
-
-    Label
-    {
-        id: accountSyncButton
-        text: catalog.i18nc("@button", "Checking...")
-        color: UM.Theme.getColor("text")
-        font: UM.Theme.getFont("medium")
-        renderType: Text.NativeRendering
-    }
-}

resources/qml/Account/UserOperations.qml

@@ -29,21 +29,12 @@ Column
         color: UM.Theme.getColor("text")
     }
 
-    SyncStateIdle {
+    SyncState
-        visible: Cura.API.account.syncState == "idle"
+    {
+        id: syncRow
     }
 
-    SyncStateSyncing {
-        visible: Cura.API.account.syncState == "syncing"
-    }
 
-    SyncStateSuccess {
-        visible: Cura.API.account.syncState == "success"
-    }
-
-    SyncStateError {
-        visible: Cura.API.account.syncState == "error"
-    }
 
     Label
     {
@@ -85,4 +76,32 @@ Column
             onExited: signOutButton.font.underline = false
         }
     }
+
+    signal syncStateChanged(string newState)
+
+    onSyncStateChanged: {
+        if(newState == "syncing"){
+            syncRow.iconSource = UM.Theme.getIcon("update")
+            syncRow.labelText = catalog.i18nc("@label", "Checking...")
+        } else if (newState == "success") {
+            syncRow.iconSource = UM.Theme.getIcon("checked")
+            syncRow.labelText = catalog.i18nc("@label", "You are up to date")
+        } else if (newState == "error") {
+            syncRow.iconSource = UM.Theme.getIcon("warning-light")
+            syncRow.labelText = catalog.i18nc("@label", "Something went wrong...")
+        } else {
+            print("Error: unexpected sync state: " + newState)
+        }
+
+        if(newState == "syncing"){
+            syncRow.animateIconRotation = true
+            syncRow.syncButtonVisible = false
+        } else {
+            syncRow.animateIconRotation = false
+            syncRow.syncButtonVisible = true
+        }
+    }
+
+    Component.onCompleted: Cura.API.account.syncStateChanged.connect(syncStateChanged)
+
 }