From 32ab7f1e66bbd7e3b91917d725880356aa76c502 Mon Sep 17 00:00:00 2001 From: Yann Bodson Date: Tue, 23 Mar 2010 15:51:41 +1000 Subject: Usability improvements for photoviewer demo. --- .../photoviewer/PhotoViewerCore/AlbumDelegate.qml | 14 ++++++++++++-- .../photoviewer/PhotoViewerCore/EditableButton.qml | 6 +++++- .../photoviewer/PhotoViewerCore/PhotoDelegate.qml | 6 +++++- demos/declarative/photoviewer/PhotoViewerCore/Tag.qml | 2 +- demos/declarative/photoviewer/photoviewer.qml | 12 +++++++++--- 5 files changed, 32 insertions(+), 8 deletions(-) diff --git a/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml b/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml index 48914d4..fb68cfc 100644 --- a/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml +++ b/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml @@ -33,13 +33,15 @@ Component { } BusyIndicator { + id: busyIndicator anchors { centerIn: parent; verticalCenterOffset: -20 } on: rssModel.status != XmlListModel.Ready } PathView { id: photosPathView; model: visualModel.parts.stack; pathItemCount: 5 - anchors.centerIn: parent; anchors.verticalCenterOffset: -20 + visible: !busyIndicator.visible + anchors.centerIn: parent; anchors.verticalCenterOffset: -30 path: Path { PathAttribute { name: 'z'; value: 9999.0 } PathLine { x: 1; y: 1 } @@ -53,9 +55,10 @@ Component { } Tag { - anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom + anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom; bottomMargin: 10 } frontLabel: tag; backLabel: "Delete"; flipped: mainWindow.editMode onTagChanged: rssModel.tags = tag + onBackClicked: if (mainWindow.editMode) photosModel.remove(index); } states: [ @@ -74,6 +77,13 @@ Component { } ] + GridView.onAdd: NumberAnimation { target: albumWrapper; properties: "scale"; from: 0.0; to: 1.0 } + GridView.onRemove: SequentialAnimation { + PropertyAction { target: albumWrapper.GridView; property: "delayRemove"; value: true } + NumberAnimation { target: albumWrapper; property: "scale"; from: 1.0; to: 0.0 } + PropertyAction { target: albumWrapper.GridView; property: "delayRemove"; value: false } + } + transitions: [ Transition { from: '*'; to: 'inGrid' diff --git a/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml b/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml index 1a529ea..5ea79a1 100644 --- a/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml +++ b/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml @@ -28,6 +28,10 @@ Item { TextInput { id: textInput; text: label; font.pixelSize: 15; anchors.centerIn: parent; smooth: true; visible: false Keys.onReturnPressed: container.labelChanged(textInput.text) + Keys.onEscapePressed: { + textInput.text = labelText.text + container.state = '' + } } MouseArea { @@ -37,7 +41,7 @@ Item { states: State { name: "editMode" - PropertyChanges { target: container; width: textInput.width + 70; height: textInput.height + 18 } + PropertyChanges { target: container; width: textInput.width + 70; height: textInput.height + 17 } PropertyChanges { target: textInput; visible: true; focus: true } PropertyChanges { target: labelText; visible: false } } diff --git a/demos/declarative/photoviewer/PhotoViewerCore/PhotoDelegate.qml b/demos/declarative/photoviewer/PhotoViewerCore/PhotoDelegate.qml index ab36122..107aff1 100644 --- a/demos/declarative/photoviewer/PhotoViewerCore/PhotoDelegate.qml +++ b/demos/declarative/photoviewer/PhotoViewerCore/PhotoDelegate.qml @@ -33,8 +33,12 @@ Package { property int h: Script.getHeight(content) property double s: Script.calculateScale(w, h, photoWrapper.width) - color: '#878787'; anchors.centerIn: parent; smooth: true; border.color: 'white'; border.width: 3 + color: 'white'; anchors.centerIn: parent; smooth: true width: w * s; height: h * s; visible: originalImage.status != Image.Ready + Rectangle { + color: "#878787"; smooth: true + anchors { fill: parent; topMargin: 3; bottomMargin: 3; leftMargin: 3; rightMargin: 3 } + } } Rectangle { id: border; color: 'white'; anchors.centerIn: parent; smooth: true diff --git a/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml b/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml index d1e26e0..bf02fac 100644 --- a/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml +++ b/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml @@ -22,7 +22,7 @@ Flipable { } back: Button { - id: backButton; tint: "red" + id: backButton; tint: "red"; rotation: flipable.randomAngle anchors { centerIn: parent; verticalCenterOffset: -20 } onClicked: flipable.backClicked() } diff --git a/demos/declarative/photoviewer/photoviewer.qml b/demos/declarative/photoviewer/photoviewer.qml index 5e4be4c..8feee02 100644 --- a/demos/declarative/photoviewer/photoviewer.qml +++ b/demos/declarative/photoviewer/photoviewer.qml @@ -13,8 +13,8 @@ Rectangle { ListModel { id: photosModel ListElement { tag: "Flowers" } - ListElement { tag: "Savanna" } - ListElement { tag: "Central Park" } + ListElement { tag: "Wildlife" } + ListElement { tag: "Prague" } } VisualDataModel { id: albumVisualModel; model: photosModel; delegate: AlbumDelegate {} } @@ -26,14 +26,20 @@ Rectangle { 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 + anchors.horizontalCenter: parent.horizontalCenter onClicked: { + mainWindow.editMode = false photosModel.append( { tag: "" } ) albumView.positionViewAtIndex(albumView.count - 1, GridView.Contain) } } + Button { + id: deleteButton; label: "Delete"; rotation: -2; + onClicked: mainWindow.editMode = !mainWindow.editMode + anchors.horizontalCenter: parent.horizontalCenter + } } Rectangle { -- cgit v0.12