CURA-5035 Tile improvements

This commit is contained in:
Ian Paschal 2018-04-25 17:03:27 +02:00
parent d79bbe5725
commit c33710b54b
3 changed files with 31 additions and 14 deletions

View file

@ -7,8 +7,6 @@ import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import UM 1.1 as UM import UM 1.1 as UM
// TODO: Switch to QtQuick.Controls 2.x and remove QtQuick.Controls.Styles
Column Column
{ {
height: childrenRect.height height: childrenRect.height
@ -25,14 +23,14 @@ Column
GridLayout GridLayout
{ {
id: grid id: grid
property var model: toolbox.viewCategory == "material" ? toolbox.authorsModel : toolbox.packagesModel
width: parent.width width: parent.width
columns: 2 columns: 2
columnSpacing: UM.Theme.getSize("default_margin").height columnSpacing: UM.Theme.getSize("default_margin").height
rowSpacing: UM.Theme.getSize("default_margin").width rowSpacing: UM.Theme.getSize("default_margin").width
height: childrenRect.height
Repeater Repeater
{ {
model: toolbox.viewCategory == "material" ? toolbox.authorsModel : toolbox.packagesModel model: grid.model
delegate: ToolboxDownloadsGridTile delegate: ToolboxDownloadsGridTile
{ {
Layout.preferredWidth: (grid.width - (grid.columns - 1) * grid.columnSpacing) / grid.columns Layout.preferredWidth: (grid.width - (grid.columns - 1) * grid.columnSpacing) / grid.columns

View file

@ -8,32 +8,31 @@ import UM 1.1 as UM
ScrollView ScrollView
{ {
id: page
frameVisible: false frameVisible: false
width: parent.width width: parent.width
height: parent.height height: parent.height
style: UM.Theme.styles.scrollview style: UM.Theme.styles.scrollview
Column Column
{ {
width: page.width width: parent.width - 2 * padding
spacing: UM.Theme.getSize("default_margin").height spacing: UM.Theme.getSize("default_margin").height
padding: UM.Theme.getSize("wide_margin").height padding: UM.Theme.getSize("wide_margin").height
height: childrenRect.height + 2 * padding height: childrenRect.height + 2 * padding
ToolboxDownloadsShowcase ToolboxDownloadsShowcase
{ {
id: showcase id: showcase
width: parent.width - 2 * parent.padding width: parent.width
} }
Rectangle Rectangle
{ {
color: UM.Theme.getColor("lining") color: UM.Theme.getColor("lining")
width: parent.width - 2 * parent.padding width: parent.width
height: UM.Theme.getSize("default_lining").height height: UM.Theme.getSize("default_lining").height
} }
ToolboxDownloadsGrid ToolboxDownloadsGrid
{ {
id: allPlugins id: allPlugins
width: parent.width - 2 * parent.padding width: parent.width
} }
} }
} }

View file

@ -9,7 +9,7 @@ import UM 1.1 as UM
Item Item
{ {
width: UM.Theme.getSize("toolbox_thumbnail_large").width width: UM.Theme.getSize("toolbox_thumbnail_large").width
height: UM.Theme.getSize("toolbox_thumbnail_large").width height: childrenRect.height
visible: visible:
{ {
if (toolbox.viewCategory == "material" && model.packages_count) if (toolbox.viewCategory == "material" && model.packages_count)
@ -23,9 +23,17 @@ Item
} }
Rectangle Rectangle
{ {
id: highlight
anchors.fill: parent
opacity: 0.0
color: UM.Theme.getColor("primary")
}
Rectangle
{
id: thumbnail
color: "white" color: "white"
width: UM.Theme.getSize("toolbox_thumbnail_medium").width width: UM.Theme.getSize("toolbox_thumbnail_large").width
height: UM.Theme.getSize("toolbox_thumbnail_medium").height height: UM.Theme.getSize("toolbox_thumbnail_large").height
border border
{ {
width: UM.Theme.getSize("default_lining").width width: UM.Theme.getSize("default_lining").width
@ -38,8 +46,8 @@ Item
} }
Image { Image {
anchors.centerIn: parent anchors.centerIn: parent
width: UM.Theme.getSize("toolbox_thumbnail_medium").width - 2 * UM.Theme.getSize("default_margin") width: UM.Theme.getSize("toolbox_thumbnail_large").width - 2 * UM.Theme.getSize("default_margin").width
height: UM.Theme.getSize("toolbox_thumbnail_medium").height - 2 * UM.Theme.getSize("default_margin") height: UM.Theme.getSize("toolbox_thumbnail_large").height - 2 * UM.Theme.getSize("default_margin").height
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
source: model.icon_url || "../images/logobot.svg" source: model.icon_url || "../images/logobot.svg"
} }
@ -56,12 +64,24 @@ Item
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
height: UM.Theme.getSize("toolbox_heading_label").height height: UM.Theme.getSize("toolbox_heading_label").height
width: parent.width width: parent.width
wrapMode: Text.WordWrap
color: UM.Theme.getColor("text") color: UM.Theme.getColor("text")
font: UM.Theme.getFont("medium_bold") font: UM.Theme.getFont("medium_bold")
} }
MouseArea MouseArea
{ {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true
onEntered:
{
thumbnail.border.color = UM.Theme.getColor("primary")
highlight.opacity = 0.1
}
onExited:
{
thumbnail.border.color = UM.Theme.getColor("lining")
highlight.opacity = 0.0
}
onClicked: onClicked:
{ {
base.selection = model base.selection = model