initial searchView layout as discussed in the paper prototyping session

1 files changed, 206 insertions, 0 deletions

diff --git a/views/search/qml/View_new.qml b/views/search/qml/View_new.qml
new file mode 100644
index 00000000..f814ba76
--- /dev/null
+++ b/views/search/qml/View_new.qml
@@ -0,0 +1,206 @@
+/*
+ * Copyright (C) 2018 Michael Bohlender, <bohlender@kolabsys.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, write to the Free Software Foundation, Inc.,
+ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ */
+
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.2
+
+import org.kube.framework 1.0 as Kube
+
+StackView {
+    id: stack
+
+    property var searchTerm: ""
+
+    initialItem: searchBar
+
+    Component {
+        id: searchBar
+
+        Rectangle {
+            color: Kube.Colors.backgroundColor
+
+            Row {
+                anchors.centerIn: parent
+
+                spacing: Kube.Units.smallSpacing
+
+                Kube.TextField {
+                    id: searchField
+                    width: Kube.Units.gridUnit * 30
+                }
+
+                Kube.PositiveButton {
+                    text: qsTr("Search")
+                    enabled: searchField.text != ""
+
+                    onClicked: {
+                        searchTerm = searchField.text
+                        stack.push(searchResults)
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: searchResults
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            spacing: 0
+
+            Rectangle {
+                id: toolbar
+
+                width: parent.width
+                height: Kube.Units.gridUnit + Kube.Units.largeSpacing
+
+                color: Kube.Colors.backgroundColor
+
+                Kube.IconButton {
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        left: parent.left
+                        leftMargin: Kube.Units.smallSpacing
+                    }
+                    iconName: Kube.Icons.goBack
+                    onClicked: stack.pop()
+                }
+
+                Kube.TextField {
+                    id: searchBar
+
+                    anchors.centerIn: parent
+
+                    width: Kube.Units.gridUnit * 30
+
+                    text: stack.searchTerm
+                    placeholderText: qsTr("Search...")
+                }
+            }
+
+            Rectangle {
+                id: resultsArea
+
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+
+                color:  Kube.Colors.viewBackgroundColor
+
+                RowLayout {
+                    anchors.fill: parent
+
+                    Rectangle {
+                        width: Kube.Units.gridUnit * 10
+                        Layout.fillHeight: true
+                        color: Kube.Colors.buttonColor
+                    }
+
+                    Kube.ListView {
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+
+                        model: 10
+
+                        delegate: Item {
+                            width: parent.width
+                            height: Kube.Units.gridUnit * 5
+
+                            Rectangle {
+                                anchors.centerIn: parent
+
+                                height: parent.height - Kube.Units.largeSpacing
+                                width: parent.width - Kube.Units.largeSpacing * 2
+
+                                border.width: 1
+                                border.color: Kube.Colors.buttonColor
+
+                                Rectangle {
+                                    height: parent.height
+                                    width: height
+                                    color: Kube.Colors.buttonColor
+                                }
+
+                                Kube.AbstractButton {
+                                    anchors.fill: parent
+
+                                    color: "transparent"
+
+                                    onClicked: {
+                                        stack.push(viewResult)
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+            }
+        }
+    }
+
+    Component {
+        id: viewResult
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            spacing: 0
+
+            Rectangle {
+                id: toolbar
+
+                width: parent.width
+                height: Kube.Units.gridUnit + Kube.Units.largeSpacing
+
+                color: Kube.Colors.backgroundColor
+
+                Kube.IconButton {
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        left: parent.left
+                        leftMargin: Kube.Units.smallSpacing
+                    }
+                    iconName: Kube.Icons.goBack
+                    onClicked: stack.pop()
+                }
+
+                Row {
+                    anchors.centerIn: parent
+
+                    spacing: Kube.Units.largeSpacing
+
+                    Kube.Button {
+                        text: "prev"
+                    }
+
+                    Kube.Button {
+                        text: "next"
+                    }
+                }
+            }
+
+            Rectangle {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+        }
+    }
+}