Commit 9e8e631a authored by Jakob Petsovits's avatar Jakob Petsovits
Browse files

Adapt the Kirigami tutorial into a first start for a UI prototype

This will be completely non-functional for a long time.
The idea is to transfer the interactions and convergent UI design
from the ui-design.md text file to a working demo, and only when
(or if) it works, try to merge it with the codebase of Skanpage
to get something useful out of it. Skanpage won't stand still
in the meantime, the best way to avoid continuous merge pain is
to stick to Marascan's unique elements and defer the rest as long
as possible.

As a start, this is taking a shot at the back-and-forth between
the Scan Options and Page Grid views.

I had a hard time placing the Scan action on the desktop toolbar
because I wanted it as far left as possible, but Kirigami
right-aligns all primary actions and with Scan Options visible,
it ends up in an awkward spot in the middle. As a workaround for
the time being, I put it into the leftmost visible Page as main
Primary Action and make it invisible in the ones further right.

Perhaps Kirigami will one day allow me to add more "global actions"
toolbar buttons left-aligned next to the hamburger menu.
parent d772bb89
cmake_minimum_required(VERSION 3.16)
project(marascan-concept)
set(KF_MIN_VERSION "5.68.0")
set(QT_MIN_VERSION "5.12.0")
find_package(ECM ${KF_MIN_VERSION} REQUIRED NO_MODULE)
set(CMAKE_MODULE_PATH ${ECM_MODULE_PATH})
include(KDEInstallDirs)
include(KDECMakeSettings)
include(KDECompilerSettings NO_POLICY_SCOPE)
find_package(Qt5 ${QT_MIN_VERSION} REQUIRED NO_MODULE COMPONENTS Core Quick Test Gui QuickControls2 Widgets)
find_package(KF5 ${KF_MIN_VERSION} REQUIRED COMPONENTS Kirigami2 I18n CoreAddons)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
add_subdirectory(src)
feature_summary(WHAT ALL INCLUDE_QUIET_PACKAGES FATAL_ON_MISSING_REQUIRED_PACKAGES)
add_executable(marascan-concept main.cpp resources.qrc)
target_link_libraries(marascan-concept Qt5::Quick Qt5::Qml Qt5::Gui Qt5::QuickControls2 Qt5::Widgets KF5::Kirigami2 KF5::I18n)
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami
Kirigami.ScrollablePage {
Controls.Label {
anchors.centerIn: parent
text: i18n("Scan Options")
}
}
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami
Kirigami.ScrollablePage {
id: page
readonly property int scanButtonPriority: 2
actions.main: ScanAction {
scanButtonPriority: page.scanButtonPriority
}
actions.left: Kirigami.Action {
id: deletePage
icon.name: "edit-delete"
text: i18nc("@action:button", "Delete")
onTriggered: showPassiveNotification("Delete Page")
}
actions.right: Kirigami.Action {
id: saveDocument
icon.name: "document-save"
text: i18nc("@action:button", "Save")
onTriggered: showPassiveNotification("Save")
}
GridView {
id: pageGrid
model: applicationWindow().numPagesPlaceholder
implicitWidth: Kirigami.Units.gridUnit * 30
cellWidth: Math.max(Kirigami.Units.gridUnit * 10, Math.floor(width / Math.floor(width / (Kirigami.Units.gridUnit * 10))))
cellHeight: cellWidth
delegate: Item {
width: pageGrid.cellWidth
height: pageGrid.cellHeight
Rectangle {
color: Kirigami.Theme.highlightColor
radius: Kirigami.Units.gridUnit
anchors.centerIn: parent
width: Math.round(pageGrid.cellWidth * 0.8)
height: width
}
}
}
}
import org.kde.kirigami 2.13 as Kirigami
Kirigami.Action {
required property int scanButtonPriority
id: scan
icon.name: "document-scan"
text: i18nc("@action:button", "Scan")
displayHint: Kirigami.Action.DisplayHint.KeepVisible
visible: (applicationWindow().pageStack.firstVisibleItem !== null &&
applicationWindow().pageStack.firstVisibleItem.scanButtonPriority >= scanButtonPriority)
onTriggered: applicationWindow().numPagesPlaceholder = applicationWindow().numPagesPlaceholder + 1
}
import QtQml 2.15
import QtQuick 2.6
import QtQuick.Controls 2.0 as Controls
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami
Kirigami.ScrollablePage {
id: page
readonly property int scanButtonPriority: 1
// TODO: should only happen on desktop
Component.onCompleted: pageStack.push(Qt.resolvedUrl("PageGrid.qml"), {"depth": root.depth + 1})
onVisibleChanged: showPassiveNotification("Options visible: " + (visible ? "true" : "false"))
actions.main: ScanAction {
scanButtonPriority: page.scanButtonPriority
}
actions.left: Kirigami.Action {
id: importDocument
icon.name: "document-import"
text: i18nc("@action:button", "Import")
displayHint: Kirigami.Action.DisplayHint.IconOnly
onTriggered: showPassiveNotification("Import")
}
actions.right: Kirigami.Action {
id: settings
icon.name: "settings-configure"
text: i18nc("@action:button", "Settings")
displayHint: Kirigami.Action.DisplayHint.IconOnly
onTriggered: showPassiveNotification("Settings")
}
Controls.Label {
anchors.centerIn: parent
text: i18n("Scan Options")
}
}
import QtQuick 2.6
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.13 as Kirigami
// Base element, provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
// ID provides unique identifier to reference this element
id: root
property int numPagesPlaceholder: 5
// Window title
// i18nc is useful for adding context for translators, also lets strings be changed for different languages
title: i18nc("@title:window", "Marascan Concept")
// Initial page to be loaded on app load
pageStack.initialPage: Qt.resolvedUrl("ScanOptions.qml")
}
#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include <QUrl>
#include <KLocalizedContext>
#include <KLocalizedString>
int main(int argc, char *argv[])
{
QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication app(argc, argv);
KLocalizedString::setApplicationDomain("marascan-concept");
QCoreApplication::setOrganizationName("KDE");
QCoreApplication::setOrganizationDomain("kde.org");
QCoreApplication::setApplicationName("Marascan Concept");
QQmlApplicationEngine engine;
engine.rootContext()->setContextObject(new KLocalizedContext(&engine));
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty()) {
return -1;
}
return app.exec();
}
<RCC>
<qresource prefix="/">
<file alias="main.qml">contents/ui/main.qml</file>
<file alias="PageGrid.qml">contents/ui/PageGrid.qml</file>
<file alias="ScanAction.qml">contents/ui/ScanAction.qml</file>
<file alias="ScanOptions.qml">contents/ui/ScanOptions.qml</file>
<file alias="EditPresetBase.qml">contents/ui/EditPresetBase.qml</file>
</qresource>
</RCC>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment