Update examples/todo

examples/todo/CMakeLists.txt

@@ -2,6 +2,13 @@ cmake_minimum_required(VERSION 3.1.0)
 
 project(todo)
 
+################# set KDE specific information #################
+find_package(ECM REQUIRED NO_MODULE)
+
+# where to look first for cmake modules, before ${CMAKE_ROOT}/Modules/ is checked
+set(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} ${ECM_MODULE_PATH})
+
+
 set(CMAKE_VERBOSE_MAKEFILE ON)
 
 set(CMAKE_INCLUDE_CURRENT_DIR ON)
@@ -12,10 +19,8 @@ set(CMAKE_AUTOUIC ON)
 
 set(CMAKE_AUTORCC ON)
 
-find_package(Qt5Qml CONFIG REQUIRED)
-find_package(Qt5Gui CONFIG REQUIRED)
-find_package(Qt5Core CONFIG REQUIRED)
-find_package(Qt5Quick CONFIG REQUIRED)
+find_package(Qt5 REQUIRED COMPONENTS Core Gui Qml QuickControls2)
+find_package(KF5 REQUIRED COMPONENTS Kirigami2 I18n)
 
 set(todo_SRCS
   main.cpp
@@ -40,4 +45,4 @@ add_executable(todo WIN32 ${todo_SRCS})
 add_dependencies(todo QuickFlux)
 
 target_link_libraries(todo debug quickfluxd optimized quickflux)
-target_link_libraries(todo Qt5::Qml Qt5::Gui Qt5::Core Qt5::Quick)
+target_link_libraries(todo Qt5::Qml Qt5::Gui Qt5::Core Qt5::Quick KF5::I18n)

examples/todo/MainPage.qml

@@ -0,0 +1,20 @@
+import org.kde.kirigami 2.2 as Kirigami
+import "./views"
+
+Kirigami.ScrollablePage {
+    id: page
+
+    // space for title will be reserved anyway,
+    // so why not just fill it with something meaningful
+    title: "Todo list"
+
+    header: Header {}
+    footer: Footer {}
+
+    // page content item goes inline
+    TodoList {}
+
+    // Kirigami.ScrollablePage has undocumented feature:
+    // it looks differently when the child item is ListModel
+    Kirigami.Theme.colorSet: Kirigami.Theme.Window
+}

examples/todo/MainWindow.qml

@@ -1,35 +1,9 @@
-import QtQuick 2.3
-import QtQuick.Window 2.2
-import QtQuick.Layouts 1.0
-import QuickFlux 1.1
-import "./views"
-import "./middlewares"
-import "./actions"
+import org.kde.kirigami 2.0 as Kirigami
 
-Window {
-    width: 480
-    height: 640
-    visible: true
+// Wraps single-page application in a platform window
+Kirigami.ApplicationWindow {
+    width: 18 * Kirigami.Units.gridUnit
+    height: 20 * Kirigami.Units.gridUnit
 
-    ColumnLayout {
-        anchors.fill: parent
-        anchors.leftMargin: 16
-        anchors.rightMargin: 16
-
-        Header {
-            Layout.fillWidth: true
-            Layout.fillHeight: false
-        }
-
-        TodoList {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-        }
-
-        Footer {
-            Layout.fillWidth: true
-            Layout.fillHeight: false
-        }
-    }
+    pageStack.initialPage: MainPage {}
 }
-

examples/todo/actions/ActionTypes.qml

@@ -1,6 +1,6 @@
 pragma Singleton
 import QtQuick 2.0
-import QuickFlux 1.0
+import QuickFlux 1.1
 
 KeyTable {
     // KeyTable is an object with properties equal to its key name
@@ -13,4 +13,3 @@ KeyTable {
 
     property string startApp
 }
-

examples/todo/actions/AppActions.qml

@@ -1,18 +1,16 @@
 pragma Singleton
 import QtQuick 2.0
 import QuickFlux 1.1
-import "./"
 
 ActionCreator {
 
     // Add a new task
     signal addTask(string title);
 
     // Set/unset done on a task
-    signal setTaskDone(var uid, bool done)
+    signal setTaskDone(int uid, bool done)
 
     // Show/hide completed task
-    signal setShowCompletedTasks(bool value)
+    signal setShowCompletedTasks(bool value, Item contextItem)
 
 }
-

examples/todo/main.cpp

@@ -1,5 +1,7 @@
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
+#include <QQmlContext>
+#include <KLocalizedContext>
 #include <QFAppDispatcher>
 #include <QuickFlux>
 
@@ -12,11 +14,12 @@ int main(int argc, char *argv[])
     registerQuickFluxQmlTypes(); // It is not necessary to call this function if the QuickFlux library is installed via qpm
 
     QQmlApplicationEngine engine;
+
+    engine.rootContext()->setContextObject(new KLocalizedContext(&engine));
     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
 
     QFAppDispatcher* dispatcher = QFAppDispatcher::instance(&engine);
     dispatcher->dispatch("startApp");
 
     return app.exec();
 }
-

examples/todo/main.qml

@@ -1,11 +1,9 @@
 import QtQuick 2.3
-import QtQuick.Window 2.2
-import QtQuick.Layouts 1.0
 import QuickFlux 1.1
-import "./views"
 import "./middlewares"
 import "./actions"
 
+// Non-visual container for application-wide components
 Item {
 
     MiddlewareList {
@@ -23,4 +21,3 @@ Item {
         id: mainWindow
     }
 }
-

examples/todo/middlewares/DialogMiddleware.qml

@@ -1,40 +1,68 @@
 import QtQuick 2.0
+import QtQuick.Controls 2.1
 import QuickFlux 1.1
-import QtQuick.Dialogs 1.2
 import "../actions"
 import "../stores"
 
 Middleware {
 
     property RootStore store: MainStore
 
-    MessageDialog {
+    Dialog {
         id: dialog
-        title: "Confirmation"
-        text: "Are you sure want to show completed tasks?"
-        standardButtons: StandardButton.Ok | StandardButton.Cancel
+        modal: true
+        anchors.centerIn: parent
+
+        title: i18n("Confirmation")
+        Label {
+            text: i18n("Are you sure want to show completed tasks?")
+        }
+        standardButtons: Dialog.Ok | Dialog.Cancel
 
         onAccepted: {
+            _cleanup();
             next(ActionTypes.setShowCompletedTasks, {value: true});
         }
 
         onRejected: {
+            _cleanup();
             /// Trigger the changed signal even it is unchanged. It forces the checkbox to be turned off.
             store.userPrefs.showCompletedTasksChanged();
         }
+
+        function reparent(item) {
+            // attach dialog to the root item, so that it stays centerred
+            parent = _findRoot(item)
+        }
+
+        // Drills up to the top of component hierarchy.
+        function _findRoot(/* Item */ item) {
+            if (item === null) {
+                return null;
+            }
+            while (item.parent !== null) {
+                item = item.parent;
+            }
+            return item;
+        }
+
+        function _cleanup() {
+            // free the parent
+            reparent(null);
+        }
     }
 
     function dispatch(type, message) {
 
         if (type === ActionTypes.setShowCompletedTasks &&
             message.value === true) {
             // If user want to show completed tasks, drop the action and show a dialog
+            dialog.reparent(message.contextItem);
             dialog.open();
             return;
         }
 
         /// Pass the action to next middleware / store
         next(type, message);
     }
-
 }

examples/todo/middlewares/SystemMiddleware.qml

@@ -1,14 +1,14 @@
 import QtQuick 2.0
+import QtQuick.Window 2.0
 import QuickFlux 1.1
-import QtQuick.Dialogs 1.2
 import "../actions"
 import "../stores"
 
 Middleware {
 
     property RootStore store: MainStore
 
-    property var mainWindow: null
+    property Window mainWindow: null
 
     function dispatch(type, message) {
         if (type === ActionTypes.startApp) {
@@ -25,5 +25,4 @@ Middleware {
             console.log("closing");
         }
     }
-
 }

examples/todo/qml.qrc

@@ -17,5 +17,6 @@
         <file>middlewares/DialogMiddleware.qml</file>
         <file>MainWindow.qml</file>
         <file>middlewares/SystemMiddleware.qml</file>
+        <file>MainPage.qml</file>
     </qresource>
 </RCC>

examples/todo/stores/MainStore.qml

@@ -1,5 +1,4 @@
 pragma Singleton
-import QtQuick 2.0
 import QuickFlux 1.1
 
 RootStore {

examples/todo/stores/RootStore.qml

@@ -1,4 +1,3 @@
-import QtQuick 2.0
 import QuickFlux 1.1
 
 Store {

examples/todo/stores/TodoStore.qml

@@ -51,29 +51,26 @@ Store {
 
         type: ActionTypes.addTask
         onDispatched: {
-            var item = {
+            const item = {
                 uid: nextUid++,
                 title: message.title,
                 done: false
             }
-            model.append(item);
+            model.insert(0, item);
         }
     }
 
     Filter {
         type: ActionTypes.setTaskDone
         onDispatched: {
-            for (var i = 0 ; i < model.count ; i++) {
-                var item  = model.get(i);
+            // quick and dirty
+            for (let i = 0; i < model.count; i++) {
+                const item  = model.get(i);
                 if (item.uid === message.uid) {
-                    model.setProperty(i,"done",message.done);
+                    model.setProperty(i, "done", message.done);
                     break;
                 }
             }
         }
     }
-
 }
-
-
-

examples/todo/stores/UserPrefsStore.qml

@@ -1,4 +1,3 @@
-import QtQuick 2.0
 import QuickFlux 1.1
 import "../actions"
 

examples/todo/views/Footer.qml

@@ -1,32 +1,44 @@
-import QtQuick 2.0
-import QtQuick.Controls 1.0
+import QtQuick 2.1
+import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.0
+import org.kde.kirigami 2.7 as Kirigami
 import "../actions"
 
-Item {
-    height: 56
+RowLayout {
+    id: row
 
-    function add() {
-        AppActions.addTask(textField.text);
-        textField.text = "";
+    width: parent.width
+    implicitHeight: row.implicitHeight
+
+    spacing: Kirigami.Units.smallSpacing
+
+    Label {
+        text: i18n("To do:")
+
+        leftPadding: Kirigami.Units.smallSpacing
+        rightPadding: Kirigami.Units.smallSpacing
     }
 
-    RowLayout {
-        anchors.fill: parent
+    Kirigami.ActionTextField {
+        id: textField
+        Layout.fillWidth: true
 
-        TextField {
-            id: textField
-            Layout.fillWidth: true
-            focus: true
-            onAccepted: add();
-        }
+        placeholderText: i18n("New task...")
 
-        Button {
-            text: "ADD"
-            onClicked: {
-                add();
+        focus: true
+        onAccepted: add();
+        rightActions: Kirigami.Action {
+            text: i18n("Add")
+            // icon from Breeze (breeze-icons) package
+            iconName: "list-add"
+            visible: textField.text !== ""
+            onTriggered: {
+                textField.add();
             }
         }
+        function add() {
+            AppActions.addTask(textField.text);
+            textField.text = "";
+        }
     }
 }
-