Commit 2ccef9fb authored by Nate Graham's avatar Nate Graham 🔩
Browse files

Refactor HeaderFooterToolbar and places where it's used

This compinent suffered from various rookie mistakes:
- Making assumptions about its parent item
- Setting width and height properties of items in Layouts
- Hardcoded heights rather than using units

All are fixed. Visual changes are extremely minimal.
parent b278d346
......@@ -48,8 +48,5 @@ Item {
property int gridDelegateSize: 170
property int headerToolbarHeight: 48
property int footerToolbarHeight: 30
property int viewSelectorSmallSizeThreshold: 800
}
......@@ -43,6 +43,7 @@ FocusScope {
// Header with title
HeaderFooterToolbar {
Layout.fillWidth: true
type: "header"
contentItems: [
Image {
......@@ -248,6 +249,8 @@ FocusScope {
HeaderFooterToolbar {
visible: !topItem.nothingPlaying
type: "footer"
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
contentLayoutSpacing: Kirigami.Units.largeSpacing
contentItems: [
Image {
......
......@@ -11,10 +11,7 @@ import QtQuick.Layouts 1.2
import org.kde.kirigami 2.5 as Kirigami
import org.kde.elisa 1.0
ColumnLayout {
spacing: 0
Layout.fillWidth: true
Rectangle {
// Is this a header or a footer? Acceptable values are
// "header" (separator drawn on bottom)
// "footer" (separator drawn on top)
......@@ -24,49 +21,37 @@ ColumnLayout {
// A list of items to be shown within the header or footer
property alias contentItems: contentLayout.children
// Spacing of content items. Defaults to 0
// Spacing of content items. Defaults to Kirigami.Units.smallSpacing
property alias contentLayoutSpacing: contentLayout.spacing
implicitHeight: Math.round(Kirigami.Units.gridUnit * 2.5)
color: myPalette.window
// Separator line above the header
Kirigami.Separator {
visible: type == "footer" && type != "other"
Layout.fillWidth: true
width: parent.width
anchors.top: parent.top
}
// Background rectangle + content layout
Rectangle {
id: headerBackground
color: myPalette.window
Layout.fillWidth: true
height: type == "footer" ?
elisaTheme.footerToolbarHeight :
elisaTheme.headerToolbarHeight
// Content layout
RowLayout {
id: contentLayout
// Content layout
RowLayout {
id: contentLayout
anchors.fill: parent
anchors.leftMargin: Kirigami.Units.smallSpacing
anchors.rightMargin: Kirigami.Units.smallSpacing
anchors {
left: parent.left
leftMargin: Kirigami.Units.largeSpacing
right: parent.right
rightMargin: Kirigami.Units.largeSpacing
verticalCenter: parent.verticalCenter
}
spacing: 0
spacing: Kirigami.Units.smallSpacing
// Items provided by the contentItems property will go here
}
// Items provided by the contentItems property will go here
}
// Separator line under the header
Kirigami.Separator {
visible: type == "header" && type != "other"
Layout.fillWidth: true
width: parent.width
anchors.bottom: parent.bottom
}
}
......@@ -118,6 +118,7 @@ FocusScope {
// Header with title and toolbar buttons
HeaderFooterToolbar {
Layout.fillWidth: true
type: "header"
contentItems: [
......@@ -240,6 +241,8 @@ FocusScope {
// Footer with number of tracks label
HeaderFooterToolbar {
type: "footer"
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
contentItems: [
LabelWithToolTip {
id: trackCountLabel
......
......@@ -41,6 +41,7 @@ ColumnLayout {
HeaderFooterToolbar {
type: filterRow.visible? "other" : "header"
Layout.fillWidth: true
contentItems: [
FlatButtonWithToolTip {
......@@ -149,8 +150,9 @@ ColumnLayout {
}
HeaderFooterToolbar {
type: "header"
id: filterRow
type: "header"
Layout.fillWidth: true
visible: opacity > 0.0
......
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