Use placeholder message for initial loading of a document

This also now remove the auto appearing global drawer that is now a menu
on desktop. This also move the main page into the pagestack.

Bump the Kirigami dependency because PlaceHolderMessage doesn't exist in
old version of Kirigami.
This commit is contained in:
Carl Schwan 2020-12-11 14:31:21 +00:00
parent 6af6742067
commit d7f90b74a3
4 changed files with 235 additions and 5 deletions

View file

@ -8,5 +8,6 @@
<file>package/contents/ui/Thumbnails.qml</file>
<file>package/contents/ui/ThumbnailsBase.qml</file>
<file>package/contents/ui/TreeDelegate.qml</file>
<file>package/contents/ui/PlaceholderMessage.qml</file>
</qresource>
</RCC>

View file

@ -20,7 +20,7 @@
import QtQuick 2.1
import QtQuick.Controls 2.3 as QQC2
import org.kde.okular 2.0 as Okular
import org.kde.kirigami 2.0 as Kirigami
import org.kde.kirigami 2.10 as Kirigami
Kirigami.Page {
property alias document: pageArea.document
@ -47,6 +47,15 @@ Kirigami.Page {
onClicked: fileBrowserRoot.controlsVisible = !fileBrowserRoot.controlsVisible
}
// TODO KF 5.64 replace usage by upstream PlaceholderMessage
PlaceholderMessage {
visible: documentItem.url.toString().length === 0
text: i18n("No document open")
helpfulAction: openDocumentAction
width: parent.width - (Kirigami.Units.largeSpacing * 4)
anchors.centerIn: parent
}
Connections {
id: bookmarkConnection
target: pageArea.page

View file

@ -0,0 +1,221 @@
/*
* SPDX-FileCopyrightText: 2020 by Nate Graham <nate@kde.org>
*
* SPDX-License-Identifier: LGPL-2.0-or-later
*/
import QtQuick 2.0
import QtQuick.Controls 2.4 as QQC2
import QtQuick.Layouts 1.12
import org.kde.kirigami 2.12 as Kirigami
/**
* TODO KF 5.64 remove and replace usage by upstream PlaceholderMessage
* A placeholder message indicating that a list view is empty. The message
* comprises a label with lightened text, an optional icon above the text, and
* an optional button below the text which can be used to easily show the user
* what to do next to add content to the view.
*
* The top-level component is a ColumnLayout, so additional components items can
* simply be added as child items and they will be positioned sanely.
*
* Example usage:
*
* @code{.qml}
** used as a "this view is empty" message
* import org.kde.kirigami 2.12 as Kirigami
*
* ListView {
* id: listView
* model: [...]
* delegate: [...]
*
* Kirigami.PlaceholderMessage {
* anchors.centerIn: parent
* width: parent.width - (Kirigami.Units.largeSpacing * 4)
*
* visible: listView.count == 0
*
* text: "There are no items in this list"
* }
* }
* @endcode
* @code{.qml}
** Used as a "here's how to proceed" message
* import org.kde.kirigami 2.12 as Kirigami
*
* ListView {
* id: listView
* model: [...]
* delegate: [...]
*
* Kirigami.PlaceholderMessage {
* anchors.centerIn: parent
* width: parent.width - (Kirigami.Units.largeSpacing * 4)
*
* visible: listView.count == 0
*
* text: "Add an item to proceed"
*
* helpfulAction: Kirigami.Action {
* icon.name: "list-add"
* text: "Add item..."
* onTriggered: {
* [...]
* }
* }
* }
* [...]
* }
* @endcode
* @code{.qml}
** Used as a "there was a problem here" message
* import org.kde.kirigami 2.12 as Kirigami
*
* Kirigami.Page {
* id: root
* readonly property bool networkConnected: [...]
*
* Kirigami.PlaceholderMessage {
* anchors.centerIn: parent
* width: parent.width - (Kirigami.Units.largeSpacing * 4)
*
* visible: root.networkConnected
*
* icon.name: "network-disconnect"
* text: "Network disconnected; unable to load content"
* }
* }
* @endcode
* @code{.qml}
* import org.kde.kirigami 2.12 as Kirigami
*
** Used as a loading indicator
* Kirigami.Page {
* id: root
* readonly property bool loading: [...]
* readonly property int completionStatus: [...]
*
* Kirigami.PlaceholderMessage {
* anchors.centerIn: parent
* width: parent.width - (Kirigami.Units.largeSpacing * 4)
*
* visible: root.loading
*
* icon.name: "my-awesome-app-icon"
* text: "Loading this awesome app"
*
* ProgressBar {
* Layout.preferredWidth: Kirigami.Units.gridUnit * 20
* value: root.completionStatus
* from: 0
* to: 100
* }
* }
* }
* @endcode
* @code{.qml}
* import org.kde.kirigami 2.12 as Kirigami
*
** Used as a "Here's what you do next" button
* Kirigami.Page {
* id: root
*
* Kirigami.PlaceholderMessage {
* anchors.centerIn: parent
* width: parent.width - (Kirigami.Units.largeSpacing * 4)
*
* visible: root.loading
*
* helpfulAction: Kirigami.Action {
* icon.name: "list-add"
* text: "Add item..."
* onTriggered: {
* [...]
* }
* }
* }
* }
* @endcode
* @since 2.12
*/
ColumnLayout {
id: root
/**
* text: string
* The text to show as a placeholder label
*
* Optional; if not defined, the message will have no text. Useful when you
* only want to display an icon, action button, and/or other custom content
*
* @since 5.70
*/
property alias text: label.text
/**
* iconName: string
* The icon to show above the text label.
*
* Optional; if undefined, the message will have no icon.
* Falls back to `undefined` if the specified icon is not valid or cannot
* be loaded.
*
* @since 5.70
* @see Icon::source
*/
property string iconName
/**
* helpfulAction: QtQuickControls2 Action
* An action that helps the user proceed. Typically used to guide the user
* to the next step for adding content or items to an empty view.
*
* Optional; if undefined, no button will appear below the text label.
*
* @since 5.70
*/
property alias helpfulAction: actionButton.action
spacing: Kirigami.Units.largeSpacing
Kirigami.Icon {
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: Kirigami.Units.iconSizes.huge
Layout.preferredHeight: Kirigami.Units.iconSizes.huge
source: {
if (root.iconName && root.iconName.length > 0) {
return root.iconName
}
return undefined
}
visible: source != undefined
opacity: 0.5
}
Kirigami.Heading {
id: label
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
horizontalAlignment: Qt.AlignHCenter
visible: text.length > 0
level: 2
opacity: 0.5
wrapMode: Text.WordWrap
}
QQC2.Button {
id: actionButton
Layout.alignment: Qt.AlignHCenter
visible: action && action.enabled
}
}

View file

@ -31,11 +31,11 @@ Kirigami.ApplicationWindow {
wideScreen: width > columnWidth * 5
visible: true
header: null
globalDrawer: Kirigami.GlobalDrawer {
title: i18n("Okular")
titleIcon: "okular"
drawerOpen: false
isMenu: true
QQD.FileDialog {
id: fileDialog
@ -48,6 +48,7 @@ Kirigami.ApplicationWindow {
actions: [
Kirigami.Action {
id: openDocumentAction
text: i18n("Open...")
icon.name: "document-open"
onTriggered: {
@ -95,8 +96,6 @@ Kirigami.ApplicationWindow {
onTriggered: {
if (uri) {
documentItem.url = uri
} else {
globalDrawer.open();
}
}
}