Port to Kirigami.Dialog

This should simplify logic, and also handles scrolling nicely.
Appearance and UX-wise, everything should be the same as before with OverlaySheet.
This commit is contained in:
Devin Lin 2022-03-04 09:11:22 +00:00 committed by Bart De Vries
parent 73f2c46638
commit 36d9a84bff
10 changed files with 264 additions and 280 deletions

View File

@ -12,7 +12,7 @@ set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_CXX_EXTENSIONS OFF)
set(KF5_MIN_VERSION "5.87.0")
set(KF5_MIN_VERSION "5.89.0")
set(QT_MIN_VERSION "5.15.0")
find_package(ECM ${KF5_MIN_VERSION} REQUIRED NO_MODULE)

View File

@ -8,20 +8,21 @@ import QtQuick 2.14
import QtQuick.Controls 2.14 as Controls
import QtQuick.Layouts 1.14
import org.kde.kirigami 2.14 as Kirigami
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kasts 1.0
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: addSheet
parent: applicationWindow().overlay
showCloseButton: true
standardButtons: Kirigami.Dialog.NoButton
header: Kirigami.Heading {
text: i18n("Add New Podcast")
}
title: i18n("Add New Podcast")
padding: Kirigami.Units.largeSpacing
preferredWidth: Kirigami.Units.gridUnit * 20
contentItem: ColumnLayout {
ColumnLayout {
Controls.Label {
text: i18n("Url:")
}
@ -30,7 +31,7 @@ Kirigami.OverlaySheet {
Layout.fillWidth: true
text: "https://"
// focus: addSheet.sheetOpen // disabled for now since it causes problem with virtual keyboard appearing at the same time as the overlay
Keys.onReturnPressed: addFeedButton.clicked();
Keys.onReturnPressed: addFeedAction.triggered();
}
// This item can be used to trigger the addition of a feed; it will open an
@ -43,11 +44,11 @@ Kirigami.OverlaySheet {
}
}
footer: Controls.Button {
id: addFeedButton
customFooterActions: Kirigami.Action {
id: addFeedAction
text: i18n("Add Podcast")
enabled: urlField.text
onClicked: {
onTriggered: {
addSheet.close();
addFeed.run();
}

View File

@ -8,14 +8,15 @@ import QtQuick 2.14
import QtQuick.Controls 2.14 as Controls
import QtQuick.Layouts 1.14
import org.kde.kirigami 2.14 as Kirigami
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kasts.solidextras 1.0
import org.kde.kasts 1.0
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: overlay
parent: applicationWindow().overlay
closePolicy: Kirigami.Dialog.CloseOnEscape | Kirigami.Dialog.CloseOnPressOutside
property string headingText: i18n("Podcast updates are currently not allowed on metered connections")
property bool condition: SettingsManager.allowMeteredFeedUpdates
@ -50,23 +51,33 @@ Kirigami.OverlaySheet {
}
}
header: Kirigami.Heading {
text: overlay.headingText
level: 2
title: i18n("Select Option")
ColumnLayout {
spacing: 0
Controls.Label {
Layout.topMargin: Kirigami.Units.largeSpacing
Layout.bottomMargin: Kirigami.Units.largeSpacing
Layout.leftMargin: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
Layout.rightMargin: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
Layout.fillWidth: true
text: headingText
wrapMode: Text.Wrap
elide: Text.ElideRight
maximumLineCount: 3
color: Kirigami.Theme.disabledTextColor
}
contentItem: ColumnLayout {
spacing: 0
Kirigami.Separator {
Layout.fillWidth: true
opacity: 0.5
}
Kirigami.BasicListItem {
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
leftPadding: Kirigami.Units.smallSpacing
rightPadding: 0
leftPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
rightPadding: Kirigami.Units.largeSpacing + + Kirigami.Units.smallSpacing
text: i18n("Don't Allow")
onClicked: {
abortAction();
@ -77,8 +88,9 @@ Kirigami.OverlaySheet {
Kirigami.BasicListItem {
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
leftPadding: Kirigami.Units.smallSpacing
rightPadding: 0
leftPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
rightPadding: Kirigami.Units.largeSpacing + + Kirigami.Units.smallSpacing
text: i18n("Allow Once")
onClicked: {
allowOnceAction();
@ -89,8 +101,9 @@ Kirigami.OverlaySheet {
Kirigami.BasicListItem {
Layout.fillWidth: true
Layout.preferredHeight: Kirigami.Units.gridUnit * 2
leftPadding: Kirigami.Units.smallSpacing
rightPadding: 0
leftPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
rightPadding: Kirigami.Units.largeSpacing + + Kirigami.Units.smallSpacing
text: i18n("Always Allow")
onClicked: {
alwaysAllowAction();

View File

@ -9,7 +9,7 @@ import QtQuick 2.14
import QtQuick.Controls 2.14 as Controls
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.15
import org.kde.kirigami 2.15 as Kirigami
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kasts 1.0
@ -47,18 +47,16 @@ Kirigami.ScrollablePage {
visible: !Kirigami.Settings.isMobile || (episodeList.count === 0 && episodeProxyModel.filterType == EpisodeProxyModel.NoFilter)
}
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: filterTypeOverlay
header: Kirigami.Heading {
text: i18n("Select Filter")
}
title: i18n("Select Filter")
preferredWidth: Kirigami.Units.gridUnit * 16
ListView {
// TODO: fix automatic width
implicitWidth: Kirigami.Units.gridUnit * 15
clip: true
ColumnLayout {
spacing: 0
Repeater {
model: ListModel {
id: filterModel
// have to use script because i18n doesn't work within ListElement
@ -77,6 +75,7 @@ Kirigami.ScrollablePage {
delegate: Kirigami.BasicListItem {
id: swipeDelegate
Layout.fillWidth: true
highlighted: filterType === episodeProxyModel.filterType
text: name
onClicked: {
@ -86,6 +85,7 @@ Kirigami.ScrollablePage {
}
}
}
}
Kirigami.InlineMessage {
z: 2

View File

@ -9,45 +9,41 @@ import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.15
import org.kde.kirigami 2.15 as Kirigami
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kasts 1.0
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: errorOverlay
preferredWidth: Kirigami.Units.gridUnit * 20
preferredHeight: Kirigami.Units.gridUnit * 16
showCloseButton: true
header: Kirigami.Heading {
text: i18n("Error Log")
level: 2
wrapMode: Text.Wrap
}
title: i18n("Error Log")
standardButtons: Kirigami.Dialog.NoButton
footer: Controls.DialogButtonBox {
Controls.Button {
customFooterActions: Kirigami.Action {
text: i18n("Clear All Errors")
icon.name: "edit-clear-all"
onClicked: ErrorLogModel.clearAll()
iconName: "edit-clear-all"
onTriggered: ErrorLogModel.clearAll()
enabled: errorList.count > 0
}
}
Kirigami.PlaceholderMessage {
id: placeholder
visible: errorList.count == 0
text: i18n("No Errors Logged")
}
ListView {
id: errorList
visible: errorList.count > 0
implicitWidth: Kirigami.Units.gridUnit * 20
reuseItems: true
model: ErrorLogModel
Kirigami.PlaceholderMessage {
id: placeholder
visible: errorList.count == 0
anchors.centerIn: parent
text: i18n("No Errors Logged")
}
Component {
id: errorListDelegate
Kirigami.SwipeListItem {
@ -92,6 +88,4 @@ Kirigami.OverlaySheet {
delegate: errorListDelegate
}
contentItem: errorList.count > 0 ? errorList : placeholder
}

View File

@ -11,7 +11,7 @@ import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.15
import QtQml.Models 2.15
import org.kde.kirigami 2.12 as Kirigami
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kasts 1.0
@ -238,47 +238,35 @@ Controls.ItemDelegate {
y: cardSize + cardMargin
}
Kirigami.OverlaySheet {
Kirigami.MenuDialog {
id: actionOverlay
// parent: applicationWindow().overlay
showCloseButton: true
header: Kirigami.Heading {
text: feed.name
level: 2
elide: Text.ElideRight
}
title: feed.name
contentItem: ColumnLayout {
Kirigami.BasicListItem {
Layout.fillWidth: true
leftPadding: Kirigami.Units.smallSpacing
rightPadding: 0
onClicked: {
while(pageStack.depth > 1)
actions: [
Kirigami.Action {
onTriggered: {
while (pageStack.depth > 1)
pageStack.pop()
pageStack.push("qrc:/FeedDetailsPage.qml", {"feed": feed});
actionOverlay.close();
}
icon: "help-about-symbolic"
iconName: "help-about-symbolic"
text: i18n("Podcast Details")
}
Kirigami.BasicListItem {
Layout.fillWidth: true
leftPadding: Kirigami.Units.smallSpacing
rightPadding: 0
onClicked: {
if(feed.url === lastFeed)
},
Kirigami.Action {
onTriggered: {
if (feed.url === lastFeed)
while(pageStack.depth > 1)
pageStack.pop()
DataManager.removeFeed(feed)
actionOverlay.close();
}
icon: "delete"
iconName: "delete"
text: i18n("Remove Podcast")
}
}
]
}
}

View File

@ -11,7 +11,7 @@ import QtMultimedia 5.15
import QtGraphicalEffects 1.15
import QtQml.Models 2.15
import org.kde.kirigami 2.14 as Kirigami
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kasts 1.0
@ -247,29 +247,21 @@ Rectangle {
}
}
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: chapterOverlay
preferredWidth: Kirigami.Units.gridUnit * 20
preferredHeight: Kirigami.Units.gridUnit * 16
showCloseButton: true
header: Kirigami.Heading {
text: i18n("Chapters")
level: 2
wrapMode: Text.Wrap
}
title: i18n("Chapters")
ListView {
Layout.preferredWidth: Kirigami.Units.gridUnit * 25
id: chapterList
width: parent.width
height: contentItem.childrenRect.height
model: ChapterModel {
enclosureId: AudioManager.entry ? AudioManager.entry.id : ""
enclosurePath: AudioManager.entry ? AudioManager.entry.enclosure.path : ""
}
clip: true
visible: chapterList.count !== 0
anchors.fill: parent
delegate: ChapterListDelegate {
id: chapterDelegate
width: chapterList.width
@ -279,20 +271,17 @@ Rectangle {
}
}
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: entryDetailsOverlay
preferredWidth: Kirigami.Units.gridUnit * 25
showCloseButton: true
header: Kirigami.Heading {
text: AudioManager.entry ? AudioManager.entry.title : i18n("No Track Title")
level: 2
elide: Text.ElideRight
}
title: AudioManager.entry ? AudioManager.entry.title : i18n("No Track Title")
padding: Kirigami.Units.largeSpacing
contentItem: Controls.Label {
Controls.Label {
id: text
Layout.preferredWidth: Kirigami.Units.gridUnit * 25
text: AudioManager.entry ? AudioManager.entry.content : i18n("No Track Loaded")
verticalAlignment: Text.AlignTop
baseUrl: AudioManager.entry ? AudioManager.entry.baseUrl : ""

View File

@ -8,7 +8,7 @@ import QtQuick 2.14
import QtQuick.Controls 2.14 as Controls
import QtQuick.Layouts 1.14
import org.kde.kirigami 2.14 as Kirigami
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kasts 1.0
Loader {
@ -59,23 +59,28 @@ Loader {
Component {
id: widescreenComponent
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: listViewSheet
header: Kirigami.Heading {
text: i18n("Set Playback Rate")
}
contentItem: ListView {
title: i18n("Set Playback Rate")
padding: 0
preferredWidth: Kirigami.Units.gridUnit * 16
ColumnLayout {
id: playbackRateList
spacing: 0
Repeater {
model: playbackRateModel
implicitWidth: Kirigami.Units.gridUnit * 12
clip: true
delegate: Kirigami.SwipeListItem {
delegate: Controls.RadioDelegate {
id: swipeDelegate
highlighted: value == AudioManager.playbackRate
Controls.Label {
Layout.fillWidth: true
topPadding: Kirigami.Units.smallSpacing * 2
bottomPadding: Kirigami.Units.smallSpacing * 2
checked: value == AudioManager.playbackRate
text: name
}
onClicked: {
onCheckedChanged: {
AudioManager.playbackRate = value;
close();
}
@ -83,6 +88,7 @@ Loader {
}
}
}
}
Component {
id: narrowComponent

View File

@ -9,7 +9,7 @@ import QtQuick 2.14
import QtQuick.Controls 2.14 as Controls
import QtQuick.Layouts 1.14
import org.kde.kirigami 2.12 as Kirigami
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kasts 1.0
@ -42,17 +42,20 @@ Kirigami.ScrollablePage {
onClicked: syncProviderOverlay.open()
}
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: syncProviderOverlay
showCloseButton: true
header: Kirigami.Heading {
text: i18n("Select Sync Provider")
elide: Text.ElideRight
}
preferredWidth: Kirigami.Units.gridUnit * 20
standardButtons: Kirigami.Dialog.NoButton
contentItem: ListView {
focus: syncProviderOverlay.sheetOpen
implicitWidth: Math.max(contentItem.childrenRect.width, Kirigami.Units.gridUnit * 20)
showCloseButton: true
title: i18n("Select Sync Provider")
ColumnLayout {
spacing: 0
Repeater {
focus: syncProviderOverlay.visible
model: ListModel {
id: providerModel
@ -68,6 +71,7 @@ Kirigami.ScrollablePage {
"provider": Sync.GPodderNextcloud});
}
delegate: Kirigami.BasicListItem {
Layout.fillWidth: true
label: model.name
subtitle: model.subtitle
icon: model.icon
@ -82,18 +86,29 @@ Kirigami.ScrollablePage {
}
}
}
Kirigami.OverlaySheet {
id: syncLoginOverlay
showCloseButton: true
header: Kirigami.Heading {
text: i18n("Sync Login Credentials")
elide: Text.ElideRight
}
contentItem: Column {
Layout.preferredWidth: Kirigami.Units.gridUnit * 25
Kirigami.Dialog {
id: syncLoginOverlay
preferredWidth: Kirigami.Units.gridUnit * 25
padding: Kirigami.Units.largeSpacing
showCloseButton: true
standardButtons: Controls.DialogButtonBox.Ok | Controls.DialogButtonBox.Cancel
closePolicy: Kirigami.Dialog.CloseOnEscape | Kirigami.Dialog.CloseOnPressOutside
title: i18n("Sync Login Credentials")
onAccepted: {
if (Sync.provider === Sync.GPodderNextcloud) {
Sync.hostname = hostnameField.text;
}
Sync.login(usernameField.text, passwordField.text);
syncLoginOverlay.close();
}
onRejected: syncLoginOverlay.close();
Column {
spacing: Kirigami.Units.largeSpacing
RowLayout {
width: parent.width
@ -137,8 +152,8 @@ Kirigami.ScrollablePage {
id: usernameField
Layout.fillWidth: true
text: Sync.username
Keys.onReturnPressed: credentialsButtons.accepted();
// focus: syncLoginOverlay.sheetOpen // disabled for now since it causes problem with virtual keyboard appearing at the same time as the overlay
Keys.onReturnPressed: syncLoginOverlay.accepted();
// focus: syncLoginOverlay.visible // disabled for now since it causes problem with virtual keyboard appearing at the same time as the overlay
}
Controls.Label {
Layout.alignment: Qt.AlignRight
@ -149,7 +164,7 @@ Kirigami.ScrollablePage {
Layout.fillWidth: true
echoMode: TextInput.Password
text: Sync.password
Keys.onReturnPressed: credentialsButtons.accepted();
Keys.onReturnPressed: syncLoginOverlay.accepted();
}
Controls.Label {
visible: Sync.provider === Sync.GPodderNextcloud
@ -162,23 +177,10 @@ Kirigami.ScrollablePage {
Layout.fillWidth: true
placeholderText: "https://nextcloud.mydomain.org"
text: Sync.hostname
Keys.onReturnPressed: credentialsButtons.accepted();
Keys.onReturnPressed: syncLoginOverlay.accepted();
}
}
}
footer: Controls.DialogButtonBox {
id: credentialsButtons
standardButtons: Controls.DialogButtonBox.Ok | Controls.DialogButtonBox.Cancel
onAccepted: {
if (Sync.provider === Sync.GPodderNextcloud) {
Sync.hostname = hostnameField.text;
}
Sync.login(usernameField.text, passwordField.text);
syncLoginOverlay.close();
}
onRejected: syncLoginOverlay.close();
}
}
Connections {
@ -194,16 +196,16 @@ Kirigami.ScrollablePage {
}
}
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: syncDeviceOverlay
preferredWidth: Kirigami.Units.gridUnit * 25
padding: Kirigami.Units.largeSpacing
showCloseButton: true
header: Kirigami.Heading {
text: i18n("Sync Device Settings")
elide: Text.ElideRight
}
contentItem: Column {
Layout.preferredWidth: Kirigami.Units.gridUnit * 25
title: i18n("Sync Device Settings")
Column {
spacing: Kirigami.Units.largeSpacing * 2
Kirigami.Heading {
level: 2
@ -220,7 +222,7 @@ Kirigami.ScrollablePage {
Layout.fillWidth: true
text: Sync.suggestedDevice
Keys.onReturnPressed: createDeviceButton.clicked();
// focus: syncDeviceOverlay.sheetOpen // disabled for now since it causes problem with virtual keyboard appearing at the same time as the overlay
// focus: syncDeviceOverlay.visible // disabled for now since it causes problem with virtual keyboard appearing at the same time as the overlay
}
Controls.Label {
text: i18n("Device Description:")
@ -305,16 +307,26 @@ Kirigami.ScrollablePage {
}
}
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: syncGroupOverlay
showCloseButton: true
preferredWidth: Kirigami.Units.gridUnit * 25
padding: Kirigami.Units.largeSpacing
header: Kirigami.Heading {
text: i18n("Device Sync Settings")
elide: Text.ElideRight
showCloseButton: true
standardButtons: Controls.DialogButtonBox.Ok | Controls.DialogButtonBox.Cancel
closePolicy: Kirigami.Dialog.CloseOnEscape | Kirigami.Dialog.CloseOnPressOutside
title: i18n("Device Sync Settings")
onAccepted: {
Sync.linkUpAllDevices();
syncGroupOverlay.close();
}
contentItem: RowLayout {
Layout.preferredWidth: Kirigami.Units.gridUnit * 25
onRejected: {
syncGroupOverlay.close();
}
RowLayout {
spacing: Kirigami.Units.largeSpacing
Kirigami.Icon {
Layout.preferredHeight: Kirigami.Units.gridUnit * 4
@ -328,39 +340,35 @@ Kirigami.ScrollablePage {
wrapMode: Text.WordWrap
text: i18n("Should all podcast subscriptions on this gpodder.net account be synced across all devices?\nIf you don't know what this means, you should probably select \"Ok\".")
color: Kirigami.Theme.textColor
}
}
footer: Controls.DialogButtonBox {
standardButtons: Controls.DialogButtonBox.Ok | Controls.DialogButtonBox.Cancel
focus: syncGroupOverlay.sheetOpen
Keys.onReturnPressed: accepted();
onAccepted: {
Sync.linkUpAllDevices();
syncGroupOverlay.close();
}
onRejected: {
syncGroupOverlay.close();
}
}
onSheetOpenChanged: {
if (!sheetOpen) {
onVisibleChanged: {
if (!visible) {
firstSyncOverlay.open();
}
}
}
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: firstSyncOverlay
showCloseButton: true
preferredWidth: Kirigami.Units.gridUnit * 16
padding: Kirigami.Units.largeSpacing
header: Kirigami.Heading {
text: i18n("Sync Now?")
elide: Text.ElideRight
showCloseButton: true
standardButtons: Controls.DialogButtonBox.Ok | Controls.DialogButtonBox.Cancel
closePolicy: Kirigami.Dialog.CloseOnEscape | Kirigami.Dialog.CloseOnPressOutside
title: i18n("Sync Now?")
onAccepted: {
firstSyncOverlay.close();
Sync.doRegularSync();
}
contentItem: RowLayout {
Layout.preferredWidth: Kirigami.Units.gridUnit * 2
onRejected: firstSyncOverlay.close();
RowLayout {
spacing: Kirigami.Units.largeSpacing
Kirigami.Icon {
Layout.preferredHeight: Kirigami.Units.gridUnit * 4
@ -374,18 +382,8 @@ Kirigami.ScrollablePage {
wrapMode: Text.WordWrap
text: i18n("Perform a first sync now?")
color: Kirigami.Theme.textColor
}
}
footer: Controls.DialogButtonBox {
standardButtons: Controls.DialogButtonBox.Ok | Controls.DialogButtonBox.Cancel
focus: firstSyncOverlay.sheetOpen
Keys.onReturnPressed: accepted();
onAccepted: {
firstSyncOverlay.close();
Sync.doRegularSync();
}
onRejected: firstSyncOverlay.close();
}
}

View File

@ -8,22 +8,27 @@ import QtQuick 2.14
import QtQuick.Controls 2.14 as Controls
import QtQuick.Layouts 1.14
import org.kde.kirigami 2.12 as Kirigami
import org.kde.kirigami 2.19 as Kirigami
import org.kde.kasts 1.0
Kirigami.OverlaySheet {
Kirigami.Dialog {
id: syncPasswordOverlay
preferredWidth: Kirigami.Units.gridUnit * 20
parent: applicationWindow().overlay
showCloseButton: true
standardButtons: Controls.DialogButtonBox.Ok | Controls.DialogButtonBox.Cancel
header: Kirigami.Heading {
text: i18n("Sync Password Required")
elide: Text.ElideRight
title: i18n("Sync Password Required")
onAccepted: {
Sync.password = passwordField2.text;
syncPasswordOverlay.close();
}
onRejected: syncPasswordOverlay.close();
contentItem: Column {
Layout.preferredWidth: Kirigami.Units.gridUnit * 20
Column {
spacing: Kirigami.Units.largeSpacing
RowLayout {
width: parent.width
@ -54,21 +59,11 @@ Kirigami.OverlaySheet {
Controls.TextField {
id: passwordField2
Layout.fillWidth: true
Keys.onReturnPressed: passwordButtons.accepted();
focus: syncPasswordOverlay.sheetOpen
Keys.onReturnPressed: syncPasswordOverlay.accepted();
focus: syncPasswordOverlay.visible
echoMode: TextInput.Password
text: Sync.password
}
}
}
footer: Controls.DialogButtonBox {
id: passwordButtons
standardButtons: Controls.DialogButtonBox.Ok | Controls.DialogButtonBox.Cancel
onAccepted: {
Sync.password = passwordField2.text;
syncPasswordOverlay.close();
}
onRejected: syncPasswordOverlay.close();
}
}