CURA-5035 More styling & layout

This commit is contained in:
Ian Paschal 2018-04-10 16:07:39 +02:00
parent 7359554641
commit d4cc4659d8
11 changed files with 248 additions and 180 deletions

View file

@ -7,66 +7,15 @@ import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import UM 1.1 as UM
// TODO: Switch to QtQuick.Controls 2.x and remove QtQuick.Controls.Styles
Item
{
id: base
property var details: manager.authorsModel.items[0]
anchors.fill: parent
Item
ToolboxBackColumn
{
id: sidebar
height: parent.height
width: UM.Theme.getSize("base_unit").width * 6
anchors
{
top: parent.top
left: parent.left
topMargin: UM.Theme.getSize("double_margin").height
leftMargin: UM.Theme.getSize("default_margin").width
rightMargin: UM.Theme.getSize("default_margin").width
}
Button
{
text: "Back"
UM.RecolorImage
{
id: backArrow
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.rightMargin: UM.Theme.getSize("default_margin").width
width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height
sourceSize.width: width
sourceSize.height: height
color: UM.Theme.getColor("text")
source: UM.Theme.getIcon("arrow_left")
}
width: UM.Theme.getSize("base_unit").width * 4
height: UM.Theme.getSize("base_unit").height * 2
onClicked:
{
manager.viewPage = "overview"
manager.filterPackages("type", manager.viewCategory)
}
style: ButtonStyle
{
background: Rectangle
{
color: "transparent"
}
label: Label
{
text: control.text
color: UM.Theme.getColor("text")
font: UM.Theme.getFont("default_bold")
horizontalAlignment: Text.AlignRight
width: control.width
}
}
}
}
Rectangle
{
id: header
@ -74,6 +23,7 @@ Item
{
left: sidebar.right
right: parent.right
rightMargin: UM.Theme.getSize("double_margin").width
}
height: UM.Theme.getSize("base_unit").height * 12
Image
@ -82,7 +32,7 @@ Item
width: UM.Theme.getSize("toolbox_thumbnail_medium").width
height: UM.Theme.getSize("toolbox_thumbnail_medium").height
fillMode: Image.PreserveAspectFit
source: manager.detailData["icon_url"] || "../images/logobot.svg"
source: details.icon_url || "../images/logobot.svg"
anchors
{
top: parent.top
@ -91,8 +41,10 @@ Item
topMargin: UM.Theme.getSize("double_margin").height
}
}
Column
Label
{
id: title
anchors
{
top: thumbnail.top
@ -100,39 +52,79 @@ Item
leftMargin: UM.Theme.getSize("default_margin").width
right: parent.right
rightMargin: UM.Theme.getSize("double_margin").width
bottomMargin: UM.Theme.getSize("default_margin").height
}
text: details.name
font: UM.Theme.getFont("large")
wrapMode: Text.WordWrap
width: parent.width
height: UM.Theme.getSize("base_unit") * 2
}
Column
{
id: properties
anchors
{
top: title.bottom
left: title.left
topMargin: UM.Theme.getSize("default_margin").height
}
spacing: Math.floor(UM.Theme.getSize("default_margin").height / 2)
width: childrenRect.width
Label
{
text: "Version:"
font: UM.Theme.getFont("very_small")
color: UM.Theme.getColor("text_medium")
}
Label
{
text: "Author:"
font: UM.Theme.getFont("very_small")
color: UM.Theme.getColor("text_medium")
}
}
Column
{
id: values
anchors
{
top: title.bottom
left: properties.right
leftMargin: UM.Theme.getSize("default_margin").width
topMargin: UM.Theme.getSize("default_margin").height
}
spacing: Math.floor(UM.Theme.getSize("default_margin").height/2)
width: UM.Theme.getSize("base_unit").width * 12
Label
{
text: manager.detailData["name"]
font: UM.Theme.getFont("large")
wrapMode: Text.WordWrap
width: parent.width
text: details.name
font: UM.Theme.getFont("very_small")
color: UM.Theme.getColor("text")
}
Label
{
text: "HELLO THIS IS AN AUTHOR PAGE"
font: UM.Theme.getFont("default")
wrapMode: Text.WordWrap
width: parent.width
}
Label
{
text: "Author: " + manager.detailData["author"]["name"]
font: UM.Theme.getFont("small")
wrapMode: Text.WordWrap
width: parent.width
// TODO: Add mail icon.
text: details.name
font: UM.Theme.getFont("very_small")
color: UM.Theme.getColor("text")
}
}
Rectangle
{
color: UM.Theme.getColor("text_medium")
width: parent.width
height: UM.Theme.getSize("default_lining").height
anchors.bottom: parent.bottom
}
}
ToolboxDetailList {
anchors
{
right: header.right
top: header.bottom
left: header.left
bottom: base.bottom
left: header.left
right: base.right
}
}
}