From bc05839940b4166dca3c4f45591620bd78638acd Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Tue, 3 Jul 2018 15:54:20 +0200 Subject: [PATCH] CURA-5537 improve styling of toolbox --- .../resources/qml/ToolboxDownloadsGrid.qml | 6 +- .../resources/qml/ToolboxDownloadsPage.qml | 11 +--- .../qml/ToolboxDownloadsShowcase.qml | 61 ++++++++++-------- .../qml/ToolboxDownloadsShowcaseTile.qml | 63 ++++++++++--------- resources/themes/cura-light/theme.json | 2 +- 5 files changed, 75 insertions(+), 68 deletions(-) diff --git a/plugins/Toolbox/resources/qml/ToolboxDownloadsGrid.qml b/plugins/Toolbox/resources/qml/ToolboxDownloadsGrid.qml index cf67466514..06a6ba30fb 100644 --- a/plugins/Toolbox/resources/qml/ToolboxDownloadsGrid.qml +++ b/plugins/Toolbox/resources/qml/ToolboxDownloadsGrid.qml @@ -1,7 +1,7 @@ // Copyright (c) 2018 Ultimaker B.V. // Toolbox is released under the terms of the LGPLv3 or higher. -import QtQuick 2.2 +import QtQuick 2.7 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Layouts 1.3 @@ -9,10 +9,10 @@ import UM 1.1 as UM Column { - height: childrenRect.height + height: childrenRect.height + 2 * padding width: parent.width spacing: UM.Theme.getSize("default_margin").height - + padding: UM.Theme.getSize("wide_margin").height Label { id: heading diff --git a/plugins/Toolbox/resources/qml/ToolboxDownloadsPage.qml b/plugins/Toolbox/resources/qml/ToolboxDownloadsPage.qml index d52bd48d39..9dd64aacfe 100644 --- a/plugins/Toolbox/resources/qml/ToolboxDownloadsPage.qml +++ b/plugins/Toolbox/resources/qml/ToolboxDownloadsPage.qml @@ -15,22 +15,15 @@ ScrollView flickableItem.flickableDirection: Flickable.VerticalFlick Column { - width: parent.width - 2 * padding + width: base.width spacing: UM.Theme.getSize("default_margin").height - padding: UM.Theme.getSize("wide_margin").height - height: childrenRect.height + 2 * padding + height: childrenRect.height ToolboxDownloadsShowcase { id: showcase width: parent.width } - Rectangle - { - color: UM.Theme.getColor("lining") - width: parent.width - height: UM.Theme.getSize("default_lining").height - } ToolboxDownloadsGrid { diff --git a/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcase.qml b/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcase.qml index 5a8128b51e..46f5debfdd 100644 --- a/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcase.qml +++ b/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcase.qml @@ -1,46 +1,53 @@ // Copyright (c) 2018 Ultimaker B.V. // Toolbox is released under the terms of the LGPLv3 or higher. -import QtQuick 2.2 +import QtQuick 2.7 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 import UM 1.1 as UM -Column +Rectangle { + color: UM.Theme.getColor("secondary") height: childrenRect.height - spacing: UM.Theme.getSize("toolbox_showcase_spacing").width width: parent.width - Label + Column { - id: heading - text: catalog.i18nc("@label", "Featured") + height: childrenRect.height + 2 * padding + spacing: UM.Theme.getSize("toolbox_showcase_spacing").width width: parent.width - color: UM.Theme.getColor("text_medium") - font: UM.Theme.getFont("medium") - } - Grid - { - height: childrenRect.height - spacing: UM.Theme.getSize("wide_margin").width - columns: 3 - anchors + padding: UM.Theme.getSize("wide_margin").height + Label { - horizontalCenter: parent.horizontalCenter + id: heading + text: catalog.i18nc("@label", "Featured") + width: parent.width + color: UM.Theme.getColor("text_medium") + font: UM.Theme.getFont("medium") } - Repeater + Grid { - model: { - if ( toolbox.viewCategory == "plugin" ) - { - return toolbox.pluginsShowcaseModel - } - if ( toolbox.viewCategory == "material" ) - { - return toolbox.materialsShowcaseModel - } + height: childrenRect.height + spacing: UM.Theme.getSize("wide_margin").width + columns: 3 + anchors + { + horizontalCenter: parent.horizontalCenter + } + Repeater + { + model: { + if ( toolbox.viewCategory == "plugin" ) + { + return toolbox.pluginsShowcaseModel + } + if ( toolbox.viewCategory == "material" ) + { + return toolbox.materialsShowcaseModel + } + } + delegate: ToolboxDownloadsShowcaseTile {} } - delegate: ToolboxDownloadsShowcaseTile {} } } } diff --git a/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml b/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml index f665404df7..561b2b4046 100644 --- a/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml +++ b/plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml @@ -1,37 +1,31 @@ // Copyright (c) 2018 Ultimaker B.V. // Toolbox is released under the terms of the LGPLv3 or higher. -import QtQuick 2.3 +import QtQuick 2.7 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 +import QtGraphicalEffects 1.0 import UM 1.1 as UM -Item +Rectangle { - width: UM.Theme.getSize("toolbox_thumbnail_large").width - height: thumbnail.height + packageName.height - Rectangle - { - id: highlight - anchors.fill: parent - opacity: 0.0 - color: UM.Theme.getColor("primary") - } + id: tileBase + width: UM.Theme.getSize("toolbox_thumbnail_large").width + (2 * UM.Theme.getSize("default_lining").width) + height: thumbnail.height + packageNameBackground.height + (2 * UM.Theme.getSize("default_lining").width) + border.width: UM.Theme.getSize("default_lining").width + border.color: UM.Theme.getColor("lining") + color: "transparent" Rectangle { id: thumbnail color: "white" width: UM.Theme.getSize("toolbox_thumbnail_large").width height: UM.Theme.getSize("toolbox_thumbnail_large").height - border - { - width: UM.Theme.getSize("default_lining").width - color: UM.Theme.getColor("lining") - } anchors { top: parent.top horizontalCenter: parent.horizontalCenter + topMargin: UM.Theme.getSize("default_lining").width } Image { @@ -43,22 +37,33 @@ Item mipmap: true } } - Label + Rectangle { - id: packageName - text: model.name + id: packageNameBackground + color: UM.Theme.getColor("primary") anchors { top: thumbnail.bottom horizontalCenter: parent.horizontalCenter } - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter height: UM.Theme.getSize("toolbox_heading_label").height width: parent.width - wrapMode: Text.WordWrap - color: UM.Theme.getColor("text") - font: UM.Theme.getFont("medium_bold") + Label + { + id: packageName + text: model.name + anchors + { + horizontalCenter: parent.horizontalCenter + } + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + height: UM.Theme.getSize("toolbox_heading_label").height + width: parent.width + wrapMode: Text.WordWrap + color: UM.Theme.getColor("button_text") + font: UM.Theme.getFont("medium_bold") + } } MouseArea { @@ -66,13 +71,15 @@ Item hoverEnabled: true onEntered: { - thumbnail.border.color = UM.Theme.getColor("primary") - highlight.opacity = 0.1 + packageName.color = UM.Theme.getColor("button_text_hover") + packageNameBackground.color = UM.Theme.getColor("primary_hover") + tileBase.border.color = UM.Theme.getColor("primary_hover") } onExited: { - thumbnail.border.color = UM.Theme.getColor("lining") - highlight.opacity = 0.0 + packageName.color = UM.Theme.getColor("button_text") + packageNameBackground.color = UM.Theme.getColor("primary") + tileBase.border.color = UM.Theme.getColor("lining") } onClicked: { diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 4d75ecc1f1..a087a489eb 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -443,7 +443,7 @@ "toolbox_thumbnail_small": [6.0, 6.0], "toolbox_thumbnail_medium": [8.0, 8.0], - "toolbox_thumbnail_large": [12.0, 12.0], + "toolbox_thumbnail_large": [12.0, 10.0], "toolbox_footer": [1.0, 4.5], "toolbox_footer_button": [8.0, 2.5], "toolbox_showcase_spacing": [1.0, 1.0],