Cura-5035 Further style improvements

plugins/Toolbox/resources/qml/Toolbox.qml

@@ -45,7 +45,6 @@ Window
             {
                 id: viewLoading
                 visible: manager.viewCategory != "installed" && manager.viewPage == "loading"
-                // TODO: Replace !dataReady with manager.viewPage == "loading"
             }
             ToolboxDownloadsPage
             {

plugins/Toolbox/resources/qml/ToolboxAuthorPage.qml

@@ -112,7 +112,7 @@ Item
         }
         Rectangle
         {
-            color: UM.Theme.getColor("text_medium")
+            color: UM.Theme.getColor("lining")
             width: parent.width
             height: UM.Theme.getSize("default_lining").height
             anchors.bottom: parent.bottom

plugins/Toolbox/resources/qml/ToolboxDetailPage.qml

@@ -124,7 +124,7 @@ Item
         }
         Rectangle
         {
-            color: UM.Theme.getColor("text_medium")
+            color: UM.Theme.getColor("lining")
             width: parent.width
             height: UM.Theme.getSize("default_lining").height
             anchors.bottom: parent.bottom

plugins/Toolbox/resources/qml/ToolboxDetailTile.qml

@@ -79,9 +79,10 @@ Rectangle
                 label: Label
                 {
                     text: control.text
-                    color: "white"
+                    color: control.hovered ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_text_hover")
                     verticalAlignment: Text.AlignVCenter
                     horizontalAlignment: Text.AlignHCenter
+                    font: UM.Theme.getFont("default_bold")
                 }
             }
             onClicked:
@@ -109,7 +110,7 @@ Rectangle
     }
     Rectangle
     {
-        color: UM.Theme.getColor("text_medium")
+        color: UM.Theme.getColor("lining")
         width: parent.width
         height: UM.Theme.getSize("default_lining").height
         anchors.bottom: parent.bottom

plugins/Toolbox/resources/qml/ToolboxDownloadsGridTile.qml

@@ -32,8 +32,8 @@ Item
             width: UM.Theme.getSize("toolbox_thumbnail_small").width
             height: UM.Theme.getSize("toolbox_thumbnail_small").height
             color: "white"
-            border.width: 1
+            border.width: UM.Theme.getSize("default_lining").width
-            border.color: UM.Theme.getColor("text_medium")
+            border.color: UM.Theme.getColor("lining")
             Image {
                 anchors.centerIn: parent
                 width: UM.Theme.getSize("toolbox_thumbnail_small").width - 26

plugins/Toolbox/resources/qml/ToolboxDownloadsPage.qml

@@ -27,7 +27,7 @@ ScrollView
         }
         Rectangle
         {
-            color: UM.Theme.getColor("text_medium")
+            color: UM.Theme.getColor("lining")
             width: parent.width - 2 * parent.padding
             height: UM.Theme.getSize("default_lining").height
         }

plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml

@@ -18,7 +18,7 @@ Item
         width: UM.Theme.getSize("toolbox_thumbnail_medium").width
         height: UM.Theme.getSize("toolbox_thumbnail_medium").height
         border.width: 1
-        border.color: UM.Theme.getColor("text_medium")
+        border.color: UM.Theme.getColor("lining")
         anchors
         {
             top: parent.top

plugins/Toolbox/resources/qml/ToolboxInstalledPage.qml

@@ -11,7 +11,7 @@ import UM 1.1 as UM
 ScrollView
 {
     id: base
-    frameVisible: true
+    frameVisible: false
     width: parent.width
     height: parent.height
     style: UM.Theme.styles.scrollview
@@ -40,7 +40,7 @@ ScrollView
             color: "transparent"
             width: parent.width
             height: childrenRect.height + 1 * UM.Theme.getSize("default_lining").width
-            border.color: UM.Theme.getColor("text_medium")
+            border.color: UM.Theme.getColor("lining")
             border.width: UM.Theme.getSize("default_lining").width
             Column
             {
@@ -75,7 +75,7 @@ ScrollView
             color: "transparent"
             width: parent.width
             height: childrenRect.height + 1 * UM.Theme.getSize("default_lining").width
-            border.color: UM.Theme.getColor("text_medium")
+            border.color: UM.Theme.getColor("lining")
             border.width: UM.Theme.getSize("default_lining").width
             Column
             {

plugins/Toolbox/resources/qml/ToolboxInstalledTile.qml

@@ -6,52 +6,39 @@ import QtQuick.Dialogs 1.1
 import QtQuick.Window 2.2
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
-
-// TODO: Switch to QtQuick.Controls 2.x and remove QtQuick.Controls.Styles
-
 import UM 1.1 as UM
 
-Component {
+Item
-    id: pluginDelegate
+{
-
+    id: base
-    Rectangle {
+    height: UM.Theme.getSize("base_unit").height * 8
-
+    anchors
-        // Don't show required plugins as they can't be managed anyway:
+    {
-        height: !model.required ? 84 : 0
-        visible: !model.required ? true : false
-        // color: Qt.rgba(1.0, 0.0, 0.0, 0.1)
-        anchors {
         left: parent.left
         right: parent.right
     }
-
+    Rectangle
-
+    {
-        // Bottom border:
-        Rectangle {
         color: UM.Theme.getColor("lining")
         width: parent.width
-            height: 1
+        height: UM.Theme.getSize("default_lining").height
         anchors.bottom: parent.bottom
     }
-
+    Column
-        // Plugin info
+    {
-        Column {
         id: pluginInfo
-
         property var color: model.enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("lining")
-
-            // Styling:
         height: parent.height
-            anchors {
+        anchors
+        {
             left: parent.left
             top: parent.top
-                topMargin: UM.Theme.getSize("default_margin").height
             right: authorInfo.left
+            topMargin: UM.Theme.getSize("default_margin").height
             rightMargin: UM.Theme.getSize("default_margin").width
         }
-
+        Label
-
+        {
-            Label {
             text: model.name
             width: parent.width
             height: 24
@@ -62,10 +49,9 @@ Component {
                 bold: true
             }
             color: pluginInfo.color
-
         }
-
+        Text
-            Text {
+        {
             text: model.description
             width: parent.width
             height: 36
@@ -75,20 +61,20 @@ Component {
             elide: Text.ElideRight
         }
     }
-
+    Column
-        // Author info
+    {
-        Column {
         id: authorInfo
         width: 192
         height: parent.height
-            anchors {
+        anchors
+        {
             top: parent.top
             topMargin: UM.Theme.getSize("default_margin").height
             right: pluginActions.left
             rightMargin: UM.Theme.getSize("default_margin").width
         }
-
+        Label
-            Label {
+        {
             text: "<a href=\"mailto:"+model.author_email+"?Subject=Cura: "+model.name+"\">"+model.author+"</a>"
             width: parent.width
             height: 24
@@ -101,88 +87,34 @@ Component {
     }
 
     // Plugin actions
-        Row {
+    Column
+    {
         id: pluginActions
-
+        width: childrenRect.width
-            width: 96
+        height: childrenRect.height
-            height: parent.height
+        spacing: UM.Theme.getSize("default_margin").height
-            anchors {
+        anchors
+        {
             top: parent.top
             right: parent.right
             topMargin: UM.Theme.getSize("default_margin").height
         }
-            layoutDirection: Qt.RightToLeft
-            spacing: UM.Theme.getSize("default_margin").width
 
-            // For 3rd-Party Plugins:
-            Button {
-                id: installButton
-                text: {
-                    if ( manager.isDownloading && pluginList.activePlugin == model ) {
-                        return catalog.i18nc( "@action:button", "Cancel" );
-                    } else {
-                        if (model.can_upgrade) {
-                            return catalog.i18nc("@action:button", "Update");
-                        }
-                        return catalog.i18nc("@action:button", "Install");
-                    }
-                }
-                enabled:
-                {
-                    if ( manager.isDownloading )
-                    {
-                        return pluginList.activePlugin == model ? true : false
-                    }
-                    else
-                    {
-                        return true
-                    }
-                }
-                opacity: enabled ? 1.0 : 0.5
-                visible: model.external && ((model.status !== "installed") || model.can_upgrade)
-                style: ButtonStyle {
-                    background: Rectangle {
-                        implicitWidth: 96
-                        implicitHeight: 30
-                        color: "transparent"
-                        border {
-                            width: 1
-                            color: UM.Theme.getColor("lining")
-                        }
-                    }
-                    label: Label {
-                        text: control.text
-                        color: UM.Theme.getColor("text")
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignHCenter
-                    }
-                }
-                onClicked: {
-                    if ( manager.isDownloading && pluginList.activePlugin == model ) {
-                        manager.cancelDownload();
-                    } else {
-                        pluginList.activePlugin = model;
-                        if ( model.can_upgrade ) {
-                            manager.downloadAndInstallPlugin( model.update_url );
-                        } else {
-                            manager.downloadAndInstallPlugin( model.file_location );
-                        }
-
-                    }
-                }
-            }
         Button {
             id: removeButton
             text: "Uninstall"
             visible: model.can_uninstall && model.status == "installed"
             enabled: !manager.isDownloading
-                style: ButtonStyle {
+            style: ButtonStyle
-                    background: Rectangle {
+            {
-                        implicitWidth: 96
+                background: Rectangle
-                        implicitHeight: 30
+                {
+                    implicitWidth: UM.Theme.getSize("base_unit").width * 8
+                    implicitHeight: UM.Theme.getSize("base_unit").width * 2.5
                     color: "transparent"
-                        border {
+                    border
-                            width: 1
+                    {
+                        width: UM.Theme.getSize("default_lining").width
                         color: UM.Theme.getColor("lining")
                     }
                 }
@@ -196,269 +128,34 @@ Component {
             onClicked: manager.removePlugin( model.id )
         }
 
-            // For Ultimaker Plugins:
-            Button {
-                id: enableButton
-                text: "Enable"
-                visible: !model.external && model.enabled == false
-                style: ButtonStyle {
-                    background: Rectangle {
-                        implicitWidth: 96
-                        implicitHeight: 30
-                        color: "transparent"
-                        border {
-                            width: 1
-                            color: UM.Theme.getColor("lining")
-                        }
-                    }
-                    label: Text {
-                        text: control.text
-                        color: UM.Theme.getColor("text")
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignHCenter
-                    }
-                }
-                onClicked: {
-                    manager.enablePlugin(model.id);
-                }
-            }
-            Button {
-                id: disableButton
-                text: "Disable"
-                visible: !model.external && model.enabled == true
-                style: ButtonStyle {
-                    background: Rectangle {
-                        implicitWidth: 96
-                        implicitHeight: 30
-                        color: "transparent"
-                        border {
-                            width: 1
-                            color: UM.Theme.getColor("lining")
-                        }
-                    }
-                    label: Text {
-                        text: control.text
-                        color: UM.Theme.getColor("text")
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignHCenter
-                    }
-                }
-                onClicked: {
-                    manager.disablePlugin(model.id);
-                }
-            }
-            /*
-            Rectangle {
-                id: removeControls
-                visible: model.status == "installed" && model.enabled
-                width: 96
-                height: 30
-                color: "transparent"
-                Button {
-                    id: removeButton
-                    text: "Disable"
-                    enabled: {
-                        if ( manager.isDownloading && pluginList.activePlugin == model ) {
-                            return false;
-                        } else if ( model.required ) {
-                            return false;
-                        } else {
-                            return true;
-                        }
-                    }
-                    onClicked: {
-                        manager.disablePlugin(model.id);
-                    }
-                    style: ButtonStyle {
-                        background: Rectangle {
-                            color: "white"
-                            implicitWidth: 96
-                            implicitHeight: 30
-                            border {
-                                width: 1
-                                color: UM.Theme.getColor("lining")
-                            }
-                        }
-                        label: Text {
-                            verticalAlignment: Text.AlignVCenter
-                            color: "grey"
-                            text: control.text
-                            horizontalAlignment: Text.AlignLeft
-                        }
-                    }
-                }
-                Button {
-                    id: removeDropDown
-                    property bool open: false
-                    UM.RecolorImage {
-                        anchors.centerIn: parent
-                        height: 10
-                        width: 10
-                        source: UM.Theme.getIcon("arrow_bottom")
-                        color: "grey"
-                    }
-                    enabled: {
-                        if ( manager.isDownloading && pluginList.activePlugin == model ) {
-                            return false;
-                        } else if ( model.required ) {
-                            return false;
-                        } else {
-                            return true;
-                        }
-                    }
-                    anchors.right: parent.right
-                    style: ButtonStyle {
-                        background: Rectangle {
-                            color: "transparent"
-                            implicitWidth: 30
-                            implicitHeight: 30
-                        }
-                        label: Text {
-                            verticalAlignment: Text.AlignVCenter
-                            color: "grey"
-                            text: control.text
-                            horizontalAlignment: Text.AlignHCenter
-                        }
-                    }
-
-
-
-                    // For the disable option:
-                    // onClicked: pluginList.model.setEnabled(model.id, checked)
-
-                    onClicked: {
-                        if ( !removeDropDown.open ) {
-                            removeDropDown.open = true
-                        }
-                        else {
-                            removeDropDown.open = false
-                        }
-                    }
-                }
-
-                Rectangle {
-                    id: divider
-                    width: 1
-                    height: parent.height
-                    anchors.right: removeDropDown.left
-                    color: UM.Theme.getColor("lining")
-                }
-
-                Column {
-                    id: options
-                    anchors {
-                        top: removeButton.bottom
-                        left: parent.left
-                        right: parent.right
-                    }
-                    height: childrenRect.height
-                    visible: removeDropDown.open
-
-                    Button {
-                        id: disableButton
-                        text: "Remove"
-                        height: 30
-                        width: parent.width
-                        onClicked: {
-                            removeDropDown.open = false;
-                            manager.removePlugin( model.id );
-                        }
-                    }
-                }
-            }
-            */
-            /*
-            Button {
-                id: enableButton
-                visible: !model.enabled && model.status == "installed"
-                onClicked: manager.enablePlugin( model.id );
-
-                text: "Enable"
-                style: ButtonStyle {
-                    background: Rectangle {
-                        color: "transparent"
-                        implicitWidth: 96
-                        implicitHeight: 30
-                        border {
-                            width: 1
-                            color: UM.Theme.getColor("lining")
-                        }
-                    }
-                    label: Text {
-                        verticalAlignment: Text.AlignVCenter
-                        color: UM.Theme.getColor("text")
-                        text: control.text
-                        horizontalAlignment: Text.AlignHCenter
-                    }
-                }
-            }
-
         Button {
             id: updateButton
-                visible: model.status == "installed" && model.can_upgrade && model.enabled
+            text: "Update"
-                // visible: model.already_installed
+            enabled: model.can_update
-                text: {
+            style: ButtonStyle
-                    // If currently downloading:
+            {
-                    if ( manager.isDownloading && pluginList.activePlugin == model ) {
+                background: Rectangle
-                        return catalog.i18nc( "@action:button", "Cancel" );
+                {
-                    } else {
+                    implicitWidth: UM.Theme.getSize("base_unit").width * 8
-                        return catalog.i18nc("@action:button", "Update");
+                    implicitHeight: UM.Theme.getSize("base_unit").width * 2.5
+                    color: control.hovered ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary")
                 }
-                }
+                label: Label
-                style: ButtonStyle {
+                {
-                    background: Rectangle {
-                        color: UM.Theme.getColor("primary")
-                        implicitWidth: 96
-                        implicitHeight: 30
-                        // radius: 4
-                    }
-                    label: Text {
-                        verticalAlignment: Text.AlignVCenter
-                        color: "white"
                     text: control.text
-                        horizontalAlignment: Text.AlignHCenter
+                    color: control.hovered ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_text_hover")
-                    }
-                }
-            }
-            Button {
-                id: externalControls
-                visible: model.status == "available" ? true : false
-                text: {
-                    // If currently downloading:
-                    if ( manager.isDownloading && pluginList.activePlugin == model ) {
-                        return catalog.i18nc( "@action:button", "Cancel" );
-                    } else {
-                        return catalog.i18nc("@action:button", "Install");
-                    }
-                }
-                onClicked: {
-                    if ( manager.isDownloading && pluginList.activePlugin == model ) {
-                        manager.cancelDownload();
-                    } else {
-                        pluginList.activePlugin = model;
-                        manager.downloadAndInstallPlugin( model.file_location );
-                    }
-                }
-                style: ButtonStyle {
-                    background: Rectangle {
-                        color: "transparent"
-                        implicitWidth: 96
-                        implicitHeight: 30
-                        border {
-                            width: 1
-                            color: UM.Theme.getColor("lining")
-                        }
-                    }
-                    label: Text {
                     verticalAlignment: Text.AlignVCenter
-                        color: "grey"
-                        text: control.text
                     horizontalAlignment: Text.AlignHCenter
+                    font: UM.Theme.getFont("default_bold")
                 }
             }
+            onClicked:
+            {
+                manager.updatePackage(model.id);
             }
-            */
+        }
-            ProgressBar {
+        ProgressBar
+        {
             id: progressbar
             minimumValue: 0;
             maximumValue: 100
@@ -468,17 +165,18 @@ Component {
             anchors.topMargin: 4
             value: manager.isDownloading ? manager.downloadProgress : 0
             visible: manager.isDownloading && pluginList.activePlugin == model
-                style: ProgressBarStyle {
+            style: ProgressBarStyle
-                    background: Rectangle {
+            {
+                background: Rectangle
+                {
                     color: "lightgray"
                     implicitHeight: 6
                 }
-                    progress: Rectangle {
+                progress: Rectangle
+                {
                     color: UM.Theme.getColor("primary")
                 }
             }
         }
-
-        }
     }
 }