GitHub-Proxy/Cura
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura synced 2025-08-14 00:05:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4015 from Ultimaker/CURA-5537_toolbox_style_improvements

Browse Source 
CURA-5537 improve styling of toolbox
This commit is contained in:
Lipu Fei 2018-07-03 16:05:51 +02:00 committed by GitHub
commit 5f2cbd4440
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 75 additions and 68 deletions
Show Stats 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
{

11
plugins/Toolbox/resources/qml/ToolboxDownloadsShowcase.qml
View File

@ -1,16 +1,22 @@
// 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
width: parent.width
Column
{
height: childrenRect.height + 2 * padding
spacing: UM.Theme.getSize("toolbox_showcase_spacing").width
width: parent.width
padding: UM.Theme.getSize("wide_margin").height
Label
{
id: heading
@ -43,4 +49,5 @@ Column
delegate: ToolboxDownloadsShowcaseTile {}
}
}
}
}

51
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,13 +37,23 @@ Item
mipmap: true
}
}
Rectangle
{
id: packageNameBackground
color: UM.Theme.getColor("primary")
anchors
{
top: thumbnail.bottom
horizontalCenter: parent.horizontalCenter
}
height: UM.Theme.getSize("toolbox_heading_label").height
width: parent.width
Label
{
id: packageName
text: model.name
anchors
{
top: thumbnail.bottom
horizontalCenter: parent.horizontalCenter
}
verticalAlignment: Text.AlignVCenter
@ -57,22 +61,25 @@ Item
height: UM.Theme.getSize("toolbox_heading_label").height
width: parent.width
wrapMode: Text.WordWrap
color: UM.Theme.getColor("text")
color: UM.Theme.getColor("button_text")
font: UM.Theme.getFont("medium_bold")
}
}
MouseArea
{
anchors.fill: parent
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:
{

2
resources/themes/cura-light/theme.json
View File

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