Improve search widget

This commit is contained in:
Devin Lin 2021-04-02 00:45:22 -04:00 committed by Bhushan Shah
parent 610bf524dd
commit cf48f79a81

View file

@ -9,6 +9,7 @@ import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick.Controls 2.2 as Controls
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.12
import org.kde.plasma.plasmoid 2.0
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
@ -31,63 +32,117 @@ Item {
margins: units.gridUnit
}
radius: height/2
height: layout.implicitHeight + units.gridUnit
height: layout.implicitHeight + PlasmaCore.Units.largeSpacing
color: Qt.rgba(1,1,1, 0.3)
RowLayout {
id: layout
anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
margins: background.radius/2
}
spacing: PlasmaCore.Units.smallSpacing * 2
Kirigami.Icon {
source: "search"
Layout.fillHeight: true
source: "start-here-symbolic"
Layout.preferredHeight: PlasmaCore.Units.gridUnit * 1.5
Layout.preferredWidth: height
color: "white"
}
PlasmaExtras.Heading {
level: 2
level: 3
text: i18n("Search...")
}
Item { Layout.fillWidth: true }
Kirigami.Icon {
source: "search"
Layout.preferredHeight: PlasmaCore.Units.gridUnit * 1.5
Layout.preferredWidth: height
color: "white"
}
}
MouseArea {
anchors.fill: parent
onClicked: window.showMaximized()
}
Kirigami.AbstractApplicationWindow {
id: window
visible: false
color: "transparent"
onVisibleChanged: {
if (visible) {
queryField.forceActiveFocus();
}
}
header: Controls.ToolBar {
height: Kirigami.Units.gridUnit * 2
contentItem: Kirigami.SearchField {
id: queryField
focus: true
MouseArea {
anchors.fill: parent
onClicked: window.close();
// shadow for search window
RectangularGlow {
anchors.topMargin: 1
anchors.fill: content
cached: true
glowRadius: 4
spread: 0.2
color: Qt.rgba(0, 0, 0, 0.15)
}
MouseArea {
id: content
// capture presses on the rectangle so that it doesn't close the window
anchors.top: parent.top
anchors.topMargin: Kirigami.Units.largeSpacing * 2
anchors.horizontalCenter: parent.horizontalCenter
implicitWidth: Math.min(Kirigami.Units.gridUnit * 30, parent.width - Kirigami.Units.largeSpacing * 4)
implicitHeight: Math.min(mainColumn.implicitHeight, parent.height - Kirigami.Units.largeSpacing * 4)
Behavior on implicitHeight {
NumberAnimation {
duration: Kirigami.Units.longDuration
easing: Easing.InOutQuad
}
}
Rectangle {
anchors.fill: parent
radius: Kirigami.Units.smallSpacing
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.View
color: Kirigami.Theme.backgroundColor
PlasmaCore.IconItem {
anchors {
bottom: parent.bottom
right: parent.right
}
width: Math.min(parent.width, parent.height) * 0.8
height: width
opacity: 0.2
source: "search"
}
Controls.ScrollView {
ColumnLayout {
id: mainColumn
anchors.fill: parent
anchors.margins: Kirigami.Units.smallSpacing
RowLayout {
Layout.bottomMargin: Kirigami.Units.smallSpacing / 2
Item {
implicitHeight: queryField.height
implicitWidth: height
Kirigami.Icon {
anchors.fill: parent
anchors.margins: Math.round(Kirigami.Units.smallSpacing * 1.5)
source: "start-here-symbolic"
}
}
Kirigami.SearchField {
id: queryField
focus: true
Layout.fillWidth: true
}
}
Controls.ScrollView {
Layout.fillHeight: true
Layout.fillWidth: true
Milou.ResultsListView {
id: listView
queryString: queryField.text
@ -103,6 +158,7 @@ Item {
queryField.text = text
queryField.cursorPosition = cursorPosition
}
delegate: Kirigami.BasicListItem {
id: resultDelegate
property var additionalActions: typeof actions !== "undefined" ? actions : []
@ -152,3 +208,6 @@ Item {
}
}
}
}
}
}