From 54b28d3db32fdda768ec0561a5694c8fcd07685f Mon Sep 17 00:00:00 2001 From: Tapani Mikola Date: Wed, 5 Aug 2009 11:51:18 +0300 Subject: Made the url input text field to work with the FieldText component copied and slightly modified from contacts demo. --- demos/declarative/webbrowser/README | 6 - .../declarative/webbrowser/fieldtext/FieldText.qml | 176 +++++++++++++++++++++ .../webbrowser/fieldtext/pics/cancel.png | Bin 0 -> 1038 bytes demos/declarative/webbrowser/fieldtext/pics/ok.png | Bin 0 -> 655 bytes demos/declarative/webbrowser/webbrowser.qml | 43 ++--- 5 files changed, 201 insertions(+), 24 deletions(-) delete mode 100644 demos/declarative/webbrowser/README create mode 100644 demos/declarative/webbrowser/fieldtext/FieldText.qml create mode 100644 demos/declarative/webbrowser/fieldtext/pics/cancel.png create mode 100644 demos/declarative/webbrowser/fieldtext/pics/ok.png diff --git a/demos/declarative/webbrowser/README b/demos/declarative/webbrowser/README deleted file mode 100644 index 7bfd41f..0000000 --- a/demos/declarative/webbrowser/README +++ /dev/null @@ -1,6 +0,0 @@ -For good performance, be sure to use disk cache for remote content: - - duiviewer -cache webbrowser.qml - -Otherwise everything always re-loads over the network. - diff --git a/demos/declarative/webbrowser/fieldtext/FieldText.qml b/demos/declarative/webbrowser/fieldtext/FieldText.qml new file mode 100644 index 0000000..e5db879 --- /dev/null +++ b/demos/declarative/webbrowser/fieldtext/FieldText.qml @@ -0,0 +1,176 @@ +import Qt 4.6 + +Item { + id: fieldText + height: 30 + property string text: "" + property string label: "" + property bool mouseGrabbed: false + signal confirmed + signal cancelled + signal startEdit + + resources: [ + Script { + + function edit() { + if (!mouseGrabbed) { + fieldText.startEdit(); + fieldText.state='editing'; + mouseGrabbed=true; + } + } + + function confirm() { + fieldText.state=''; + fieldText.text = textEdit.text; + mouseGrabbed=false; + fieldText.confirmed(); + } + + function reset() { + textEdit.text = fieldText.text; + fieldText.state=''; + mouseGrabbed=false; + fieldText.cancelled(); + } + + } + ] + + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "pics/cancel.png" + opacity: 0 + } + + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "pics/ok.png" + opacity: 0 + } + + TextEdit { + id: textEdit + text: fieldText.text + focus: false + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.verticalCenter: parent.verticalCenter + color: "black" + font.bold: true + readOnly: true + wrap: false + } + + Text { + id: textLabel + x: 5 + width: parent.width-10 + anchors.verticalCenter: parent.verticalCenter + hAlign: "AlignHCenter" + color: fieldText.state == "editing" ? "#505050" : "#AAAAAA" + font.italic: true + font.bold: true + text: label + opacity: textEdit.text == '' ? 1 : 0 + opacity: Behavior { + NumberAnimation { + property: "opacity" + duration: 250 + } + } + } + + KeyProxy { + id: proxy + focus: false + anchors.fill: parent + targets: [keyActions,textEdit] + } + + KeyActions { + id: keyActions + keyReturn: "confirm()" + enter: "confirm()" + } + + MouseRegion { + anchors.fill: cancelIcon + onClicked: { reset() } + } + + MouseRegion { + anchors.fill: confirmIcon + onClicked: { confirm() } + } + + MouseRegion { + id: editRegion + anchors.fill: textEdit + onClicked: { edit() } + } + + states: [ + State { + name: "editing" + SetProperties { + target: confirmIcon + opacity: 1 + } + SetProperties { + target: cancelIcon + opacity: 1 + } + SetProperties { + target: textEdit + color: "black" + readOnly: false + } + SetProperties { + target: editRegion + opacity: 0 + } + SetProperties { + target: textEdit.anchors + leftMargin: 34 + } + SetProperties { + target: textEdit.anchors + rightMargin: 34 + } + SetProperties { + target: proxy + focus: true + } + } + ] + + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumberAnimation { + properties: "opacity,leftMargin,rightMargin" + duration: 200 + } + ColorAnimation { + property: "color" + duration: 150 + } + } + ] +} diff --git a/demos/declarative/webbrowser/fieldtext/pics/cancel.png b/demos/declarative/webbrowser/fieldtext/pics/cancel.png new file mode 100644 index 0000000..ecc9533 Binary files /dev/null and b/demos/declarative/webbrowser/fieldtext/pics/cancel.png differ diff --git a/demos/declarative/webbrowser/fieldtext/pics/ok.png b/demos/declarative/webbrowser/fieldtext/pics/ok.png new file mode 100644 index 0000000..5795f04 Binary files /dev/null and b/demos/declarative/webbrowser/fieldtext/pics/ok.png differ diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml index 7a7d9e2..9943011 100644 --- a/demos/declarative/webbrowser/webbrowser.qml +++ b/demos/declarative/webbrowser/webbrowser.qml @@ -1,11 +1,12 @@ import Qt 4.6 import "content" +import "fieldtext" Item { id: WebBrowser - property var url : "http://www.qtsoftware.com" + property string url : "http://www.qtsoftware.com/" width: 640 height: 480 @@ -57,6 +58,13 @@ Item { height: 60 z: 1 + Rect { + id: HeaderSpaceTint + color: "black" + opacity: 0 + anchors.fill: parent + } + Image { id: Header source: "content/pics/header.png" @@ -104,10 +112,13 @@ Item { anchors.rightMargin: 12 anchors.top: parent.top clip: true + property bool mouseGrabbed: false + Image { source: "content/pics/addressbar.sci" anchors.fill: UrlBox } + Image { id: UrlBoxhl source: "content/pics/addressbar-filled.sci" @@ -116,27 +127,23 @@ Item { opacity: 1-Header.progressOff clip: true } - - /* - KeyProxy { - id: proxy - anchors.left: UrlBox.left - anchors.fill: UrlBox - targets: [keyActions,EditUrl] - } - KeyActions { - id: keyActions - keyReturn: "WebBrowser.url = EditUrl.text; proxy.focus=false;" - } - */ - TextEdit { + + FieldText { id: EditUrl + mouseGrabbed: parent.mouseGrabbed + /*<<<<<<< HEAD:demos/declarative/webbrowser/webbrowser.qml text: MyWebView.url == '' ? ' ' : MyWebView.url wrap: false font.size: 11 color: "#555555" focusOnPress: true + =======*/ + text: WebBrowser.url + label: "url:" + onConfirmed: { print ('OnConfirmed: '+EditUrl.text); WebBrowser.url = EditUrl.text; print (EditUrl.text); MyWebView.focus=true } + onCancelled: { MyWebView.focus=true } + onStartEdit: { print (EditUrl.text); MyWebView.focus=false } anchors.left: UrlBox.left anchors.right: UrlBox.right @@ -198,7 +205,7 @@ Item { idealHeight: Flick.height/scale scale: (width > 0) ? Flick.width/width*zoomedOut+(1-zoomedOut) : 1 - onUrlChanged: { Flick.xPosition=0; Flick.yPosition=0; zoomOut() } + onUrlChanged: { print ('OnUrlChanged: '+url); WebBrowser.url = url.toString(); print ('Moved to url: ' + WebBrowser.url) } onDoubleClick: { toggleZoom() } property real zoomedOut : 1 @@ -208,10 +215,10 @@ Item { color: "black" opacity: 0 anchors.fill: MyWebView - MouseRegion { + /*MouseRegion { anchors.fill: WebViewTint onClicked: { proxy.focus=false } - } + }*/ } } Image { -- cgit v0.12