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:
Devin Lin
Bhushan Shah
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,117 +32,175 @@ 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 {
|
|
||||||
id: queryField
|
|
||||||
focus: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Rectangle {
|
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
Kirigami.Theme.inherit: false
|
onClicked: window.close();
|
||||||
Kirigami.Theme.colorSet: Kirigami.Theme.View
|
|
||||||
color: Kirigami.Theme.backgroundColor
|
// shadow for search window
|
||||||
PlasmaCore.IconItem {
|
RectangularGlow {
|
||||||
anchors {
|
anchors.topMargin: 1
|
||||||
bottom: parent.bottom
|
anchors.fill: content
|
||||||
right: parent.right
|
cached: true
|
||||||
}
|
glowRadius: 4
|
||||||
width: Math.min(parent.width, parent.height) * 0.8
|
spread: 0.2
|
||||||
height: width
|
color: Qt.rgba(0, 0, 0, 0.15)
|
||||||
opacity: 0.2
|
|
||||||
source: "search"
|
|
||||||
}
|
}
|
||||||
Controls.ScrollView {
|
|
||||||
anchors.fill: parent
|
|
||||||
Milou.ResultsListView {
|
|
||||||
id: listView
|
|
||||||
queryString: queryField.text
|
|
||||||
highlight: null
|
|
||||||
PlasmaCore.ColorScope.colorGroup: PlasmaCore.Theme.NormalColorGroup
|
|
||||||
anchors.rightMargin: 10
|
|
||||||
|
|
||||||
onActivated: {
|
MouseArea {
|
||||||
window.visible = false;
|
id: content
|
||||||
queryField.text = "";
|
// 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
|
||||||
}
|
}
|
||||||
onUpdateQueryString: {
|
}
|
||||||
queryField.text = text
|
|
||||||
queryField.cursorPosition = cursorPosition
|
Rectangle {
|
||||||
}
|
anchors.fill: parent
|
||||||
delegate: Kirigami.BasicListItem {
|
radius: Kirigami.Units.smallSpacing
|
||||||
id: resultDelegate
|
|
||||||
property var additionalActions: typeof actions !== "undefined" ? actions : []
|
Kirigami.Theme.inherit: false
|
||||||
icon: model.decoration
|
Kirigami.Theme.colorSet: Kirigami.Theme.View
|
||||||
label: typeof modelData !== "undefined" ? modelData : model.display
|
color: Kirigami.Theme.backgroundColor
|
||||||
subtitle: model.subtext || ""
|
|
||||||
onClicked: {
|
ColumnLayout {
|
||||||
listView.currentIndex = model.index
|
id: mainColumn
|
||||||
listView.runCurrentIndex()
|
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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Row {
|
|
||||||
id: actionsRow
|
|
||||||
|
|
||||||
Repeater {
|
Controls.ScrollView {
|
||||||
id: actionsRepeater
|
Layout.fillHeight: true
|
||||||
model: resultDelegate.additionalActions
|
Layout.fillWidth: true
|
||||||
|
|
||||||
Controls.ToolButton {
|
Milou.ResultsListView {
|
||||||
width: height
|
id: listView
|
||||||
height: listItem.height
|
queryString: queryField.text
|
||||||
visible: modelData.visible || true
|
highlight: null
|
||||||
enabled: modelData.enabled || true
|
PlasmaCore.ColorScope.colorGroup: PlasmaCore.Theme.NormalColorGroup
|
||||||
|
anchors.rightMargin: 10
|
||||||
|
|
||||||
Accessible.role: Accessible.Button
|
onActivated: {
|
||||||
Accessible.name: modelData.text
|
window.visible = false;
|
||||||
checkable: checked
|
queryField.text = "";
|
||||||
checked: resultDelegate.activeAction === index
|
}
|
||||||
focus: resultDelegate.activeAction === index
|
onUpdateQueryString: {
|
||||||
|
queryField.text = text
|
||||||
|
queryField.cursorPosition = cursorPosition
|
||||||
|
}
|
||||||
|
|
||||||
Kirigami.Icon{
|
delegate: Kirigami.BasicListItem {
|
||||||
anchors.centerIn: parent
|
id: resultDelegate
|
||||||
width: units.iconSizes.small
|
property var additionalActions: typeof actions !== "undefined" ? actions : []
|
||||||
height: units.iconSizes.small
|
icon: model.decoration
|
||||||
// ToolButton cannot cope with QIcon
|
label: typeof modelData !== "undefined" ? modelData : model.display
|
||||||
source: modelData.icon || ""
|
subtitle: model.subtext || ""
|
||||||
active: parent.hovered || parent.checked
|
onClicked: {
|
||||||
|
listView.currentIndex = model.index
|
||||||
|
listView.runCurrentIndex()
|
||||||
}
|
}
|
||||||
|
Row {
|
||||||
|
id: actionsRow
|
||||||
|
|
||||||
onClicked: resultDelegate.ListView.view.runAction(index)
|
Repeater {
|
||||||
|
id: actionsRepeater
|
||||||
|
model: resultDelegate.additionalActions
|
||||||
|
|
||||||
|
Controls.ToolButton {
|
||||||
|
width: height
|
||||||
|
height: listItem.height
|
||||||
|
visible: modelData.visible || true
|
||||||
|
enabled: modelData.enabled || true
|
||||||
|
|
||||||
|
Accessible.role: Accessible.Button
|
||||||
|
Accessible.name: modelData.text
|
||||||
|
checkable: checked
|
||||||
|
checked: resultDelegate.activeAction === index
|
||||||
|
focus: resultDelegate.activeAction === index
|
||||||
|
|
||||||
|
Kirigami.Icon{
|
||||||
|
anchors.centerIn: parent
|
||||||
|
width: units.iconSizes.small
|
||||||
|
height: units.iconSizes.small
|
||||||
|
// ToolButton cannot cope with QIcon
|
||||||
|
source: modelData.icon || ""
|
||||||
|
active: parent.hovered || parent.checked
|
||||||
|
}
|
||||||
|
|
||||||
|
onClicked: resultDelegate.ListView.view.runAction(index)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue