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"
+//            color: "transparent"
-            hoverColor: "transparent"
+//            hoverColor: "transparent"
-            textColor: UM.Theme.getColor("text")
+//            textColor: UM.Theme.getColor("text")
-            textHoverColor: UM.Theme.getColor("text_link")
+//            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
+    maximumWidth: Math.round(minimumWidth * 1.2)
-    maximumHeight: minimumHeight * 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()
+        width: UM.Theme.getSize("account_button").width
-        text: catalog.i18nc("@button", "Sign In")
+        height: UM.Theme.getSize("account_button").height
         anchors.horizontalCenter: parent.horizontalCenter
+        text: catalog.i18nc("@button", "Sign in")
+        onClicked: Cura.API.account.login()
+        fixedWidthMode: true
     }
 }

resources/qml/ActionButton.qml

@@ -4,6 +4,7 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.1
 import QtGraphicalEffects 1.0 // For the dropshadow
+
 import UM 1.1 as UM
 import Cura 1.0 as Cura
 
@@ -30,6 +31,7 @@ Button
     property color outlineDisabledColor: outlineColor
     property alias shadowColor: shadow.color
     property alias shadowEnabled: shadow.visible
+    property alias busy: busyIndicator.visible
 
     // This property is used to indicate whether the button has a fixed width or the width would depend on the contents
     // Be careful when using fixedWidthMode, the translated texts can be too long that they won't fit. In any case,
@@ -117,4 +119,17 @@ Button
         delay: 500
         visible: text != "" && button.hovered
     }
+
+    BusyIndicator {
+        id: busyIndicator
+
+        anchors {
+            centerIn: parent
+        }
+
+        width: height
+        height: parent.height
+
+        visible: false
+    }
 }

resources/qml/CheckBox.qml

@@ -0,0 +1,61 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.1
+
+import UM 1.3 as UM
+
+CheckBox
+{
+    id: checkbox
+    hoverEnabled: true
+
+    property alias tooltip: tooltip.text
+
+    indicator: Rectangle {
+        implicitWidth: UM.Theme.getSize("checkbox").width
+        implicitHeight: UM.Theme.getSize("checkbox").height
+        x: 0
+        y: Math.round(parent.height / 2 - height / 2)
+        color: UM.Theme.getColor("main_background")
+        radius: UM.Theme.getSize("checkbox_radius").width
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: checkbox.hovered ? UM.Theme.getColor("checkbox_border_hover") : UM.Theme.getColor("checkbox_border")
+
+        UM.RecolorImage
+        {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: Math.round(parent.width / 2.5)
+            height: Math.round(parent.height / 2.5)
+            sourceSize.height: width
+            color: UM.Theme.getColor("checkbox_mark")
+            source: UM.Theme.getIcon("check")
+            opacity: checkbox.checked
+            Behavior on opacity { NumberAnimation { duration: 100; } }
+        }
+    }
+
+    contentItem: Label {
+        anchors
+        {
+            left: checkbox.indicator.right
+            leftMargin: UM.Theme.getSize("narrow_margin").width
+        }
+        text: checkbox.text
+        color: UM.Theme.getColor("checkbox_text")
+        font: UM.Theme.getFont("default")
+        renderType: Text.NativeRendering
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    ToolTip
+    {
+        id: tooltip
+        text: ""
+        delay: 500
+        visible: text != "" && checkbox.hovered
+    }
+}

resources/qml/Cura.qml

@@ -123,6 +123,17 @@ UM.MainWindow
                     }
                 }
             }
+
+            // This is a placehoder for adding a pattern in the header
+            Image
+            {
+                id: backgroundPattern
+                anchors.fill: parent
+                fillMode: Image.Tile
+                source: UM.Theme.getImage("header_pattern")
+                horizontalAlignment: Image.AlignLeft
+                verticalAlignment: Image.AlignTop
+            }
         }
 
         MainWindowHeader

resources/qml/qmldir

@@ -15,3 +15,4 @@ ViewsSelector 1.0 ViewsSelector.qml
 ToolbarButton 1.0 ToolbarButton.qml
 SettingView 1.0 SettingView.qml
 ProfileMenu 1.0 ProfileMenu.qml
+CheckBox 1.0 CheckBox.qml

resources/themes/cura-light/styles.qml

@@ -478,7 +478,7 @@ QtObject
                 color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_hover") : (control.enabled ? Theme.getColor("checkbox") : Theme.getColor("checkbox_disabled"))
                 Behavior on color { ColorAnimation { duration: 50; } }
 
-                radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : UM.Theme.getSize("checkbox_radius").width
+                radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : Theme.getSize("checkbox_radius").width
 
                 border.width: Theme.getSize("default_lining").width
                 border.color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_border_hover") : Theme.getColor("checkbox_border")