diff options
Diffstat (limited to 'demos/declarative/phonebrowser/content')
15 files changed, 392 insertions, 0 deletions
diff --git a/demos/declarative/phonebrowser/content/LikeOMeter.qml b/demos/declarative/phonebrowser/content/LikeOMeter.qml new file mode 100644 index 0000000..31b8195 --- /dev/null +++ b/demos/declarative/phonebrowser/content/LikeOMeter.qml @@ -0,0 +1,34 @@ +Item { + id: Container + properties: Property { + name: "rating" + value: 2 + } + HorizontalLayout { + Star { + rating: 0 + onClicked: { Container.rating = rating } + on: Container.rating >= 0 + } + Star { + rating: 1 + onClicked: { Container.rating = rating } + on: Container.rating >= 1 + } + Star { + rating: 2 + onClicked: { Container.rating = rating } + on: Container.rating >= 2 + } + Star { + rating: 3 + onClicked: { Container.rating = rating } + on: Container.rating >= 3 + } + Star { + rating: 4 + onClicked: { Container.rating = rating } + on: Container.rating >= 4 + } + } +} diff --git a/demos/declarative/phonebrowser/content/MediaButton.qml b/demos/declarative/phonebrowser/content/MediaButton.qml new file mode 100644 index 0000000..bb2510a --- /dev/null +++ b/demos/declarative/phonebrowser/content/MediaButton.qml @@ -0,0 +1,40 @@ +Item { + id: Container + signals: Signal { + name: "clicked" + } + properties: Property { + name: "text" + } + Image { + id: Image + source: "pics/button.png" + } + Image { + id: Pressed + source: "pics/button-pressed.png" + opacity: 0 + } + MouseRegion { + id: MouseRegion + anchors.fill: Image + onClicked: { Container.clicked.emit(); } + } + Text { + font.bold: true + color: "white" + anchors.centeredIn: Image + text: Container.text + } + width: Image.width + states: [ + State { + name: "Pressed" + when: MouseRegion.pressed == true + SetProperties { + target: Pressed + opacity: 1 + } + } + ] +} diff --git a/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml new file mode 100644 index 0000000..da475b1 --- /dev/null +++ b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml @@ -0,0 +1,113 @@ +Flipable { + id: Container + + properties: [ + Property { name: "frontContainer"; value: ContainerFront }, + Property { name: "flickableArea"; value: Flickable }, + Property { name: "phoneTitle"; value: "N/A" }, + Property { name: "phoneDescription"; value: "..." }, + Property { name: "phoneSpecifications"; value: "" }, + Property { name: "phoneUrl"; value: "" }, + Property { name: "rating"; value: 2 } + ] + + signals: Signal { name: "closed" } + + axis: Axis { startX: Container.width / 2; endX: Container.width / 2; endY: 1 } + + front: Item { + id: ContainerFront; anchors.fill: Container + + Rect { + anchors.fill: parent + color: "black"; opacity: 0.4 + pen.color: "white"; pen.width: 2 + } + + MediaButton { + id: BackButton; x: 630; y: 400; text: "Back" + onClicked: { Container.closed.emit() } + } + + MediaButton { + id: MoreButton; x: 530; y: 400; text: "More..." + onClicked: { Container.state='Back' } + } + + Text { + id: TitleText + style: Raised; styleColor: "black" + color: "white" + x: 420; y: 30; width: parent.width + text: Container.phoneTitle; font.size: 22 + } + + LikeOMeter { x: 420; y: 75; rating: Container.rating } + + Flickable { + id: Flickable + x: 420; width: 280; height: 260; y: 120; clip: true + viewportWidth: 280; viewportHeight: DescriptionText.height + + Text { + id: DescriptionText + wrap: true + color: "white" + width: parent.width + text: Container.phoneDescription + font.size: 12 + } + } + + Text { + color: "white"; width: 300; x: 50; y: 300 + text: Container.phoneSpecifications + } + + ScrollBar { + id: ScrollBar + x: 720; y: Flickable.y; width: 7 + height: Flickable.height; opacity: 0 + flickableArea: Flickable; clip: true + } + } + + back: Item { + anchors.fill: Container + + Rect { + anchors.fill: parent + color: "black" + opacity: 0.4 + pen.color: "white" + pen.width: 2 + } + + Flickable { + width: Container.width-20 + height: Container.height-20 + x: 10; y: 10; clip: true + viewportWidth: UrlView.width + viewportHeight: UrlView.height + + WebView { id: UrlView; url: Container.phoneUrl; idealWidth: parent.width } + } + + MediaButton { + id: BackButton2; x: 630; y: 400; text: "Back"; onClicked: { Container.state='' } + } + } + + states: [ + State { + name: "Back" + SetProperty { target: Container; property: "rotation"; value: 180 } + } + ] + + transitions: [ + Transition { + NumericAnimation { easing: "easeInOutQuad"; properties: "rotation"; duration: 500 } + } + ] +} diff --git a/demos/declarative/phonebrowser/content/PhonesPathView.qml b/demos/declarative/phonebrowser/content/PhonesPathView.qml new file mode 100644 index 0000000..acef6c3 --- /dev/null +++ b/demos/declarative/phonebrowser/content/PhonesPathView.qml @@ -0,0 +1,120 @@ +PathView { + id: Container; pathItemCount: 6 + + path: Path { + startX: -50; startY: 40; + + PathAttribute { name: "scale"; value: 0.2 } + + PathCubic { + x: 400; y: 220 + control1X: 140; control1Y: 40 + control2X: 210; control2Y: 220 + } + + PathAttribute { name: "scale"; value: 1.2 } + PathAttribute { name: "z"; value: 1 } + + PathCubic { + x: 850; y: 40 + control2X: 660; control2Y: 40 + control1X: 590; control1Y: 220 + } + + PathAttribute { name: "scale"; value: 0.2 } + } + + delegate: Component { + id: PhoneDelegate + + Item { + id: Wrapper; width: 320; height: 200 + scale: Wrapper.PathView.scale; z: Wrapper.PathView.z + + Connection { + sender: PhoneInfoContainer; signal: "closed()" + script: { if (Wrapper.state == 'Details') Wrapper.state = '' } + } + + Script { + function phoneClicked() { + if (MainWindow.minimized == true) { + MainWindow.minimized = false; + } else { + PhoneInfoContainer.phoneTitle = title; + PhoneInfoContainer.flickableArea.yPosition = 0; + PhoneInfoContainer.phoneDescription = description; + PhoneInfoContainer.phoneSpecifications = specifications; + PhoneInfoContainer.phoneUrl = url; + PhoneInfoContainer.rating = rating; + Wrapper.state = "Details"; + } + } + } + + Rect { + id: Dvd; anchors.fill: parent; color: "white" + + Item { + x: (parent.width-width)/2 + y: (parent.height-height)/2 + width: Thumb.width*Thumb.scale + height: Thumb.height*Thumb.scale + + Image { + id: Thumb; source: thumb + scale: 0.95*Math.min(Dvd.height/height,Dvd.width/width) + } + } + + Image { source: "pics/shadow-right.png"; x: Dvd.width; height: Dvd.height } + Image { source: "pics/shadow-bottom.png"; y: Dvd.height; width: Dvd.width } + + Image { + id: Corner + source: "pics/shadow-corner.png" + x: Dvd.width; y: Dvd.height + } + } + + MouseRegion { anchors.fill: Wrapper; onClicked: { phoneClicked() } } + + states: [ + State { + name: "Details" + ParentChange { target: Wrapper; parent: PhoneInfoContainer.frontContainer } + SetProperties { target: Wrapper; x: 50; y: 60; scale: 1 } + SetProperties { target: PhoneInfoContainer; y: 20 } + SetProperties { target: Container; y: "-480" } + SetProperties { target: CloseButton; opacity: 0 } + SetProperties { target: CategoryText; y: "-50" } + }, + + State { + name: "Stacked" + when: MainWindow.minimized == true + ParentChange { target: Wrapper; parent: Stack } + SetProperties {target: Wrapper; x: 0; y: 0; scale: 0.2 } + SetProperties { target: CloseButton; opacity: 0 } + SetProperties { target: CategoryText; y: "-50" } + } + ] + + transitions: [ + Transition { + fromState: ""; toState: "Details,Stacked" + ParentChangeAction { } + NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" } + }, + + Transition { + fromState: "Details,Stacked" + toState: "" + ParentChangeAction { } + NumericAnimation { properties: "x,y,scale,opacity"; duration: 500; easing: "easeInOutQuad" } + } + ] + + } + } +} diff --git a/demos/declarative/phonebrowser/content/ScrollBar.qml b/demos/declarative/phonebrowser/content/ScrollBar.qml new file mode 100644 index 0000000..a0f2925 --- /dev/null +++ b/demos/declarative/phonebrowser/content/ScrollBar.qml @@ -0,0 +1,38 @@ +Item { + id: Container + properties: Property { + name: "flickableArea" + } + Rect { + radius: 5 + color: "black" + opacity: 0.3 + pen.color: "white" + pen.width: 2 + x: 0 + y: flickableArea.pageYPosition * Container.height + width: parent.width + height: flickableArea.pageHeight * Container.height + } + states: [ + State { + name: "show" + when: flickableArea.moving + SetProperties { + target: Container + opacity: 1 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "*" + NumericAnimation { + target: Container + properties: "opacity" + duration: 400 + } + } + ] +} diff --git a/demos/declarative/phonebrowser/content/Star.qml b/demos/declarative/phonebrowser/content/Star.qml new file mode 100644 index 0000000..ebcd78b --- /dev/null +++ b/demos/declarative/phonebrowser/content/Star.qml @@ -0,0 +1,47 @@ +Item { + id: Container + width: 24 + height: 24 + + properties: [ + Property { name: "rating" }, + Property { name: "on" } + ] + + signals: Signal { + name: "clicked" + } + Image { + id: Image + source: "pics/ghns_star.png" + x: 6 + y: 7 + opacity: 0.4 + scale: 0.5 + } + MouseRegion { + anchors.fill: Container + onClicked: { Container.clicked.emit() } + } + states: [ + State { + name: "on" + when: Container.on == true + SetProperties { + target: Image + opacity: 1 + scale: 1 + x: 1 + y: 0 + } + } + ] + transitions: [ + Transition { + NumericAnimation { + properties: "opacity,scale,x,y" + easing: "easeOutBounce" + } + } + ] +} diff --git a/demos/declarative/phonebrowser/content/pics/background.png b/demos/declarative/phonebrowser/content/pics/background.png Binary files differnew file mode 100644 index 0000000..5b37072 --- /dev/null +++ b/demos/declarative/phonebrowser/content/pics/background.png diff --git a/demos/declarative/phonebrowser/content/pics/button-pressed.png b/demos/declarative/phonebrowser/content/pics/button-pressed.png Binary files differnew file mode 100644 index 0000000..e434d32 --- /dev/null +++ b/demos/declarative/phonebrowser/content/pics/button-pressed.png diff --git a/demos/declarative/phonebrowser/content/pics/button.png b/demos/declarative/phonebrowser/content/pics/button.png Binary files differnew file mode 100644 index 0000000..56a63ce --- /dev/null +++ b/demos/declarative/phonebrowser/content/pics/button.png diff --git a/demos/declarative/phonebrowser/content/pics/ghns_star.png b/demos/declarative/phonebrowser/content/pics/ghns_star.png Binary files differnew file mode 100644 index 0000000..4ad43cc --- /dev/null +++ b/demos/declarative/phonebrowser/content/pics/ghns_star.png diff --git a/demos/declarative/phonebrowser/content/pics/reflection.png b/demos/declarative/phonebrowser/content/pics/reflection.png Binary files differnew file mode 100644 index 0000000..c143a48 --- /dev/null +++ b/demos/declarative/phonebrowser/content/pics/reflection.png diff --git a/demos/declarative/phonebrowser/content/pics/shadow-bottom.png b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png Binary files differnew file mode 100644 index 0000000..523f6e7 --- /dev/null +++ b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png diff --git a/demos/declarative/phonebrowser/content/pics/shadow-corner.png b/demos/declarative/phonebrowser/content/pics/shadow-corner.png Binary files differnew file mode 100644 index 0000000..ef8c856 --- /dev/null +++ b/demos/declarative/phonebrowser/content/pics/shadow-corner.png diff --git a/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png Binary files differnew file mode 100644 index 0000000..9856c4f --- /dev/null +++ b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png diff --git a/demos/declarative/phonebrowser/content/pics/shadow-right.png b/demos/declarative/phonebrowser/content/pics/shadow-right.png Binary files differnew file mode 100644 index 0000000..f534a35 --- /dev/null +++ b/demos/declarative/phonebrowser/content/pics/shadow-right.png |