Folio: Make SettingsComponent Buttons Match FavoritesBar Location

This merge request makes the SettingsComponent buttons match the FavoritesBar location. This helps better utilize the available screen space as before the buttons would exclusively remain at the bottom and could cause them to overlap with the HomeScreenPage or navbar.

Before:

![Screenshot_20250424_093156](/uploads/be3b3ef255333052a8f2b74b8645a906/Screenshot_20250424_093156.png)

After:

![Screenshot_20250423_181926](/uploads/7823b8e2d1ba41c376bc83b80ea56136/Screenshot_20250423_181926.png)
This commit is contained in:
Micah Stanley 2025-04-25 01:23:48 +00:00
parent a452bc3030
commit 06e5a89ca7
2 changed files with 81 additions and 12 deletions

View file

@ -148,6 +148,10 @@ Item {
opacity: folio.HomeScreenState.settingsOpenProgress opacity: folio.HomeScreenState.settingsOpenProgress
z: 1 z: 1
bottomMargin: root.bottomMargin
leftMargin: root.leftMargin
rightMargin: root.rightMargin
// move the settings out of the way if it is not visible // move the settings out of the way if it is not visible
// NOTE: we do this instead of setting visible to false, because // NOTE: we do this instead of setting visible to false, because
// it doesn't mess with widget drag and drop // it doesn't mess with widget drag and drop

View file

@ -23,6 +23,10 @@ Item {
readonly property bool homeScreenInteractive: !appletListViewer.open readonly property bool homeScreenInteractive: !appletListViewer.open
property real bottomMargin: 0
property real leftMargin: 0
property real rightMargin: 0
Connections { Connections {
target: folio.HomeScreenState target: folio.HomeScreenState
@ -37,11 +41,6 @@ Item {
MouseArea { MouseArea {
id: closeSettings id: closeSettings
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: settingsBar.top
onClicked: { onClicked: {
folio.HomeScreenState.closeSettingsView(); folio.HomeScreenState.closeSettingsView();
} }
@ -53,16 +52,15 @@ Item {
Kirigami.Theme.inherit: false Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Complementary Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
anchors.left: parent.left anchors.bottomMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? Kirigami.Units.largeSpacing + Math.round(root.bottomMargin / 2) : 0
anchors.right: parent.right anchors.rightMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right ? Kirigami.Units.largeSpacing + Math.round(root.rightMargin / 2) : 0
anchors.bottom: parent.bottom anchors.leftMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left ? Kirigami.Units.largeSpacing + Math.round(root.leftMargin / 2) : 0
anchors.bottomMargin: Kirigami.Units.largeSpacing
height: root.height * (1 - settingsModeHomeScreenScale)
RowLayout { GridLayout {
id: settingsOptions id: settingsOptions
flow: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? GridLayout.LeftToRight : GridLayout.TopToBottom
anchors.centerIn: parent anchors.centerIn: parent
spacing: Kirigami.Units.largeSpacing
PC3.ToolButton { PC3.ToolButton {
opacity: 0.9 opacity: 0.9
@ -150,6 +148,73 @@ Item {
} }
} }
states: [
State {
name: "bottom"
when: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom
PropertyChanges {
target: settingsBar
height: root.height * (1 - root.settingsModeHomeScreenScale)
}
AnchorChanges {
target: settingsBar
anchors.top: undefined
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
}
AnchorChanges {
target: closeSettings
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: settingsBar.top
}
}, State {
name: "left"
when: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left
PropertyChanges {
target: settingsBar
width: root.width * (1 - root.settingsModeHomeScreenScale)
}
AnchorChanges {
target: settingsBar
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: undefined
}
AnchorChanges {
target: closeSettings
anchors.top: parent.top
anchors.left: settingsBar.right
anchors.right: parent.right
anchors.bottom: parent.bottom
}
}, State {
name: "right"
when: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right
PropertyChanges {
target: settingsBar
width: root.width * (1 - root.settingsModeHomeScreenScale)
}
AnchorChanges {
target: settingsBar
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: undefined
anchors.right: parent.right
}
AnchorChanges {
target: closeSettings
anchors.top: parent.top
anchors.left: parent.left
anchors.right: settingsBar.left
anchors.bottom: parent.bottom
}
}
]
AppletListViewer { AppletListViewer {
id: appletListViewer id: appletListViewer
folio: root.folio folio: root.folio