Update Category Button

Put content of category button in a `RowLayout` so individual content
Components can easily be removed by hiding said component while keeping
margins and spacings work as intended.

Additionaly make the icon property optional

CURA-8979
This commit is contained in:
casper 2022-03-11 16:40:32 +01:00
parent e2c9e0a461
commit b2f13cc6c9

View File

@ -10,6 +10,7 @@
import QtQuick 2.2 import QtQuick 2.2
import QtQuick.Controls 2.1 import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import UM 1.5 as UM import UM 1.5 as UM
@ -17,13 +18,14 @@ Button
{ {
id: base id: base
height: enabled ? UM.Theme.getSize("section_header").height : 0 height: UM.Theme.getSize("section_header").height
property var expanded: false property var expanded: false
property alias arrow: categoryArrow property alias arrow: categoryArrow
property alias categoryIcon: icon.source property alias categoryIcon: icon.source
property alias labelText: categoryLabel.text property alias labelText: categoryLabel.text
property alias labelFont: categoryLabel.font
states: states:
[ [
@ -56,14 +58,13 @@ Button
background: Rectangle background: Rectangle
{ {
id: backgroundRectangle id: backgroundRectangle
height: base.height
color: UM.Theme.getColor("setting_category") color: UM.Theme.getColor("setting_category")
Behavior on color { ColorAnimation { duration: 50 } } Behavior on color { ColorAnimation { duration: 50 } }
// Lining on top
Rectangle Rectangle
{ {
//Lining on top
anchors.top: parent.top anchors.top: parent.top
color: UM.Theme.getColor("border_main") color: UM.Theme.getColor("border_main")
height: UM.Theme.getSize("default_lining").height height: UM.Theme.getSize("default_lining").height
@ -71,51 +72,45 @@ Button
} }
} }
contentItem: Item contentItem: RowLayout
{ {
anchors.fill: parent id: content
spacing: UM.Theme.getSize("narrow_margin").width
UM.RecolorImage
{
id: icon
source: ""
visible: icon.source != ""
Layout.alignment: Qt.AlignHCenter
color: UM.Theme.getColor("setting_category_text")
width: UM.Theme.getSize("section_icon").width
height: UM.Theme.getSize("section_icon").height
sourceSize.width: width
sourceSize.height: width
}
UM.Label UM.Label
{ {
id: categoryLabel id: categoryLabel
anchors Layout.fillWidth: true
{ Layout.alignment: Qt.AlignHCenter
left: parent.left elide: Text.ElideRight
leftMargin: UM.Theme.getSize("default_margin").width + UM.Theme.getSize("section_icon").width wrapMode: Text.NoWrap
right: parent.right
verticalCenter: parent.verticalCenter
}
textFormat: Text.PlainText
font: UM.Theme.getFont("medium_bold") font: UM.Theme.getFont("medium_bold")
color: UM.Theme.getColor("setting_category_text") color: UM.Theme.getColor("setting_category_text")
fontSizeMode: Text.HorizontalFit
minimumPointSize: 8
} }
UM.RecolorImage UM.RecolorImage
{ {
id: categoryArrow id: categoryArrow
anchors.verticalCenter: parent.verticalCenter Layout.alignment: Qt.AlignHCenter
anchors.right: parent.right
anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
width: UM.Theme.getSize("standard_arrow").width width: UM.Theme.getSize("standard_arrow").width
height: UM.Theme.getSize("standard_arrow").height height: UM.Theme.getSize("standard_arrow").height
sourceSize.height: width sourceSize.width: width
sourceSize.height: height
color: UM.Theme.getColor("setting_control_button") color: UM.Theme.getColor("setting_control_button")
source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft") source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
} }
} }
UM.RecolorImage
{
id: icon
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
color: UM.Theme.getColor("setting_category_text")
width: UM.Theme.getSize("section_icon").width
height: UM.Theme.getSize("section_icon").height
sourceSize.width: width
sourceSize.height: width
}
} }