CURA-5035 More styling & layout

plugins/Toolbox/resources/qml/Toolbox.qml

@@ -17,10 +17,10 @@ Window
     property bool dataReady: manager.dataReady
     title: catalog.i18nc("@title:tab", "Toolbox");
     modality: Qt.ApplicationModal
-    width: 960 * screenScaleFactor
+    width: 720 * screenScaleFactor
     height: 640 * screenScaleFactor
-    minimumWidth: 960 * screenScaleFactor
-    maximumWidth: 960 * screenScaleFactor
+    minimumWidth: 720 * screenScaleFactor
+    maximumWidth: 720 * screenScaleFactor
     minimumHeight: 350 * screenScaleFactor
     color: UM.Theme.getColor("sidebar")
     Item

plugins/Toolbox/resources/qml/ToolboxAuthorPage.qml

@@ -7,66 +7,15 @@ import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import UM 1.1 as UM
 
-// TODO: Switch to QtQuick.Controls 2.x and remove QtQuick.Controls.Styles
-
 Item
 {
     id: base
+    property var details: manager.authorsModel.items[0]
     anchors.fill: parent
-    Item
+    ToolboxBackColumn
     {
         id: sidebar
-        height: parent.height
-        width: UM.Theme.getSize("base_unit").width * 6
-        anchors
-        {
-            top: parent.top
-            left: parent.left
-            topMargin: UM.Theme.getSize("double_margin").height
-            leftMargin: UM.Theme.getSize("default_margin").width
-            rightMargin: UM.Theme.getSize("default_margin").width
-        }
-        Button
-        {
-            text: "Back"
-            UM.RecolorImage
-            {
-                id: backArrow
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
-                anchors.rightMargin: UM.Theme.getSize("default_margin").width
-                width: UM.Theme.getSize("standard_arrow").width
-                height: UM.Theme.getSize("standard_arrow").height
-                sourceSize.width: width
-                sourceSize.height: height
-                color: UM.Theme.getColor("text")
-                source: UM.Theme.getIcon("arrow_left")
-            }
-            width: UM.Theme.getSize("base_unit").width * 4
-            height: UM.Theme.getSize("base_unit").height * 2
-            onClicked:
-            {
-                manager.viewPage = "overview"
-                manager.filterPackages("type", manager.viewCategory)
-            }
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    color: "transparent"
-                }
-                label: Label
-                {
-                    text: control.text
-                    color: UM.Theme.getColor("text")
-                    font: UM.Theme.getFont("default_bold")
-                    horizontalAlignment: Text.AlignRight
-                    width: control.width
-                }
-            }
-        }
     }
-
     Rectangle
     {
         id: header
@@ -74,6 +23,7 @@ Item
         {
             left: sidebar.right
             right: parent.right
+            rightMargin: UM.Theme.getSize("double_margin").width
         }
         height: UM.Theme.getSize("base_unit").height * 12
         Image
@@ -82,7 +32,7 @@ Item
             width: UM.Theme.getSize("toolbox_thumbnail_medium").width
             height: UM.Theme.getSize("toolbox_thumbnail_medium").height
             fillMode: Image.PreserveAspectFit
-            source: manager.detailData["icon_url"] || "../images/logobot.svg"
+            source: details.icon_url || "../images/logobot.svg"
             anchors
             {
                 top: parent.top
@@ -91,8 +41,10 @@ Item
                 topMargin: UM.Theme.getSize("double_margin").height
             }
         }
-        Column
+
+        Label
         {
+            id: title
             anchors
             {
                 top: thumbnail.top
@@ -100,39 +52,79 @@ Item
                 leftMargin: UM.Theme.getSize("default_margin").width
                 right: parent.right
                 rightMargin: UM.Theme.getSize("double_margin").width
+                bottomMargin: UM.Theme.getSize("default_margin").height
+            }
+            text: details.name
+            font: UM.Theme.getFont("large")
+            wrapMode: Text.WordWrap
+            width: parent.width
+            height: UM.Theme.getSize("base_unit") * 2
+        }
+
+        Column
+        {
+            id: properties
+            anchors
+            {
+                top: title.bottom
+                left: title.left
+                topMargin: UM.Theme.getSize("default_margin").height
+            }
+            spacing: Math.floor(UM.Theme.getSize("default_margin").height / 2)
+            width: childrenRect.width
+            Label
+            {
+                text: "Version:"
+                font: UM.Theme.getFont("very_small")
+                color: UM.Theme.getColor("text_medium")
             }
-            spacing: Math.floor(UM.Theme.getSize("default_margin").height/2)
             Label
             {
-                text: manager.detailData["name"]
-                font: UM.Theme.getFont("large")
-                wrapMode: Text.WordWrap
-                width: parent.width
+                text: "Author:"
+                font: UM.Theme.getFont("very_small")
+                color: UM.Theme.getColor("text_medium")
+            }
+        }
+        Column
+        {
+            id: values
+            anchors
+            {
+                top: title.bottom
+                left: properties.right
+                leftMargin: UM.Theme.getSize("default_margin").width
+                topMargin: UM.Theme.getSize("default_margin").height
             }
+            spacing: Math.floor(UM.Theme.getSize("default_margin").height/2)
+            width: UM.Theme.getSize("base_unit").width * 12
             Label
             {
-                text: "HELLO THIS IS AN AUTHOR PAGE"
-                font: UM.Theme.getFont("default")
-                wrapMode: Text.WordWrap
-                width: parent.width
+                text: details.name
+                font: UM.Theme.getFont("very_small")
+                color: UM.Theme.getColor("text")
             }
             Label
             {
-                text: "Author: " + manager.detailData["author"]["name"]
-                font: UM.Theme.getFont("small")
-                wrapMode: Text.WordWrap
-                width: parent.width
-                // TODO: Add mail icon.
+                text: details.name
+                font: UM.Theme.getFont("very_small")
+                color: UM.Theme.getColor("text")
             }
         }
+        Rectangle
+        {
+            color: UM.Theme.getColor("text_medium")
+            width: parent.width
+            height: UM.Theme.getSize("default_lining").height
+            anchors.bottom: parent.bottom
+        }
     }
     ToolboxDetailList {
         anchors
         {
-            right: header.right
             top: header.bottom
-            left: header.left
             bottom: base.bottom
+            left: header.left
+            right: base.right
         }
     }
 }

plugins/Toolbox/resources/qml/ToolboxBackColumn.qml

@@ -0,0 +1,64 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// PluginBrowser is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Dialogs 1.1
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+import UM 1.1 as UM
+
+Item
+{
+    id: sidebar
+    height: parent.height
+    width: UM.Theme.getSize("base_unit").width * 6
+    anchors
+    {
+        top: parent.top
+        left: parent.left
+        topMargin: UM.Theme.getSize("double_margin").height
+        leftMargin: UM.Theme.getSize("default_margin").width
+        rightMargin: UM.Theme.getSize("default_margin").width
+    }
+    Button
+    {
+        id: button
+        text: "Back"
+        UM.RecolorImage
+        {
+            id: backArrow
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.rightMargin: UM.Theme.getSize("default_margin").width
+            width: UM.Theme.getSize("standard_arrow").width
+            height: UM.Theme.getSize("standard_arrow").height
+            sourceSize.width: width
+            sourceSize.height: height
+            color: button.hovered ? UM.Theme.getColor("primary") : UM.Theme.getColor("text")
+            source: UM.Theme.getIcon("arrow_left")
+        }
+        width: UM.Theme.getSize("base_unit").width * 4
+        height: UM.Theme.getSize("base_unit").height * 2
+        onClicked:
+        {
+            manager.viewPage = "overview"
+            manager.filterPackages("type", manager.viewCategory)
+        }
+        style: ButtonStyle
+        {
+            background: Rectangle
+            {
+                color: "transparent"
+            }
+            label: Label
+            {
+                id: labelStyle
+                text: control.text
+                color: control.hovered ? UM.Theme.getColor("primary") : UM.Theme.getColor("text")
+                font: UM.Theme.getFont("default_bold")
+                horizontalAlignment: Text.AlignRight
+                width: control.width
+            }
+        }
+    }
+}

plugins/Toolbox/resources/qml/ToolboxDetailList.qml

@@ -10,11 +10,6 @@ import UM 1.1 as UM
 Item
 {
     id: base
-    anchors
-    {
-        topMargin: UM.Theme.getSize("double_margin").height
-        bottomMargin: UM.Theme.getSize("double_margin").height
-    }
     ScrollView
     {
         frameVisible: false
@@ -22,8 +17,13 @@ Item
         style: UM.Theme.styles.scrollview
         Column
         {
-            anchors.right: base.right
-            anchors.rightMargin: UM.Theme.getSize("double_margin").width
+            anchors
+            {
+                right: base.right
+                topMargin: UM.Theme.getSize("double_margin").height
+                bottomMargin: UM.Theme.getSize("double_margin").height
+                top: parent.top
+            }
             height: childrenRect.height
             spacing: UM.Theme.getSize("default_margin").height
             Repeater

plugins/Toolbox/resources/qml/ToolboxDetailPage.qml

@@ -7,67 +7,15 @@ import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
 import UM 1.1 as UM
 
-// TODO: Switch to QtQuick.Controls 2.x and remove QtQuick.Controls.Styles
-
 Item
 {
-    property var details: manager.packagesModel.items[0]
     id: base
+    property var details: manager.packagesModel.items[0]
     anchors.fill: parent
-    Item
+    ToolboxBackColumn
     {
         id: sidebar
-        height: parent.height
-        width: UM.Theme.getSize("base_unit").width * 6
-        anchors
-        {
-            top: parent.top
-            left: parent.left
-            topMargin: UM.Theme.getSize("double_margin").height
-            leftMargin: UM.Theme.getSize("default_margin").width
-            rightMargin: UM.Theme.getSize("default_margin").width
-        }
-        Button
-        {
-            text: "Back"
-            UM.RecolorImage
-            {
-                id: backArrow
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
-                anchors.rightMargin: UM.Theme.getSize("default_margin").width
-                width: UM.Theme.getSize("standard_arrow").width
-                height: UM.Theme.getSize("standard_arrow").height
-                sourceSize.width: width
-                sourceSize.height: height
-                color: UM.Theme.getColor("text")
-                source: UM.Theme.getIcon("arrow_left")
-            }
-            width: UM.Theme.getSize("base_unit").width * 4
-            height: UM.Theme.getSize("base_unit").height * 2
-            onClicked:
-            {
-                manager.viewPage = "overview"
-                manager.filterPackages("type", manager.viewCategory)
-            }
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    color: "transparent"
-                }
-                label: Label
-                {
-                    text: control.text
-                    color: UM.Theme.getColor("text")
-                    font: UM.Theme.getFont("default_bold")
-                    horizontalAlignment: Text.AlignRight
-                    width: control.width
-                }
-            }
-        }
     }
-
     Rectangle
     {
         id: header
@@ -75,6 +23,7 @@ Item
         {
             left: sidebar.right
             right: parent.right
+            rightMargin: UM.Theme.getSize("double_margin").width
         }
         height: UM.Theme.getSize("base_unit").height * 12
         Image
@@ -119,6 +68,7 @@ Item
             {
                 top: title.bottom
                 left: title.left
+                topMargin: UM.Theme.getSize("default_margin").height
             }
             spacing: Math.floor(UM.Theme.getSize("default_margin").height / 2)
             width: childrenRect.width
@@ -149,6 +99,7 @@ Item
                 top: title.bottom
                 left: properties.right
                 leftMargin: UM.Theme.getSize("default_margin").width
+                topMargin: UM.Theme.getSize("default_margin").height
             }
             spacing: Math.floor(UM.Theme.getSize("default_margin").height/2)
             width: UM.Theme.getSize("base_unit").width * 12
@@ -160,7 +111,7 @@ Item
             }
             Label
             {
-                text: details.generated_time
+                text: Qt.formatDateTime(details.last_updated, "dd MMM yyyy")
                 font: UM.Theme.getFont("very_small")
                 color: UM.Theme.getColor("text")
             }
@@ -171,16 +122,21 @@ Item
                 color: UM.Theme.getColor("text")
             }
         }
+        Rectangle
+        {
+            color: UM.Theme.getColor("text_medium")
+            width: parent.width
+            height: UM.Theme.getSize("default_lining").height
+            anchors.bottom: parent.bottom
+        }
     }
     ToolboxDetailList {
         anchors
         {
-            right: header.right
             top: header.bottom
-
-            left: header.left
             bottom: base.bottom
-
+            left: header.left
+            right: base.right
         }
     }
 }

plugins/Toolbox/resources/qml/ToolboxDetailTile.qml

@@ -20,7 +20,6 @@ Rectangle
             right: controls.left
             rightMargin: UM.Theme.getSize("default_margin").width
             top: parent.top
-            topMargin: UM.Theme.getSize("default_margin").height
         }
         Label
         {
@@ -45,7 +44,6 @@ Rectangle
         id: controls
         anchors.right: parent.right
         anchors.top: parent.top
-        anchors.topMargin: UM.Theme.getSize("default_margin").height
         width: childrenRect.width
         Button {
             id: installButton
@@ -54,7 +52,7 @@ Rectangle
             {
                 if ( manager.isDownloading )
                 {
-                    return pluginList.activePlugin == model ? true : false
+                    return manager.activePackage == model ? true : false
                 }
                 else
                 {
@@ -79,19 +77,20 @@ Rectangle
             }
             onClicked:
             {
-                if ( manager.isDownloading && pluginList.activePlugin == model )
+                console.log( "MODEL", model.download_url )
+                if ( manager.isDownloading && manager.activePackage == model )
                 {
                     manager.cancelDownload();
                 }
                 else
                 {
-                    pluginList.activePlugin = model;
+                    // manager.activePackage = model;
                     if ( model.can_upgrade )
                     {
-                        manager.downloadAndInstallPlugin( model.update_url );
+                        // manager.downloadAndInstallPlugin( model.update_url );
                     }
                     else {
-                        manager.downloadAndInstallPlugin( model.file_location );
+                        manager.startDownload( model.download_url );
                     }
                 }
             }
@@ -102,6 +101,6 @@ Rectangle
         color: UM.Theme.getColor("text_medium")
         width: parent.width
         height: UM.Theme.getSize("default_lining").height
-        anchors.top: parent.top
+        anchors.bottom: parent.bottom
     }
 }

plugins/Toolbox/resources/qml/ToolboxDownloadsGrid.qml

@@ -28,7 +28,7 @@ Column
     {
         id: grid
         width: parent.width
-        columns: 3
+        columns: 2
         columnSpacing: UM.Theme.getSize("base_unit").width
         rowSpacing: UM.Theme.getSize("base_unit").height
 

plugins/Toolbox/resources/qml/ToolboxDownloadsGridTile.qml

@@ -14,6 +14,13 @@ Item
     id: base
     height: childrenRect.height
     Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+    Rectangle
+    {
+        id: highlight
+        anchors.fill: parent
+        opacity: 0.0
+        color: UM.Theme.getColor("primary")
+    }
     Row
     {
         width: parent.width
@@ -68,17 +75,31 @@ Item
     MouseArea
     {
         anchors.fill: parent
-        onClicked: {
+        hoverEnabled: true
+        onEntered:
+        {
+            thumbnail.border.color = UM.Theme.getColor("primary")
+            highlight.opacity = 0.1
+        }
+        onExited:
+        {
+            thumbnail.border.color = UM.Theme.getColor("text")
+            highlight.opacity = 0.0
+        }
+        onClicked:
+        {
             if ( manager.viewCategory == "material" )
             {
                 manager.viewSelection = model.name
                 manager.viewPage = "author"
+                manager.filterAuthors("name", model.name)
                 manager.filterPackages("author_name", model.name)
             }
             else
             {
                 manager.viewSelection = model.id
                 manager.viewPage = "detail"
+                manager.filterAuthors("name", model.author_name)
                 manager.filterPackages("id", model.id)
             }
         }

plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml

@@ -55,12 +55,14 @@ Item
             {
                 manager.viewSelection = model.name
                 manager.viewPage = "author"
+                manager.filterAuthors("name", model.name)
                 manager.filterPackages("author_name", model.name)
             }
             else
             {
                 manager.viewSelection = model.id
                 manager.viewPage = "detail"
+                manager.filterAuthors("name", model.author_name)
                 manager.filterPackages("id", model.id)
             }
         }

plugins/Toolbox/src/CuraPackageModel.py → plugins/Toolbox/src/PackagesModel.py

@@ -9,7 +9,7 @@ from PyQt5.QtCore import Qt, pyqtProperty, pyqtSignal
 from UM.Qt.ListModel import ListModel
 
 ##  Model that holds cura packages. By setting the filter property the instances held by this model can be changed.
-class CuraPackageModel(ListModel):
+class PackagesModel(ListModel):
     IdRole = Qt.UserRole + 1
     TypeRole = Qt.UserRole + 2
     NameRole = Qt.UserRole + 3
@@ -19,21 +19,25 @@ class CuraPackageModel(ListModel):
     DescriptionRole = Qt.UserRole + 7
     IconURLRole = Qt.UserRole + 8
     ImageURLsRole = Qt.UserRole + 9
+    DownloadURLRole = Qt.UserRole + 10
+    LastUpdatedRole = Qt.UserRole + 11
 
     def __init__(self, parent = None):
         super().__init__(parent)
 
         self._packages_metadata = None
 
-        self.addRoleName(CuraPackageModel.IdRole, "id")
-        self.addRoleName(CuraPackageModel.TypeRole, "type")
-        self.addRoleName(CuraPackageModel.NameRole, "name")
-        self.addRoleName(CuraPackageModel.VersionRole, "version")
-        self.addRoleName(CuraPackageModel.AuthorNameRole, "author_name")
-        self.addRoleName(CuraPackageModel.AuthorEmailRole, "author_email")
-        self.addRoleName(CuraPackageModel.DescriptionRole, "description")
-        self.addRoleName(CuraPackageModel.IconURLRole, "icon_url")
-        self.addRoleName(CuraPackageModel.ImageURLsRole, "image_urls")
+        self.addRoleName(PackagesModel.IdRole, "id")
+        self.addRoleName(PackagesModel.TypeRole, "type")
+        self.addRoleName(PackagesModel.NameRole, "name")
+        self.addRoleName(PackagesModel.VersionRole, "version")
+        self.addRoleName(PackagesModel.AuthorNameRole, "author_name")
+        self.addRoleName(PackagesModel.AuthorEmailRole, "author_email")
+        self.addRoleName(PackagesModel.DescriptionRole, "description")
+        self.addRoleName(PackagesModel.IconURLRole, "icon_url")
+        self.addRoleName(PackagesModel.ImageURLsRole, "image_urls")
+        self.addRoleName(PackagesModel.DownloadURLRole, "download_url")
+        self.addRoleName(PackagesModel.LastUpdatedRole, "last_updated")
 
         # List of filters for queries. The result is the union of the each list of results.
         self._filter = {}  # type: Dict[str,str]
@@ -55,7 +59,9 @@ class CuraPackageModel(ListModel):
                 "author_email": package["author"]["email"],
                 "description": package["description"],
                 "icon_url": package["icon_url"] if "icon_url" in package else None,
-                "image_urls": package["image_urls"]
+                "image_urls": package["image_urls"],
+                "download_url": package["download_url"],
+                "last_updated": package["last_updated"]
             })
 
         # Filter on all the key-word arguments.