CURA-5537 improve styling of toolbox

This commit is contained in:
Ian Paschal 2018-07-03 15:54:20 +02:00
parent 9fa8498162
commit bc05839940
5 changed files with 75 additions and 68 deletions

View file

@ -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:
{