Unify the CuraDrive plugin with the rest of the items in Cura

For instance, the buttons were converted to either primary buttons or secondary buttons. A new CheckBox component was created in Cura in order to reuse it in the future.

Contributes to CURA-6005.

plugins/CuraDrive/src/qml/components/ActionButton.qml

@@ -1,67 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-import QtQuick 2.7
-import QtQuick.Controls 2.1
-import QtQuick.Layouts 1.3
-
-import UM 1.1 as UM
-
-Button
-{
-    id: button
-    property alias cursorShape: mouseArea.cursorShape
-    property var iconSource: ""
-    property var busy: false
-    property var color: UM.Theme.getColor("primary")
-    property var hoverColor: UM.Theme.getColor("primary_hover")
-    property var disabledColor: color
-    property var textColor: UM.Theme.getColor("button_text")
-    property var textHoverColor: UM.Theme.getColor("button_text_hover")
-    property var textDisabledColor: textColor
-    property var textFont: UM.Theme.getFont("action_button")
-
-    contentItem: RowLayout
-    {
-        Icon
-        {
-            id: buttonIcon
-            iconSource: button.iconSource
-            width: 16 * screenScaleFactor
-            color: button.hovered ? button.textHoverColor : button.textColor
-            visible: button.iconSource != "" && !loader.visible
-        }
-
-        Icon
-        {
-            id: loader
-            iconSource: "../images/loading.gif"
-            width: 16 * screenScaleFactor
-            color: button.hovered ? button.textHoverColor : button.textColor
-            visible: button.busy
-            animated: true
-        }
-
-        Label
-        {
-            id: buttonText
-            text: button.text
-            color: button.enabled ? (button.hovered ? button.textHoverColor : button.textColor): button.textDisabledColor
-            font: button.textFont
-            visible: button.text != ""
-            renderType: Text.NativeRendering
-        }
-    }
-
-    background: Rectangle
-    {
-        color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor
-    }
-
-    MouseArea
-    {
-        id: mouseArea
-        anchors.fill: parent
-        onPressed: mouse.accepted = false
-        hoverEnabled: true
-        cursorShape: button.enabled ? (hovered ? Qt.PointingHandCursor : Qt.ArrowCursor) : Qt.ForbiddenCursor
-    }
-}

plugins/CuraDrive/src/qml/components/ActionCheckBox.qml

@@ -1,49 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-import QtQuick 2.7
-import QtQuick.Controls 2.1
-import QtQuick.Layouts 1.3
-
-import UM 1.3 as UM
-
-CheckBox
-{
-    id: checkbox
-    hoverEnabled: true
-
-    property var label: ""
-
-    indicator: Rectangle {
-        implicitWidth: 30 * screenScaleFactor
-        implicitHeight: 30 * screenScaleFactor
-        x: 0
-        y: Math.round(parent.height / 2 - height / 2)
-        color: UM.Theme.getColor("sidebar")
-        border.color: UM.Theme.getColor("text")
-
-        Rectangle {
-            width: 14 * screenScaleFactor
-            height: 14 * screenScaleFactor
-            x: 8 * screenScaleFactor
-            y: 8 * screenScaleFactor
-            color: UM.Theme.getColor("primary")
-            visible: checkbox.checked
-        }
-    }
-
-    contentItem: Label {
-        anchors
-        {
-            left: checkbox.indicator.right
-            leftMargin: 5 * screenScaleFactor
-        }
-        text: catalog.i18nc("@checkbox:description", "Auto Backup")
-        color: UM.Theme.getColor("text")
-        renderType: Text.NativeRendering
-        verticalAlignment: Text.AlignVCenter
-    }
-
-    ActionToolTip
-    {
-        text: checkbox.label
-    }
-}

plugins/CuraDrive/src/qml/components/ActionToolTip.qml

@@ -14,7 +14,7 @@ ToolTip
 
     background: Rectangle
     {
-        color: UM.Theme.getColor("sidebar")
+        color: UM.Theme.getColor("main_background")
         border.color: UM.Theme.getColor("primary")
         border.width: 1 * screenScaleFactor
     }
@@ -23,7 +23,7 @@ ToolTip
     {
         text: tooltip.text
         color: UM.Theme.getColor("text")
-        font: UM.Theme.getFont("very_small")
+        font: UM.Theme.getFont("default")
         renderType: Text.NativeRendering
     }
 }

plugins/CuraDrive/src/qml/components/BackupListFooter.qml

@@ -4,6 +4,7 @@ import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.3
 
 import UM 1.3 as UM
+import Cura 1.0 as Cura
 
 import "../components"
 
@@ -13,7 +14,7 @@ RowLayout
     width: parent.width
     property bool showInfoButton: false
 
-    ActionButton
+    Cura.PrimaryButton
     {
         id: infoButton
         text: catalog.i18nc("@button", "Want more?")
@@ -22,7 +23,7 @@ RowLayout
         visible: backupListFooter.showInfoButton
     }
 
-    ActionButton
+    Cura.PrimaryButton
     {
         id: createBackupButton
         text: catalog.i18nc("@button", "Backup Now")
@@ -32,11 +33,12 @@ RowLayout
         busy: CuraDrive.isCreatingBackup
     }
 
-    ActionCheckBox
+    Cura.CheckBox
     {
         id: autoBackupEnabled
         checked: CuraDrive.autoBackupEnabled
         onClicked: CuraDrive.toggleAutoBackup(autoBackupEnabled.checked)
-        label: catalog.i18nc("@checkbox:description", "Automatically create a backup each day that Cura is started.")
+        text: catalog.i18nc("@checkbox:description", "Auto Backup")
+        tooltip: catalog.i18nc("@checkbox:description", "Automatically create a backup each day that Cura is started.")
     }
 }

plugins/CuraDrive/src/qml/components/BackupListItem.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts 1.3
 import QtQuick.Dialogs 1.1
 
 import UM 1.1 as UM
+import Cura 1.0 as Cura
 
 Item
 {
@@ -29,7 +30,7 @@ Item
         width: parent.width
         height: 50 * screenScaleFactor
 
-        ActionButton
+        Cura.ActionButton
         {
             color: "transparent"
             hoverColor: "transparent"
@@ -61,18 +62,18 @@ Item
             renderType: Text.NativeRendering
         }
 
-        ActionButton
+        Cura.SecondaryButton
         {
             text: catalog.i18nc("@button", "Restore")
-            color: "transparent"
-            hoverColor: "transparent"
-            textColor: UM.Theme.getColor("text")
-            textHoverColor: UM.Theme.getColor("text_link")
+//            color: "transparent"
+//            hoverColor: "transparent"
+//            textColor: UM.Theme.getColor("text")
+//            textHoverColor: UM.Theme.getColor("text_link")
             enabled: !CuraDrive.isCreatingBackup && !CuraDrive.isRestoringBackup
             onClicked: confirmRestoreDialog.visible = true
         }
 
-        ActionButton
+        Cura.ActionButton
         {
             color: "transparent"
             hoverColor: "transparent"

plugins/CuraDrive/src/qml/main.qml

@@ -14,11 +14,11 @@ Window
     id: curaDriveDialog
     minimumWidth: Math.round(UM.Theme.getSize("modal_window_minimum").width)
     minimumHeight: Math.round(UM.Theme.getSize("modal_window_minimum").height)
-    maximumWidth: minimumWidth * 1.2
-    maximumHeight: minimumHeight * 1.2
+    maximumWidth: Math.round(minimumWidth * 1.2)
+    maximumHeight: Math.round(minimumHeight * 1.2)
     width: minimumWidth
     height: minimumHeight
-    color: UM.Theme.getColor("sidebar")
+    color: UM.Theme.getColor("main_background")
     title: catalog.i18nc("@title:window", "Cura Backups")
 
     // Globally available.

plugins/CuraDrive/src/qml/pages/WelcomePage.qml

@@ -38,11 +38,14 @@ Column
         renderType: Text.NativeRendering
     }
 
-    ActionButton
+    Cura.PrimaryButton
     {
         id: loginButton
-        onClicked: Cura.API.account.login()
-        text: catalog.i18nc("@button", "Sign In")
+        width: UM.Theme.getSize("account_button").width
+        height: UM.Theme.getSize("account_button").height
         anchors.horizontalCenter: parent.horizontalCenter
+        text: catalog.i18nc("@button", "Sign in")
+        onClicked: Cura.API.account.login()
+        fixedWidthMode: true
     }
 }