3D-printing/Cura
1
0
Fork 0
mirror of https://github.com/Ultimaker/Cura.git synced 2025-07-24 15:13:56 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

CURA-5537 improve styling of toolbox

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
plugins/Toolbox/resources/qml/ToolboxDownloadsGrid.qml
View file

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

11
plugins/Toolbox/resources/qml/ToolboxDownloadsPage.qml
View file

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

61
plugins/Toolbox/resources/qml/ToolboxDownloadsShowcase.qml
View file

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

63
plugins/Toolbox/resources/qml/ToolboxDownloadsShowcaseTile.qml
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:
{