Editable tag in photoviewer demo.

4 files changed, 61 insertions, 15 deletions

diff --git a/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml b/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml
index eb6d1c0..48914d4 100644
--- a/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml
+++ b/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml
@@ -25,8 +25,7 @@ Component {
 
         Item {
             Package.name: 'album'
-            id: albumWrapper
-            width: 210; height: 220
+            id: albumWrapper; width: 210; height: 220
 
             VisualDataModel {
                 id: visualModel; delegate: PhotoDelegate { }
@@ -48,20 +47,15 @@ Component {
                 }
             }
 
+            MouseArea {
+                anchors.fill: parent
+                onClicked: mainWindow.editMode ? photosModel.remove(index) : albumWrapper.state = 'inGrid'
+            }
+
             Tag {
                 anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom
                 frontLabel: tag; backLabel: "Delete"; flipped: mainWindow.editMode
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    if (mainWindow.editMode) {
-                        photosModel.remove(index)
-                    } else {
-                        albumWrapper.state = 'inGrid'
-                    }
-                }
+                onTagChanged: rssModel.tags = tag
             }
 
             states: [
diff --git a/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml b/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml
new file mode 100644
index 0000000..1a529ea
--- /dev/null
+++ b/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml
@@ -0,0 +1,49 @@
+import Qt 4.6
+
+Item {
+    id: container
+
+    property string label
+    property string tint: ""
+    signal clicked
+    signal labelChanged(string label)
+
+    width: labelText.width + 70 ; height: labelText.height + 18
+
+    BorderImage {
+        anchors { fill: container; leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
+        source: 'images/box-shadow.png'; smooth: true
+        border.left: 10; border.top: 10; border.right: 10; border.bottom: 10
+    }
+
+    Image { anchors.fill: parent; source: "images/cardboard.png"; smooth: true }
+
+    Rectangle {
+        anchors.fill: container; color: container.tint; visible: container.tint != ""
+        opacity: 0.1; smooth: true
+    }
+
+    Text { id: labelText; text: label; font.pixelSize: 15; anchors.centerIn: parent; smooth: true }
+
+    TextInput {
+        id: textInput; text: label; font.pixelSize: 15; anchors.centerIn: parent; smooth: true; visible: false
+        Keys.onReturnPressed: container.labelChanged(textInput.text)
+    }
+
+    MouseArea {
+        anchors { fill: parent; leftMargin: -20; topMargin: -20; rightMargin: -20; bottomMargin: -20 }
+        onClicked: container.state = "editMode"
+    }
+
+    states: State {
+        name: "editMode"
+        PropertyChanges { target: container; width: textInput.width + 70; height: textInput.height + 18 }
+        PropertyChanges { target: textInput; visible: true; focus: true }
+        PropertyChanges { target: labelText; visible: false }
+    }
+
+    onLabelChanged: {
+        labelText.text = label
+        container.state = ''
+    }
+}
diff --git a/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml b/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml
index 438bd7c..d1e26e0 100644
--- a/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml
+++ b/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml
@@ -12,11 +12,13 @@ Flipable {
 
     signal frontClicked
     signal backClicked
+    signal tagChanged(string tag)
 
-    front: Button {
+    front: EditableButton {
         id: frontButton; rotation: flipable.randomAngle
         anchors { centerIn: parent; verticalCenterOffset: -20 }
         onClicked: flipable.frontClicked()
+        onLabelChanged: flipable.tagChanged(label)
     }
 
     back: Button {
diff --git a/demos/declarative/photoviewer/PhotoViewerCore/qmldir b/demos/declarative/photoviewer/PhotoViewerCore/qmldir
index f94a560..d3c247f 100644
--- a/demos/declarative/photoviewer/PhotoViewerCore/qmldir
+++ b/demos/declarative/photoviewer/PhotoViewerCore/qmldir
@@ -2,6 +2,7 @@ AlbumDelegate AlbumDelegate.qml
 PhotoDelegate PhotoDelegate.qml
 ProgressBar ProgressBar.qml
 RssModel RssModel.qml
+BusyIndicator BusyIndicator.qml
+EditableButton EditableButton.qml
 Button Button.qml
 Tag Tag.qml
-BusyIndicator BusyIndicator.qml