ModernDesktopInitiative/koto
4
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

fix: improvements to drawer, auto show / hide on lower resolutions

Browse source
This commit is contained in:
Joshua Strobl 2024-10-03 11:57:11 +03:00
parent adf12cb1fc
commit 3e575bb3d8
3 changed files with 97 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

14
desktop/qml/Main.qml
View file

@ -6,15 +6,17 @@ import org.kde.kirigami as Kirigami
Kirigami.ApplicationWindow {
id: root
width: 1000
height: 600
visible: true
title: "Koto"
visible: true
width: 1000
globalDrawer: PrimaryNavigation {
windowRef: root
}
// TODO: Implement an onboarding page
pageStack.initialPage: PrimaryNavigation {
Component.onCompleted: {
pageStack.push(Qt.createComponent("HomePage.qml"), {});
}
pageStack.initialPage: HomePage {
}
}

163
desktop/qml/PrimaryNavigation.qml
View file

@ -3,85 +3,100 @@ import QtQuick.Controls as Controls
import QtQuick.Layouts
import org.kde.kirigami as Kirigami
// Kirigami.Page {
// ColumnLayout {
// Controls.TextArea {
// Layout.alignment: Qt.AlignTop
// id: searchEntry
// placeholderText: qsTr("Search")
// }
// }
// }
Kirigami.GlobalDrawer {
width: 200
height: parent.height
edge: Qt.LeftEdge
modal: false
id: primaryNavigation
property Kirigami.ApplicationWindow windowRef
function isMobile(width) {
return width < 800;
}
function onWindowSizeChanged(width) {
drawerOpen = !isMobile(width);
modal = isMobile(width);
}
collapseButtonVisible: false
drawerOpen: !isMobile()
edge: Qt.LeftEdge
height: parent.height
modal: isMobile()
actions: [
Kirigami.Action {
icon.name: "go-home"
text: "Home"
onTriggered: console.log("Home triggered")
},
Kirigami.Action {
expandible: true
icon.name: "bookmark"
text: "Audiobooks"
onTriggered: console.log("Audiobooks triggered")
},
Kirigami.Action {
expandible: true
icon.name: "emblem-music-symbolic"
text: "Music"
children: [
Kirigami.Action {
text: "Local Library"
onTriggered: console.log("Music Local Library triggered")
},
Kirigami.Action {
text: "Radio"
onTriggered: console.log("Music Radio triggered")
}
]
},
Kirigami.Action {
expandible: true
icon.name: "application-rss+xml-symbolic"
text: "Podcasts"
children: [
Kirigami.Action {
text: "Library"
onTriggered: console.log("Podcasts Library triggered")
},
Kirigami.Action {
text: "Find new podcasts"
onTriggered: console.log("Podcasts Find new podcasts triggered")
}
]
},
Kirigami.Action {
expandible: true
icon.name: "music-playlist-symbolic"
text: "Playlists"
children: [
Kirigami.Action {
text: "Library"
onTriggered: console.log("Playlists Library triggered")
}
]
// TODO: Generate list of playlists
}
]
header: Kirigami.SearchField {
id: searchEntry
placeholderText: qsTr("Search")
}
actions: [
Kirigami.Action {
text: "Home"
icon.name: "go-home"
onTriggered: console.log("Home triggered")
},
Kirigami.Action {
text: "Audiobooks"
expandible: true
icon.name: "bookmark"
onTriggered: console.log("Audiobooks triggered")
},
Kirigami.Action {
text: "Music"
expandible: true
icon.name: "emblem-music-symbolic"
children: [
Kirigami.Action {
text: "Local Library"
onTriggered: console.log("Music Local Library triggered")
},
Kirigami.Action {
text: "Radio"
onTriggered: console.log("Music Radio triggered")
}
]
},
Kirigami.Action {
text: "Podcasts"
expandible: true
icon.name: "application-rss+xml-symbolic"
children: [
Kirigami.Action {
text: "Library"
onTriggered: console.log("Podcasts Library triggered")
},
Kirigami.Action {
text: "Find new podcasts"
onTriggered: console.log("Podcasts Find new podcasts triggered")
}
]
},
Kirigami.Action {
text: "Playlists"
expandible: true
icon.name: "music-playlist-symbolic"
children: [
Kirigami.Action {
text: "Library"
onTriggered: console.log("Playlists Library triggered")
},
Kirigami.Action {
text: "Find new playlists"
onTriggered: console.log("Playlists Find new playlists triggered")
}
]
// TODO: Generate list of playlists
}
]
Component.onCompleted: {
if (Kirigami.Settings.isMobile)
return;
if (windowRef)
windowRef.onWidthChanged.connect(() => onWindowSizeChanged(windowRef.width));
}
}