Use custom sidebar implementation

It has nicer default width

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
This commit is contained in:
Carl Schwan 2022-12-13 21:50:13 +01:00
parent d74737a1e4
commit cd0db29609

View file

@ -4,51 +4,63 @@
* SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
*/
import QtQuick 2.2
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import org.kde.kirigami 2.0 as Kirigami
import QtQuick 2.15
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami
import org.kde.kdeconnect 1.0
Kirigami.ApplicationWindow
{
Kirigami.ApplicationWindow {
id: root
visible: true
width: 900
height: 500
property int columnWidth: Kirigami.Units.gridUnit * 13
minimumWidth: Kirigami.Units.gridUnit * 15
minimumHeight: Kirigami.Units.gridUnit * 15
wideScreen: width > columnWidth * 5
pageStack.globalToolBar.canContainHandles: true
pageStack.globalToolBar.showNavigationButtons: applicationWindow().pageStack.currentIndex > 0 ? Kirigami.ApplicationHeaderStyle.ShowBackButton : 0
onWideScreenChanged: {
if (wideScreen) {
drawer.open()
}
}
Kirigami.Action {
id: findDevicesAction
text: i18nd("kdeconnect-app", "Find devices...")
iconName: "list-add"
checked: pageStack.currentItem && pageStack.currentItem.objectName == "FindDevices"
onTriggered: {
root.pageStack.clear()
root.pageStack.push(Qt.resolvedUrl("FindDevicesPage.qml"));
}
}
globalDrawer: Kirigami.GlobalDrawer {
globalDrawer: Kirigami.OverlayDrawer {
id: drawer
edge: Qt.application.layoutDirection === Qt.RightToLeft ? Qt.RightEdge : Qt.LeftEdge
modal: Kirigami.Settings.isMobile || (applicationWindow().width < Kirigami.Units.gridUnit * 50 && !collapsed) // Only modal when not collapsed, otherwise collapsed won't show.
drawerOpen: !Kirigami.Settings.isMobile
width: Kirigami.Units.gridUnit * 16
onModalChanged: if (!modal) {
drawerOpen = true;
}
modal: !root.wideScreen
handleVisible: !root.wideScreen
Behavior on width {
NumberAnimation {
duration: Kirigami.Units.longDuration
easing.type: Easing.InOutQuad
}
}
Kirigami.Theme.colorSet: Kirigami.Theme.Window
header: Kirigami.AbstractApplicationHeader {
handleClosedIcon.source: modal ? null : "sidebar-expand-left"
handleOpenIcon.source: modal ? null : "sidebar-collapse-left"
handleVisible: modal
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0
contentItem: ColumnLayout {
spacing: 0
QQC2.ToolBar {
Layout.fillWidth: true
Layout.preferredHeight: pageStack.globalToolBar.preferredHeight
leftPadding: Kirigami.Units.largeSpacing
rightPadding: Kirigami.Units.largeSpacing
topPadding: Kirigami.Units.smallSpacing
bottomPadding: Kirigami.Units.smallSpacing
leftPadding: Kirigami.Units.smallSpacing
rightPadding: Kirigami.Units.smallSpacing
contentItem: RowLayout {
anchors.fill: parent
spacing: Kirigami.Units.smallSpacing
contentItem: Kirigami.Heading {
text: announcedNameProperty.value
elide: Qt.ElideRight
DBusProperty {
id: announcedNameProperty
@ -56,48 +68,41 @@ Kirigami.ApplicationWindow
read: "announcedName"
defaultValue: ""
}
}
}
TextField {
id: nameField
visible: false
Kirigami.BasicListItem {
id: findDevicesAction
text: i18nd("kdeconnect-app", "Find devices...")
icon: "list-add"
checked: pageStack.currentItem && pageStack.currentItem.objectName == "FindDevices"
Layout.fillWidth: true
text: announcedNameProperty.value
onAccepted: {
DaemonDbusInterface.setAnnouncedName(text)
text = Qt.binding(function() {return announcedNameProperty.value})
}
}
Kirigami.Heading {
level: 1
text: announcedNameProperty.value
Layout.fillWidth: true
visible: !nameField.visible
elide: Qt.ElideRight
}
Button {
icon.name: nameField.visible ? "dialog-ok-apply" : "entry-edit"
onClicked: {
nameField.visible = !nameField.visible
nameField.accepted()
}
}
root.pageStack.clear()
root.pageStack.push(Qt.resolvedUrl("FindDevicesPage.qml"));
}
}
property var objects: [findDevicesAction]
Instantiator {
model: DevicesSortProxyModel {
sourceModel: DevicesModel { displayFilter: DevicesModel.Paired | DevicesModel.Reachable }
Kirigami.Separator {
Layout.fillWidth: true
}
delegate: Kirigami.Action {
icon.name: model.iconName
icon.color: "transparent"
Repeater {
model: DevicesSortProxyModel {
sourceModel: DevicesModel {
displayFilter: DevicesModel.Paired | DevicesModel.Reachable
}
}
Kirigami.BasicListItem {
Layout.fillWidth: true
text: model.name + "\n" + toolTip
visible: status & DevicesModel.Reachable
enabled: status & DevicesModel.Reachable
checked: pageStack.currentItem && pageStack.currentItem.currentDevice == device
onTriggered: {
icon: model.iconName
iconColor: "transparent"
onClicked: {
root.pageStack.clear()
root.pageStack.push(
Qt.resolvedUrl("DevicePage.qml"),
@ -105,21 +110,19 @@ Kirigami.ApplicationWindow
);
}
}
}
onObjectAdded: {
drawer.objects.push(object)
drawer.objects = drawer.objects
Item {
Layout.fillHeight: true
Layout.fillWidth: true
}
onObjectRemoved: {
var idx = drawer.objects.indexOf(object);
if (idx>=0) {
var removed = drawer.objects.splice(idx, 1)
drawer.objects = drawer.objects
Kirigami.BasicListItem {
text: i18n("Settings")
onClicked: pageStack.pushDialogLayer('qrc:/qml/Settings.qml');
}
}
}
actions: objects
}
contextDrawer: Kirigami.ContextDrawer {
id: contextDrawer