diff --git a/applets/kickoff/package/contents/ui/Header.qml b/applets/kickoff/package/contents/ui/Header.qml --- a/applets/kickoff/package/contents/ui/Header.qml +++ b/applets/kickoff/package/contents/ui/Header.qml @@ -19,6 +19,7 @@ import QtQuick 2.0 import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.components 2.0 as PlasmaComponents +import org.kde.plasma.components 3.0 as PlasmaComponents3 import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.kcoreaddons 1.0 as KCoreAddons import org.kde.kquickcontrolsaddons 2.0 @@ -35,22 +36,52 @@ id: kuser } - state: (query !== "") ? "query" : "hint" + state: "name" Timer { id: labelTimer interval: 8000 + running: true 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") { + if (header.state == "name") { header.state = "info"; + } else { + header.state = "name"; } } } + states: [ + State { + name: "name" + PropertyChanges { + target: nameLabel + opacity: 1 + y: 0 + } + PropertyChanges { + target: infoLabel + opacity: 0 + y: -1 + } + }, + State { + name: "info" + PropertyChanges { + target: nameLabel + y: -1 + opacity: 0 + } + PropertyChanges { + target: infoLabel + y: 0 + opacity: 0.4 + } + } + ] // states + + Image { id: faceIcon source: kuser.faceIconUrl @@ -103,145 +134,110 @@ 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; } } + Behavior on y { NumberAnimation { duration: units.longDuration; easing.type: Easing.InOutQuad; } } anchors { left: faceIcon.right - top: faceIcon.top - right: parent.right + bottom: queryField.top leftMargin: units.gridUnit - rightMargin: units.gridUnit } } - Item { - id: searchWidget + PlasmaExtras.Heading { + id: infoLabel + + level: 5 + font.letterSpacing: -0.4 + 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; } } + Behavior on y { 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 + leftMargin: 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: { + labelTimer.stop() + header.state = "info" } + onExited: { + labelTimer.start() + header.state = "name" + } + } - PlasmaComponents.Label { - id: hintLabel - anchors { - left: parent.left - right: parent.right + // Use the PC3 TextField because the PC2 version has placeholder text color issues + // (https://bugs.kde.org/show_bug.cgi?id=396813) + // FIXME: use the PC2 version once 396813 is fixed so we can avoid the PC3 import + PlasmaComponents3.TextField { + id: queryField + + placeholderText: i18n("Search...") + + onTextChanged: { + if (root.state != "Search") { + root.previousState = root.state; + root.state = "Search"; + } + if (text == "") { + root.state = root.previousState; } - 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; } } } + anchors { + left: faceIcon.right + bottom: faceIcon.bottom + right: parent.right + leftMargin: units.gridUnit + rightMargin: units.gridUnit + } - 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() + // Implement our own clear button because the PC3 version doesn't have one + // (https://bugs.kde.org/show_bug.cgi?id=396828) + // FIXME: Replace this Row and everything in it with "clearButtonShown: true" + // once we can use the PC2 version again after 396813 is fixed + Row { + anchors { + right: queryField.right + rightMargin: 6 + verticalCenter: queryField.verticalCenter } - - PlasmaComponents.TextField { - id: queryField - anchors.fill: parent - clearButtonShown: true + PlasmaCore.IconItem { + //ltr confusingly refers to the direction of the arrow in the icon, not the text direction which it should be used in + source: LayoutMirroring.enabled ? "edit-clear-locationbar-ltr" : "edit-clear-locationbar-rtl" + height: Math.max(queryField.height * 0.8, units.iconSizes.small) + width: height + opacity: (queryField.length > 0 && queryField.enabled) ? 1 : 0 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"; + Behavior on opacity { + NumberAnimation { + duration: units.longDuration + easing.type: Easing.InOutQuad } - if (text == "") { - root.state = root.previousState; - header.state = "info"; - } else { - header.state = "query"; + } + MouseArea { + anchors.fill: parent + onClicked: { + queryField.text = "" + queryField.forceActiveFocus() } } } } } - - 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 - } - } - ] // states }