CURA-5035 UI pretty much built

plugins/PluginBrowser/PluginBrowser.py

@@ -44,7 +44,7 @@ class PluginBrowser(QObject, Extension):
 
         # Can be 'installed' or 'available'
         self._view = "available"
-        self._detail_view = None
+        self._detail_view = ""
 
         self._restart_required = False
 
@@ -86,6 +86,7 @@ class PluginBrowser(QObject, Extension):
     onIsDownloadingChanged = pyqtSignal()
     restartRequiredChanged = pyqtSignal()
     viewChanged = pyqtSignal()
+    detailViewChanged = pyqtSignal()
 
     @pyqtSlot(result = str)
     def getLicenseDialogPluginName(self):
@@ -279,18 +280,25 @@ class PluginBrowser(QObject, Extension):
         self.setIsDownloading(False)
 
     @pyqtSlot(str)
-    def setView(self, view):
+    def setView(self, view = "available"):
         self._view = view
         self.viewChanged.emit()
         self.pluginsMetadataChanged.emit()
 
+    @pyqtProperty(str, notify = viewChanged)
+    def viewing(self):
+        return self._view
+
     @pyqtSlot(str)
-    def setDetailView(self, item):
+    def setDetailView(self, item = ""):
-        self._detail_view = item if item else None
+        self._detail_view = item
-        print("Now looking at", self._detail_view)
+        self.detailViewChanged.emit()
-        self.viewChanged.emit()
         self.pluginsMetadataChanged.emit()
 
+    @pyqtProperty(str, notify = detailViewChanged)
+    def detailView(self):
+        return self._detail_view
+
     @pyqtProperty(QObject, notify = pluginsMetadataChanged)
     def pluginsModel(self):
         self._plugins_model = PluginsModel(None, self._view)
@@ -403,10 +411,6 @@ class PluginBrowser(QObject, Extension):
     def restartRequired(self):
         return self._restart_required
 
-    @pyqtProperty(str, notify = viewChanged)
-    def viewing(self):
-        return self._view
-
     @pyqtSlot()
     def restart(self):
         CuraApplication.getInstance().windowClosed()

plugins/PluginBrowser/resources/qml/PluginBrowser.qml

@@ -41,7 +41,13 @@ Window
             ToolboxViewDownloads
             {
                 id: viewDownloads
-                visible: manager.viewing == "available" ? true : false
+                visible: manager.viewing == "available" && manager.detailView == "" ? true : false
+            }
+
+            ToolboxViewDetail
+            {
+                id: viewDetail
+                visible: manager.viewing == "available" && manager.detailView != "" ? true : false
             }
             ToolboxViewInstalled
             {
@@ -49,53 +55,23 @@ Window
                 visible: manager.viewing == "installed" ? true : false
             }
         }
-        Rectangle
+        SectionShadow
         {
             anchors
             {
                 top: topBar.bottom
             }
-            width: parent.width
-            height: 8
-            gradient: Gradient
-            {
-                GradientStop
-                {
-                    position: 0.0
-                    color: Qt.rgba(0,0,0,0.1)
-                }
-                GradientStop
-                {
-                    position: 1.0
-                    color: Qt.rgba(0,0,0,0)
-                }
-            }
         }
         ToolboxFooter
         {
             id: bottomBar
         }
-        Rectangle
+        SectionShadow
         {
             anchors
             {
                 top: bottomBar.top
             }
-            width: parent.width
-            height: 8
-            gradient: Gradient
-            {
-                GradientStop
-                {
-                    position: 0.0
-                    color: Qt.rgba(0,0,0,0.1)
-                }
-                GradientStop
-                {
-                    position: 1.0
-                    color: Qt.rgba(0,0,0,0)
-                }
-            }
         }
 
 

plugins/PluginBrowser/resources/qml/SectionShadow.qml

@@ -0,0 +1,23 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// PluginBrowser is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+
+Rectangle
+{
+    width: parent.width
+    height: 8
+    gradient: Gradient
+    {
+        GradientStop
+        {
+            position: 0.0
+            color: Qt.rgba(0,0,0,0.2)
+        }
+        GradientStop
+        {
+            position: 1.0
+            color: Qt.rgba(0,0,0,0)
+        }
+    }
+}

plugins/PluginBrowser/resources/qml/ToolboxDetailBlock.qml

@@ -0,0 +1,108 @@
+// 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
+
+Rectangle
+{
+    width: parent.width
+    height: childrenRect.height
+    color: "transparent"
+    Column
+    {
+        anchors
+        {
+            left: parent.left
+            right: controls.left
+            rightMargin: UM.Theme.getSize("default_margin").width
+            top: parent.top
+            leftMargin: UM.Theme.getSize("default_margin").width
+            topMargin: UM.Theme.getSize("default_margin").height
+        }
+        Label
+        {
+            width: parent.width
+            height: UM.Theme.getSize("base_unit").height * 2
+            text: "DSM Abrasive"
+            wrapMode: Text.WordWrap
+            color: UM.Theme.getColor("text")
+            font: UM.Theme.getFont("default_bold")
+        }
+        Label
+        {
+            width: parent.width
+            text: "DSM abrasive material provides extra stiffness. It’s suitable for printing \"Functional prototypes\" and \"End parts\"."
+            wrapMode: Text.WordWrap
+            color: UM.Theme.getColor("text")
+            font: UM.Theme.getFont("normal")
+        }
+    }
+    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
+            text: catalog.i18nc("@action:button", "Install")
+            enabled:
+            {
+                if ( manager.isDownloading )
+                {
+                    return pluginList.activePlugin == model ? true : false
+                }
+                else
+                {
+                    return true
+                }
+            }
+            opacity: enabled ? 1.0 : 0.5
+            style: ButtonStyle {
+                background: Rectangle
+                {
+                    implicitWidth: 96
+                    implicitHeight: 30
+                    color: UM.Theme.getColor("primary")
+                }
+                label: Label
+                {
+                    text: control.text
+                    color: "white"
+                    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 );
+                    }
+                }
+            }
+        }
+    }
+    Rectangle
+    {
+        color: UM.Theme.getColor("text_medium")
+        width: parent.width
+        height: UM.Theme.getSize("default_lining").height
+        anchors.top: parent.top
+    }
+}

plugins/PluginBrowser/resources/qml/ToolboxGrid.qml

@@ -15,7 +15,7 @@ Rectangle
 {
     id: base
     width: parent.width
-    height: 1200
+    height: childrenRect.height + UM.Theme.getSize("double_margin").height * 8
     color: "transparent"
     Label
     {
@@ -38,6 +38,7 @@ Rectangle
         columns: 3
         columnSpacing: UM.Theme.getSize("base_unit").width
         rowSpacing: UM.Theme.getSize("base_unit").height
+
         ToolboxGridTile {}
         ToolboxGridTile {}
         ToolboxGridTile {}

plugins/PluginBrowser/resources/qml/ToolboxGridTile.qml

@@ -6,13 +6,14 @@ import QtQuick.Dialogs 1.1
 import QtQuick.Window 2.2
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4
+import QtQuick.Layouts 1.3
 import UM 1.1 as UM
 
 Item
 {
     id: base
-    width: parent.columnSize
     height: childrenRect.height
+    Layout.fillWidth: true
     Row
     {
         width: parent.width
@@ -21,8 +22,8 @@ Item
         Rectangle
         {
             id: thumbnail
-            width: UM.Theme.getSize("base_unit").width * 6
+            width: UM.Theme.getSize("toolbox_thumbnail_small").width
-            height: UM.Theme.getSize("base_unit").height * 6
+            height: UM.Theme.getSize("toolbox_thumbnail_small").height
             color: "white"
             border.width: 1
         }

plugins/PluginBrowser/resources/qml/ToolboxShowcaseTile.qml

@@ -16,8 +16,8 @@ theme makers/modfiers. Thus, "base_unit" is used wherever it can be. */
 
 Item
 {
-    width: UM.Theme.getSize("base_unit").width * 12
+    width: UM.Theme.getSize("toolbox_thumbnail_large").width
-    height: UM.Theme.getSize("base_unit").width * 12
+    height: UM.Theme.getSize("toolbox_thumbnail_large").width
     Rectangle
     {
         color: "white"

plugins/PluginBrowser/resources/qml/ToolboxViewDetail.qml

@@ -0,0 +1,84 @@
+// 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: base
+    anchors.fill: parent
+    Rectangle
+    {
+        id: backMargin
+        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"
+            onClicked: {
+                manager.setDetailView("")
+            }
+        }
+        color: "transparent"
+    }
+    ScrollView
+    {
+        id: scroll
+        frameVisible: false
+        anchors.right: base.right
+        anchors.left: backMargin.right
+        height: parent.height
+        style: UM.Theme.styles.scrollview
+        Column
+        {
+            width: scroll.width
+            spacing: UM.Theme.getSize("base_unit").height
+            height: childrenRect.height + (UM.Theme.getSize("double_margin").height * 2)
+            anchors
+            {
+                fill: parent
+                topMargin: UM.Theme.getSize("double_margin").height
+                bottomMargin: UM.Theme.getSize("double_margin").height
+                leftMargin: UM.Theme.getSize("double_margin").width
+                rightMargin: UM.Theme.getSize("double_margin").width
+            }
+            Rectangle
+            {
+                width: parent.width
+                height: UM.Theme.getSize("base_unit").height * 12
+                color: "transparent"
+                Rectangle
+                {
+                    id: thumbnail
+                    width: UM.Theme.getSize("toolbox_thumbnail_medium").width
+                    height: UM.Theme.getSize("toolbox_thumbnail_medium").height
+                    color: "white"
+                    border.width: 1
+                }
+            }
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+            ToolboxDetailBlock {}
+        }
+    }
+}

plugins/PluginBrowser/resources/qml/ToolboxViewDownloads.qml

@@ -32,7 +32,7 @@ ScrollView
         {
             id: showcase
         }
-        ToolboxItemGrid
+        ToolboxGrid
         {
             id: allPlugins
         }

resources/themes/cura-light/theme.json

@@ -325,6 +325,7 @@
         "window_minimum_size": [70, 50],
         "window_margin": [1.0, 1.0],
         "default_margin": [1.0, 1.0],
+        "double_margin": [2.0, 2.0],
         "default_lining": [0.08, 0.08],
         "default_arrow": [0.8, 0.8],
         "logo": [7.6, 1.6],
@@ -438,6 +439,10 @@
         "objects_menu_size": [20, 40],
         "objects_menu_size_collapsed": [20, 17],
         "build_plate_selection_size": [15, 5],
-        "objects_menu_button": [0.3, 2.7]
+        "objects_menu_button": [0.3, 2.7],
+
+        "toolbox_thumbnail_small": [6.0, 6.0],
+        "toolbox_thumbnail_medium": [9.0, 9.0],
+        "toolbox_thumbnail_large": [12.0, 12.0]
     }
 }