abstract the text field focus effect

declarativeimports/plasmacomponents/qml/TextArea.qml

@@ -89,32 +89,13 @@ Item {
 
     opacity: enabled ? 1.0 : 0.5
 
-    PlasmaCore.FrameSvgItem {
+    TextFieldFocus {
         id: hover
-
-        anchors {
-            fill: base
-            leftMargin: -margins.left
-            topMargin: -margins.top
-            rightMargin: -margins.right
-            bottomMargin: -margins.bottom
-        }
-        imagePath: "widgets/lineedit"
-        prefix: {
-            if (textEdit.activeFocus)
-                return "focus";
-            else
-                return "hover";
-        }
-
-        opacity: (mouseWatcher.containsMouse||textArea.activeFocus) ? 1 : 0
-        Behavior on opacity {
-            NumberAnimation {
-                duration: 250
-                easing.type: Easing.InOutQuad
-            }
-        }
+        z: 800
+        state: textArea.activeFocus ? "focus" : (mouseWatcher.containsMouse ? "hover" : "hidden")
+        anchors.fill: base
     }
+
     MouseArea {
         id: mouseWatcher
         anchors.fill: hover

declarativeimports/plasmacomponents/qml/TextField.qml

@@ -90,6 +90,13 @@ Item {
     //     disabled text fields
     opacity: enabled ? 1.0 : 0.5
 
+    TextFieldFocus {
+        id: hover
+        z: 800
+        state: textInput.activeFocus ? "focus" : (mouseWatcher.containsMouse ? "hover" : "hidden")
+        anchors.fill: base
+    }
+
     PlasmaCore.FrameSvgItem {
         id: base
 
@@ -99,32 +106,6 @@ Item {
         prefix: "base"
     }
 
-    PlasmaCore.FrameSvgItem {
-        id: hover
-
-        anchors {
-            fill: parent
-            leftMargin: -margins.left
-            topMargin: -margins.top
-            rightMargin: -margins.right
-            bottomMargin: -margins.bottom
-        }
-        imagePath: "widgets/lineedit"
-        prefix: {
-            if (textField.activeFocus) {
-                return "focus"
-            } else {
-                return "hover"
-            }
-        }
-        opacity: (mouseWatcher.containsMouse||textField.activeFocus) ? 1 : 0
-        Behavior on opacity {
-            NumberAnimation {
-                duration: 250
-                easing.type: Easing.InOutQuad
-            }
-        }
-    }
     MouseArea {
         id: mouseWatcher
         anchors.fill: hover

declarativeimports/plasmacomponents/qml/TextFieldFocus.qml

@@ -0,0 +1,79 @@
+/*
+ *   Copyright (C) 2011 by Daker Fernandes Pinheiro <dakerfp@gmail.com>
+ *   Copyright (C) 2011 by Marco Martin <mart@kde.org>
+ *
+ *   This program is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU Library General Public License as
+ *   published by the Free Software Foundation; either version 2, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Library General Public License for more details
+ *
+ *   You should have received a copy of the GNU Library General Public
+ *   License along with this program; if not, write to the
+ *   Free Software Foundation, Inc.,
+ *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import QtQuick 1.0
+import org.kde.plasma.core 0.1 as PlasmaCore
+
+Item {
+    id: main
+    state: parent.state
+
+    PlasmaCore.FrameSvgItem {
+        id: hover
+
+        anchors {
+            fill: parent
+            leftMargin: -margins.left
+            topMargin: -margins.top
+            rightMargin: -margins.right
+            bottomMargin: -margins.bottom
+        }
+        opacity: 0
+        imagePath: "widgets/lineedit"
+        prefix: "hover"
+    }
+
+    states: [
+        State {
+            name: "hover"
+            PropertyChanges {
+                target: hover
+                opacity: 1
+                prefix: "hover"
+            }
+        },
+        State {
+            name: "focus"
+            PropertyChanges {
+                target: hover
+                opacity: 1
+                prefix: "focus"
+            }
+        },
+        State {
+            name: "hidden"
+            PropertyChanges {
+                target: hover
+                opacity: 0
+                prefix: "hover"
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            PropertyAnimation {
+                properties: "opacity"
+                duration: 250
+                easing.type: Easing.OutQuad
+            }
+        }
+    ]
+}

declarativeimports/test/gallery/Gallery.qml

@@ -103,6 +103,7 @@ Rectangle {
 
         flickableItem: page
         animated: true
+        orientation: Qt.Horizontal
         anchors {
             left: parent.left
             right: verticalScrollBar.left