Search view updates

author: Christian Mollekopf <chrigi_1@fastmail.fm> 2018-07-23 12:16:08 +0200
committer: Christian Mollekopf <chrigi_1@fastmail.fm> 2018-07-23 14:28:15 +0200
commit: e0604f713649186507db37be54cc3aaadcd99663 (patch)
tree: 66b796b19b3943f0ecdbb0ff0720a6d0bd36ae0f /views/search
parent: 36b2a1ac66ce66708904870b9458512bbaea4a03 (diff)
download: kube-e0604f713649186507db37be54cc3aaadcd99663.tar.gz
kube-e0604f713649186507db37be54cc3aaadcd99663.zip
1 files changed, 120 insertions, 43 deletions
diff --git a/views/search/qml/View.qml b/views/search/qml/View.qml
index 74e6cf5b..18098f30 100644
--- a/views/search/qml/View.qml
+++ b/views/search/qml/View.qml
@@ -20,64 +20,141 @@
 import QtQuick 2.7
 import QtQuick.Controls 1.3 as Controls1
-import QtQuick.Controls 2.0 as Controls2
+import QtQuick.Controls 2
 import QtQuick.Layouts 1.1
 import org.kube.framework 1.0 as Kube
-FocusScope {
+Kube.View {
-    Controls1.SplitView {
+    id: root
-        anchors.fill: parent
+    property string searchTerm: ""
-        ColumnLayout {
-            width: Kube.Units.gridUnit * 18
-            Layout.minimumWidth: Kube.Units.gridUnit * 10
-            Rectangle {
-                id: filterField
-                Layout.fillWidth: true
-                height: Kube.Units.gridUnit * 2
-                color: Kube.Colors.darkBackgroundColor
-                function clearSearch() {
-                    find.text = ""
-                    mailListView.filter = ""
-                }
-                RowLayout {
+    Rectangle {
-                    anchors {
+        id: overlay
-                        verticalCenter: parent.verticalCenter
-                    }
+        parent: ApplicationWindow.overlay
+        height: app.height
+        width: app.width - app.sidebarWidth
+        x: app.sidebarWidth
+        y: 0
+        visible: root.searchTerm == ""
+        Row {
+            anchors.centerIn: parent
+            spacing: Kube.Units.smallSpacing
+            Kube.TextField {
+                id: searchField
+                anchors.verticalCenter: parent.verticalCenter
+                width: Kube.Units.gridUnit * 30
+                focus: true
+                text: root.searchTerm
+                Keys.onEscapePressed: root.searchTerm = ""
+                onAccepted: root.searchTerm = text
+            }
-                    width: parent.width - Kube.Units.smallSpacing
+            Kube.PositiveButton {
-                    spacing: 0
+                anchors.verticalCenter: parent.verticalCenter
+                text: qsTr("Search")
+                enabled: searchField.text != ""
+                onClicked: root.searchTerm = searchField.text
+            }
+        }
+    }
-                    Kube.IconButton {
+    RowLayout {
-                        iconName: Kube.Icons.remove
+        spacing: 0
-                        onClicked: filterField.clearSearch()
+        Rectangle {
+            Layout.fillHeight: true
+            width: Kube.Units.gridUnit * 10
+            color: Kube.Colors.darkBackgroundColor
+            ColumnLayout {
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    top: parent.top
+                    margins: Kube.Units.smallSpacing
+                }
+                RowLayout {
+                    Kube.CheckBox {
+                        checked: true
+                    }
+                    Kube.Label {
+                        text: qsTr("Mail")
+                        color: Kube.Colors.highlightedTextColor
+                    }
+                }
+                RowLayout {
+                    Kube.CheckBox {
+                        checked: false
                    }
+                    Kube.Label {
+                        text: qsTr("Contacts")
+                        color: Kube.Colors.highlightedTextColor
+                    }
+                }
+                RowLayout {
+                    Kube.CheckBox {
+                        checked: false
+                    }
+                    Kube.Label {
+                        text: qsTr("Events")
+                        color: Kube.Colors.highlightedTextColor
+                    }
+                }
+            }
+        }
+        Item {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            ColumnLayout {
+                anchors.fill: parent
+                spacing: 0
+                Rectangle {
+                    id: toolbar
+                    Layout.fillWidth: true
+                    height: searchBar.height + Kube.Units.smallSpacing * 2
+                    color: Kube.Colors.backgroundColor
                    Kube.TextField {
-                        id: find
+                        id: searchBar
-                        Layout.fillWidth: true
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: root.searchTerm
+                        width: parent.width * 0.5
                        placeholderText: qsTr("Search...")
-                        onTextChanged: mailListView.filter = text
+                        Keys.onEscapePressed: root.searchTerm = ""
-                        focus: true
+                        onTextChanged: {
-                        Keys.onEscapePressed: filterField.clearSearch()
+                            forceActiveFocus()
+                            mailListView.filter = text
+                        }
+                    }
+                }
+                Controls1.SplitView {
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+                    Kube.MailListView  {
+                        id: mailListView
+                        width: Kube.Units.gridUnit * 18
+                        Layout.minimumWidth: Kube.Units.gridUnit * 10
+                        Layout.fillHeight: true
+                    }
+                    Kube.ConversationView {
+                        id: mailView
+                        Layout.minimumWidth: Kube.Units.gridUnit * 5
+                        Layout.fillWidth: true
+                        Layout.fillHeight: true
+                        activeFocusOnTab: true
+                        model: Kube.MailListModel {
+                            singleMail: mailListView.currentMail
+                        }
                    }
                }
            }
-            Kube.MailListView  {
-                id: mailListView
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-            }
-        }
-        Kube.ConversationView {
-            id: mailView
-            objectName: "mailView"
-            Layout.fillWidth: true
-            Layout.fillHeight: parent.height
-            activeFocusOnTab: true
-            mail: mailListView.currentMail
        }
    }
 }
author	Christian Mollekopf <chrigi_1@fastmail.fm>	2018-07-23 12:16:08 +0200
committer	Christian Mollekopf <chrigi_1@fastmail.fm>	2018-07-23 14:28:15 +0200
commit	e0604f713649186507db37be54cc3aaadcd99663 (patch)
tree	66b796b19b3943f0ecdbb0ff0720a6d0bd36ae0f /views/search
parent	36b2a1ac66ce66708904870b9458512bbaea4a03 (diff)
download	kube-e0604f713649186507db37be54cc3aaadcd99663.tar.gz kube-e0604f713649186507db37be54cc3aaadcd99663.zip

diff --git a/views/search/qml/View.qml b/views/search/qml/View.qml index 74e6cf5b..18098f30 100644 --- a/views/search/qml/View.qml +++ b/views/search/qml/View.qml
@@ -20,64 +20,141 @@
20		20
21	import QtQuick 2.7	21	import QtQuick 2.7
22	import QtQuick.Controls 1.3 as Controls1	22	import QtQuick.Controls 1.3 as Controls1
23	import QtQuick.Controls 2.0 as Controls2	23	import QtQuick.Controls 2
24	import QtQuick.Layouts 1.1	24	import QtQuick.Layouts 1.1
25		25
26	import org.kube.framework 1.0 as Kube	26	import org.kube.framework 1.0 as Kube
27		27
28	FocusScope {	28	Kube.View {
29	Controls1.SplitView {	29	id: root
30	anchors.fill: parent	30	property string searchTerm: ""
31	ColumnLayout {
32	width: Kube.Units.gridUnit * 18
33	Layout.minimumWidth: Kube.Units.gridUnit * 10
34	Rectangle {
35	id: filterField
36	Layout.fillWidth: true
37	height: Kube.Units.gridUnit * 2
38	color: Kube.Colors.darkBackgroundColor
39		31
40	function clearSearch() {
41	find.text = ""
42	mailListView.filter = ""
43	}
44		32
45	RowLayout {	33	Rectangle {
46	anchors {	34	id: overlay
47	verticalCenter: parent.verticalCenter	35
48	}	36	parent: ApplicationWindow.overlay
		37	height: app.height
		38	width: app.width - app.sidebarWidth
		39	x: app.sidebarWidth
		40	y: 0
		41
		42	visible: root.searchTerm == ""
		43
		44	Row {
		45	anchors.centerIn: parent
		46
		47	spacing: Kube.Units.smallSpacing
		48
		49	Kube.TextField {
		50	id: searchField
		51	anchors.verticalCenter: parent.verticalCenter
		52	width: Kube.Units.gridUnit * 30
		53	focus: true
		54	text: root.searchTerm
		55	Keys.onEscapePressed: root.searchTerm = ""
		56	onAccepted: root.searchTerm = text
		57	}
49		58
50	width: parent.width - Kube.Units.smallSpacing	59	Kube.PositiveButton {
51	spacing: 0	60	anchors.verticalCenter: parent.verticalCenter
		61	text: qsTr("Search")
		62	enabled: searchField.text != ""
		63	onClicked: root.searchTerm = searchField.text
		64	}
		65	}
		66	}
52		67
53	Kube.IconButton {	68	RowLayout {
54	iconName: Kube.Icons.remove	69	spacing: 0
55	onClicked: filterField.clearSearch()	70	Rectangle {
		71	Layout.fillHeight: true
		72	width: Kube.Units.gridUnit * 10
		73	color: Kube.Colors.darkBackgroundColor
		74	ColumnLayout {
		75	anchors {
		76	left: parent.left
		77	right: parent.right
		78	top: parent.top
		79	margins: Kube.Units.smallSpacing
		80	}
		81	RowLayout {
		82	Kube.CheckBox {
		83	checked: true
		84	}
		85	Kube.Label {
		86	text: qsTr("Mail")
		87	color: Kube.Colors.highlightedTextColor
		88	}
		89	}
		90	RowLayout {
		91	Kube.CheckBox {
		92	checked: false
56	}	93	}
		94	Kube.Label {
		95	text: qsTr("Contacts")
		96	color: Kube.Colors.highlightedTextColor
		97	}
		98	}
		99	RowLayout {
		100	Kube.CheckBox {
		101	checked: false
		102	}
		103	Kube.Label {
		104	text: qsTr("Events")
		105	color: Kube.Colors.highlightedTextColor
		106	}
		107	}
		108	}
		109	}
57		110
		111	Item {
		112	Layout.fillHeight: true
		113	Layout.fillWidth: true
		114	ColumnLayout {
		115	anchors.fill: parent
		116	spacing: 0
		117	Rectangle {
		118	id: toolbar
		119	Layout.fillWidth: true
		120	height: searchBar.height + Kube.Units.smallSpacing * 2
		121	color: Kube.Colors.backgroundColor
58	Kube.TextField {	122	Kube.TextField {
59	id: find	123	id: searchBar
60	Layout.fillWidth: true	124	anchors.horizontalCenter: parent.horizontalCenter
		125	anchors.verticalCenter: parent.verticalCenter
		126	text: root.searchTerm
		127	width: parent.width * 0.5
61	placeholderText: qsTr("Search...")	128	placeholderText: qsTr("Search...")
62	onTextChanged: mailListView.filter = text	129	Keys.onEscapePressed: root.searchTerm = ""
63	focus: true	130	onTextChanged: {
64	Keys.onEscapePressed: filterField.clearSearch()	131	forceActiveFocus()
		132	mailListView.filter = text
		133	}
		134	}
		135	}
		136
		137	Controls1.SplitView {
		138	Layout.fillHeight: true
		139	Layout.fillWidth: true
		140	Kube.MailListView {
		141	id: mailListView
		142	width: Kube.Units.gridUnit * 18
		143	Layout.minimumWidth: Kube.Units.gridUnit * 10
		144	Layout.fillHeight: true
		145	}
		146	Kube.ConversationView {
		147	id: mailView
		148	Layout.minimumWidth: Kube.Units.gridUnit * 5
		149	Layout.fillWidth: true
		150	Layout.fillHeight: true
		151	activeFocusOnTab: true
		152	model: Kube.MailListModel {
		153	singleMail: mailListView.currentMail
		154	}
65	}	155	}
66	}	156	}
67	}	157	}
68	Kube.MailListView {
69	id: mailListView
70	Layout.fillWidth: true
71	Layout.fillHeight: true
72	}
73	}
74	Kube.ConversationView {
75	id: mailView
76	objectName: "mailView"
77	Layout.fillWidth: true
78	Layout.fillHeight: parent.height
79	activeFocusOnTab: true
80	mail: mailListView.currentMail
81	}	158	}
82	}	159	}
83	}	160	}