diff options
Diffstat (limited to 'demos/declarative/flickr/mobile')
-rw-r--r-- | demos/declarative/flickr/mobile/Button.qml | 27 | ||||
-rw-r--r-- | demos/declarative/flickr/mobile/GridDelegate.qml | 52 | ||||
-rw-r--r-- | demos/declarative/flickr/mobile/ImageDetails.qml | 74 | ||||
-rw-r--r-- | demos/declarative/flickr/mobile/ListDelegate.qml | 13 | ||||
-rw-r--r-- | demos/declarative/flickr/mobile/TitleBar.qml | 38 | ||||
-rw-r--r-- | demos/declarative/flickr/mobile/ToolBar.qml | 14 | ||||
-rw-r--r-- | demos/declarative/flickr/mobile/images/lineedit.sci | 10 | ||||
-rw-r--r-- | demos/declarative/flickr/mobile/images/titlebar.sci | 10 | ||||
-rw-r--r-- | demos/declarative/flickr/mobile/images/toolbutton.sci | 10 |
9 files changed, 122 insertions, 126 deletions
diff --git a/demos/declarative/flickr/mobile/Button.qml b/demos/declarative/flickr/mobile/Button.qml index 6887240..a4a96d4 100644 --- a/demos/declarative/flickr/mobile/Button.qml +++ b/demos/declarative/flickr/mobile/Button.qml @@ -1,41 +1,38 @@ import Qt 4.6 Item { - id: Container + id: container signal clicked property string text BorderImage { - id: ButtonImage + id: buttonImage source: "images/toolbutton.sci" - width: Container.width; height: Container.height + width: container.width; height: container.height } BorderImage { - id: Pressed + id: pressed opacity: 0 source: "images/toolbutton.sci" - width: Container.width; height: Container.height + width: container.width; height: container.height } MouseRegion { - id: MyMouseRegion - anchors.fill: ButtonImage - onClicked: { Container.clicked(); } + id: mouseRegion + anchors.fill: buttonImage + onClicked: { container.clicked(); } } Text { color: "white" - anchors.centerIn: ButtonImage; font.bold: true - text: Container.text; style: "Raised"; styleColor: "black" + anchors.centerIn: buttonImage; font.bold: true + text: container.text; style: "Raised"; styleColor: "black" } states: [ State { name: "Pressed" - when: MyMouseRegion.pressed == true - PropertyChanges { - target: Pressed - opacity: 1 - } + when: mouseRegion.pressed == true + PropertyChanges { target: pressed; opacity: 1 } } ] } diff --git a/demos/declarative/flickr/mobile/GridDelegate.qml b/demos/declarative/flickr/mobile/GridDelegate.qml index 19369b2..9b9fb24 100644 --- a/demos/declarative/flickr/mobile/GridDelegate.qml +++ b/demos/declarative/flickr/mobile/GridDelegate.qml @@ -1,22 +1,22 @@ import Qt 4.6 Component { - id: PhotoDelegate + id: photoDelegate Item { - id: Wrapper; width: 79; height: 79 + id: wrapper; width: 79; height: 79 Script { function photoClicked() { - ImageDetails.photoTitle = title; - ImageDetails.photoTags = tags; - ImageDetails.photoWidth = photoWidth; - ImageDetails.photoHeight = photoHeight; - ImageDetails.photoType = photoType; - ImageDetails.photoAuthor = photoAuthor; - ImageDetails.photoDate = photoDate; - ImageDetails.photoUrl = url; - ImageDetails.rating = 0; - ScaleMe.state = "Details"; + imageDetails.photoTitle = title; + imageDetails.photoTags = tags; + imageDetails.photoWidth = photoWidth; + imageDetails.photoHeight = photoHeight; + imageDetails.photoType = photoType; + imageDetails.photoAuthor = photoAuthor; + imageDetails.photoDate = photoDate; + imageDetails.photoUrl = url; + imageDetails.rating = 0; + scaleMe.state = "Details"; } } @@ -24,31 +24,31 @@ anchors.centerIn: parent scale: 0.0 scale: Behavior { NumberAnimation { easing: "easeInOutQuad"} } - id: ScaleMe + id: scaleMe - Rectangle { height: 79; width: 79; id: BlackRect; anchors.centerIn: parent; color: "black"; smooth: true } + Rectangle { height: 79; width: 79; id: blackRect; anchors.centerIn: parent; color: "black"; smooth: true } Rectangle { - id: WhiteRect; width: 77; height: 77; anchors.centerIn: parent; color: "#dddddd"; smooth: true - Image { id: Thumb; source: imagePath; x: 1; y: 1; smooth: true} + id: whiteRect; width: 77; height: 77; anchors.centerIn: parent; color: "#dddddd"; smooth: true + Image { id: thumb; source: imagePath; x: 1; y: 1; smooth: true} Image { source: "images/gloss.png" } } Connection { - sender: ToolBar; signal: "button2Clicked()" - script: if (ScaleMe.state == 'Details' ) ScaleMe.state = 'Show'; + sender: toolBar; signal: "button2Clicked()" + script: if (scaleMe.state == 'Details' ) scaleMe.state = 'Show'; } states: [ State { - name: "Show"; when: Thumb.status == 1 - PropertyChanges { target: ScaleMe; scale: 1 } + name: "Show"; when: thumb.status == 1 + PropertyChanges { target: scaleMe; scale: 1 } }, State { name: "Details" - PropertyChanges { target: ScaleMe; scale: 1 } - ParentChange { target: Wrapper; parent: ImageDetails.frontContainer } - PropertyChanges { target: Wrapper; x: 20; y: 60; z: 1000 } - PropertyChanges { target: Background; state: "DetailedView" } + PropertyChanges { target: scaleMe; scale: 1 } + ParentChange { target: wrapper; parent: imageDetails.frontContainer } + PropertyChanges { target: wrapper; x: 20; y: 60; z: 1000 } + PropertyChanges { target: background; state: "DetailedView" } } ] transitions: [ @@ -62,11 +62,11 @@ SequentialAnimation { ParentAction { } NumberAnimation { properties: "x,y"; duration: 500; easing: "easeInOutQuad" } - PropertyAction { target: Wrapper; properties: "z" } + PropertyAction { target: wrapper; properties: "z" } } } ] } - MouseRegion { anchors.fill: Wrapper; onClicked: { photoClicked() } } + MouseRegion { anchors.fill: wrapper; onClicked: { photoClicked() } } } } diff --git a/demos/declarative/flickr/mobile/ImageDetails.qml b/demos/declarative/flickr/mobile/ImageDetails.qml index c55ab50..26052b9 100644 --- a/demos/declarative/flickr/mobile/ImageDetails.qml +++ b/demos/declarative/flickr/mobile/ImageDetails.qml @@ -2,9 +2,9 @@ import Qt 4.6 import "../common" as Common Flipable { - id: Container + id: container - property var frontContainer: ContainerFront + property var frontContainer: containerFront property string photoTitle: "" property string photoTags: "" property int photoWidth @@ -19,13 +19,13 @@ Flipable { signal closed transform: Rotation { - id: ItemRotation - origin.x: Container.width / 2; + id: itemRotation + origin.x: container.width / 2; axis.y: 1; axis.z: 0 } front: Item { - id: ContainerFront; anchors.fill: Container + id: containerFront; anchors.fill: container Rectangle { anchors.fill: parent @@ -39,43 +39,43 @@ Flipable { right: parent.right; rightMargin: 20 top: parent.top; topMargin: 180 } - Text { id: TitleText; font.bold: true; color: "white"; elide: "ElideRight"; text: Container.photoTitle } - Text { id: Size; color: "white"; elide: "ElideRight"; text: "<b>Size:</b> " + Container.photoWidth + 'x' + Container.photoHeight } - Text { id: Type; color: "white"; elide: "ElideRight"; text: "<b>Type:</b> " + Container.photoType } - Text { id: Author; color: "white"; elide: "ElideRight"; text: "<b>Author:</b> " + Container.photoAuthor } - Text { id: Date; color: "white"; elide: "ElideRight"; text: "<b>Published:</b> " + Container.photoDate } - Text { id: TagsLabel; color: "white"; elide: "ElideRight"; text: Container.photoTags == "" ? "" : "<b>Tags:</b> " } - Text { id: Tags; color: "white"; elide: "ElideRight"; elide: "ElideRight"; text: Container.photoTags } + Text { font.bold: true; color: "white"; elide: "ElideRight"; text: container.photoTitle } + Text { color: "white"; elide: "ElideRight"; text: "<b>Size:</b> " + container.photoWidth + 'x' + container.photoHeight } + Text { color: "white"; elide: "ElideRight"; text: "<b>Type:</b> " + container.photoType } + Text { color: "white"; elide: "ElideRight"; text: "<b>Author:</b> " + container.photoAuthor } + Text { color: "white"; elide: "ElideRight"; text: "<b>Published:</b> " + container.photoDate } + Text { color: "white"; elide: "ElideRight"; text: container.photoTags == "" ? "" : "<b>Tags:</b> " } + Text { color: "white"; elide: "ElideRight"; elide: "ElideRight"; text: container.photoTags } } } back: Item { - anchors.fill: Container + anchors.fill: container Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4 } - Common.Progress { anchors.centerIn: parent; width: 200; height: 18; progress: BigImage.progress; visible: BigImage.status!=1 } + Common.Progress { anchors.centerIn: parent; width: 200; height: 18; progress: bigImage.progress; visible: bigImage.status!=1 } Flickable { - id: Flick; anchors.fill: parent; clip: true - viewportWidth: ImageContainer.width; viewportHeight: ImageContainer.height + id: flickable; anchors.fill: parent; clip: true + viewportWidth: imageContainer.width; viewportHeight: imageContainer.height Item { - id: ImageContainer - width: Math.max(BigImage.width * BigImage.scale, Flick.width); - height: Math.max(BigImage.height * BigImage.scale, Flick.height); + id: imageContainer + width: Math.max(bigImage.width * bigImage.scale, flickable.width); + height: Math.max(bigImage.height * bigImage.scale, flickable.height); Image { - id: BigImage; source: Container.photoUrl; scale: Slider.value + id: bigImage; source: container.photoUrl; scale: slider.value // Center image if it is smaller than the flickable area. - x: ImageContainer.width > width*scale ? (ImageContainer.width - width*scale) / 2 : 0 - y: ImageContainer.height > height*scale ? (ImageContainer.height - height*scale) / 2 : 0 - smooth: !Flick.moving + x: imageContainer.width > width*scale ? (imageContainer.width - width*scale) / 2 : 0 + y: imageContainer.height > height*scale ? (imageContainer.height - height*scale) / 2 : 0 + smooth: !flickable.moving onStatusChanged : { // Default scale shows the entire image. if (status == 1 && width != 0) { - Slider.minimum = Math.min(Flick.width / width, Flick.height / height); - prevScale = Math.min(Slider.minimum, 1); - Slider.value = prevScale; + slider.minimum = Math.min(flickable.width / width, flickable.height / height); + prevScale = Math.min(slider.minimum, 1); + slider.value = prevScale; } } } @@ -84,25 +84,25 @@ Flipable { Text { text: "Image Unavailable" - visible: BigImage.status == 'Error' + visible: bigImage.status == 'Error' anchors.centerIn: parent; color: "white"; font.bold: true } Common.Slider { - id: Slider; visible: { BigImage.status == 1 && maximum > minimum } + id: slider; visible: { bigImage.status == 1 && maximum > minimum } anchors { bottom: parent.bottom; bottomMargin: 65 left: parent.left; leftMargin: 25 right: parent.right; rightMargin: 25 } onValueChanged: { - if (BigImage.width * value > Flick.width) { - var xoff = (Flick.width/2 + Flick.viewportX) * value / prevScale; - Flick.viewportX = xoff - Flick.width/2; + if (bigImage.width * value > flickable.width) { + var xoff = (flickable.width/2 + flickable.viewportX) * value / prevScale; + flickable.viewportX = xoff - flickable.width/2; } - if (BigImage.height * value > Flick.height) { - var yoff = (Flick.height/2 + Flick.viewportY) * value / prevScale; - Flick.viewportY = yoff - Flick.height/2; + if (bigImage.height * value > flickable.height) { + var yoff = (flickable.height/2 + flickable.viewportY) * value / prevScale; + flickable.viewportY = yoff - flickable.height/2; } prevScale = value; } @@ -111,14 +111,14 @@ Flipable { states: State { name: "Back" - PropertyChanges { target: ItemRotation; angle: 180 } + PropertyChanges { target: itemRotation; angle: 180 } } transitions: Transition { SequentialAnimation { - PropertyAction { target: BigImage; property: "smooth"; value: false } + PropertyAction { target: bigImage; property: "smooth"; value: false } NumberAnimation { easing: "easeInOutQuad"; properties: "angle"; duration: 500 } - PropertyAction { target: BigImage; property: "smooth"; value: !Flick.moving } + PropertyAction { target: bigImage; property: "smooth"; value: !flickable.moving } } } } diff --git a/demos/declarative/flickr/mobile/ListDelegate.qml b/demos/declarative/flickr/mobile/ListDelegate.qml index fa6f8ea..090e91a 100644 --- a/demos/declarative/flickr/mobile/ListDelegate.qml +++ b/demos/declarative/flickr/mobile/ListDelegate.qml @@ -1,20 +1,19 @@ import Qt 4.6 Component { - id: ListDelegate Item { - id: Wrapper; width: Wrapper.ListView.view.width; height: 86 + id: wrapper; width: wrapper.ListView.view.width; height: 86 Item { - id: MoveMe - Rectangle { color: "black"; opacity: index % 2 ? 0.2 : 0.4; height: 84; width: Wrapper.width; y: 1 } + id: moveMe + Rectangle { color: "black"; opacity: index % 2 ? 0.2 : 0.4; height: 84; width: wrapper.width; y: 1 } Rectangle { - id: WhiteRect; x: 6; y: 4; width: 77; height: 77; color: "white"; smooth: true + x: 6; y: 4; width: 77; height: 77; color: "white"; smooth: true - Image { id: Thumb; source: imagePath; x: 1; y: 1 } + Image { source: imagePath; x: 1; y: 1 } Image { source: "images/gloss.png" } } Column { - x: 92; width: Wrapper.ListView.view.width - 95; y: 15; spacing: 2 + x: 92; width: wrapper.ListView.view.width - 95; y: 15; spacing: 2 Text { text: title; color: "white"; width: parent.width; font.bold: true; elide: "ElideRight"; style: "Raised"; styleColor: "black" } Text { text: photoAuthor; color: "white"; width: parent.width; elide: "ElideLeft"; color: "#cccccc"; style: "Raised"; styleColor: "black" } Text { text: photoDate; color: "white"; width: parent.width; elide: "ElideRight"; color: "#cccccc"; style: "Raised"; styleColor: "black" } diff --git a/demos/declarative/flickr/mobile/TitleBar.qml b/demos/declarative/flickr/mobile/TitleBar.qml index 13484a2..108faf7 100644 --- a/demos/declarative/flickr/mobile/TitleBar.qml +++ b/demos/declarative/flickr/mobile/TitleBar.qml @@ -1,50 +1,50 @@ import Qt 4.6 Item { - id: TitleBar + id: titleBar property string untaggedString: "Uploads from everyone" property string taggedString: "Recent uploads tagged " BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } Item { - id: Container + id: container width: (parent.width * 2) - 55 ; height: parent.height Script { function accept() { - TitleBar.state = "" - Background.state = "" - RssModel.tags = Editor.text + titleBar.state = "" + background.state = "" + rssModel.tags = editor.text } } Text { - id: CategoryText + id: categoryText anchors { - left: parent.left; right: TagButton.left; leftMargin: 10; rightMargin: 10 + left: parent.left; right: tagButton.left; leftMargin: 10; rightMargin: 10 verticalCenter: parent.verticalCenter } elide: "ElideLeft" - text: (RssModel.tags=="" ? untaggedString : taggedString + RssModel.tags) + text: (rssModel.tags=="" ? untaggedString : taggedString + rssModel.tags) font.bold: true; color: "White"; style: "Raised"; styleColor: "Black" } Button { - id: TagButton; x: TitleBar.width - 50; width: 45; height: 32; text: "..." - onClicked: if (TitleBar.state == "Tags") accept(); else TitleBar.state = "Tags" + id: tagButton; x: titleBar.width - 50; width: 45; height: 32; text: "..." + onClicked: if (titleBar.state == "Tags") accept(); else titleBar.state = "Tags" anchors.verticalCenter: parent.verticalCenter } Item { - id: LineEdit + id: lineEdit y: 4; height: parent.height - 9 - anchors { left: TagButton.right; leftMargin: 5; right: parent.right; rightMargin: 5 } + anchors { left: tagButton.right; leftMargin: 5; right: parent.right; rightMargin: 5 } BorderImage { source: "images/lineedit.sci"; anchors.fill: parent } TextInput { - id: Editor + id: editor anchors { left: parent.left; right: parent.right; leftMargin: 10; rightMargin: 10 verticalCenter: parent.verticalCenter @@ -53,21 +53,21 @@ Item { color: "#151515"; selectionColor: "Green" } - Keys.forwardTo: [ (ReturnKey), (Editor)] + Keys.forwardTo: [ (returnKey), (editor)] Item { - id: ReturnKey + id: returnKey Keys.onReturnPressed: accept() - Keys.onEscapePressed: TitleBar.state = "" + Keys.onEscapePressed: titleBar.state = "" } } } states: State { name: "Tags" - PropertyChanges { target: Container; x: -TagButton.x + 5 } - PropertyChanges { target: TagButton; text: "OK" } - PropertyChanges { target: LineEdit; focus: true } + PropertyChanges { target: container; x: -tagButton.x + 5 } + PropertyChanges { target: tagButton; text: "OK" } + PropertyChanges { target: lineEdit; focus: true } } transitions: Transition { diff --git a/demos/declarative/flickr/mobile/ToolBar.qml b/demos/declarative/flickr/mobile/ToolBar.qml index cfdc8fe..f96c767 100644 --- a/demos/declarative/flickr/mobile/ToolBar.qml +++ b/demos/declarative/flickr/mobile/ToolBar.qml @@ -1,24 +1,24 @@ import Qt 4.6 Item { - id: Toolbar + id: toolbar - property alias button1Label: Button1.text - property alias button2Label: Button2.text + property alias button1Label: button1.text + property alias button2Label: button2.text signal button1Clicked signal button2Clicked BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } Button { - id: Button1 + id: button1 anchors.left: parent.left; anchors.leftMargin: 5; y: 3; width: 140; height: 32 - onClicked: Toolbar.button1Clicked() + onClicked: toolbar.button1Clicked() } Button { - id: Button2 + id: button2 anchors.right: parent.right; anchors.rightMargin: 5; y: 3; width: 140; height: 32 - onClicked: Toolbar.button2Clicked() + onClicked: toolbar.button2Clicked() } } diff --git a/demos/declarative/flickr/mobile/images/lineedit.sci b/demos/declarative/flickr/mobile/images/lineedit.sci index 7c5ec6c..054bff7 100644 --- a/demos/declarative/flickr/mobile/images/lineedit.sci +++ b/demos/declarative/flickr/mobile/images/lineedit.sci @@ -1,5 +1,5 @@ -gridLeft: 10 -gridTop: 10 -gridBottom: 10 -gridRight: 10 -imageFile: lineedit.png +border.left: 10 +border.top: 10 +border.bottom: 10 +border.right: 10 +source: lineedit.png diff --git a/demos/declarative/flickr/mobile/images/titlebar.sci b/demos/declarative/flickr/mobile/images/titlebar.sci index 50444e1..0418d94 100644 --- a/demos/declarative/flickr/mobile/images/titlebar.sci +++ b/demos/declarative/flickr/mobile/images/titlebar.sci @@ -1,5 +1,5 @@ -gridLeft: 10 -gridTop: 12 -gridBottom: 12 -gridRight: 10 -imageFile: titlebar.png +border.left: 10 +border.top: 12 +border.bottom: 12 +border.right: 10 +source: titlebar.png diff --git a/demos/declarative/flickr/mobile/images/toolbutton.sci b/demos/declarative/flickr/mobile/images/toolbutton.sci index a0a885f..9e4f965 100644 --- a/demos/declarative/flickr/mobile/images/toolbutton.sci +++ b/demos/declarative/flickr/mobile/images/toolbutton.sci @@ -1,5 +1,5 @@ -gridLeft: 15 -gridTop: 4 -gridBottom: 4 -gridRight: 15 -imageFile: toolbutton.png +border.left: 15 +border.top: 4 +border.bottom: 4 +border.right: 15 +source: toolbutton.png |