diff options
Diffstat (limited to 'demos')
28 files changed, 1003 insertions, 574 deletions
diff --git a/demos/declarative/calculator/CalcButton.qml b/demos/declarative/calculator/CalcButton.qml index f4ccdae..8203710 100644 --- a/demos/declarative/calculator/CalcButton.qml +++ b/demos/declarative/calculator/CalcButton.qml @@ -1,11 +1,9 @@ Item { - id: Button; width: 50; height: 30 + property string operation + property bool toggable : false + property bool toggled : false - properties: [ - Property { name: "operation"; type: "string" }, - Property { name: "toggable"; value: false }, - Property { name: "toggled"; value: false } - ] + id: Button; width: 50; height: 30 Script { function buttonClicked(operation) { diff --git a/demos/declarative/mediabrowser/content/LikeOMeter.qml b/demos/declarative/mediabrowser/content/LikeOMeter.qml deleted file mode 100644 index 68584a5..0000000 --- a/demos/declarative/mediabrowser/content/LikeOMeter.qml +++ /dev/null @@ -1,13 +0,0 @@ -<Item id="Container"> - <properties> - <Property name="rating" value="2"/> - </properties> - - <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}"/> - </HorizontalLayout> -</Item> diff --git a/demos/declarative/mediabrowser/content/MediaButton.qml b/demos/declarative/mediabrowser/content/MediaButton.qml deleted file mode 100644 index 6c672ea..0000000 --- a/demos/declarative/mediabrowser/content/MediaButton.qml +++ /dev/null @@ -1,21 +0,0 @@ -<Item id="Container"> - <signals> - <Signal name="clicked"/> - </signals> - - <properties> - <Property name="text"/> - </properties> - - <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}</width> - - <states> - <State name="Pressed" when="{MouseRegion.pressed == true}"> - <SetProperties target="{Pressed}" opacity="1"/> - </State> - </states> -</Item> diff --git a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml deleted file mode 100644 index 34fd889..0000000 --- a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml +++ /dev/null @@ -1,66 +0,0 @@ -<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"/> - </properties> - - <signals> - <Signal name="closed"/> - </signals> - - <axis> - <Axis startX="{Container.width / 2}" endX="{Container.width / 2}" endY="1" /> - </axis> - - <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"/> - </Flickable> - <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"/> - </Item> - </front> - - <back> - <Item anchors.fill="{Container}"> - <Rect anchors.fill="{parent}" color="black" opacity="0.4" pen.color="white" pen.width="2"/> - <Flickable x="10" width="{Container.width-20}" height="{Container.height-20}" y="10" clip="true" - viewportWidth="{UrlView.width}" viewportHeight="{UrlView.height}"> - <WebView id="UrlView" url="{Container.phoneUrl}" idealWidth="{parent.width}"/> - </Flickable> - <MediaButton id="BackButton2" x="630" y="400" text="Back" onClicked="Container.state=''"/> - </Item> - </back> - - <states> - <State name="Back"> - <SetProperty target="{Container}" property="rotation" value="180"/> - </State> - </states> - - <transitions> - <Transition> - <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/> - </Transition> - </transitions> - -</Flipable> diff --git a/demos/declarative/mediabrowser/content/PhonesPathView.qml b/demos/declarative/mediabrowser/content/PhonesPathView.qml deleted file mode 100644 index df7e742..0000000 --- a/demos/declarative/mediabrowser/content/PhonesPathView.qml +++ /dev/null @@ -1,79 +0,0 @@ -<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"/> - </Path> - </path> - - <delegate> - <Component id="PhoneDelegate"> - <Item id="Wrapper" width="320" height="200" scale="{Wrapper.PathView.scale}" z="{Wrapper.PathView.z}"> - <Connection sender="{PhoneInfoContainer}" script="if (Wrapper.state == 'Details') Wrapper.state = ''" signal="closed()"/> - - <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"; - } - } - </Script> - - <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)}"/> - </Item> - <!-- <Image source="pics/reflection.png" anchors.fill="{parent}"/> --> - <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}"/> - </Rect> - - <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> - <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"/> - </State> - </states> - - <transitions> - <Transition fromState="" toState="Details,Stacked"> - <ParentChangeAction/> - <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/> - </Transition> - <Transition fromState="Details,Stacked" toState=""> - <ParentChangeAction/> - <NumericAnimation properties="x,y,scale,opacity" duration="500" easing="easeInOutQuad"/> - </Transition> - </transitions> - - </Item> - </Component> - </delegate> - -</PathView> diff --git a/demos/declarative/mediabrowser/content/ScrollBar.qml b/demos/declarative/mediabrowser/content/ScrollBar.qml deleted file mode 100644 index 974f4d0..0000000 --- a/demos/declarative/mediabrowser/content/ScrollBar.qml +++ /dev/null @@ -1,18 +0,0 @@ -<Item id="Container"> - <properties> - <Property name="flickableArea"/> - </properties> - - <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" /> - </State> - </states> - <transitions> - <Transition fromState="*" toState="*"> - <NumericAnimation target="{Container}" properties="opacity" duration="400"/> - </Transition> - </transitions> -</Item> diff --git a/demos/declarative/mediabrowser/content/Star.qml b/demos/declarative/mediabrowser/content/Star.qml deleted file mode 100644 index 37d314b..0000000 --- a/demos/declarative/mediabrowser/content/Star.qml +++ /dev/null @@ -1,25 +0,0 @@ -<Item id="Container" width="24" height="24"> - <properties> - <Property name="rating"/> - <Property name="on"/> - </properties> - - <signals> - <Signal name="clicked"/> - </signals> - - <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"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation properties="opacity,scale,x,y" easing="easeOutBounce"/> - </Transition> - </transitions> - -</Item> diff --git a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml b/demos/declarative/mediabrowser/dummydata/PhonesModel.qml deleted file mode 100644 index d4f6269..0000000 --- a/demos/declarative/mediabrowser/dummydata/PhonesModel.qml +++ /dev/null @@ -1,137 +0,0 @@ -<ListModel id="PhonesModel"> - <Phone> - <title>Nokia N97</title> - <thumb>http://www.forum.nokia.com/devices/pics/N97_main.jpg</thumb> - <description> - The Nokia N97 is a S60 5th Edition mobile computer with a large 3,5?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) TFT color display with resistive touch screen and tactile feedback. The device provides excellent user experience for internet and entertainment by combining qwerty keyboard with touch UI and Home screen functionality. Use the N97 to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include game titles with N-Gage, a 5 mega pixel camera with dual LED flash and automatic geotagging of images and videos. - </description> - <specifications> - <![CDATA[ - <table width=300> - <tr><td width=50%>Resolution <td width=50%>360 x 640 - <tr><td>Color Depth <td>24 bit - <tr><td>Device Size <td>117.2 x 55.3 x 15.9 mm - <tr><td>Volume <td>88 cc - <tr><td>Weight <td>150 g - </table> - ]]> - </specifications> - <url>http://www.forum.nokia.com/devices/N97</url> - <rating>5</rating> - </Phone> - <Phone> - <title>Nokia 5800 XpressMusic</title> - <thumb>http://www.forum.nokia.com/devices/pics/5800_main.jpg</thumb> - <description> - The Nokia 5800 XpressMusic is a S60 5th Edition device with a resistive touch screen and tactile feedback. The device has a large 3,2?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) color display. The device has variety of input methods: stylus, plectrum and finger touch support for text input and UI control (alphanumeric keypad, full and mini qwerty keyboard, handwriting recognition). Use the Nokia 5800 XpressMusic to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include a 3.2 megapixel camera with dual LED flash, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available. - </description> - <specifications> - <![CDATA[ - <table width=300> - <tr><td width=50%>Resolution <td width=50%>360 x 640 - <tr><td>Color Depth <td>24 bit - <tr><td>Device Size <td>111 x 51.7 x 15.5 mm - <tr><td>Volume <td>83 cc - <tr><td>Weight <td>109 g - </table> - ]]> - </specifications> - <url>http://www.forum.nokia.com/devices/5800_XpressMusic</url> - <rating>5</rating> - </Phone> - <Phone> - <title>E75</title> - <thumb>http://www.forum.nokia.com/devices/pics/E75_main.jpg</thumb> - <description>The Nokia E75 is a GSM/WCDMA dual-mode business smartphone supporting WCDMA/HSDPA, EGSM, and WLAN. The device features a side slider qwerty keyboard for optimal email experience. Enjoy videos, music, and graphics on the 2.4? QVGA display and orientation sensor. Find directions and locations with the integrated A-GPS and included maps. Take photos with a 3.2-megapixel autofocus camera. Additional features include USB charging with simultaneous data transfer, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available.</description> - <specifications> - <![CDATA[ - <table width=300> - <tr><td width=50%>Resolution <td width=50%>240 x 320 - <tr><td>Color Depth <td>24 bit - <tr><td>Device Size <td>111.8 x 501 x 14.4 mm - <tr><td>Volume <td>69 cc - <tr><td>Weight <td>139 g - </table> - ]]> - </specifications> - <url>http://www.forum.nokia.com/devices/E75</url> - <rating>5</rating> - </Phone> - <Phone> - <title>Nokia N810</title> - <thumb>http://www.forum.nokia.com/devices/pics/n810_main.jpg</thumb> - <description> - The Nokia N810 features include Voice-over-IP (VoIP) Internet and video calling, Instant Messaging, an integrated slide-out QWERTY keyboard and touch screen. The N810 lets you stay connected on the go with WLAN or Bluetooth 2.0 +EDR and a Bluetooth enabled mobile phone. The hi-resolution 4.13", 800 x 480 screen and the integrated web cam add to the internet experience. Use the Nokia N810 to play music and videos with the built-in stereo speakers or use the 3.5mm stereo plug with headphones. The Nokia N810 also has an integrated GPS receiver which allows you to pinpoint your position and find points-of-interests using pre-loaded maps. - </description> - <specifications> - <![CDATA[ - <table width=300> - <tr><td width=50%>Resolution <td width=50%>800 x 480 - <tr><td>Color Depth <td>16 bit - <tr><td>Device Size <td>128 x 72 x 14 mm - <tr><td>Weight <td>225 g - </table> - ]]> - </specifications> - <url>http://www.forum.nokia.com/devices/N810</url> - <rating>5</rating> - </Phone> - <Phone> - <title>Nokia 6260 slide</title> - <thumb>http://www.forum.nokia.com/devices/pics/6260slide_main.jpg</thumb> - <description> - The Nokia 6260 slide is a Series 40 6th Edition phone, supporting quad-band GSM 850/900/1800/1900, triple-band WCDMA 900/1900/2100 and WLAN. Other key features include integrated A-GPS with included maps, a 5.0 megapixel camera with LED flash and Carl Zeiss optics, WebKit Open Source Browser, Flash Lite 3.0, Bluetooth 2.1 + EDR and MIDP Java 2.1 with additional Java APIs. Supported WCDMA frequencies depend on the region where the device is available. - </description> - <specifications> - <![CDATA[ - <table width=300> - <tr><td width=50%>Resolution <td width=50%>320 x 480 - <tr><td>Color Depth <td>24 bit - <tr><td>Device Size <td>99.4 x 46.5 x 15.4 mm - <tr><td>Volume <td>64.5 cc - <tr><td>Weight <td>114 g - </table> - ]]> - </specifications> - <url>http://www.forum.nokia.com/devices/6260_slide</url> - <rating>5</rating> - </Phone> - <Phone> - <title>Nokia 2330 classic</title> - <thumb>http://www.forum.nokia.com/devices/pics/2330_main.jpg</thumb> - <description> - The Nokia 2330 classic is a Dual-band GPRS phone for EGSM 900/1800 or GSM 850/1900 (for some markets) that includes a VGA camera, Stereo FM radio with recording feature, Bluetooth 2.0, Mail on Ovi and MIDP 2.1 APIs for application creation. - </description> - <specifications> - <![CDATA[ - <table width=300> - <tr><td width=50%>Resolution <td width=50%>128 x 160 - <tr><td>Color Depth <td>16 bit - <tr><td>Device Size <td>107 x 46 x 13.8 mm - <tr><td>Weight <td>80 g - </table> - ]]> - </specifications> - <url>http://www.forum.nokia.com/devices/2330_classic</url> - <rating>5</rating> - </Phone> - <Phone> - <title>Nokia 2355</title> - <thumb>http://www.forum.nokia.com/devices/pics/2355_main.jpg</thumb> - <description> - The Nokia 2355 CDMA phone features a 64K color display, FM radio, integrated flashlight, WAP 2.0 browsing, MMS, Java(tm) and Brew. It's stylishly polished fold design will keep you in the spotlight. - </description> - <specifications> - <![CDATA[ - <table width=300> - <tr><td width=50%>Resolution <td width=50%>128 x 128 - <tr><td>Color Depth <td>16 bit - <tr><td>Device Size <td>81 x 43 x 22 mm - <tr><td>Weight <td>78 g - </table> - ]]> - </specifications> - <url>http://www.forum.nokia.com/devices/2355</url> - <rating>5</rating> - </Phone> -</ListModel> diff --git a/demos/declarative/mediabrowser/mediabrowser.qml b/demos/declarative/mediabrowser/mediabrowser.qml deleted file mode 100644 index be87fa7..0000000 --- a/demos/declarative/mediabrowser/mediabrowser.qml +++ /dev/null @@ -1,36 +0,0 @@ -<?qtfx namespacepath:=content ?> -<Item width="800" height="480" id="MainWindow"> - <properties> - <Property name="minimized" value="false"/> - </properties> - - <Item id="Background"> - <Image source="content/pics/background.png" opaque="true"/> - - <Rect id="Menu" x="-150" width="150" height="480" color="#232323"> - <Text id="IconText" x="40" y="110" font.bold="true" font.size="9" text="Nokia Devices" color="white" style="Raised" styleColor="black"/> - <Image source="content/pics/shadow-right-screen.png" x="150" height="480" tile="true"/> - </Rect> - - <PhonesPathView id="PhonesPathView" model="{PhonesModel}" y="60" width="800" height="360"/> - <PhoneInfoContainer id="PhoneInfoContainer" width="750" x="25" y="500" height="440"/> - <MediaButton id="CloseButton" x="680" y="440" text="Close" onClicked="MainWindow.minimized = true"/> - - <states> - <State name="Minimized" when="{MainWindow.minimized == true}"> - <SetProperties target="{Background}" x="75"/> - <SetProperties target="{Menu}" x="-75"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="*"> - <NumericAnimation properties="x,y,size" duration="500" easing="easeInOutQuad"/> - </Transition> - </transitions> - </Item> - - <Text id="CategoryText" x="300" y="15" text="Nokia Devices" font.size="22" color="white" style="Raised" styleColor="black"/> - <Item id="Stack" x="45" y="50"/> - -</Item> - diff --git a/demos/declarative/phonebrowser/content/LikeOMeter.qml b/demos/declarative/phonebrowser/content/LikeOMeter.qml new file mode 100644 index 0000000..d928f48 --- /dev/null +++ b/demos/declarative/phonebrowser/content/LikeOMeter.qml @@ -0,0 +1,32 @@ +Item { + property var rating : 2 + + id: Container + 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..cad36bd --- /dev/null +++ b/demos/declarative/phonebrowser/content/MediaButton.qml @@ -0,0 +1,37 @@ +Item { + property var text + signal clicked + + id: Container + 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..ea20d4e --- /dev/null +++ b/demos/declarative/phonebrowser/content/PhoneInfoContainer.qml @@ -0,0 +1,110 @@ +Flipable { + id: Container + + property var frontContainer : ContainerFront + property var flickableArea : Flickable + property var phoneTitle : "N/A" + property var phoneDescription : "..." + property var phoneSpecifications : "" + property var phoneUrl : "" + property var rating : 2 + signal 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..e65f92f --- /dev/null +++ b/demos/declarative/phonebrowser/content/ScrollBar.qml @@ -0,0 +1,37 @@ +Item { + property var flickableArea + + id: Container + 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..cdbb28b --- /dev/null +++ b/demos/declarative/phonebrowser/content/Star.qml @@ -0,0 +1,43 @@ +Item { + property var rating + property var on + signal clicked + + id: Container + width: 24 + height: 24 + + 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/mediabrowser/content/pics/background.png b/demos/declarative/phonebrowser/content/pics/background.png Binary files differindex 5b37072..5b37072 100644 --- a/demos/declarative/mediabrowser/content/pics/background.png +++ b/demos/declarative/phonebrowser/content/pics/background.png diff --git a/demos/declarative/mediabrowser/content/pics/button-pressed.png b/demos/declarative/phonebrowser/content/pics/button-pressed.png Binary files differindex e434d32..e434d32 100644 --- a/demos/declarative/mediabrowser/content/pics/button-pressed.png +++ b/demos/declarative/phonebrowser/content/pics/button-pressed.png diff --git a/demos/declarative/mediabrowser/content/pics/button.png b/demos/declarative/phonebrowser/content/pics/button.png Binary files differindex 56a63ce..56a63ce 100644 --- a/demos/declarative/mediabrowser/content/pics/button.png +++ b/demos/declarative/phonebrowser/content/pics/button.png diff --git a/demos/declarative/mediabrowser/content/pics/ghns_star.png b/demos/declarative/phonebrowser/content/pics/ghns_star.png Binary files differindex 4ad43cc..4ad43cc 100644 --- a/demos/declarative/mediabrowser/content/pics/ghns_star.png +++ b/demos/declarative/phonebrowser/content/pics/ghns_star.png diff --git a/demos/declarative/mediabrowser/content/pics/reflection.png b/demos/declarative/phonebrowser/content/pics/reflection.png Binary files differindex c143a48..c143a48 100644 --- a/demos/declarative/mediabrowser/content/pics/reflection.png +++ b/demos/declarative/phonebrowser/content/pics/reflection.png diff --git a/demos/declarative/mediabrowser/content/pics/shadow-bottom.png b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png Binary files differindex 523f6e7..523f6e7 100644 --- a/demos/declarative/mediabrowser/content/pics/shadow-bottom.png +++ b/demos/declarative/phonebrowser/content/pics/shadow-bottom.png diff --git a/demos/declarative/mediabrowser/content/pics/shadow-corner.png b/demos/declarative/phonebrowser/content/pics/shadow-corner.png Binary files differindex ef8c856..ef8c856 100644 --- a/demos/declarative/mediabrowser/content/pics/shadow-corner.png +++ b/demos/declarative/phonebrowser/content/pics/shadow-corner.png diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png Binary files differindex 9856c4f..9856c4f 100644 --- a/demos/declarative/mediabrowser/content/pics/shadow-right-screen.png +++ b/demos/declarative/phonebrowser/content/pics/shadow-right-screen.png diff --git a/demos/declarative/mediabrowser/content/pics/shadow-right.png b/demos/declarative/phonebrowser/content/pics/shadow-right.png Binary files differindex f534a35..f534a35 100644 --- a/demos/declarative/mediabrowser/content/pics/shadow-right.png +++ b/demos/declarative/phonebrowser/content/pics/shadow-right.png diff --git a/demos/declarative/phonebrowser/dummydata/PhonesModel.qml b/demos/declarative/phonebrowser/dummydata/PhonesModel.qml new file mode 100644 index 0000000..eb68fdb --- /dev/null +++ b/demos/declarative/phonebrowser/dummydata/PhonesModel.qml @@ -0,0 +1,99 @@ +ListModel2 { + id: "PhonesModel" + + ListElement { + title: "Nokia N97" + thumb: "http://www.forum.nokia.com/devices/pics/N97_main.jpg" + description: "The Nokia N97 is a S60 5th Edition mobile computer with a large 3,5?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) TFT color display with resistive touch screen and tactile feedback. The device provides excellent user experience for internet and entertainment by combining qwerty keyboard with touch UI and Home screen functionality. Use the N97 to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include game titles with N-Gage, a 5 mega pixel camera with dual LED flash and automatic geotagging of images and videos." + specifications: "<table width=300>\ + <tr><td width=50%>Resolution <td width=50%>360 x 640 \ + <tr><td>Color Depth <td>24 bit \ + <tr><td>Device Size <td>117.2 x 55.3 x 15.9 mm \ + <tr><td>Volume <td>88 cc \ + <tr><td>Weight <td>150 g \ + </table>" + url: "http://www.forum.nokia.com/devices/N97" + rating: 5 + } + ListElement { + title: "Nokia 5800 XpressMusic" + thumb: "http://www.forum.nokia.com/devices/pics/5800_main.jpg" + description: "The Nokia 5800 XpressMusic is a S60 5th Edition device with a resistive touch screen and tactile feedback. The device has a large 3,2?, bright nHD (640 x 360 pixels and 16:9 aspect ratio) color display. The device has variety of input methods: stylus, plectrum and finger touch support for text input and UI control (alphanumeric keypad, full and mini qwerty keyboard, handwriting recognition). Use the Nokia 5800 XpressMusic to connect to mobile broadband using WLAN or HSDPA (3.5G). Find directions and locations with the integrated A-GPS and included maps. Additional features include a 3.2 megapixel camera with dual LED flash, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available." + specifications: " <table width=300> \ + <tr><td width=50%>Resolution <td width=50%>360 x 640 \ + <tr><td>Color Depth <td>24 bit \ + <tr><td>Device Size <td>111 x 51.7 x 15.5 mm \ + <tr><td>Volume <td>83 cc \ + <tr><td>Weight <td>109 g \ + </table>" + url: "http://www.forum.nokia.com/devices/5800_XpressMusic" + rating: 5 + } + ListElement { + title: "E75" + thumb: "http://www.forum.nokia.com/devices/pics/E75_main.jpg" + description: "The Nokia E75 is a GSM/WCDMA dual-mode business smartphone supporting WCDMA/HSDPA, EGSM, and WLAN. The device features a side slider qwerty keyboard for optimal email experience. Enjoy videos, music, and graphics on the 2.4? QVGA display and orientation sensor. Find directions and locations with the integrated A-GPS and included maps. Take photos with a 3.2-megapixel autofocus camera. Additional features include USB charging with simultaneous data transfer, Bluetooth 2.0 +EDR, and USB 2.0 High-Speed. Supported WCDMA frequencies depend on the region where the device is available." + specifications: "<table width=300> \ + <tr><td width=50%>Resolution <td width=50%>240 x 320 \ + <tr><td>Color Depth <td>24 bit \ + <tr><td>Device Size <td>111.8 x 501 x 14.4 mm \ + <tr><td>Volume <td>69 cc \ + <tr><td>Weight <td>139 g \ + </table>" + url: "http://www.forum.nokia.com/devices/E75" + rating: 5 + } + ListElement { + title: "Nokia N810" + thumb: "http://www.forum.nokia.com/devices/pics/n810_main.jpg" + description: "The Nokia N810 features include Voice-over-IP (VoIP) Internet and video calling, Instant Messaging, an integrated slide-out QWERTY keyboard and touch screen. The N810 lets you stay connected on the go with WLAN or Bluetooth 2.0 +EDR and a Bluetooth enabled mobile phone. The hi-resolution 4.13\", 800 x 480 screen and the integrated web cam add to the internet experience. Use the Nokia N810 to play music and videos with the built-in stereo speakers or use the 3.5mm stereo plug with headphones. The Nokia N810 also has an integrated GPS receiver which allows you to pinpoint your position and find points-of-interests using pre-loaded maps." + specifications: "<table width=300> \ + <tr><td width=50%>Resolution <td width=50%>800 x 480 \ + <tr><td>Color Depth <td>16 bit \ + <tr><td>Device Size <td>128 x 72 x 14 mm \ + <tr><td>Weight <td>225 g \ + </table>" + url: "http://www.forum.nokia.com/devices/N810" + rating: 5 + } + ListElement { + title: "Nokia 6260 slide" + thumb: "http://www.forum.nokia.com/devices/pics/6260slide_main.jpg" + description: "The Nokia 6260 slide is a Series 40 6th Edition phone, supporting quad-band GSM 850/900/1800/1900, triple-band WCDMA 900/1900/2100 and WLAN. Other key features include integrated A-GPS with included maps, a 5.0 megapixel camera with LED flash and Carl Zeiss optics, WebKit Open Source Browser, Flash Lite 3.0, Bluetooth 2.1 + EDR and MIDP Java 2.1 with additional Java APIs. Supported WCDMA frequencies depend on the region where the device is available." + specifications: "<table width=300>\ + <tr><td width=50%>Resolution <td width=50%>320 x 480 \ + <tr><td>Color Depth <td>24 bit \ + <tr><td>Device Size <td>99.4 x 46.5 x 15.4 mm \ + <tr><td>Volume <td>64.5 cc \ + <tr><td>Weight <td>114 g \ + </table>" + url: "http://www.forum.nokia.com/devices/6260_slide" + rating: 5 + } + ListElement { + title: "Nokia 2330 classic" + thumb: "http://www.forum.nokia.com/devices/pics/2330_main.jpg" + description: "The Nokia 2330 classic is a Dual-band GPRS phone for EGSM 900/1800 or GSM 850/1900 (for some markets) that includes a VGA camera, Stereo FM radio with recording feature, Bluetooth 2.0, Mail on Ovi and MIDP 2.1 APIs for application creation." + specifications: "<table width=300>\ + <tr><td width=50%>Resolution <td width=50%>128 x 160 \ + <tr><td>Color Depth <td>16 bit \ + <tr><td>Device Size <td>107 x 46 x 13.8 mm\ + <tr><td>Weight <td>80 g\ + </table>" + url: "http://www.forum.nokia.com/devices/2330_classic" + rating: 5 + } + ListElement { + title: "Nokia 2355" + thumb: "http://www.forum.nokia.com/devices/pics/2355_main.jpg" + description: "The Nokia 2355 CDMA phone features a 64K color display, FM radio, integrated flashlight, WAP 2.0 browsing, MMS, Java(tm) and Brew. It's stylishly polished fold design will keep you in the spotlight." + specifications: "<table width=300> \ + <tr><td width=50%>Resolution <td width=50%>128 x 128 \ + <tr><td>Color Depth <td>16 bit \ + <tr><td>Device Size <td>81 x 43 x 22 mm \ + <tr><td>Weight <td>78 g \ + </table>" + url: "http://www.forum.nokia.com/devices/2355" + rating: 5 + } +} diff --git a/demos/declarative/phonebrowser/phonebrowser.qml b/demos/declarative/phonebrowser/phonebrowser.qml new file mode 100644 index 0000000..ce74367 --- /dev/null +++ b/demos/declarative/phonebrowser/phonebrowser.qml @@ -0,0 +1,59 @@ +import "content" + +Item { + id: MainWindow; width: 800; height: 480 + + property var minimized : false + + Item { + id: Background + + Image { source: "content/pics/background.png"; opaque: true } + + Rect { + id: Menu; x: -150; width: 150; height: 480; color: "#232323" + + Text { + id: IconText; x: 40; y: 110 + font.bold: true; font.size: 9; text: "Nokia Devices" + color: "white"; style: Raised; styleColor: "black" + } + + Image { + source: "content/pics/shadow-right-screen.png" + x: 150; height: 480; tile: true + } + } + + PhonesPathView { id: PhonesPathView; model: PhonesModel; y: 60; width: 800; height: 360 } + PhoneInfoContainer { id: PhoneInfoContainer; width: 750; x: 25; y: 500; height: 440 } + + MediaButton { + id: CloseButton; x: 680; y: 440; text: "Close" + onClicked: { MainWindow.minimized = true } + } + + states: [ + State { + name: "Minimized" + when: MainWindow.minimized == true + SetProperties { target: Background; x: 75 } + SetProperties { target: Menu; x: -75 } + } + ] + + transitions: [ + Transition { + fromState: "*"; toState: "*" + NumericAnimation { properties: "x,y,size"; duration: 500; easing: "easeInOutQuad" } + } + ] + } + + Text { + id: CategoryText; x: 300; y: 15; text: "Nokia Devices" + font.size: 22; color: "white"; style: Raised; styleColor: "black" + } + + Item { id: Stack; x: 45; y: 50 } +} diff --git a/demos/declarative/webbrowser/content/RectSoftShadow.qml b/demos/declarative/webbrowser/content/RectSoftShadow.qml index 2b39422..5817f00 100644 --- a/demos/declarative/webbrowser/content/RectSoftShadow.qml +++ b/demos/declarative/webbrowser/content/RectSoftShadow.qml @@ -1,10 +1,30 @@ -<Item> - <Image source="pics/softshadow-left.sci" x="-16" y="-16" - width="16" height="{parent.height+32}" /> - <Image source="pics/softshadow-right.sci" x="{parent.width}" y="-16" - width="16" height="{parent.height+32}" /> - <Image source="pics/softshadow-top.png" x="0" y="-16" - width="{parent.width}" height="16" /> - <Image source="pics/softshadow-bottom.png" x="0" y="{parent.height}" - width="{webview.width*webview.scale}" height="16" /> -</Item> +Item { + Image { + source: "pics/softshadow-left.sci" + x: -16 + y: -16 + width: 16 + height: parent.height+32 + } + Image { + source: "pics/softshadow-right.sci" + x: parent.width + y: -16 + width: 16 + height: parent.height+32 + } + Image { + source: "pics/softshadow-top.png" + x: 0 + y: -16 + width: parent.width + height: 16 + } + Image { + source: "pics/softshadow-bottom.png" + x: 0 + y: parent.height + width: webview.width*webview.scale + height: 16 + } +} diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml index cf96b3f..c754543 100644 --- a/demos/declarative/webbrowser/webbrowser.qml +++ b/demos/declarative/webbrowser/webbrowser.qml @@ -1,7 +1,15 @@ -<?qtfx namespacepath:=content?> -<Item width="640" height="480" id="WebBrowser" state="Normal"> - <properties><Property name="url" value="http://www.qtsoftware.com"/></properties> - <Script> +import "content" + +Item { + id: WebBrowser + + property var url : "http://www.qtsoftware.com" + + width: 640 + height: 480 + state: "Normal" + + Script { function zoomOut() { WebBrowser.state = "ZoomedOut"; } @@ -14,162 +22,423 @@ zoomOut(); } } - </Script> - - <Item id="WebPanel" anchors.fill="{parent}" clip="true"> - <Rect color="#555555" anchors.fill="{parent}"/> - <Image source="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" /> - <Image source="content/pics/softshadow-top.png" width="{WebPanel.width}" anchors.bottom="{Footer.top}" height="16" /> - <RectSoftShadow x="{-Flick.xPosition}" y="{-Flick.yPosition}" - width="{WebView.width*WebView.scale}" height="{Flick.y+WebView.height*WebView.scale}"/> - <Item id="HeaderSpace" width="{parent.width}" height="60" z="1"> - <Image id="Header" width="{parent.width}" state="Normal" - x="{Flick.xPosition < 0 - ? -Flick.xPosition - : Flick.xPosition > Flick.viewportWidth-Flick.width - ? -Flick.xPosition+Flick.viewportWidth-Flick.width - : 0}" - y="{Flick.yPosition < 0 ? -Flick.yPosition : progressOff*(Flick.yPosition>height?-height:-Flick.yPosition)}" - height="64" source="content/pics/header.png"> - <Text id="HeaderText" text="{WebView.title!='' || WebView.progress == 1.0 ? WebView.title : 'Loading...'}" - color="white" styleColor="black" style="Raised" - font.family="Helvetica" font.size="10" font.bold="true" elide="ElideRight" - anchors.left="{Header.left}" anchors.right="{Header.right}" - anchors.leftMargin="4" anchors.rightMargin="4" - anchors.top="{Header.top}" anchors.topMargin="4" hAlign="AlignHCenter"/> - <Item anchors.top="{HeaderText.bottom}" anchors.topMargin="2" anchors.bottom="{parent.bottom}" width="{parent.width}"> - <Item id="UrlBox" anchors.left="{parent.left}" anchors.leftMargin="12" anchors.right="{parent.right}" anchors.rightMargin="12" height="31" anchors.top="{parent.top}" clip="true"> - <Image source="content/pics/addressbar.sci" anchors.fill="{UrlBox}"/> - <Image id="UrlBoxhl" source="content/pics/addressbar-filled.sci" opacity="{1-Header.progressOff}" clip="true" width="{parent.width*WebView.progress}" height="{parent.height}"/> - <KeyProxy id="proxy" anchors.left="{UrlBox.left}" anchors.fill="{UrlBox}" focusable="true" targets="{[keyActions,EditUrl]}"/> - <KeyActions id="keyActions" return="WebBrowser.url = EditUrl.text; proxy.focus=false;"/> - <TextEdit id="EditUrl" color="#555555" text="{WebView.url == '' ? ' ' : WebView.url}" - anchors.left="{UrlBox.left}" anchors.right="{UrlBox.right}" anchors.leftMargin="6" - anchors.verticalCenter="{UrlBox.verticalCenter}" anchors.verticalCenterOffset="1" - font.size="11" wrap="false" opacity="0"/> - <Text id="ShowUrl" color="#555555" text="{WebView.url == '' ? ' ' : WebView.url}" - anchors.left="{UrlBox.left}" anchors.right="{UrlBox.right}" anchors.leftMargin="6" - anchors.verticalCenter="{UrlBox.verticalCenter}" anchors.verticalCenterOffset="1" - font.size="11" /> - </Item> - <MouseRegion anchors.fill="{UrlBox}" onClicked="proxy.focus=true"/> - </Item> - <properties> - <Property name="progressOff" value="1" type="Real"/> - </properties> - <states> - <State name="Normal" when="{WebView.progress == 1.0}"> - <SetProperty target="{Header}" property="progressOff" value="1"/> - </State> - <State name="ProgressShown" when="{WebView.progress < 1.0}"> - <SetProperty target="{Header}" property="progressOff" value="0"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation target="{Header}" properties="progressOff" easing="easeInOutQuad" duration="300"/> - </Transition> - </transitions> - </Image> - </Item> - <Flickable id="Flick" - anchors.top="{HeaderSpace.bottom}" anchors.bottom="{Footer.top}" - anchors.left="{parent.left}" anchors.right="{parent.right}" - width="{parent.width}" - viewportWidth="{Math.max(parent.width,WebView.width*WebView.scale)}" - viewportHeight="{Math.max(parent.height,WebView.height*WebView.scale)}" - > - <properties> - <Property name="centerX" value="0" type="Real"/> - <Property name="centerY" value="0" type="Real"/> - </properties> - <WebView id="WebView" - cacheSize="4000000" - smooth="true" - url="{WebBrowser.url}" - onDoubleClick="toggleZoom()" - focusable="true" - focus="true" - idealWidth="{Flick.width}" - idealHeight="{Flick.height/scale}" - onUrlChanged="Flick.xPosition=0; Flick.yPosition=0; zoomOut()" - scale="{(width > 0) ? Flick.width/width*zoomedOut+(1-zoomedOut) : 1}" - > - <properties> - <Property name="zoomedOut" type="real" value="1"/> - </properties> - </WebView> - <Rect id="WebViewTint" anchors.fill="{WebView}" color="black" opacity="0"> - <MouseRegion anchors.fill="{WebViewTint}" onClicked="proxy.focus=false"/> - </Rect> - </Flickable> - <Image id="Footer" width="{parent.width}" anchors.bottom="{parent.bottom}" - height="43" source="content/pics/footer.sci"> - <Rect y="-1" width="{parent.width}" height="1" color="#555555"/> - <Item id="backbutton" anchors.right="{reload.left}" anchors.rightMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{back_e.width}" height="{back_e.height}"> - <Image anchors.fill="{parent}" id="back_e" source="content/pics/back.png" /> - <Image anchors.fill="{parent}" id="back_d" source="content/pics/back-disabled.png" /> - <states> - <State name="Enabled" when="{WebView.back.enabled==true}"> - <SetProperty target="{back_e}" property="opacity" value="1"/> - <SetProperty target="{back_d}" property="opacity" value="0"/> - </State> - <State name="Disabled" when="{WebView.back.enabled==false}"> - <SetProperty target="{back_e}" property="opacity" value="0"/> - <SetProperty target="{back_d}" property="opacity" value="1"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="300"/> - </Transition> - </transitions> - <MouseRegion anchors.fill="{back_e}" onClicked="if (WebView.back.enabled) WebView.back.trigger()"/> - </Item> - <Image id="reload" source="content/pics/reload.png" anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}"/> - <MouseRegion anchors.fill="{reload}" onClicked="WebView.reload.trigger()"/> - <Item id="forwardbutton" anchors.left="{reload.right}" anchors.leftMargin="10" anchors.verticalCenter="{parent.verticalCenter}" width="{forward_e.width}" height="{forward_e.height}"> - <Image anchors.fill="{parent}" anchors.verticalCenter="{parent.verticalCenter}" id="forward_e" source="content/pics/forward.png" /> - <Image anchors.fill="{parent}" id="forward_d" source="content/pics/forward-disabled.png" /> - <states> - <State name="Enabled" when="{WebView.forward.enabled==true}"> - <SetProperty target="{forward_e}" property="opacity" value="1"/> - <SetProperty target="{forward_d}" property="opacity" value="0"/> - </State> - <State name="Disabled" when="{WebView.forward.enabled==false}"> - <SetProperty target="{forward_e}" property="opacity" value="0"/> - <SetProperty target="{forward_d}" property="opacity" value="1"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="320"/> - </Transition> - </transitions> - <MouseRegion anchors.fill="{parent}" onClicked="if (WebView.forward.enabled) WebView.forward.trigger()"/> - </Item> - </Image> - </Item> - <states> - <State name="Normal"> - <SetProperty target="{WebView}" property="zoomedOut" value="0"/> - <SetProperty target="{Flick}" property="xPosition" value="{Math.min(WebView.width-Flick.width,Math.max(0,Flick.centerX-Flick.width/2))}"/> - <SetProperty target="{Flick}" property="yPosition" value="{Math.min(WebView.height-Flick.height,Math.max(0,Flick.centerY-Flick.height/2))}"/> - </State> - <State name="ZoomedOut"> - <SetProperty target="{WebView}" property="zoomedOut" value="1"/> - </State> - </states> - <transitions> - <Transition> - <SequentialAnimation> - <SetPropertyAction target="{WebView}" property="smooth" value="false" /> - <ParallelAnimation> - <NumericAnimation target="{WebView}" properties="zoomedOut" easing="easeInOutQuad" duration="200"/> - <NumericAnimation target="{Flick}" properties="xPosition,yPosition" easing="easeInOutQuad" duration="200"/> - </ParallelAnimation> - <SetPropertyAction target="{WebView}" property="smooth" value="true" /> - </SequentialAnimation> - </Transition> - </transitions> -</Item> + } + + Item { + id: WebPanel + anchors.fill: parent + clip: true + Rect { + color: "#555555" + anchors.fill: parent + } + Image { + source: "content/pics/softshadow-bottom.png" + width: WebPanel.width + height: 16 + } + Image { + source: "content/pics/softshadow-top.png" + width: WebPanel.width + height: 16 + anchors.bottom: Footer.top + } + RectSoftShadow { + x: -Flick.xPosition + y: -Flick.yPosition + width: WebView.width*WebView.scale + height: Flick.y+WebView.height*WebView.scale + } + Item { + id: HeaderSpace + width: parent.width + height: 60 + z: 1 + + Image { + id: Header + source: "content/pics/header.png" + width: parent.width + height: 64 + state: "Normal" + x: Flick.xPosition < 0 ? -Flick.xPosition : Flick.xPosition > Flick.viewportWidth-Flick.width + ? -Flick.xPosition+Flick.viewportWidth-Flick.width : 0 + y: Flick.yPosition < 0 ? -Flick.yPosition : progressOff* + (Flick.yPosition>height?-height:-Flick.yPosition) + Text { + id: HeaderText + + text: WebView.title!='' || WebView.progress == 1.0 ? WebView.title : 'Loading...' + elide: "ElideRight" + + color: "white" + styleColor: "black" + style: Raised + + font.family: "Helvetica" + font.size: 10 + font.bold: true + + anchors.left: Header.left + anchors.right: Header.right + anchors.leftMargin: 4 + anchors.rightMargin: 4 + anchors.top: Header.top + anchors.topMargin: 4 + hAlign: AlignHCenter + } + Item { + width: parent.width + anchors.top: HeaderText.bottom + anchors.topMargin: 2 + anchors.bottom: parent.bottom + + Item { + id: UrlBox + height: 31 + anchors.left: parent.left + anchors.leftMargin: 12 + anchors.right: parent.right + anchors.rightMargin: 12 + anchors.top: parent.top + clip: true + Image { + source: "content/pics/addressbar.sci" + anchors.fill: UrlBox + } + Image { + id: UrlBoxhl + source: "content/pics/addressbar-filled.sci" + width: parent.width*WebView.progress + height: parent.height + opacity: 1-Header.progressOff + clip: true + } + /* + KeyProxy { + id: proxy + anchors.left: UrlBox.left + anchors.fill: UrlBox + focusable: true + targets: [keyActions,EditUrl] + } + KeyActions { + id: keyActions + return: "WebBrowser.url = EditUrl.text; proxy.focus=false;" + } + */ + TextEdit { + id: EditUrl + + text: WebView.url == '' ? ' ' : WebView.url + wrap: false + font.size: 11 + color: "#555555" + + anchors.left: UrlBox.left + anchors.right: UrlBox.right + anchors.leftMargin: 6 + anchors.verticalCenter: UrlBox.verticalCenter + anchors.verticalCenterOffset: 1 + + opacity: 0 + } + Text { + id: ShowUrl + text: WebView.url == '' ? ' ' : WebView.url + font.size: 11 + color: "#555555" + anchors.left: UrlBox.left + anchors.right: UrlBox.right + anchors.leftMargin: 6 + anchors.verticalCenter: UrlBox.verticalCenter + anchors.verticalCenterOffset: 1 + } + } + MouseRegion { + anchors.fill: UrlBox + onClicked: { proxy.focus=true } + } + } + + property real progressOff : 1 + states: [ + State { + name: "Normal" + when: WebView.progress == 1.0 + SetProperty { + target: Header + property: "progressOff" + value: 1 + } + }, + State { + name: "ProgressShown" + when: WebView.progress < 1.0 + SetProperty { + target: Header + property: "progressOff" + value: 0 + } + } + ] + transitions: [ + Transition { + NumericAnimation { + target: Header + properties: "progressOff" + easing: "easeInOutQuad" + duration: 300 + } + } + ] + } + } + Flickable { + id: Flick + width: parent.width + viewportWidth: Math.max(parent.width,WebView.width*WebView.scale) + viewportHeight: Math.max(parent.height,WebView.height*WebView.scale) + anchors.top: HeaderSpace.bottom + anchors.bottom: Footer.top + anchors.left: parent.left + anchors.right: parent.right + + property real centerX : 0 + property real centerY : 0 + + WebView { + id: WebView + cacheSize: 4000000 + + url: WebBrowser.url + smooth: true + focusable: true + focus: true + + idealWidth: Flick.width + idealHeight: Flick.height/scale + scale: (width > 0) ? Flick.width/width*zoomedOut+(1-zoomedOut) : 1 + + onUrlChanged: { Flick.xPosition=0; Flick.yPosition=0; zoomOut() } + onDoubleClick: { toggleZoom() } + + property real zoomedOut : 1 + } + Rect { + id: WebViewTint + color: "black" + opacity: 0 + anchors.fill: WebView + MouseRegion { + anchors.fill: WebViewTint + onClicked: { proxy.focus=false } + } + } + } + Image { + id: Footer + source: "content/pics/footer.sci" + width: parent.width + height: 43 + anchors.bottom: parent.bottom + Rect { + y: -1 + width: parent.width + height: 1 + color: "#555555" + } + Item { + id: backbutton + width: back_e.width + height: back_e.height + anchors.right: reload.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + Image { + id: back_e + source: "content/pics/back.png" + anchors.fill: parent + } + Image { + id: back_d + source: "content/pics/back-disabled.png" + anchors.fill: parent + } + states: [ + State { + name: "Enabled" + when: WebView.back.enabled==true + SetProperty { + target: back_e + property: "opacity" + value: 1 + } + SetProperty { + target: back_d + property: "opacity" + value: 0 + } + }, + State { + name: "Disabled" + when: WebView.back.enabled==false + SetProperty { + target: back_e + property: "opacity" + value: 0 + } + SetProperty { + target: back_d + property: "opacity" + value: 1 + } + } + ] + transitions: [ + Transition { + NumericAnimation { + properties: "opacity" + easing: "easeInOutQuad" + duration: 300 + } + } + ] + MouseRegion { + anchors.fill: back_e + onClicked: { if (WebView.back.enabled) WebView.back.trigger() } + } + } + Image { + id: reload + source: "content/pics/reload.png" + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + MouseRegion { + anchors.fill: reload + onClicked: { WebView.reload.trigger() } + } + Item { + id: forwardbutton + width: forward_e.width + height: forward_e.height + anchors.left: reload.right + anchors.leftMargin: 10 + anchors.verticalCenter: parent.verticalCenter + Image { + id: forward_e + source: "content/pics/forward.png" + anchors.fill: parent + anchors.verticalCenter: parent.verticalCenter + } + Image { + id: forward_d + source: "content/pics/forward-disabled.png" + anchors.fill: parent + } + states: [ + State { + name: "Enabled" + when: WebView.forward.enabled==true + SetProperty { + target: forward_e + property: "opacity" + value: 1 + } + SetProperty { + target: forward_d + property: "opacity" + value: 0 + } + }, + State { + name: "Disabled" + when: WebView.forward.enabled==false + SetProperty { + target: forward_e + property: "opacity" + value: 0 + } + SetProperty { + target: forward_d + property: "opacity" + value: 1 + } + } + ] + transitions: [ + Transition { + NumericAnimation { + properties: "opacity" + easing: "easeInOutQuad" + duration: 320 + } + } + ] + MouseRegion { + anchors.fill: parent + onClicked: { if (WebView.forward.enabled) WebView.forward.trigger() } + } + } + } + } + states: [ + State { + name: "Normal" + SetProperty { + target: WebView + property: "zoomedOut" + value: 0 + } + SetProperty { + target: Flick + property: "xPosition" + value: Math.min(WebView.width-Flick.width,Math.max(0,Flick.centerX-Flick.width/2)) + } + SetProperty { + target: Flick + property: "yPosition" + value: Math.min(WebView.height-Flick.height,Math.max(0,Flick.centerY-Flick.height/2)) + } + }, + State { + name: "ZoomedOut" + SetProperty { + target: WebView + property: "zoomedOut" + value: 1 + } + } + ] + transitions: [ + Transition { + SequentialAnimation { + SetPropertyAction { + target: WebView + property: "smooth" + value: false + } + ParallelAnimation { + NumericAnimation { + target: WebView + properties: "zoomedOut" + easing: "easeInOutQuad" + duration: 200 + } + NumericAnimation { + target: Flick + properties: "xPosition,yPosition" + easing: "easeInOutQuad" + duration: 200 + } + } + SetPropertyAction { + target: WebView + property: "smooth" + value: true + } + } + } + ] +} |
