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,479 +6,177 @@ 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
+        left: parent.left
-        visible: !model.required ? true : false
+        right: parent.right
-        // color: Qt.rgba(1.0, 0.0, 0.0, 0.1)
+    }
-        anchors {
+    Rectangle
+    {
+        color: UM.Theme.getColor("lining")
+        width: parent.width
+        height: UM.Theme.getSize("default_lining").height
+        anchors.bottom: parent.bottom
+    }
+    Column
+    {
+        id: pluginInfo
+        property var color: model.enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("lining")
+        height: parent.height
+        anchors
+        {
             left: parent.left
-            right: parent.right
+            top: parent.top
+            right: authorInfo.left
+            topMargin: UM.Theme.getSize("default_margin").height
+            rightMargin: UM.Theme.getSize("default_margin").width
         }
-
+        Label
-
+        {
-        // Bottom border:
+            text: model.name
-        Rectangle {
-            color: UM.Theme.getColor("lining")
             width: parent.width
-            height: 1
+            height: 24
-            anchors.bottom: parent.bottom
+            wrapMode: Text.WordWrap
+            verticalAlignment: Text.AlignVCenter
+            font {
+                pixelSize: 13
+                bold: true
+            }
+            color: pluginInfo.color
+        }
+        Text
+        {
+            text: model.description
+            width: parent.width
+            height: 36
+            clip: true
+            wrapMode: Text.WordWrap
+            color: pluginInfo.color
+            elide: Text.ElideRight
+        }
+    }
+    Column
+    {
+        id: authorInfo
+        width: 192
+        height: parent.height
+        anchors
+        {
+            top: parent.top
+            topMargin: UM.Theme.getSize("default_margin").height
+            right: pluginActions.left
+            rightMargin: UM.Theme.getSize("default_margin").width
+        }
+        Label
+        {
+            text: "<a href=\"mailto:"+model.author_email+"?Subject=Cura: "+model.name+"\">"+model.author+"</a>"
+            width: parent.width
+            height: 24
+            wrapMode: Text.WordWrap
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignLeft
+            onLinkActivated: Qt.openUrlExternally("mailto:"+model.author_email+"?Subject=Cura: "+model.name+" Plugin")
+            color: model.enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("lining")
+        }
+    }
+
+    // Plugin actions
+    Column
+    {
+        id: pluginActions
+        width: childrenRect.width
+        height: childrenRect.height
+        spacing: UM.Theme.getSize("default_margin").height
+        anchors
+        {
+            top: parent.top
+            right: parent.right
+            topMargin: UM.Theme.getSize("default_margin").height
         }
 
-        // Plugin info
+        Button {
-        Column {
+            id: removeButton
-            id: pluginInfo
+            text: "Uninstall"
-
+            visible: model.can_uninstall && model.status == "installed"
-            property var color: model.enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("lining")
+            enabled: !manager.isDownloading
-
+            style: ButtonStyle
-            // Styling:
+            {
-            height: parent.height
+                background: Rectangle
-            anchors {
-                left: parent.left
-                top: parent.top
-                topMargin: UM.Theme.getSize("default_margin").height
-                right: authorInfo.left
-                rightMargin: UM.Theme.getSize("default_margin").width
-            }
-
-
-            Label {
-                text: model.name
-                width: parent.width
-                height: 24
-                wrapMode: Text.WordWrap
-                verticalAlignment: Text.AlignVCenter
-                font {
-                    pixelSize: 13
-                    bold: true
-                }
-                color: pluginInfo.color
-
-            }
-
-            Text {
-                text: model.description
-                width: parent.width
-                height: 36
-                clip: true
-                wrapMode: Text.WordWrap
-                color: pluginInfo.color
-                elide: Text.ElideRight
-            }
-        }
-
-        // Author info
-        Column {
-            id: authorInfo
-            width: 192
-            height: parent.height
-            anchors {
-                top: parent.top
-                topMargin: UM.Theme.getSize("default_margin").height
-                right: pluginActions.left
-                rightMargin: UM.Theme.getSize("default_margin").width
-            }
-
-            Label {
-                text: "<a href=\"mailto:"+model.author_email+"?Subject=Cura: "+model.name+"\">"+model.author+"</a>"
-                width: parent.width
-                height: 24
-                wrapMode: Text.WordWrap
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignLeft
-                onLinkActivated: Qt.openUrlExternally("mailto:"+model.author_email+"?Subject=Cura: "+model.name+" Plugin")
-                color: model.enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("lining")
-            }
-        }
-
-        // Plugin actions
-        Row {
-            id: pluginActions
-
-            width: 96
-            height: parent.height
-            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 )
+                    implicitWidth: UM.Theme.getSize("base_unit").width * 8
+                    implicitHeight: UM.Theme.getSize("base_unit").width * 2.5
+                    color: "transparent"
+                    border
                     {
-                        return pluginList.activePlugin == model ? true : false
+                        width: UM.Theme.getSize("default_lining").width
-                    }
+                        color: UM.Theme.getColor("lining")
-                    else
-                    {
-                        return true
                     }
                 }
-                opacity: enabled ? 1.0 : 0.5
+                label: Text {
-                visible: model.external && ((model.status !== "installed") || model.can_upgrade)
+                    text: control.text
-                style: ButtonStyle {
+                    color: UM.Theme.getColor("text")
-                    background: Rectangle {
+                    verticalAlignment: Text.AlignVCenter
-                        implicitWidth: 96
+                    horizontalAlignment: Text.AlignHCenter
-                        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 {
+            onClicked: manager.removePlugin( model.id )
-                id: removeButton
+        }
-                text: "Uninstall"
-                visible: model.can_uninstall && model.status == "installed"
-                enabled: !manager.isDownloading
-                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.removePlugin( model.id )
-            }
 
-            // For Ultimaker Plugins:
+        Button {
-            Button {
+            id: updateButton
-                id: enableButton
+            text: "Update"
-                text: "Enable"
+            enabled: model.can_update
-                visible: !model.external && model.enabled == false
+            style: ButtonStyle
-                style: ButtonStyle {
+            {
-                    background: Rectangle {
+                background: Rectangle
-                        implicitWidth: 96
+                {
-                        implicitHeight: 30
+                    implicitWidth: UM.Theme.getSize("base_unit").width * 8
-                        color: "transparent"
+                    implicitHeight: UM.Theme.getSize("base_unit").width * 2.5
-                        border {
+                    color: control.hovered ? UM.Theme.getColor("primary_hover") : UM.Theme.getColor("primary")
-                            width: 1
-                            color: UM.Theme.getColor("lining")
-                        }
-                    }
-                    label: Text {
-                        text: control.text
-                        color: UM.Theme.getColor("text")
-                        verticalAlignment: Text.AlignVCenter
-                        horizontalAlignment: Text.AlignHCenter
-                    }
                 }
-                onClicked: {
+                label: Label
-                    manager.enablePlugin(model.id);
+                {
+                    text: control.text
+                    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")
                 }
             }
-            Button {
+            onClicked:
-                id: disableButton
+            {
-                text: "Disable"
+                manager.updatePackage(model.id);
-                visible: !model.external && model.enabled == true
+            }
-                style: ButtonStyle {
+        }
-                    background: Rectangle {
+        ProgressBar
-                        implicitWidth: 96
+        {
-                        implicitHeight: 30
+            id: progressbar
-                        color: "transparent"
+            minimumValue: 0;
-                        border {
+            maximumValue: 100
-                            width: 1
+            anchors.left: installButton.left
-                            color: UM.Theme.getColor("lining")
+            anchors.right: installButton.right
-                        }
+            anchors.top: installButton.bottom
-                    }
+            anchors.topMargin: 4
-                    label: Text {
+            value: manager.isDownloading ? manager.downloadProgress : 0
-                        text: control.text
+            visible: manager.isDownloading && pluginList.activePlugin == model
-                        color: UM.Theme.getColor("text")
+            style: ProgressBarStyle
-                        verticalAlignment: Text.AlignVCenter
+            {
-                        horizontalAlignment: Text.AlignHCenter
+                background: Rectangle
-                    }
+                {
+                    color: "lightgray"
+                    implicitHeight: 6
                 }
-                onClicked: {
+                progress: Rectangle
-                    manager.disablePlugin(model.id);
+                {
+                    color: UM.Theme.getColor("primary")
                 }
             }
-            /*
-            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
-                // visible: model.already_installed
-                text: {
-                    // If currently downloading:
-                    if ( manager.isDownloading && pluginList.activePlugin == model ) {
-                        return catalog.i18nc( "@action:button", "Cancel" );
-                    } else {
-                        return catalog.i18nc("@action:button", "Update");
-                    }
-                }
-                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
-                    }
-                }
-            }
-            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
-                    }
-                }
-            }
-            */
-            ProgressBar {
-                id: progressbar
-                minimumValue: 0;
-                maximumValue: 100
-                anchors.left: installButton.left
-                anchors.right: installButton.right
-                anchors.top: installButton.bottom
-                anchors.topMargin: 4
-                value: manager.isDownloading ? manager.downloadProgress : 0
-                visible: manager.isDownloading && pluginList.activePlugin == model
-                style: ProgressBarStyle {
-                    background: Rectangle {
-                        color: "lightgray"
-                        implicitHeight: 6
-                    }
-                    progress: Rectangle {
-                        color: UM.Theme.getColor("primary")
-                    }
-                }
-            }
-
         }
     }
 }