Add/delete albums in photoviewer.

5 files changed, 95 insertions, 24 deletions

diff --git a/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml b/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml
index d71834e..fca7232 100644
--- a/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml
+++ b/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml
@@ -39,9 +39,8 @@ Component {
             }
 
             PathView {
-                id: photosPathView; model: visualModel.parts.stack
+                id: photosPathView; model: visualModel.parts.stack; pathItemCount: 5
                 anchors.centerIn: parent; anchors.verticalCenterOffset: -20
-                pathItemCount: 5
                 path: Path {
                     PathAttribute { name: 'z'; value: 9999.0 }
                     PathLine { x: 1; y: 1 }
@@ -51,24 +50,34 @@ Component {
 
             Tag {
                 anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom
-                label: tag; rotation: Math.random() * (2 * 6 + 1) - 6
+                frontLabel: tag; backLabel: "Delete"; rotation: Math.random() * (2 * 6 + 1) - 6
+                flipped: mainWindow.editMode
             }
 
-            MouseArea { anchors.fill: parent; onClicked: albumWrapper.state = 'inGrid' }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    if (mainWindow.editMode) {
+                        photosModel.remove(index)
+                    } else {
+                        albumWrapper.state = 'inGrid'
+                    }
+                }
+            }
 
             states: [
             State {
                 name: 'inGrid'
                 PropertyChanges { target: photosGridView; interactive: true }
                 PropertyChanges { target: albumsShade; opacity: 1 }
-                PropertyChanges{ target: backTag; onClicked: albumWrapper.state = ''; y: 6 }
+                PropertyChanges { target: backButton; onClicked: albumWrapper.state = ''; y: 6 }
             },
             State {
                 name: 'fullscreen'; extend: 'inGrid'
                 PropertyChanges { target: photosGridView; interactive: false }
                 PropertyChanges { target: photosListView; interactive: true }
                 PropertyChanges { target: photosShade; opacity: 1 }
-                PropertyChanges{ target: backTag; y: -backTag.height - 8 }
+                PropertyChanges { target: backButton; y: -backTag.height - 8 }
             }
             ]
 
@@ -78,7 +87,7 @@ Component {
                 SequentialAnimation {
                     NumberAnimation { properties: 'opacity'; duration: 250 }
                     PauseAnimation { duration: 350 }
-                    NumberAnimation { target: backTag; properties: "y"; duration: 200; easing.type: "OutQuad" }
+                    NumberAnimation { target: backButton; properties: "y"; duration: 200; easing.type: "OutQuad" }
                 }
             },
             Transition {
diff --git a/demos/declarative/photoviewer/PhotoViewerCore/Button.qml b/demos/declarative/photoviewer/PhotoViewerCore/Button.qml
new file mode 100644
index 0000000..fb28314
--- /dev/null
+++ b/demos/declarative/photoviewer/PhotoViewerCore/Button.qml
@@ -0,0 +1,25 @@
+import Qt 4.6
+
+Item {
+    id: container
+
+    property alias label: labelText.text
+    signal clicked
+
+    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 }
+
+    Text { id: labelText; font.pixelSize: 15; anchors.centerIn: parent; smooth: true }
+
+    MouseArea {
+        anchors { fill: parent; leftMargin: -20; topMargin: -20; rightMargin: -20; bottomMargin: -20 }
+        onClicked: container.clicked()
+    }
+}
diff --git a/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml b/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml
index ee11d05..d32fcd0 100644
--- a/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml
+++ b/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml
@@ -1,22 +1,45 @@
 import Qt 4.6
 
-Item {
-    id: container
+Flipable {
+    id: flipable
 
-    property alias label: labelText.text
-    signal clicked
+    property alias frontLabel: frontButton.label
+    property alias backLabel: backButton.label
 
-    width: labelText.width + 70 ; height: labelText.height + 18
+    property int angle: 0
+    property bool flipped: false
 
-    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
+    signal frontClicked
+    signal backClicked
+
+    front: Button {
+        id: frontButton; anchors.centerIn: parent; anchors.verticalCenterOffset: -20
+        onClicked: flipable.frontClicked()
+    }
+
+    back: Button {
+        id: backButton; anchors.centerIn: parent; anchors.verticalCenterOffset: -20
+        onClicked: flipable.backClicked()
+    }
+
+    transform: Rotation {
+        origin.x: flipable.width / 2; origin.y: flipable.height / 2
+        axis.x: 0; axis.y: 1; axis.z: 0
+        angle: flipable.angle
+    }
+
+    states: State {
+        name: "back"; when: flipable.flipped
+        PropertyChanges { target: flipable; angle: 180 }
     }
-    Image { anchors.fill: parent; source: "images/cardboard.png"; smooth: true }
-    Text { id: labelText; font.pixelSize: 15; anchors.centerIn: parent; smooth: true }
-    MouseArea {
-        anchors { fill: parent; leftMargin: -20; topMargin: -20; rightMargin: -20; bottomMargin: -20 }
-        onClicked: container.clicked()
+
+    transitions: Transition {
+        ParallelAnimation {
+            NumberAnimation { properties: "angle"; duration: 400 }
+            SequentialAnimation {
+                NumberAnimation { target: flipable; property: "scale"; to: 0.8; duration: 200 }
+                NumberAnimation { target: flipable; property: "scale"; to: 1.0; duration: 200 }
+            }
+        }
     }
 }
diff --git a/demos/declarative/photoviewer/PhotoViewerCore/qmldir b/demos/declarative/photoviewer/PhotoViewerCore/qmldir
index 4821faa..f94a560 100644
--- a/demos/declarative/photoviewer/PhotoViewerCore/qmldir
+++ b/demos/declarative/photoviewer/PhotoViewerCore/qmldir
@@ -2,5 +2,6 @@ AlbumDelegate AlbumDelegate.qml
 PhotoDelegate PhotoDelegate.qml
 ProgressBar ProgressBar.qml
 RssModel RssModel.qml
+Button Button.qml
 Tag Tag.qml
 BusyIndicator BusyIndicator.qml
diff --git a/demos/declarative/photoviewer/photoviewer.qml b/demos/declarative/photoviewer/photoviewer.qml
index 5ce02f3..02134ac 100644
--- a/demos/declarative/photoviewer/photoviewer.qml
+++ b/demos/declarative/photoviewer/photoviewer.qml
@@ -6,6 +6,7 @@ Rectangle {
 
     property real downloadProgress: 0
     property bool imageLoading: false
+    property bool editMode: false
 
     width: 800; height: 480; color: "#d5d6d8"
 
@@ -21,8 +22,20 @@ Rectangle {
     VisualDataModel { id: albumVisualModel; model: photosModel; delegate: AlbumDelegate {} }
 
     GridView {
-        width: parent.width; height: parent.height; cellWidth: 210; cellHeight: 220; model: albumVisualModel.parts.album
-        visible: albumsShade.opacity != 1.0
+        id: albumView; width: parent.width; height: parent.height; cellWidth: 210; cellHeight: 220
+        model: albumVisualModel.parts.album; visible: albumsShade.opacity != 1.0
+    }
+
+    Column {
+        spacing: 20; anchors { bottom: parent.bottom; right: parent.right; rightMargin: 20; bottomMargin: 20 }
+        Button { id: deleteButton; label: "Edit"; rotation: -2; onClicked: mainWindow.editMode = !mainWindow.editMode }
+        Button {
+            id: newButton; label: "New"; rotation: 3
+            onClicked: {
+                photosModel.append( { tag: "" } )
+                albumView.positionViewAtIndex(albumView.count - 1, GridView.Contain)
+            }
+        }
     }
 
     Rectangle {
@@ -32,7 +45,7 @@ Rectangle {
 
     ListView { anchors.fill: parent; model: albumVisualModel.parts.browser; interactive: false }
 
-    Tag { id: backTag; label: "Back"; rotation: 3; x: parent.width - backTag.width - 6; y: -backTag.height - 8 }
+    Button { id: backButton; label: "Back"; rotation: 3; x: parent.width - backButton.width - 6; y: -backButton.height - 8 }
 
     Rectangle { id: photosShade; color: 'black'; width: parent.width; height: parent.height; opacity: 0; visible: opacity != 0.0 }