tag input

4 files changed, 132 insertions, 5 deletions

diff --git a/demos/declarative/flickr/content/MediaLineEdit.qml b/demos/declarative/flickr/content/MediaLineEdit.qml
new file mode 100644
index 0000000..28618e8
--- /dev/null
+++ b/demos/declarative/flickr/content/MediaLineEdit.qml
@@ -0,0 +1,110 @@
+Item {
+    id: Container
+
+    property string label
+    property string text
+
+    width: Label.width + Editor.width + 20
+    height: Image.height
+
+    states: [
+        State {
+            name: "Edit"
+            SetProperties {
+                target: Label
+                text: Container.label + ": "
+            }
+            SetProperties {
+                target: Editor
+                cursorVisible: true
+                width: 100
+            }
+            SetProperties {
+                target: Proxy
+                focus: true
+            }
+            RunScript {
+                script:"Editor.selectAll()"
+            }
+        },
+        State {
+            // When returning to default state, typed text is propagated
+            RunScript {
+                script: "Container.text = Editor.text"
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            ParallelAnimation {
+                NumericAnimation { properties: "width"; duration: 500; easing: "easeInOutQuad" }
+                SequentialAnimation {
+                    PauseAnimation { duration: 100 }
+                    SetPropertyAction { properties: "text" }
+                }
+            }
+        }
+    ]
+
+
+    Image {
+        id: Image
+        source: "pics/button.sci"
+        anchors.left: Container.left
+        anchors.right: Container.right
+    }
+
+    Image {
+        id: Pressed
+        source: "pics/button-pressed.sci"
+        opacity: 0
+        anchors.left: Container.left
+        anchors.right: Container.right
+    }
+
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Image
+        onClicked: { Container.state = Container.state=="Edit" ? "" : "Edit" }
+        states: [
+            State {
+                when: MouseRegion.pressed == true
+                SetProperties {
+                    target: Pressed
+                    opacity: 1
+                }
+            }
+        ]
+    }
+
+    Text {
+        id: Label
+        font.bold: true
+        color: "white"
+        anchors.verticalCenter: Container.verticalCenter
+        anchors.left: Container.left
+        anchors.leftMargin: 10
+        text: Container.label + "..."
+    }
+
+    TextEdit {
+        id: Editor
+        font.bold: true
+        color: "white"
+        width: 0
+        clip: true
+        anchors.left: Label.right
+        anchors.verticalCenter: Container.verticalCenter
+    }
+    KeyProxy {
+        id: Proxy
+        anchors.left: Container.left
+        anchors.fill: Container
+        focusable: true
+        targets: [(ReturnKey), (Editor)]
+    }
+    KeyActions {
+        id: ReturnKey
+        return: "Container.state = ''"
+    }
+}
diff --git a/demos/declarative/flickr/content/pics/button-pressed.sci b/demos/declarative/flickr/content/pics/button-pressed.sci
new file mode 100644
index 0000000..d3b16e2
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/button-pressed.sci
@@ -0,0 +1,5 @@
+gridLeft: 8
+gridTop: 4
+gridBottom: 4
+gridRight: 8
+imageFile: button.png
diff --git a/demos/declarative/flickr/content/pics/button.sci b/demos/declarative/flickr/content/pics/button.sci
new file mode 100644
index 0000000..d3b16e2
--- /dev/null
+++ b/demos/declarative/flickr/content/pics/button.sci
@@ -0,0 +1,5 @@
+gridLeft: 8
+gridTop: 4
+gridBottom: 4
+gridRight: 8
+imageFile: button.png
diff --git a/demos/declarative/flickr/flickr.qml b/demos/declarative/flickr/flickr.qml
index 85af8e3..8828651 100644
--- a/demos/declarative/flickr/flickr.qml
+++ b/demos/declarative/flickr/flickr.qml
@@ -8,7 +8,7 @@ Item {
     resources: [
         XmlListModel {
             id: FeedModel
-            property string tags : ""
+            property string tags : TagsEdit.text
             source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2"
             query: "doc($src)/rss/channel/item"
             namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
@@ -89,7 +89,7 @@ Item {
                     SetProperties { target: ImageDetails; y: 20 }
                     SetProperties { target: PhotoGridView; y: "-480" }
                     SetProperties { target: PhotoPathView; y: "-480" }
-                    SetProperties { target: CloseButton; opacity: 0 }
+                    SetProperties { target: ViewModeButton; opacity: 0 }
                     SetProperties { target: FetchButton; opacity: 0 }
                     SetProperties { target: CategoryText; y: "-50" }
                 }
@@ -159,18 +159,25 @@ Item {
         ImageDetails { id: ImageDetails; width: 750; x: 25; y: 500; height: 410 }
 
         MediaButton {
-            id: CloseButton; x: 680; y: 410; text: "View Mode"
+            id: ViewModeButton; x: 680; y: 410; text: "View Mode"
             onClicked: { if (MainWindow.showPathView == true) MainWindow.showPathView = false; else MainWindow.showPathView = true }
         }
 
         MediaButton {
             id: FetchButton
             text: "Update"
-            anchors.right: CloseButton.left; anchors.rightMargin: 5
-            anchors.top: CloseButton.top
+            anchors.right: ViewModeButton.left; anchors.rightMargin: 5
+            anchors.top: ViewModeButton.top
             onClicked: { FeedModel.reload(); }
         }
 
+        MediaLineEdit {
+            id: TagsEdit;
+            label: "Tags"
+            anchors.right: FetchButton.left; anchors.rightMargin: 5
+            anchors.top: ViewModeButton.top
+        }
+
         states: [
             State {
                 name: "PathView"