mirror of
https://invent.kde.org/marcoa/shift-shell.git
synced 2026-07-31 16:54:46 +00:00
Improve search widget
This commit is contained in:
parent
610bf524dd
commit
cf48f79a81
1 changed files with 130 additions and 71 deletions
|
|
@ -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 : []
|
||||||
|
|
@ -151,4 +207,7 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue