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.Window 2.1
import QtQuick.Controls 2.2 as Controls import QtQuick.Controls 2.2 as Controls
import QtQuick.Layouts 1.1 import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.12
import org.kde.plasma.plasmoid 2.0 import org.kde.plasma.plasmoid 2.0
import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents import org.kde.plasma.components 3.0 as PlasmaComponents
@ -31,63 +32,117 @@ Item {
margins: units.gridUnit margins: units.gridUnit
} }
radius: height/2 radius: height/2
height: layout.implicitHeight + units.gridUnit height: layout.implicitHeight + PlasmaCore.Units.largeSpacing
color: Qt.rgba(1,1,1, 0.3) color: Qt.rgba(1,1,1, 0.3)
RowLayout { RowLayout {
id: layout id: layout
anchors { anchors {
left: parent.left left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
margins: background.radius/2 margins: background.radius/2
} }
spacing: PlasmaCore.Units.smallSpacing * 2
Kirigami.Icon { Kirigami.Icon {
source: "search" source: "start-here-symbolic"
Layout.fillHeight: true Layout.preferredHeight: PlasmaCore.Units.gridUnit * 1.5
Layout.preferredWidth: height Layout.preferredWidth: height
color: "white" color: "white"
} }
PlasmaExtras.Heading { PlasmaExtras.Heading {
level: 2 level: 3
text: i18n("Search...") text: i18n("Search...")
} }
Item { Layout.fillWidth: true }
Kirigami.Icon {
source: "search"
Layout.preferredHeight: PlasmaCore.Units.gridUnit * 1.5
Layout.preferredWidth: height
color: "white"
} }
}
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: window.showMaximized() onClicked: window.showMaximized()
} }
Kirigami.AbstractApplicationWindow { Kirigami.AbstractApplicationWindow {
id: window id: window
visible: false visible: false
color: "transparent"
onVisibleChanged: { onVisibleChanged: {
if (visible) { if (visible) {
queryField.forceActiveFocus(); queryField.forceActiveFocus();
} }
} }
header: Controls.ToolBar {
height: Kirigami.Units.gridUnit * 2 MouseArea {
contentItem: Kirigami.SearchField { anchors.fill: parent
id: queryField onClicked: window.close();
focus: true
// 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 { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: Kirigami.Units.smallSpacing
Kirigami.Theme.inherit: false Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.View Kirigami.Theme.colorSet: Kirigami.Theme.View
color: Kirigami.Theme.backgroundColor color: Kirigami.Theme.backgroundColor
PlasmaCore.IconItem {
anchors { ColumnLayout {
bottom: parent.bottom id: mainColumn
right: parent.right
}
width: Math.min(parent.width, parent.height) * 0.8
height: width
opacity: 0.2
source: "search"
}
Controls.ScrollView {
anchors.fill: parent 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 { Milou.ResultsListView {
id: listView id: listView
queryString: queryField.text queryString: queryField.text
@ -103,6 +158,7 @@ Item {
queryField.text = text queryField.text = text
queryField.cursorPosition = cursorPosition queryField.cursorPosition = cursorPosition
} }
delegate: Kirigami.BasicListItem { delegate: Kirigami.BasicListItem {
id: resultDelegate id: resultDelegate
property var additionalActions: typeof actions !== "undefined" ? actions : [] property var additionalActions: typeof actions !== "undefined" ? actions : []
@ -152,3 +208,6 @@ Item {
} }
} }
} }
}
}
}