Commit f9e0cb39 authored by Devin Lin's avatar Devin Lin 🎨
Browse files

kcm: Port to org.kde.kirigamiaddons.labs.mobileform

parent 0deef11b
Pipeline #194174 passed with stage
in 1 minute and 14 seconds
......@@ -75,6 +75,7 @@ set_package_properties(KWinDBusInterface PROPERTIES DESCRIPTION "KWin DBus inter
include(CheckIncludeFiles)
ecm_find_qmlmodule(org.kde.kirigamiaddons.labs.mobileform 0.1)
ecm_find_qmlmodule(org.kde.pipewire 0.1)
plasma_install_package(look-and-feel org.kde.plasma.phone look-and-feel)
......
......@@ -36,6 +36,8 @@ It is recommended to use `kdesrc-build` to build this from source. See [this pag
Dependencies:
* KDE Frameworks 5 setup (plasma-framework and its dependencies)
* Plasma Nano
* Kirigami
* Kirigami Addons
To start the phone homescreen in a window, run:
```
......
......@@ -10,8 +10,7 @@ import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kcm 1.3 as KCM
import org.kde.plasma.private.mobileshell 1.0 as MobileShell
import "mobileform" as MobileForm
import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
Kirigami.ScrollablePage {
id: root
......
......@@ -10,8 +10,7 @@ import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kcm 1.3 as KCM
import org.kde.plasma.private.mobileshell 1.0 as MobileShell
import "mobileform" as MobileForm
import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
Kirigami.ScrollablePage {
id: root
......@@ -43,12 +42,7 @@ Kirigami.ScrollablePage {
}
}
Kirigami.Separator {
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!shellVibrationsSwitch.controlHovered && !vibrationIntensityDelegate.controlHovered) ? 0.5 : 0
}
MobileForm.FormDelegateSeparator { above: shellVibrationsSwitch; below: vibrationIntensityDelegate }
MobileForm.FormComboBoxDelegate {
id: vibrationIntensityDelegate
......@@ -77,6 +71,7 @@ Kirigami.ScrollablePage {
append({"name": vibrationIntensityDelegate.lowIntensityString, "value": 0.2});
}
}
dialog.parent: root
dialogDelegate: QQC2.RadioDelegate {
implicitWidth: Kirigami.Units.gridUnit * 16
topPadding: Kirigami.Units.smallSpacing * 2
......@@ -92,12 +87,7 @@ Kirigami.ScrollablePage {
}
}
Kirigami.Separator {
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!vibrationIntensityDelegate.controlHovered && !vibrationDurationDelegate.controlHovered) ? 0.5 : 0
}
MobileForm.FormDelegateSeparator { above: vibrationIntensityDelegate; below: vibrationDurationDelegate }
MobileForm.FormComboBoxDelegate {
id: vibrationDurationDelegate
......@@ -126,6 +116,7 @@ Kirigami.ScrollablePage {
append({"name": vibrationDurationDelegate.shortString, "value": 15});
}
}
dialog.parent: root
dialogDelegate: QQC2.RadioDelegate {
implicitWidth: Kirigami.Units.gridUnit * 16
topPadding: Kirigami.Units.smallSpacing * 2
......
......@@ -10,8 +10,7 @@ import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kcm 1.3 as KCM
import org.kde.plasma.private.mobileshell 1.0 as MobileShell
import "mobileform" as MobileForm
import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
KCM.SimpleKCM {
id: root
......@@ -43,12 +42,7 @@ KCM.SimpleKCM {
onClicked: kcm.push("VibrationForm.qml")
}
Kirigami.Separator {
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!shellVibrationsButton.controlHovered && !animationsSwitch.controlHovered) ? 0.5 : 0
}
MobileForm.FormDelegateSeparator { above: shellVibrationsButton; below: animationsSwitch }
MobileForm.FormSwitchDelegate {
id: animationsSwitch
......@@ -130,12 +124,7 @@ KCM.SimpleKCM {
onClicked: kcm.push("QuickSettingsForm.qml")
}
Kirigami.Separator {
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!quickSettingsButton.controlHovered && !topLeftActionDrawerModeDelegate.controlHovered) ? 0.5 : 0
}
MobileForm.FormDelegateSeparator { above: quickSettingsButton; below: topLeftActionDrawerModeDelegate }
property string pinnedString: i18nc("Pinned action drawer mode", "Pinned Mode")
property string expandedString: i18nc("Expanded action drawer mode", "Expanded Mode")
......@@ -160,6 +149,7 @@ KCM.SimpleKCM {
append({"name": parentCol.expandedString, "value": MobileShell.MobileShellSettings.Expanded});
}
}
dialog.parent: root
dialogDelegate: QQC2.RadioDelegate {
implicitWidth: Kirigami.Units.gridUnit * 16
topPadding: Kirigami.Units.smallSpacing * 2
......@@ -175,12 +165,7 @@ KCM.SimpleKCM {
}
}
Kirigami.Separator {
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!topLeftActionDrawerModeDelegate.controlHovered && !topRightActionDrawerModeDelegate.controlHovered) ? 0.5 : 0
}
MobileForm.FormDelegateSeparator { above: topLeftActionDrawerModeDelegate; below: topRightActionDrawerModeDelegate }
MobileForm.FormComboBoxDelegate {
id: topRightActionDrawerModeDelegate
......@@ -202,6 +187,7 @@ KCM.SimpleKCM {
append({"name": parentCol.expandedString, "value": MobileShell.MobileShellSettings.Expanded});
}
}
dialog.parent: root
dialogDelegate: QQC2.RadioDelegate {
implicitWidth: Kirigami.Units.gridUnit * 16
topPadding: Kirigami.Units.smallSpacing * 2
......
/*
* Copyright 2022 Devin Lin <devin@kde.org>
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.12 as Kirigami
Control {
id: root
property bool showSeparator: false
readonly property bool controlHovered: hoverHandler.hovered
signal clicked()
signal rightClicked()
leftPadding: Kirigami.Units.gridUnit
topPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
bottomPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
rightPadding: Kirigami.Units.gridUnit
hoverEnabled: true
background: Rectangle {
color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, mouseArea.pressed ? 0.2 : hoverHandler.hovered ? 0.07 : 0)
Behavior on color {
ColorAnimation { duration: 70 }
}
HoverHandler {
id: hoverHandler
}
Kirigami.Separator {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: root.leftPadding
anchors.rightMargin: root.rightPadding
visible: root.showSeparator
opacity: 0.5
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton) {
root.rightClicked();
} else if (mouse.button === Qt.LeftButton) {
root.clicked();
}
}
}
}
/*
* Copyright 2022 Devin Lin <devin@kde.org>
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami
AbstractFormDelegate {
id: root
property string text: ""
property string description: ""
property string iconName: ""
Layout.fillWidth: true
contentItem: RowLayout {
Kirigami.Icon {
visible: root.iconName !== ""
source: root.iconName
Layout.rightMargin: (root.iconName !== "") ? Kirigami.Units.largeSpacing : 0
implicitWidth: (root.iconName !== "") ? Kirigami.Units.iconSizes.small : 0
implicitHeight: (root.iconName !== "") ? Kirigami.Units.iconSizes.small : 0
}
ColumnLayout {
Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing
Label {
Layout.fillWidth: true
text: root.text
elide: Text.ElideRight
}
Label {
Layout.fillWidth: true
text: root.description
color: Kirigami.Theme.disabledTextColor
font: Kirigami.Theme.smallFont
elide: Text.ElideRight
visible: root.description !== ""
}
}
Kirigami.Icon {
Layout.alignment: Qt.AlignRight
source: "arrow-right"
implicitWidth: Kirigami.Units.iconSizes.small
implicitHeight: Kirigami.Units.iconSizes.small
}
}
}
/*
* Copyright 2022 Devin Lin <devin@kde.org>
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami
/**
* A single card that is contained in a form.
*
* The height will take the implicit height of the contentItem, while the width
* is expected to be given by the parent.
*/
Item {
id: root
/**
* The contents of the form card.
*/
property Item contentItem: Item {}
/**
* The maximum width of the card.
*/
property real maximumWidth: Kirigami.Units.gridUnit * 30
property real padding: 0
property real verticalPadding: padding
property real horizontalPadding: padding
property real topPadding: verticalPadding
property real bottomPadding: verticalPadding
property real leftPadding: horizontalPadding
property real rightPadding: horizontalPadding
readonly property bool cardWidthRestricted: root.width > root.maximumWidth
Kirigami.Theme.colorSet: Kirigami.Theme.View
Kirigami.Theme.inherit: false
implicitHeight: topPadding + bottomPadding + contentItem.implicitHeight
onContentItemChanged: {
// clear old items
contentItemLoader.children = "";
contentItem.parent = contentItemLoader;
contentItem.anchors.fill = contentItemLoader;
contentItemLoader.children.push(contentItem);
}
Rectangle {
border.color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, 0.15)
border.width: 1
// only have card radius if it isn't filling the entire width
radius: root.cardWidthRestricted ? Kirigami.Units.smallSpacing : 0
color: Kirigami.Theme.backgroundColor
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: root.cardWidthRestricted ? Math.round((root.width - root.maximumWidth) / 2) : -1
anchors.rightMargin: root.cardWidthRestricted ? Math.round((root.width - root.maximumWidth) / 2) : -1
Item {
id: contentItemLoader
anchors.fill: parent
anchors.leftMargin: root.leftPadding
anchors.rightMargin: root.rightPadding
anchors.topMargin: root.topPadding
anchors.bottomMargin: root.bottomPadding
}
}
}
/*
* Copyright 2022 Devin Lin <devin@kde.org>
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami
ColumnLayout {
id: root
spacing: 0
property string title: ""
property string subtitle: ""
ColumnLayout {
visible: title !== "" || subtitle !== ""
Layout.fillWidth: true
Layout.bottomMargin: Kirigami.Units.largeSpacing
Layout.topMargin: Kirigami.Units.largeSpacing
Layout.leftMargin: Kirigami.Units.gridUnit
Layout.rightMargin: Kirigami.Units.gridUnit
spacing: Kirigami.Units.smallSpacing
Label {
Layout.fillWidth: true
font.weight: Font.Bold
text: title
visible: title !== ""
wrapMode: Text.Wrap
}
Label {
color: Kirigami.Theme.disabledTextColor
font: Kirigami.Theme.smallFont
text: subtitle
visible: subtitle !== ""
wrapMode: Text.Wrap
Layout.fillWidth: true
}
}
Kirigami.Separator {
opacity: 0.5
Layout.fillWidth: true
}
}
/*
* Copyright 2022 Devin Lin <devin@kde.org>
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami
AbstractFormDelegate {
id: root
property string text: ""
property alias checked: checkBoxItem.checked
property alias checkBox: checkBoxItem
onClicked: checked = !checked;
Layout.fillWidth: true
contentItem: RowLayout {
CheckBox {
id: checkBoxItem
Layout.rightMargin: Kirigami.Units.largeSpacing
}
Label {
text: root.text
elide: Text.ElideRight
Layout.fillWidth: true
}
}
}
/*
* Copyright 2022 Devin Lin <devin@kde.org>
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami
AbstractFormDelegate {
id: root
property string text: ""
property string description: ""
// TODO
property string currentValue: ""
property alias dialogDelegate: repeater.delegate
property alias model: repeater.model
Layout.fillWidth: true
onClicked: dialog.open()
Kirigami.Dialog {
id: dialog
showCloseButton: false
title: root.text
ColumnLayout {
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.View
spacing: 0
Repeater {
id: repeater
}
}
}
contentItem: RowLayout {
ColumnLayout {
Layout.fillWidth: true
spacing: Kirigami.Units.smallSpacing
Label {
Layout.fillWidth: true
text: root.text
elide: Text.ElideRight
}
Label {
visible: root.description !== ""
Layout.fillWidth: true
text: root.description
color: Kirigami.Theme.disabledTextColor
font: Kirigami.Theme.smallFont
elide: Text.ElideRight
}
}
Label {
Layout.alignment: Qt.AlignRight
Layout.rightMargin: Kirigami.Units.smallSpacing
color: Kirigami.Theme.disabledTextColor
text: root.currentValue
}
Kirigami.Icon {
Layout.alignment: Qt.AlignRight
source: "arrow-down"
implicitWidth: Kirigami.Units.iconSizes.small
implicitHeight: Kirigami.Units.iconSizes.small
}
}
}
/*
* Copyright 2022 Devin Lin <devin@kde.org>
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami
AbstractFormDelegate {
id: root
property string text: ""
property alias checked: radioButtonItem.checked
property alias radioButton: radioButtonItem
onClicked: checked = true;
Layout.fillWidth: true
contentItem: RowLayout {
RadioButton {
id: radioButtonItem
Layout.rightMargin: Kirigami.Units.largeSpacing
}
Label {
text: root.text
elide: Text.ElideRight
Layout.fillWidth: true
}
}
}
/*
* Copyright 2022 Devin Lin <devin@kde.org>
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.19 as Kirigami
Label {
color: Kirigami.Theme.disabledTextColor
wrapMode: Label.Wrap
Layout.maximumWidth: Kirigami.Units.gridUnit * 30
Layout.alignment: Qt.AlignHCenter
Layout.leftMargin: Kirigami.Units.gridUnit
Layout.rightMargin: Kirigami.Units.gridUnit
Layout.bottomMargin: Kirigami.Units.largeSpacing
Layout.topMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
}