Commit f4af0f7a authored by Nate Graham's avatar Nate Graham 🔩

[Sidebar view] Port headers to use Kirigami.AbstractApplicationHeader

This is the correct thing to do in general because custom views that
replicate standard components are bad. It also ensures that the headers
will change their colors properly as the color scheme changes once we
merge the Tools Area work.

The only Visual/UX change is that the subcategory header is made more
standard in appearance and behavior, with a discrete back button instead
of the entire area being clickable. This represents a mild regression in
usability since the clickable area is smaller now, but it's a win for
consistency and code simplicity.
parent 924e28ad
......@@ -27,19 +27,15 @@ Kirigami.ScrollablePage {
Component.onCompleted: searchField.forceActiveFocus()
readonly property bool searchMode: searchField.text.length > 0
header: Rectangle {
Kirigami.Theme.colorSet: Kirigami.Theme.Window
Kirigami.Theme.inherit: false
color: Kirigami.Theme.backgroundColor
width: mainColumn.width
height: Math.round(Kirigami.Units.gridUnit * 2.5)
RowLayout {
id: searchLayout
header: Kirigami.AbstractApplicationHeader {
topPadding: Kirigami.Units.smallSpacing
bottomPadding: Kirigami.Units.smallSpacing
leftPadding: Kirigami.Units.smallSpacing
rightPadding: Kirigami.Units.smallSpacing
contentItem: RowLayout {
anchors.fill: parent
spacing: Kirigami.Units.smallSpacing
anchors {
fill: parent
margins: Kirigami.Units.smallSpacing
}
QQC2.ToolButton {
id: menuButton
......@@ -84,13 +80,6 @@ Kirigami.ScrollablePage {
}
}
}
Kirigami.Separator {
anchors {
left: parent.left
right: parent.right
top: parent.bottom
}
}
}
background: Rectangle {
Kirigami.Theme.colorSet: Kirigami.Theme.View
......
......@@ -27,78 +27,38 @@ Kirigami.ScrollablePage {
id: subCategoryColumn
title: systemsettings.subCategoryModel.title
header: Rectangle {
id: headerRect
Kirigami.Theme.colorSet: Kirigami.Theme.Window
Kirigami.Theme.inherit: false
color: {
if (headerControls.pressed) {
return Kirigami.Theme.highlightColor;
} else if (headerControls.containsMouse) {
return Kirigami.Theme.hoverColor;
} else {
return Kirigami.Theme.backgroundColor;
}
}
width: subCategoryColumn.width
height: Math.round(Kirigami.Units.gridUnit * 2.5)
header: Kirigami.AbstractApplicationHeader {
topPadding: Kirigami.Units.smallSpacing
bottomPadding: Kirigami.Units.smallSpacing
leftPadding: Kirigami.Units.smallSpacing
rightPadding: Kirigami.Units.smallSpacing
MouseArea {
id: headerControls
Kirigami.Theme.colorSet: Kirigami.Theme.Button
Kirigami.Theme.inherit: false
contentItem: RowLayout {
anchors.fill: parent
enabled: !applicationWindow().wideScreen
hoverEnabled: true
onClicked: root.pageStack.currentIndex = 0
Accessible.role: Accessible.Button
Accessible.name: i18n("Back")
RowLayout {
anchors.fill: parent
anchors.leftMargin: Kirigami.Units.largeSpacing
Kirigami.Icon {
id: toolButtonIcon
visible: !applicationWindow().wideScreen
Layout.alignment: Qt.AlignVCenter
Layout.preferredHeight: Kirigami.Units.iconSizes.small
Layout.preferredWidth: Layout.preferredHeight
source: LayoutMirroring.enabled ? "go-next" : "go-previous"
color: {
if (headerControls.pressed) {
return Kirigami.Theme.highlightedTextColor;
} else {
return Kirigami.Theme.textColor;
}
}
}
Kirigami.Heading {
Layout.fillWidth: true
Layout.fillHeight: true
level: 3
height: toolButtonIcon.height
text: subCategoryColumn.title
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
color: {
if (headerControls.pressed) {
return Kirigami.Theme.highlightedTextColor;
} else {
return Kirigami.Theme.textColor;
}
}
spacing: Kirigami.Units.smallSpacing
QQC2.ToolButton {
id: backButton
visible: !applicationWindow().wideScreen
icon.name: LayoutMirroring.enabled ? "go-next-symbolic" : "go-next-symbolic-rtl"
onClicked: root.pageStack.currentIndex = 0
Accessible.role: Accessible.Button
Accessible.name: i18n("Go back")
QQC2.ToolTip {
text: parent.Accessible.name
}
}
}
Kirigami.Separator {
anchors {
left: parent.left
right: parent.right
top: parent.bottom
Kirigami.Heading {
Layout.fillWidth: true
Layout.fillHeight: true
// Don't be too short when the back button isn't visible
Layout.minimumHeight: backButton.implicitHeight
Layout.leftMargin: backButton.visible ? undefined : Kirigami.Units.largeSpacing
level: 3
text: subCategoryColumn.title
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment