Cosmetic changes for the web browser demo.

12 files changed, 177 insertions, 176 deletions

diff --git a/demos/declarative/webbrowser/README b/demos/declarative/webbrowser/README
index a081e30..7bfd41f 100644
--- a/demos/declarative/webbrowser/README
+++ b/demos/declarative/webbrowser/README
@@ -1,5 +1,6 @@
 For good performance, be sure to use disk cache for remote content:
 
-  duiviewer -cache WebBrowser.qml
+  duiviewer -cache webbrowser.qml
 
 Otherwise everything always re-loads over the network.
+
diff --git a/demos/declarative/webbrowser/WebBrowser.qml b/demos/declarative/webbrowser/WebBrowser.qml
deleted file mode 100644
index 08b94e3..0000000
--- a/demos/declarative/webbrowser/WebBrowser.qml
+++ /dev/null
@@ -1,175 +0,0 @@
-<?qtfx namespacepath:=content?>
-<Item width="320" height="500" id="webbrowser" state="Normal">
-    <properties><Property name="url" value="http://www.qtsoftware.com"/></properties>
-    <Script>
-        function zoomOut() {
-            webbrowser.state = "ZoomedOut";
-        }
-        function toggleZoom() {
-            if(webbrowser.state == "ZoomedOut") {
-                flick.centerX = webview.mouseX;
-                flick.centerY = webview.mouseY;
-                webbrowser.state = "Normal";
-            } else {
-                zoomOut();
-            }
-        }
-    </Script>
-
-    <Item id="webpanel" anchors.fill="{parent}" clip="true">
-        <Rect color="#555555" anchors.fill="{parent}"/>
-        <Image src="content/pics/softshadow-bottom.png" width="{webpanel.width}" height="16" />
-        <Image src="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 &lt; 0
-                                ? -flick.xPosition
-                                : flick.xPosition &gt; flick.viewportWidth-flick.width
-                                    ? -flick.xPosition+flick.viewportWidth-flick.width
-                                    : 0}"
-                    y="{flick.yPosition &lt; 0 ? -flick.yPosition : progressoff*(flick.yPosition>height?-height:-flick.yPosition)}"
-                    height="60" src="content/pics/header.png">
-                <Text id="header_text" text="{webview.title!='' || webview.progress == 1.0 ? webview.title : 'Loading...'}"
-                    color="#000000"
-                    font.family="Helvetica" font.size="9" 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="{header_text.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 src="content/pics/addressbar.sci" anchors.fill="{urlbox}"/>
-                        <Image id="urlboxhl" src="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 &lt; 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" src="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" src="content/pics/back.png" />
-                <Image anchors.fill="{parent}" id="back_d" src="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" src="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" src="content/pics/forward.png" />
-                <Image anchors.fill="{parent}" id="forward_d" src="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>
diff --git a/demos/declarative/webbrowser/content/pics/addressbar-filled.png b/demos/declarative/webbrowser/content/pics/addressbar-filled.png
index c793a10..d8452ec 100644
--- a/demos/declarative/webbrowser/content/pics/addressbar-filled.png
+++ b/demos/declarative/webbrowser/content/pics/addressbar-filled.png
diff --git a/demos/declarative/webbrowser/content/pics/addressbar.png b/demos/declarative/webbrowser/content/pics/addressbar.png
index 9b8e2c9..3278f58 100644
--- a/demos/declarative/webbrowser/content/pics/addressbar.png
+++ b/demos/declarative/webbrowser/content/pics/addressbar.png
diff --git a/demos/declarative/webbrowser/content/pics/back-disabled.png b/demos/declarative/webbrowser/content/pics/back-disabled.png
index 0ca0701..91b9e76 100644
--- a/demos/declarative/webbrowser/content/pics/back-disabled.png
+++ b/demos/declarative/webbrowser/content/pics/back-disabled.png
diff --git a/demos/declarative/webbrowser/content/pics/back.png b/demos/declarative/webbrowser/content/pics/back.png
index 3e88a6c..9988dd3 100644
--- a/demos/declarative/webbrowser/content/pics/back.png
+++ b/demos/declarative/webbrowser/content/pics/back.png
diff --git a/demos/declarative/webbrowser/content/pics/footer.png b/demos/declarative/webbrowser/content/pics/footer.png
index f5fe95f..8391a93 100644
--- a/demos/declarative/webbrowser/content/pics/footer.png
+++ b/demos/declarative/webbrowser/content/pics/footer.png
diff --git a/demos/declarative/webbrowser/content/pics/forward-disabled.png b/demos/declarative/webbrowser/content/pics/forward-disabled.png
index 573aaa4..cb87f4f 100644
--- a/demos/declarative/webbrowser/content/pics/forward-disabled.png
+++ b/demos/declarative/webbrowser/content/pics/forward-disabled.png
diff --git a/demos/declarative/webbrowser/content/pics/forward.png b/demos/declarative/webbrowser/content/pics/forward.png
index d4eb026..83870ee 100644
--- a/demos/declarative/webbrowser/content/pics/forward.png
+++ b/demos/declarative/webbrowser/content/pics/forward.png
diff --git a/demos/declarative/webbrowser/content/pics/header.png b/demos/declarative/webbrowser/content/pics/header.png
index c4aff2e..26588c3 100644
--- a/demos/declarative/webbrowser/content/pics/header.png
+++ b/demos/declarative/webbrowser/content/pics/header.png
diff --git a/demos/declarative/webbrowser/content/pics/reload.png b/demos/declarative/webbrowser/content/pics/reload.png
index fa4d033..45b5535 100644
--- a/demos/declarative/webbrowser/content/pics/reload.png
+++ b/demos/declarative/webbrowser/content/pics/reload.png
diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml
new file mode 100644
index 0000000..7618f4d
--- /dev/null
+++ b/demos/declarative/webbrowser/webbrowser.qml
@@ -0,0 +1,175 @@
+<?qtfx namespacepath:=content?>
+<Item width="640" height="480" id="WebBrowser" state="Normal">
+    <properties><Property name="url" value="http://www.qtsoftware.com"/></properties>
+    <Script>
+        function zoomOut() {
+            WebBrowser.state = "ZoomedOut";
+        }
+        function toggleZoom() {
+            if(WebBrowser.state == "ZoomedOut") {
+                Flick.centerX = WebView.mouseX;
+                Flick.centerY = WebView.mouseY;
+                WebBrowser.state = "Normal";
+            } else {
+                zoomOut();
+            }
+        }
+    </Script>
+
+    <Item id="WebPanel" anchors.fill="{parent}" clip="true">
+        <Rect color="#555555" anchors.fill="{parent}"/>
+        <Image src="content/pics/softshadow-bottom.png" width="{WebPanel.width}" height="16" />
+        <Image src="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 &lt; 0
+                                ? -Flick.xPosition
+                                : Flick.xPosition &gt; Flick.viewportWidth-Flick.width
+                                    ? -Flick.xPosition+Flick.viewportWidth-Flick.width
+                                    : 0}"
+                    y="{Flick.yPosition &lt; 0 ? -Flick.yPosition : progressOff*(Flick.yPosition>height?-height:-Flick.yPosition)}"
+                    height="64" src="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 src="content/pics/addressbar.sci" anchors.fill="{UrlBox}"/>
+                        <Image id="UrlBoxhl" src="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 &lt; 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" src="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" src="content/pics/back.png" />
+                <Image anchors.fill="{parent}" id="back_d" src="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" src="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" src="content/pics/forward.png" />
+                <Image anchors.fill="{parent}" id="forward_d" src="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>