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

This commit is contained in:
Devin Lin 2022-06-22 13:43:39 -04:00
parent 0deef11ba7
commit f9e0cb3916
15 changed files with 15 additions and 567 deletions

View file

@ -75,6 +75,7 @@ set_package_properties(KWinDBusInterface PROPERTIES DESCRIPTION "KWin DBus inter
include(CheckIncludeFiles) include(CheckIncludeFiles)
ecm_find_qmlmodule(org.kde.kirigamiaddons.labs.mobileform 0.1)
ecm_find_qmlmodule(org.kde.pipewire 0.1) ecm_find_qmlmodule(org.kde.pipewire 0.1)
plasma_install_package(look-and-feel org.kde.plasma.phone look-and-feel) plasma_install_package(look-and-feel org.kde.plasma.phone look-and-feel)

View file

@ -36,6 +36,8 @@ It is recommended to use `kdesrc-build` to build this from source. See [this pag
Dependencies: Dependencies:
* KDE Frameworks 5 setup (plasma-framework and its dependencies) * KDE Frameworks 5 setup (plasma-framework and its dependencies)
* Plasma Nano * Plasma Nano
* Kirigami
* Kirigami Addons
To start the phone homescreen in a window, run: To start the phone homescreen in a window, run:
``` ```

View file

@ -10,8 +10,7 @@ import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.19 as Kirigami import org.kde.kirigami 2.19 as Kirigami
import org.kde.kcm 1.3 as KCM import org.kde.kcm 1.3 as KCM
import org.kde.plasma.private.mobileshell 1.0 as MobileShell import org.kde.plasma.private.mobileshell 1.0 as MobileShell
import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
import "mobileform" as MobileForm
Kirigami.ScrollablePage { Kirigami.ScrollablePage {
id: root id: root

View file

@ -10,8 +10,7 @@ import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.19 as Kirigami import org.kde.kirigami 2.19 as Kirigami
import org.kde.kcm 1.3 as KCM import org.kde.kcm 1.3 as KCM
import org.kde.plasma.private.mobileshell 1.0 as MobileShell import org.kde.plasma.private.mobileshell 1.0 as MobileShell
import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
import "mobileform" as MobileForm
Kirigami.ScrollablePage { Kirigami.ScrollablePage {
id: root id: root
@ -43,12 +42,7 @@ Kirigami.ScrollablePage {
} }
} }
Kirigami.Separator { MobileForm.FormDelegateSeparator { above: shellVibrationsSwitch; below: vibrationIntensityDelegate }
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!shellVibrationsSwitch.controlHovered && !vibrationIntensityDelegate.controlHovered) ? 0.5 : 0
}
MobileForm.FormComboBoxDelegate { MobileForm.FormComboBoxDelegate {
id: vibrationIntensityDelegate id: vibrationIntensityDelegate
@ -77,6 +71,7 @@ Kirigami.ScrollablePage {
append({"name": vibrationIntensityDelegate.lowIntensityString, "value": 0.2}); append({"name": vibrationIntensityDelegate.lowIntensityString, "value": 0.2});
} }
} }
dialog.parent: root
dialogDelegate: QQC2.RadioDelegate { dialogDelegate: QQC2.RadioDelegate {
implicitWidth: Kirigami.Units.gridUnit * 16 implicitWidth: Kirigami.Units.gridUnit * 16
topPadding: Kirigami.Units.smallSpacing * 2 topPadding: Kirigami.Units.smallSpacing * 2
@ -92,12 +87,7 @@ Kirigami.ScrollablePage {
} }
} }
Kirigami.Separator { MobileForm.FormDelegateSeparator { above: vibrationIntensityDelegate; below: vibrationDurationDelegate }
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!vibrationIntensityDelegate.controlHovered && !vibrationDurationDelegate.controlHovered) ? 0.5 : 0
}
MobileForm.FormComboBoxDelegate { MobileForm.FormComboBoxDelegate {
id: vibrationDurationDelegate id: vibrationDurationDelegate
@ -126,6 +116,7 @@ Kirigami.ScrollablePage {
append({"name": vibrationDurationDelegate.shortString, "value": 15}); append({"name": vibrationDurationDelegate.shortString, "value": 15});
} }
} }
dialog.parent: root
dialogDelegate: QQC2.RadioDelegate { dialogDelegate: QQC2.RadioDelegate {
implicitWidth: Kirigami.Units.gridUnit * 16 implicitWidth: Kirigami.Units.gridUnit * 16
topPadding: Kirigami.Units.smallSpacing * 2 topPadding: Kirigami.Units.smallSpacing * 2

View file

@ -10,8 +10,7 @@ import QtQuick.Controls 2.15 as QQC2
import org.kde.kirigami 2.19 as Kirigami import org.kde.kirigami 2.19 as Kirigami
import org.kde.kcm 1.3 as KCM import org.kde.kcm 1.3 as KCM
import org.kde.plasma.private.mobileshell 1.0 as MobileShell import org.kde.plasma.private.mobileshell 1.0 as MobileShell
import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
import "mobileform" as MobileForm
KCM.SimpleKCM { KCM.SimpleKCM {
id: root id: root
@ -43,12 +42,7 @@ KCM.SimpleKCM {
onClicked: kcm.push("VibrationForm.qml") onClicked: kcm.push("VibrationForm.qml")
} }
Kirigami.Separator { MobileForm.FormDelegateSeparator { above: shellVibrationsButton; below: animationsSwitch }
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!shellVibrationsButton.controlHovered && !animationsSwitch.controlHovered) ? 0.5 : 0
}
MobileForm.FormSwitchDelegate { MobileForm.FormSwitchDelegate {
id: animationsSwitch id: animationsSwitch
@ -130,12 +124,7 @@ KCM.SimpleKCM {
onClicked: kcm.push("QuickSettingsForm.qml") onClicked: kcm.push("QuickSettingsForm.qml")
} }
Kirigami.Separator { MobileForm.FormDelegateSeparator { above: quickSettingsButton; below: topLeftActionDrawerModeDelegate }
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!quickSettingsButton.controlHovered && !topLeftActionDrawerModeDelegate.controlHovered) ? 0.5 : 0
}
property string pinnedString: i18nc("Pinned action drawer mode", "Pinned Mode") property string pinnedString: i18nc("Pinned action drawer mode", "Pinned Mode")
property string expandedString: i18nc("Expanded action drawer mode", "Expanded 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}); append({"name": parentCol.expandedString, "value": MobileShell.MobileShellSettings.Expanded});
} }
} }
dialog.parent: root
dialogDelegate: QQC2.RadioDelegate { dialogDelegate: QQC2.RadioDelegate {
implicitWidth: Kirigami.Units.gridUnit * 16 implicitWidth: Kirigami.Units.gridUnit * 16
topPadding: Kirigami.Units.smallSpacing * 2 topPadding: Kirigami.Units.smallSpacing * 2
@ -175,12 +165,7 @@ KCM.SimpleKCM {
} }
} }
Kirigami.Separator { MobileForm.FormDelegateSeparator { above: topLeftActionDrawerModeDelegate; below: topRightActionDrawerModeDelegate }
Layout.leftMargin: Kirigami.Units.largeSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
opacity: (!topLeftActionDrawerModeDelegate.controlHovered && !topRightActionDrawerModeDelegate.controlHovered) ? 0.5 : 0
}
MobileForm.FormComboBoxDelegate { MobileForm.FormComboBoxDelegate {
id: topRightActionDrawerModeDelegate id: topRightActionDrawerModeDelegate
@ -202,6 +187,7 @@ KCM.SimpleKCM {
append({"name": parentCol.expandedString, "value": MobileShell.MobileShellSettings.Expanded}); append({"name": parentCol.expandedString, "value": MobileShell.MobileShellSettings.Expanded});
} }
} }
dialog.parent: root
dialogDelegate: QQC2.RadioDelegate { dialogDelegate: QQC2.RadioDelegate {
implicitWidth: Kirigami.Units.gridUnit * 16 implicitWidth: Kirigami.Units.gridUnit * 16
topPadding: Kirigami.Units.smallSpacing * 2 topPadding: Kirigami.Units.smallSpacing * 2

View file

@ -1,64 +0,0 @@
/*
* 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();
}
}
}
}

View file

@ -1,57 +0,0 @@
/*
* 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
}
}
}

View file

@ -1,80 +0,0 @@
/*
* 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
}
}
}

View file

@ -1,52 +0,0 @@
/*
* 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
}
}

View file

@ -1,36 +0,0 @@
/*
* 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
}
}
}

View file

@ -1,79 +0,0 @@
/*
* 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
}
}
}

View file

@ -1,37 +0,0 @@
/*
* 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
}
}
}

View file

@ -1,23 +0,0 @@
/*
* 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
}

View file

@ -1,50 +0,0 @@
/*
* 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 alias checked: switchItem.checked
property alias switchControl: switchItem
onClicked: checked = !checked;
Layout.fillWidth: true
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
}
}
Switch {
id: switchItem
Layout.leftMargin: Kirigami.Units.largeSpacing
}
}
}

View file

@ -1,53 +0,0 @@
/*
* 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
background: Item {}
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 !== ""
}
}
}
}