shift-shell/components/mobileshell/qml/navigationpanel/NavigationPanel.qml
Devin Lin 839d5e2bff panels: Add support for defining device specific panel tweaks
This adds support for specifying options needed to deal with phone
display panel pecularities (ex. screen curves, notches, punch holes)

This is implemented as settings in ~/.config/plasmamobilerc, which can
set panel heights, paddings, and center spacings to duck display
cutouts. The pixel values are scaling independent, and so are not
affected when the display scaling is changed.

This is then exposed over DBus, so that components from outside of
plasmashell (ex. KWin) can access it easily without needing to connect to
kscreen themselves. Each screen is exposed as a single object.

Currently support is only added in the status bar and the navigation
panel.

Currently all screens have the settings applied. In the future, we may
want to limit this just to the internal screen (?)

---

This also adds a "devices" folder (in `devices/configs`) where per-device configs can be set.

This is installed to `/usr/share/plasma-mobile-device-configs`.
In `plasmamobilerc` (installed to `/etc/xdg/plasmamobilerc`, or
`~/.config/plasmamobilerc`), envmanager will read:

```toml
[Device]
device=oneplus-enchilada
```

for the device config to use and write its settings to
`~/.config/plasma-mobile/plasmamobilerc`.
2025-11-04 23:08:18 -05:00

269 lines
8.2 KiB
QML

/*
* SPDX-FileCopyrightText: 2015 Marco Martin <mart@kde.org>
* SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
*
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Effects
import org.kde.kirigami 2.20 as Kirigami
import org.kde.taskmanager 0.1 as TaskManager
import org.kde.kquickcontrolsaddons 2.0
import org.kde.plasma.private.mobileshell.state as MobileShellState
Item {
id: root
property bool shadow: false
property color backgroundColor
property var foregroundColorGroup
property NavigationPanelAction leftAction
property NavigationPanelAction middleAction
property NavigationPanelAction rightAction
property NavigationPanelAction leftCornerAction
property NavigationPanelAction rightCornerAction
property real leftPadding: 0
property real rightPadding: 0
property bool isVertical: false
// drop shadow for icons
MultiEffect {
anchors.fill: icons
visible: shadow
source: icons
blurMax: 16
shadowEnabled: true
shadowVerticalOffset: 1
shadowOpacity: 0.8
}
// background colour
Rectangle {
anchors.fill: parent
color: root.backgroundColor
}
Item {
id: icons
anchors.fill: parent
property real buttonLength: 0
NavigationPanelButton {
id: leftCornerButton
visible: root.leftCornerAction.visible
Kirigami.Theme.colorSet: root.foregroundColorGroup
Kirigami.Theme.inherit: false
enabled: root.leftCornerAction.enabled
shrinkSize: root.leftCornerAction.shrinkSize
iconSource: root.leftCornerAction.iconSource
onClicked: {
if (enabled) {
root.leftCornerAction.triggered();
}
}
}
// button row (anchors provided by state)
NavigationPanelButton {
id: leftButton
visible: root.leftAction.visible
Kirigami.Theme.colorSet: root.foregroundColorGroup
Kirigami.Theme.inherit: false
enabled: root.leftAction.enabled
shrinkSize: root.leftAction.shrinkSize
iconSource: root.leftAction.iconSource
onClicked: {
if (enabled) {
root.leftAction.triggered();
}
}
}
NavigationPanelButton {
id: middleButton
anchors.centerIn: parent
visible: root.middleAction.visible
Kirigami.Theme.colorSet: root.foregroundColorGroup
Kirigami.Theme.inherit: false
enabled: root.middleAction.enabled
shrinkSize: root.middleAction.shrinkSize
iconSource: root.middleAction.iconSource
onClicked: {
if (enabled) {
root.middleAction.triggered();
}
}
}
NavigationPanelButton {
id: rightButton
visible: root.rightAction.visible
Kirigami.Theme.colorSet: root.foregroundColorGroup
Kirigami.Theme.inherit: false
enabled: root.rightAction.enabled
shrinkSize: root.rightAction.shrinkSize
iconSource: root.rightAction.iconSource
onClicked: {
if (enabled) {
root.rightAction.triggered();
}
}
}
NavigationPanelButton {
id: rightCornerButton
visible: root.rightCornerAction.visible
Kirigami.Theme.colorSet: root.foregroundColorGroup
Kirigami.Theme.inherit: false
enabled: root.rightCornerAction.enabled
shrinkSize: root.rightCornerAction.shrinkSize
iconSource: root.rightCornerAction.iconSource
onClicked: {
if (enabled) {
root.rightCornerAction.triggered();
}
}
}
}
states: [
State {
name: "vertical"
when: root.isVertical
PropertyChanges {
target: icons
anchors {
topMargin: root.leftPadding
bottomMargin: root.rightPadding
}
buttonLength: Math.min(Kirigami.Units.gridUnit * 10, icons.height * 0.7 / 3)
}
AnchorChanges {
target: leftButton
anchors {
horizontalCenter: parent.horizontalCenter
top: middleButton.bottom
}
}
PropertyChanges {
target: leftButton
width: parent.width
height: icons.buttonLength
}
PropertyChanges {
target: middleButton
width: parent.width
height: icons.buttonLength
}
AnchorChanges {
target: rightButton
anchors {
horizontalCenter: parent.horizontalCenter
bottom: middleButton.top
}
}
PropertyChanges {
target: rightButton
height: icons.buttonLength
width: icons.width
}
AnchorChanges {
target: rightCornerButton
anchors {
horizontalCenter: parent.horizontalCenter
top: parent.top
}
}
PropertyChanges {
target: rightCornerButton
height: Kirigami.Units.gridUnit * 2
width: icons.width
}
AnchorChanges {
target: leftCornerButton
anchors {
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
}
}
PropertyChanges {
target: leftCornerButton
height: Kirigami.Units.gridUnit * 2
width: icons.width
}
}, State {
name: "horizontal"
when: !root.isVertical
PropertyChanges {
target: icons
anchors {
leftMargin: root.leftPadding
rightMargin: root.rightPadding
}
buttonLength: Math.min(Kirigami.Units.gridUnit * 8, icons.width * 0.7 / 3)
}
AnchorChanges {
target: leftButton
anchors {
verticalCenter: parent.verticalCenter
right: middleButton.left
}
}
PropertyChanges {
target: leftButton
height: parent.height
width: icons.buttonLength
}
PropertyChanges {
target: middleButton
height: parent.height
width: icons.buttonLength
}
AnchorChanges {
target: rightButton
anchors {
verticalCenter: parent.verticalCenter
left: middleButton.right
}
}
PropertyChanges {
target: rightButton
height: parent.height
width: icons.buttonLength
}
AnchorChanges {
target: rightCornerButton
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
}
}
PropertyChanges {
target: rightCornerButton
height: parent.height
width: Kirigami.Units.gridUnit * 2
}
AnchorChanges {
target: leftCornerButton
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
}
}
PropertyChanges {
target: leftCornerButton
height: parent.height
width: Kirigami.Units.gridUnit * 2
}
}
]
}