search/qml/View_new.qml

0001 /*
0002  * Copyright (C) 2018 Michael Bohlender, <bohlender@kolabsys.com>
0003  *
0004  * This program is free software; you can redistribute it and/or modify
0005  * it under the terms of the GNU General Public License as published by
0006  * the Free Software Foundation; either version 2 of the License, or
0007  * (at your option) any later version.
0008  *
0009  * This program is distributed in the hope that it will be useful,
0010  * but WITHOUT ANY WARRANTY; without even the implied warranty of
0011  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
0012  * GNU General Public License for more details.
0013  *
0014  * You should have received a copy of the GNU General Public License along
0015  * with this program; if not, write to the Free Software Foundation, Inc.,
0016  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
0017  */
0018
0019 import QtQuick 2.7
0020 import QtQuick.Controls 2.2
0021 import QtQuick.Layouts 1.2
0022
0023 import org.kube.framework 1.0 as Kube
0024
0025 StackView {
0026     id: stack
0027
0028     anchors.fill: parent
0029
0030     property var searchTerm: ""
0031
0032     initialItem: searchBar
0033
0034     Component {
0035         id: searchBar
0036
0037         FocusScope {
0038
0039             function search() {
0040                 stack.searchTerm = searchField.text
0041                 stack.push(searchResults)
0042             }
0043
0044             Rectangle {
0045                 anchors.fill: parent
0046                 color: Kube.Colors.backgroundColor
0047
0048                 Row {
0049                     anchors.centerIn: parent
0050
0051                     spacing: Kube.Units.smallSpacing
0052
0053                     Kube.TextField {
0054                         id: searchField
0055                         width: Kube.Units.gridUnit * 30
0056                         focus: true
0057                         text: stack.searchTerm
0058
0059                         Keys.onEscapePressed: stack.searchTerm = ""
0060                         onAccepted: search()
0061                     }
0062
0063                     Kube.PositiveButton {
0064                         text: qsTr("Search")
0065                         enabled: searchField.text != ""
0066
0067                         onClicked: {
0068                             search()
0069                         }
0070                     }
0071                 }
0072             }
0073         }
0074     }
0075
0076     Component {
0077         id: searchResults
0078
0079         ColumnLayout {
0080             anchors.fill: parent
0081
0082             spacing: 0
0083
0084             Rectangle {
0085                 id: toolbar
0086
0087                 width: parent.width
0088                 height: Kube.Units.gridUnit + Kube.Units.largeSpacing
0089
0090                 color: Kube.Colors.backgroundColor
0091
0092                 Kube.IconButton {
0093                     anchors {
0094                         verticalCenter: parent.verticalCenter
0095                         left: parent.left
0096                         leftMargin: Kube.Units.smallSpacing
0097                     }
0098                     iconName: Kube.Icons.goBack
0099                     onClicked: {
0100                         stack.searchTerm = ""
0101                         stack.pop()
0102                     }
0103                 }
0104
0105                 Kube.TextField {
0106                     id: searchBar
0107
0108                     anchors.centerIn: parent
0109
0110                     width: Kube.Units.gridUnit * 30
0111
0112                     text: stack.searchTerm
0113                     placeholderText: qsTr("Search...")
0114                 }
0115             }
0116
0117             Rectangle {
0118                 id: resultsArea
0119
0120                 Layout.fillHeight: true
0121                 Layout.fillWidth: true
0122
0123                 color:  Kube.Colors.viewBackgroundColor
0124
0125                 RowLayout {
0126                     anchors.fill: parent
0127
0128                     Rectangle {
0129                         width: Kube.Units.gridUnit * 10
0130                         Layout.fillHeight: true
0131                         color: Kube.Colors.buttonColor
0132                     }
0133
0134                     Kube.ListView {
0135                         Layout.fillHeight: true
0136                         Layout.fillWidth: true
0137
0138                         model: 10
0139
0140                         delegate: Item {
0141                             width: parent.width
0142                             height: Kube.Units.gridUnit * 5
0143
0144                             Rectangle {
0145                                 anchors.centerIn: parent
0146
0147                                 height: parent.height - Kube.Units.largeSpacing
0148                                 width: parent.width - Kube.Units.largeSpacing * 2
0149
0150                                 border.width: 1
0151                                 border.color: Kube.Colors.buttonColor
0152
0153                                 Rectangle {
0154                                     height: parent.height
0155                                     width: height
0156                                     color: Kube.Colors.buttonColor
0157                                 }
0158
0159                                 Kube.AbstractButton {
0160                                     anchors.fill: parent
0161
0162                                     color: "transparent"
0163
0164                                     onClicked: {
0165                                         stack.push(viewResult)
0166                                     }
0167                                 }
0168                             }
0169                         }
0170                     }
0171                 }
0172
0173             }
0174         }
0175     }
0176
0177     Component {
0178         id: viewResult
0179
0180         ColumnLayout {
0181             anchors.fill: parent
0182
0183             spacing: 0
0184
0185             Rectangle {
0186                 id: toolbar
0187
0188                 width: parent.width
0189                 height: Kube.Units.gridUnit + Kube.Units.largeSpacing
0190
0191                 color: Kube.Colors.backgroundColor
0192
0193                 Kube.IconButton {
0194                     anchors {
0195                         verticalCenter: parent.verticalCenter
0196                         left: parent.left
0197                         leftMargin: Kube.Units.smallSpacing
0198                     }
0199                     iconName: Kube.Icons.goBack
0200                     onClicked: stack.pop()
0201                 }
0202
0203                 Row {
0204                     anchors.centerIn: parent
0205
0206                     spacing: Kube.Units.largeSpacing
0207
0208                     Kube.Button {
0209                         text: "prev"
0210                     }
0211
0212                     Kube.Button {
0213                         text: "next"
0214                     }
0215                 }
0216             }
0217
0218             Rectangle {
0219                 Layout.fillWidth: true
0220                 Layout.fillHeight: true
0221             }
0222         }
0223     }
0224 }