summaryrefslogtreecommitdiffstats
path: root/demos/declarative/flickr/mobile
diff options
context:
space:
mode:
Diffstat (limited to 'demos/declarative/flickr/mobile')
-rw-r--r--demos/declarative/flickr/mobile/Button.qml27
-rw-r--r--demos/declarative/flickr/mobile/GridDelegate.qml52
-rw-r--r--demos/declarative/flickr/mobile/ImageDetails.qml74
-rw-r--r--demos/declarative/flickr/mobile/ListDelegate.qml13
-rw-r--r--demos/declarative/flickr/mobile/TitleBar.qml38
-rw-r--r--demos/declarative/flickr/mobile/ToolBar.qml14
-rw-r--r--demos/declarative/flickr/mobile/images/lineedit.sci10
-rw-r--r--demos/declarative/flickr/mobile/images/titlebar.sci10
-rw-r--r--demos/declarative/flickr/mobile/images/toolbutton.sci10
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