diff options
Diffstat (limited to 'demos/declarative')
9 files changed, 115 insertions, 33 deletions
diff --git a/demos/declarative/flickr/flickr-desktop.qml b/demos/declarative/flickr/flickr-desktop.qml index 4de2202..63b6ea2 100644 --- a/demos/declarative/flickr/flickr-desktop.qml +++ b/demos/declarative/flickr/flickr-desktop.qml @@ -83,15 +83,17 @@ Item { Transition { from: "*"; to: "Details" SequentialAnimation { - ParentAction { } - NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing.type: "InOutQuad" } + ParentAnimation { + NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing.type: "InOutQuad" } + } } }, Transition { from: "Details"; to: "*" SequentialAnimation { - ParentAction { } - NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing.type: "InOutQuad" } + ParentAnimation { + NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing.type: "InOutQuad" } + } PropertyAction { targets: wrapper; properties: "z" } } } diff --git a/demos/declarative/flickr/mobile/GridDelegate.qml b/demos/declarative/flickr/mobile/GridDelegate.qml index 767315c..b54585b 100644 --- a/demos/declarative/flickr/mobile/GridDelegate.qml +++ b/demos/declarative/flickr/mobile/GridDelegate.qml @@ -52,14 +52,16 @@ transitions: [ Transition { from: "Show"; to: "Details" - ParentAction { } - NumberAnimation { properties: "x,y"; duration: 500; easing.type: "InOutQuad" } + ParentAnimation { + NumberAnimation { properties: "x,y"; duration: 500; easing.type: "InOutQuad" } + } }, Transition { from: "Details"; to: "Show" SequentialAnimation { - ParentAction { } - NumberAnimation { properties: "x,y"; duration: 500; easing.type: "InOutQuad" } + ParentAnimation { + NumberAnimation { properties: "x,y"; duration: 500; easing.type: "InOutQuad" } + } PropertyAction { targets: wrapper; properties: "z" } } } diff --git a/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml b/demos/declarative/photoviewer/PhotoViewerCore/AlbumDelegate.qml index fca7232..fb68cfc 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 { } @@ -34,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 } @@ -48,21 +49,16 @@ Component { } } - Tag { - anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom - frontLabel: tag; backLabel: "Delete"; rotation: Math.random() * (2 * 6 + 1) - 6 - flipped: mainWindow.editMode - } - MouseArea { anchors.fill: parent - onClicked: { - if (mainWindow.editMode) { - photosModel.remove(index) - } else { - albumWrapper.state = 'inGrid' - } - } + onClicked: mainWindow.editMode ? photosModel.remove(index) : albumWrapper.state = 'inGrid' + } + + Tag { + 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: [ @@ -77,10 +73,17 @@ Component { PropertyChanges { target: photosGridView; interactive: false } PropertyChanges { target: photosListView; interactive: true } PropertyChanges { target: photosShade; opacity: 1 } - PropertyChanges { target: backButton; y: -backTag.height - 8 } + PropertyChanges { target: backButton; y: -backButton.height - 8 } } ] + 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/Button.qml b/demos/declarative/photoviewer/PhotoViewerCore/Button.qml index fb28314..cdf86af 100644 --- a/demos/declarative/photoviewer/PhotoViewerCore/Button.qml +++ b/demos/declarative/photoviewer/PhotoViewerCore/Button.qml @@ -4,6 +4,7 @@ Item { id: container property alias label: labelText.text + property string tint: "" signal clicked width: labelText.width + 70 ; height: labelText.height + 18 @@ -16,6 +17,11 @@ Item { 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; font.pixelSize: 15; anchors.centerIn: parent; smooth: true } MouseArea { diff --git a/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml b/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml new file mode 100644 index 0000000..5ea79a1 --- /dev/null +++ b/demos/declarative/photoviewer/PhotoViewerCore/EditableButton.qml @@ -0,0 +1,53 @@ +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) + Keys.onEscapePressed: { + textInput.text = labelText.text + container.state = '' + } + } + + 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 + 17 } + 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/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 d32fcd0..bf02fac 100644 --- a/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml +++ b/demos/declarative/photoviewer/PhotoViewerCore/Tag.qml @@ -7,18 +7,23 @@ Flipable { property alias backLabel: backButton.label property int angle: 0 + property int randomAngle: Math.random() * (2 * 6 + 1) - 6 property bool flipped: false signal frontClicked signal backClicked + signal tagChanged(string tag) - front: Button { - id: frontButton; anchors.centerIn: parent; anchors.verticalCenterOffset: -20 + front: EditableButton { + id: frontButton; rotation: flipable.randomAngle + anchors { centerIn: parent; verticalCenterOffset: -20 } onClicked: flipable.frontClicked() + onLabelChanged: flipable.tagChanged(label) } back: Button { - id: backButton; anchors.centerIn: parent; anchors.verticalCenterOffset: -20 + id: backButton; tint: "red"; rotation: flipable.randomAngle + anchors { centerIn: parent; verticalCenterOffset: -20 } onClicked: flipable.backClicked() } 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 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 { |