shift-shell/containments/homescreens/folio/package/contents/ui/settings/SettingsComponent.qml
Micah Stanley 06e5a89ca7 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)
2025-04-25 01:23:48 +00:00

276 lines
9 KiB
QML

// SPDX-FileCopyrightText: 2023 Devin Lin <devin@kde.org>
// SPDX-License-Identifier: LGPL-2.0-or-later
import QtQuick
import QtQuick.Window
import QtQuick.Layouts
import QtQuick.Controls as QQC2
import org.kde.kirigami 2.20 as Kirigami
import org.kde.plasma.components 3.0 as PC3
import org.kde.plasma.private.mobileshell as MobileShell
import org.kde.private.mobile.homescreen.folio 1.0 as Folio
import '../delegate'
Item {
id: root
property Folio.HomeScreen folio
property var homeScreen
property real settingsModeHomeScreenScale
readonly property bool homeScreenInteractive: !appletListViewer.open
property real bottomMargin: 0
property real leftMargin: 0
property real rightMargin: 0
Connections {
target: folio.HomeScreenState
// Close applet viewer when settings view closes
function onViewStateChanged() {
if (folio.HomeScreenState.viewState !== Folio.HomeScreenState.SettingsView) {
appletListViewer.requestClose();
}
}
}
MouseArea {
id: closeSettings
onClicked: {
folio.HomeScreenState.closeSettingsView();
}
}
Item {
id: settingsBar
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Complementary
anchors.bottomMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? Kirigami.Units.largeSpacing + Math.round(root.bottomMargin / 2) : 0
anchors.rightMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Right ? Kirigami.Units.largeSpacing + Math.round(root.rightMargin / 2) : 0
anchors.leftMargin: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Left ? Kirigami.Units.largeSpacing + Math.round(root.leftMargin / 2) : 0
GridLayout {
id: settingsOptions
flow: folio.HomeScreenState.favouritesBarLocation === Folio.HomeScreenState.Bottom ? GridLayout.LeftToRight : GridLayout.TopToBottom
anchors.centerIn: parent
PC3.ToolButton {
opacity: 0.9
implicitHeight: Kirigami.Units.gridUnit * 4
implicitWidth: Kirigami.Units.gridUnit * 5
contentItem: ColumnLayout {
spacing: Kirigami.Units.largeSpacing
Kirigami.Icon {
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
implicitWidth: Kirigami.Units.iconSizes.smallMedium
implicitHeight: Kirigami.Units.iconSizes.smallMedium
source: 'edit-image'
}
QQC2.Label {
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
text: i18n('Wallpapers')
font.bold: true
}
}
onClicked: {
wallpaperSelectorLoader.active = true;
folio.HomeScreenState.closeSettingsView();
}
}
PC3.ToolButton {
opacity: 0.9
implicitHeight: Kirigami.Units.gridUnit * 4
implicitWidth: Kirigami.Units.gridUnit * 5
contentItem: ColumnLayout {
spacing: Kirigami.Units.largeSpacing
Kirigami.Icon {
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
implicitWidth: Kirigami.Units.iconSizes.smallMedium
implicitHeight: Kirigami.Units.iconSizes.smallMedium
source: 'settings-configure'
}
QQC2.Label {
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
text: i18n('Settings')
font.bold: true
}
}
onClicked: {
// ensure that if the window is already opened, it gets raised to the top
settingsWindow.hide();
settingsWindow.showMaximized();
}
}
PC3.ToolButton {
opacity: 0.9
implicitHeight: Kirigami.Units.gridUnit * 4
implicitWidth: Kirigami.Units.gridUnit * 5
contentItem: ColumnLayout {
spacing: Kirigami.Units.largeSpacing
Kirigami.Icon {
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
implicitWidth: Kirigami.Units.iconSizes.smallMedium
implicitHeight: Kirigami.Units.iconSizes.smallMedium
source: 'widget-alternatives'
}
QQC2.Label {
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
text: i18n('Widgets')
font.bold: true
}
}
onClicked: {
appletListViewer.open = true;
}
}
}
}
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 {
id: appletListViewer
folio: root.folio
width: parent.width
height: parent.height
property bool open: false
onRequestClose: open = false
opacity: open ? 1 : 0
// move the settings out of the way if it is not visible
// NOTE: we do this instead of setting visible to false, because
// it doesn't mess with widget drag and drop
y: (opacity === 0) ? appletListViewer.height : 0
homeScreen: root.homeScreen
Behavior on opacity {
NumberAnimation { duration: Kirigami.Units.shortDuration }
}
}
SettingsWindow {
id: settingsWindow
folio: root.folio
visible: false
onRequestConfigureMenu: {
homeScreen.openConfigure()
}
}
Loader {
id: wallpaperSelectorLoader
asynchronous: true
active: false
onLoaded: {
wallpaperSelectorLoader.item.open();
}
sourceComponent: MobileShell.WallpaperSelector {
horizontal: root.width > root.height
edge: horizontal ? Qt.LeftEdge : Qt.BottomEdge
bottomMargin: root.homeScreen.bottomMargin
leftMargin: root.homeScreen.leftMargin
rightMargin: root.homeScreen.rightMargin
onClosed: {
wallpaperSelectorLoader.active = false;
}
onWallpaperSettingsRequested: {
close();
homeScreen.openConfigure();
}
}
}
}