Members of the KDE Community are recommended to subscribe to the kde-community mailing list at https://mail.kde.org/mailman/listinfo/kde-community to allow them to participate in important discussions and receive other important announcements

Commit 47fe8aa3 authored by Nate Graham's avatar Nate Graham 🔩

[Kickoff] Make the search field always look like a search field

Summary:
This patch makes Kickoff's search field always look like a search field, instead of only after you start typing. Functionality remains the same (with the exception of the hidden info display, which moves to underneath the user name)

BUG: 397581
BUG: 398276
BUG: 398278
FIXED-IN: 5.15.0

Test Plan:
{F6211118}

All functionality still works:
{F6211072}

Reviewers: #plasma, #vdg, davidedmundson, abetts

Reviewed By: #plasma, #vdg, abetts

Subscribers: cfeck, acrouthamel, fabianr, huftis, rooty, sharvey, romangg, broulik, safaalfulaij, oysteins, filipf, abetts, davidedmundson, michaeltunnell, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D15011
parent 5960f6cc
......@@ -35,21 +35,33 @@ Item {
id: kuser
}
state: (query !== "") ? "query" : "hint"
Timer {
id: labelTimer
interval: 8000
repeat: true
running: (header.state === "hint" || header.state === "info") && plasmoid.expanded && (header.query === "")
onTriggered: {
if (header.state == "info") {
header.state = "hint";
} else if (header.state == "hint") {
header.state = "info";
state: "name"
states: [
State {
name: "name"
PropertyChanges {
target: nameLabel
opacity: 1
}
PropertyChanges {
target: infoLabel
opacity: 0
}
},
State {
name: "info"
PropertyChanges {
target: nameLabel
opacity: 0
}
PropertyChanges {
target: infoLabel
opacity: 0.4
}
}
}
] // states
Image {
id: faceIcon
......@@ -103,145 +115,74 @@ Item {
text: kuser.fullName
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignTop
height: paintedHeight
verticalAlignment: Text.AlignBottom
Behavior on opacity { NumberAnimation { duration: units.longDuration; easing.type: Easing.InOutQuad; } }
anchors {
left: faceIcon.right
top: faceIcon.top
bottom: queryField.top
right: parent.right
leftMargin: units.gridUnit
rightMargin: units.gridUnit
}
}
Item {
id: searchWidget
PlasmaExtras.Heading {
id: infoLabel
level: 5
opacity: 0
text: kuser.os != "" ? i18n("%2@%3 (%1)", kuser.os, kuser.loginName, kuser.host) : i18n("%1@%2", kuser.loginName, kuser.host)
elide: Text.ElideRight
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignBottom
property int animationDuration: units.longDuration
property real normalOpacity: .6
property int yOffset: height / 2
Behavior on opacity { NumberAnimation { duration: units.longDuration; easing.type: Easing.InOutQuad; } }
height: infoLabel.height
anchors {
left: nameLabel.left
top: nameLabel.bottom
right: nameLabel.right
left: faceIcon.right
bottom: queryField.top
right: parent.right
leftMargin: units.gridUnit
rightMargin: units.gridUnit
}
}
PlasmaComponents.Label {
id: infoLabel
anchors {
left: parent.left
right: parent.right
}
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignBottom
text: kuser.os != "" ? i18n("%2@%3 (%1)", kuser.os, kuser.loginName, kuser.host) : i18n("%1@%2", kuser.loginName, kuser.host)
elide: Text.ElideRight
Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }
Behavior on y { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }
// Show the info instead of the user's name when hovering over it
MouseArea {
anchors.fill: nameLabel
hoverEnabled: true
onEntered: {
header.state = "info"
}
PlasmaComponents.Label {
id: hintLabel
anchors {
left: parent.left
right: parent.right
}
verticalAlignment: Text.AlignBottom
text: i18nc("Type is a verb here, not a noun", "Type to search...")
Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }
Behavior on y { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } }
onExited: {
header.state = "name"
}
}
PlasmaComponents.TextField {
id: queryField
MouseArea {
anchors.fill: parent
cursorShape: header.state === "hint" ? Qt.PointingHandCursor : Qt.ArrowCursor
acceptedButtons: Qt.LeftButton
enabled: header.state === "hint"
onClicked: {
root.previousState = "Normal"
root.state = "Search"
header.state = "query"
queryField.forceActiveFocus()
}
placeholderText: i18n("Search...")
clearButtonShown: true
PlasmaComponents.TextField {
id: queryField
anchors.fill: parent
clearButtonShown: true
visible: opacity > 0
placeholderText: i18nc("Type is a verb here, not a noun", "Type to search...")
Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration / 4 } }
onTextChanged: {
if (root.state != "Search") {
root.previousState = root.state;
root.state = "Search";
}
if (text == "") {
root.state = root.previousState;
header.state = "info";
} else {
header.state = "query";
}
}
onTextChanged: {
if (root.state != "Search") {
root.previousState = root.state;
root.state = "Search";
}
if (text == "") {
root.state = root.previousState;
}
}
}
states: [
State {
name: "info"
PropertyChanges {
target: infoLabel
opacity: searchWidget.normalOpacity
y: 0
}
PropertyChanges {
target: hintLabel
opacity: 0
y: searchWidget.yOffset
}
PropertyChanges {
target: queryField
opacity: 0
}
},
State {
name: "hint"
PropertyChanges {
target: infoLabel
y: -searchWidget.yOffset
opacity: 0
}
PropertyChanges {
target: hintLabel
y: 0
opacity: searchWidget.normalOpacity
}
PropertyChanges {
target: queryField
opacity: 0
}
},
State {
name: "query"
PropertyChanges {
target: infoLabel
opacity: 0
}
PropertyChanges {
target: hintLabel
opacity: 0
}
PropertyChanges {
target: queryField
opacity: 1
}
anchors {
left: faceIcon.right
bottom: faceIcon.bottom
right: parent.right
leftMargin: units.gridUnit
rightMargin: units.gridUnit
}
] // states
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment