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 @@ -35,33 +35,7 @@ id: kuser } - 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 - + state: (query !== "") ? "query" : "hint" Image { id: faceIcon @@ -115,74 +89,153 @@ text: kuser.fullName elide: Text.ElideRight horizontalAlignment: Text.AlignLeft - verticalAlignment: Text.AlignBottom - - Behavior on opacity { NumberAnimation { duration: units.longDuration; easing.type: Easing.InOutQuad; } } + verticalAlignment: Text.AlignTop + height: paintedHeight anchors { left: faceIcon.right - bottom: queryField.top + top: faceIcon.top right: parent.right leftMargin: units.gridUnit rightMargin: units.gridUnit } } + + 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.AlignVCenter + Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } } + anchors { + top: faceIcon.top + left: faceIcon.right + 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 - - Behavior on opacity { NumberAnimation { duration: units.longDuration; easing.type: Easing.InOutQuad; } } + property int animationDuration: units.longDuration + property real normalOpacity: .6 + property int yOffset: height / 2 + height: infoLabel.height anchors { - left: faceIcon.right - bottom: queryField.top - right: parent.right - leftMargin: units.gridUnit - rightMargin: units.gridUnit - } - } - - // Show the info instead of the user's name when hovering over it - MouseArea { - anchors.fill: nameLabel - hoverEnabled: true - onEntered: { - header.state = "info" + left: nameLabel.left + top: nameLabel.bottom + right: nameLabel.right } - onExited: { - header.state = "name" + PlasmaComponents.TextField { + id: hintLabel + anchors { + left: parent.left + right: parent.right + top: nameLabel.bottom + bottom: faceIcon.bottom + } + text: i18nc("Type is a verb here, not a noun", "Search...") + activeFocusOnTab: false + opacity: .6 + Behavior on opacity { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } } + Behavior on y { NumberAnimation { duration: searchWidget.animationDuration; easing.type: Easing.InOutQuad; } } } - } - - PlasmaComponents.TextField { - id: queryField - placeholderText: i18n("Search...") - clearButtonShown: true - onTextChanged: { - if (root.state != "Search") { - root.previousState = root.state; - root.state = "Search"; - } - if (text == "") { - root.state = root.previousState; + MouseArea { + anchors.fill: parent + cursorShape: header.state === "hint" ? Qt.PointingHandCursor : Qt.ArrowCursor + acceptedButtons: Qt.LeftButton + enabled: header.state === "hint" + onExited: { + if (queryField.opacity != 0) { + header.state = "query"; + } else { + header.state = "Normal"; + } + } + + PlasmaComponents.TextField { + id: queryField + anchors.fill: parent + clearButtonShown: true + visible: opacity > 0 + placeholderText: i18nc("Type is a verb here, not a noun", "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 = "hint"; + } else { + header.state = "query"; + } + } + } } + } - anchors { - left: faceIcon.right - bottom: faceIcon.bottom - right: parent.right - leftMargin: units.gridUnit - rightMargin: units.gridUnit + states: [ + State { + name: "info" + PropertyChanges { + target: infoLabel + opacity: 1 + } + PropertyChanges { + target: nameLabel + opacity: 0 + } + PropertyChanges { + target: queryField + opacity: 0 + } + }, + State { + name: "hint" + PropertyChanges { + target: infoLabel + opacity: 0 + } + PropertyChanges { + target: nameLabel + opacity: 1 + } + 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 }