diff options
Diffstat (limited to 'demos/declarative/twitter')
20 files changed, 628 insertions, 0 deletions
diff --git a/demos/declarative/twitter/content/AuthView.qml b/demos/declarative/twitter/content/AuthView.qml new file mode 100644 index 0000000..bcf4646 --- /dev/null +++ b/demos/declarative/twitter/content/AuthView.qml @@ -0,0 +1,99 @@ +import Qt 4.6 + +Item { + id: wrapper + Column { + anchors.centerIn: parent + spacing: 20 + Column{ + spacing: 4 + Text { + text: "Screen name:" + font.pixelSize: 16; font.bold: true; color: "white"; style: Text.Raised; styleColor: "black" + horizontalAlignment: Qt.AlignRight + } + Item { + width: 220 + height: 28 + BorderImage { source: "images/lineedit.sci"; anchors.fill: parent } + TextInput{ + id: nameIn + width: parent.width - 8 + anchors.centerIn: parent + maximumLength:21 + font.pixelSize: 16; + font.bold: true + color: "#151515"; selectionColor: "green" + KeyNavigation.down: passIn + focus: true + } + } + } + Column{ + spacing: 4 + Text { + text: "Password:" + font.pixelSize: 16; font.bold: true; color: "white"; style: Text.Raised; styleColor: "black" + horizontalAlignment: Qt.AlignRight + } + Item { + width: 220 + height: 28 + BorderImage { source: "images/lineedit.sci"; anchors.fill: parent } + TextInput{ + id: passIn + width: parent.width - 8 + anchors.centerIn: parent + maximumLength:21 + echoMode: TextInput.Password + font.pixelSize: 16; + font.bold: true + color: "#151515"; selectionColor: "green" + KeyNavigation.down: login + KeyNavigation.up: nameIn + } + } + } + Row{ + spacing: 10 + Button { + width: 100 + height: 32 + id: login + keyUsing: true; + function doLogin(){ + rssModel.authName=nameIn.text; + rssModel.authPass=passIn.text; + rssModel.tags='my timeline'; + screen.focus = true; + } + text: "Log in" + KeyNavigation.right: guest + KeyNavigation.up: passIn + Keys.onReturnPressed: login.doLogin(); + Keys.onSelectPressed: login.doLogin(); + Keys.onSpacePressed: login.doLogin(); + onClicked: login.doLogin(); + } + Button { + width: 100 + height: 32 + id: guest + keyUsing: true; + function doGuest() + { + rssModel.authName='-'; + screen.focus = true; + screen.setMode(true); + } + text: "Guest" + KeyNavigation.left: login + KeyNavigation.up: passIn + Keys.onReturnPressed: guest.doGuest(); + Keys.onSelectPressed: guest.doGuest(); + Keys.onSpacePressed: guest.doGuest(); + onClicked: guest.doGuest(); + } + } + } +} diff --git a/demos/declarative/twitter/content/Button.qml b/demos/declarative/twitter/content/Button.qml new file mode 100644 index 0000000..09d471c --- /dev/null +++ b/demos/declarative/twitter/content/Button.qml @@ -0,0 +1,49 @@ +import Qt 4.6 + +Item { + id: container + + signal clicked + + property string text + property bool keyUsing: false + + BorderImage { + id: buttonImage + source: "images/toolbutton.sci" + width: container.width; height: container.height + } + BorderImage { + id: pressed + opacity: 0 + source: "images/toolbutton.sci" + width: container.width; height: container.height + } + MouseRegion { + id: mouseRegion + anchors.fill: buttonImage + onClicked: { container.clicked(); } + } + Text { + id: btnText + color: if(container.keyUsing){"#DDDDDD";} else {"#FFFFFF";} + anchors.centerIn: buttonImage; font.bold: true + text: container.text; style: Text.Raised; styleColor: "black" + font.pixelSize: 12 + } + states: [ + State { + name: "Pressed" + when: mouseRegion.pressed == true + PropertyChanges { target: pressed; opacity: 1 } + }, + State { + name: "Focused" + when: container.focus == true + PropertyChanges { target: btnText; color: "#FFFFFF" } + } + ] + transitions: Transition { + ColorAnimation { target: btnText; } + } +} diff --git a/demos/declarative/twitter/content/FatDelegate.qml b/demos/declarative/twitter/content/FatDelegate.qml new file mode 100644 index 0000000..2b9288b --- /dev/null +++ b/demos/declarative/twitter/content/FatDelegate.qml @@ -0,0 +1,46 @@ +import Qt 4.6 + +Component { + id: listDelegate + Item { + id: wrapper; width: wrapper.ListView.view.width; height: if(txt.height > 58){txt.height+8}else{58}//50+4+4 + Script { + function handleLink(link){ + if(link.slice(0,3) == 'app'){ + setUser(link.slice(7)); + screen.setMode(true); + }else if(link.slice(0,4) == 'http'){ + Qt.openUrlExternally(link); + } + } + function addTags(str){ + var ret = str.replace(/@[a-zA-Z0-9_]+/g, '<a href="app://$&">$&</a>');//click to jump to user? + var ret2 = ret.replace(/http:\/\/[^ \n\t]+/g, '<a href="$&">$&</a>');//surrounds http links with html link tags + return ret2; + } + } + Item { + id: moveMe; height: parent.height + Rectangle { + id: blackRect + color: "black"; opacity: wrapper.ListView.index % 2 ? 0.2 : 0.3; height: wrapper.height-2; width: wrapper.width; y: 1 + } + Rectangle { + id: whiteRect; x: 6; width: 50; height: 50; color: "white"; smooth: true + anchors.verticalCenter: parent.verticalCenter + + Loading { x: 1; y: 1; width: 48; height: 48; visible: realImage.status != 1 } + Image { id: realImage; source: userImage; x: 1; y: 1; width:48; height:48 } + } + Text { id:txt; y:4; x: 56 + text: '<html><style type="text/css">a:link {color:"#aaccaa"}; a:visited {color:"#336633"}</style>' + + '<a href="app://@'+userScreenName+'"><b>'+userScreenName + "</b></a> from " +source + + "<br /><b>" + addTags(statusText) + "</b></html>"; + textFormat: Qt.RichText + color: "white"; color: "#cccccc"; style: Text.Raised; styleColor: "black"; wrap: true + anchors.left: whiteRect.right; anchors.right: blackRect.right; anchors.leftMargin: 6; anchors.rightMargin: 6 + onLinkActivated: handleLink(link) + } + } + } +} diff --git a/demos/declarative/twitter/content/HomeTitleBar.qml b/demos/declarative/twitter/content/HomeTitleBar.qml new file mode 100644 index 0000000..c48befd --- /dev/null +++ b/demos/declarative/twitter/content/HomeTitleBar.qml @@ -0,0 +1,121 @@ +import Qt 4.6 + +Item { + id: titleBar + + signal update() + onYChanged: state="" //When switching titlebars + + BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } + Item { + id: container + width: (parent.width * 2) - 55 ; height: parent.height + + Script { + function accept() { + if(rssModel.authName == '' || rssModel.authPass == '') + return false;//Can't login like that + + var postData = "status=" + editor.text; + var postman = new XMLHttpRequest(); + postman.open("POST", "http://twitter.com/statuses/update.xml", true, rssModel.authName, rssModel.authPass); + postman.onreadystatechange = function() { + if (postman.readyState == postman.DONE) { + titleBar.update(); + } + } + postman.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + postman.send(postData); + + editor.text = "" + titleBar.state = "" + } + } + + Rectangle { + x: 6; width: 50; height: 50; color: "white"; smooth: true + anchors.verticalCenter: parent.verticalCenter + + UserModel { user: rssModel.authName; id: userModel } + Component { id: imgDelegate; + Item { + Loading { width:48; height:48; visible: realImage.status != 1 } + Image { source: image; width:48; height:48; id: realImage } + } + } + ListView { model: userModel.model; x:1; y:1; delegate: imgDelegate } + } + + Text { + id: categoryText + anchors.left: parent.left; anchors.right: tagButton.left + anchors.leftMargin: 58; anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + elide: Text.ElideLeft + text: "Timeline for " + rssModel.authName + font.pixelSize: 12; font.bold: true; color: "white"; style: Text.Raised; styleColor: "black" + } + + Button { + id: tagButton; x: titleBar.width - 90; width: 85; height: 32; text: "New Post..." + anchors.verticalCenter: parent.verticalCenter; + onClicked: if (titleBar.state == "Posting") accept(); else titleBar.state = "Posting" + } + + Text { + id: charsLeftText; anchors.horizontalCenter: tagButton.horizontalCenter; + anchors.top: tagButton.bottom; anchors.topMargin: 2 + text: {140 - editor.text.length;} visible: titleBar.state == "Posting" + font.pointSize: 10; font.bold: true; color: "white"; style: Text.Raised; styleColor: "black" + } + Item { + id: txtEdit; + anchors.left: tagButton.right; anchors.leftMargin: 5; y: 4 + anchors.right: parent.right; anchors.rightMargin: 40; height: parent.height - 9 + BorderImage { source: "images/lineedit.sci"; anchors.fill: parent } + + Binding {//TODO: Can this be a function, which also resets the cursor? And flashes? + when: editor.text.length > 140 + target: editor + property: "text" + value: editor.text.slice(0,140) + } + TextEdit { + id: editor + anchors.left: parent.left; + anchors.leftMargin: 8; + anchors.bottom: parent.bottom + anchors.bottomMargin: 4; + cursorVisible: true; font.bold: true + width: parent.width - 12 + height: parent.height - 8 + font.pointSize: 10 + wrap: true + color: "#151515"; selectionColor: "green" + } + Keys.forwardTo: [(returnKey), (editor)] + Item { + id: returnKey + Keys.onReturnPressed: accept() + Keys.onEscapePressed: titleBar.state = "" + } + } + } + states: [ + State { + name: "Posting" + PropertyChanges { target: container; x: -tagButton.x + 5 } + PropertyChanges { target: titleBar; height: 80 } + PropertyChanges { target: tagButton; text: "OK" } + PropertyChanges { target: tagButton; width: 28 } + PropertyChanges { target: tagButton; height: 24 } + PropertyChanges { target: txtEdit; focus: true } + } + ] + transitions: [ + Transition { + from: "*"; to: "*" + NumberAnimation { matchProperties: "x,y,width,height"; easing: "easeInOutQuad" } + } + ] +} diff --git a/demos/declarative/twitter/content/Loading.qml b/demos/declarative/twitter/content/Loading.qml new file mode 100644 index 0000000..8b22e70 --- /dev/null +++ b/demos/declarative/twitter/content/Loading.qml @@ -0,0 +1,8 @@ +import Qt 4.6 + +Image { + id: loading; source: "images/loading.png"; transformOrigin: "Center" + rotation: NumberAnimation { + id: "RotationAnimation"; from: 0; to: 360; running: loading.visible == true; repeat: true; duration: 900 + } +} diff --git a/demos/declarative/twitter/content/MultiTitleBar.qml b/demos/declarative/twitter/content/MultiTitleBar.qml new file mode 100644 index 0000000..ef8a450 --- /dev/null +++ b/demos/declarative/twitter/content/MultiTitleBar.qml @@ -0,0 +1,24 @@ +import Qt 4.6 + +Item { + height: homeBar.height + HomeTitleBar { id: homeBar; width: parent.width; height: 60; + onUpdate: rssModel.reload() + } + TitleBar { id: titleBar; width: parent.width; height: 60; + y: -80 + untaggedString: "Latest tweets from everyone" + taggedString: "Latest tweets from " + } + states: [ + State { + name: "search"; when: screen.userView + PropertyChanges { target: titleBar; y: 0 } + PropertyChanges { target: homeBar; y: -80 } + } + ] + transitions: [ + Transition { NumberAnimation { matchProperties: "x,y"; duration: 500; easing: "easeInOutQuad" } } + ] +} + diff --git a/demos/declarative/twitter/content/RssModel.qml b/demos/declarative/twitter/content/RssModel.qml new file mode 100644 index 0000000..9d88bb7 --- /dev/null +++ b/demos/declarative/twitter/content/RssModel.qml @@ -0,0 +1,44 @@ +import Qt 4.6 + +Item { id: wrapper + property var model: xmlModel + property string tags : "" + property string authName : "" + property string authPass : "" + property string mode : "everyone" + property int status: xmlModel.status + function reload() { xmlModel.reload(); } +XmlListModel { + id: xmlModel + + source:{ + if (wrapper.authName == ""){ + ""; //Avoid worthless calls to twitter servers + }else if(wrapper.mode == 'user'){ + "https://"+ ((wrapper.authName!="" && wrapper.authPass!="")? (wrapper.authName+":"+wrapper.authPass+"@") : "" )+"twitter.com/statuses/user_timeline.xml?screen_name="+wrapper.tags; + }else if(wrapper.mode == 'self'){ + "https://"+ ((wrapper.authName!="" && wrapper.authPass!="")? (wrapper.authName+":"+wrapper.authPass+"@") : "" )+"twitter.com/statuses/friends_timeline.xml"; + }else{//everyone/public + "http://twitter.com/statuses/public_timeline.xml"; + } + } + query: "/statuses/status" + + XmlRole { name: "statusText"; query: "text/string()" } + XmlRole { name: "timestamp"; query: "created_at/string()" } + XmlRole { name: "source"; query: "source/string()" } + XmlRole { name: "userName"; query: "user/name/string()" } + XmlRole { name: "userScreenName"; query: "user/screen_name/string()" } + XmlRole { name: "userImage"; query: "user/profile_image_url/string()" } + XmlRole { name: "userLocation"; query: "user/location/string()" } + XmlRole { name: "userDescription"; query: "user/description/string()" } + XmlRole { name: "userFollowers"; query: "user/followers_count/string()" } + XmlRole { name: "userStatuses"; query: "user/statuses_count/string()" } + //TODO: Could also get the user's color scheme, timezone and a few other things +} +Binding { + property: "mode" + target: wrapper + value: {if(wrapper.tags==''){"everyone";}else if(wrapper.tags=='my timeline'){"self";}else{"user";}} +} +} diff --git a/demos/declarative/twitter/content/TitleBar.qml b/demos/declarative/twitter/content/TitleBar.qml new file mode 100644 index 0000000..28e7389 --- /dev/null +++ b/demos/declarative/twitter/content/TitleBar.qml @@ -0,0 +1,77 @@ +import Qt 4.6 + +Item { + id: titleBar + property string untaggedString: "Uploads from everyone" + property string taggedString: "Recent uploads tagged " + + BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } + + Item { + id: container + width: (parent.width * 2) - 55 ; height: parent.height + + Script { + function accept() { + titleBar.state = "" + background.state = "" + rssModel.tags = editor.text + } + } + + Text { + id: categoryText + anchors { + left: parent.left; right: tagButton.left; leftMargin: 10; rightMargin: 10 + verticalCenter: parent.verticalCenter + } + elide: Text.ElideLeft + text: (rssModel.tags=="" ? untaggedString : taggedString + rssModel.tags) + font.bold: true; color: "White"; style: Text.Raised; styleColor: "Black" + font.pixelSize: 12 + } + + Button { + id: tagButton; x: titleBar.width - 50; width: 45; height: 32; text: "..." + onClicked: if (titleBar.state == "Tags") accept(); else titleBar.state = "Tags" + anchors.verticalCenter: parent.verticalCenter + } + + Item { + id: lineEdit + y: 4; height: parent.height - 9 + anchors { left: tagButton.right; leftMargin: 5; right: parent.right; rightMargin: 5 } + + BorderImage { source: "images/lineedit.sci"; anchors.fill: parent } + + TextInput { + id: editor + anchors { + left: parent.left; right: parent.right; leftMargin: 10; rightMargin: 10 + verticalCenter: parent.verticalCenter + } + cursorVisible: true; font.bold: true + color: "#151515"; selectionColor: "Green" + } + + Keys.forwardTo: [ (returnKey), (editor)] + + Item { + id: returnKey + Keys.onReturnPressed: accept() + Keys.onEscapePressed: titleBar.state = "" + } + } + } + + states: State { + name: "Tags" + PropertyChanges { target: container; x: -tagButton.x + 5 } + PropertyChanges { target: tagButton; text: "OK" } + PropertyChanges { target: lineEdit; focus: true } + } + + transitions: Transition { + NumberAnimation { matchProperties: "x"; easing: "easeInOutQuad" } + } +} diff --git a/demos/declarative/twitter/content/ToolBar.qml b/demos/declarative/twitter/content/ToolBar.qml new file mode 100644 index 0000000..f96c767 --- /dev/null +++ b/demos/declarative/twitter/content/ToolBar.qml @@ -0,0 +1,24 @@ +import Qt 4.6 + +Item { + id: toolbar + + property alias button1Label: button1.text + property alias button2Label: button2.text + signal button1Clicked + signal button2Clicked + + BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } + + Button { + id: button1 + anchors.left: parent.left; anchors.leftMargin: 5; y: 3; width: 140; height: 32 + onClicked: toolbar.button1Clicked() + } + + Button { + id: button2 + anchors.right: parent.right; anchors.rightMargin: 5; y: 3; width: 140; height: 32 + onClicked: toolbar.button2Clicked() + } +} diff --git a/demos/declarative/twitter/content/UserModel.qml b/demos/declarative/twitter/content/UserModel.qml new file mode 100644 index 0000000..c146b84 --- /dev/null +++ b/demos/declarative/twitter/content/UserModel.qml @@ -0,0 +1,26 @@ +import Qt 4.6 + +//This "model" gets the user information about the searched user. Mainly for the icon. +//Copied from RssModel + +Item { id: wrapper + property var model: xmlModel + property string user : "" + property int status: xmlModel.status + function reload() { xmlModel.reload(); } +XmlListModel { + id: xmlModel + + source: {if(user!="") {"http://twitter.com/users/show.xml?screen_name="+user;}else{"";}} + query: "/user" + + XmlRole { name: "name"; query: "name/string()" } + XmlRole { name: "screenName"; query: "screen_name/string()" } + XmlRole { name: "image"; query: "profile_image_url/string()" } + XmlRole { name: "location"; query: "location/string()" } + XmlRole { name: "description"; query: "description/string()" } + XmlRole { name: "followers"; query: "followers_count/string()" } + //XmlRole { name: "protected"; query: "protected/bool()" } + //TODO: Could also get the user's color scheme, timezone and a few other things +} +} diff --git a/demos/declarative/twitter/content/images/gloss.png b/demos/declarative/twitter/content/images/gloss.png Binary files differnew file mode 100644 index 0000000..5d370cd --- /dev/null +++ b/demos/declarative/twitter/content/images/gloss.png diff --git a/demos/declarative/twitter/content/images/lineedit.png b/demos/declarative/twitter/content/images/lineedit.png Binary files differnew file mode 100644 index 0000000..2cc38dc --- /dev/null +++ b/demos/declarative/twitter/content/images/lineedit.png diff --git a/demos/declarative/twitter/content/images/lineedit.sci b/demos/declarative/twitter/content/images/lineedit.sci new file mode 100644 index 0000000..054bff7 --- /dev/null +++ b/demos/declarative/twitter/content/images/lineedit.sci @@ -0,0 +1,5 @@ +border.left: 10 +border.top: 10 +border.bottom: 10 +border.right: 10 +source: lineedit.png diff --git a/demos/declarative/twitter/content/images/loading.png b/demos/declarative/twitter/content/images/loading.png Binary files differnew file mode 100644 index 0000000..47a1589 --- /dev/null +++ b/demos/declarative/twitter/content/images/loading.png diff --git a/demos/declarative/twitter/content/images/stripes.png b/demos/declarative/twitter/content/images/stripes.png Binary files differnew file mode 100644 index 0000000..9f36727 --- /dev/null +++ b/demos/declarative/twitter/content/images/stripes.png diff --git a/demos/declarative/twitter/content/images/titlebar.png b/demos/declarative/twitter/content/images/titlebar.png Binary files differnew file mode 100644 index 0000000..51c9008 --- /dev/null +++ b/demos/declarative/twitter/content/images/titlebar.png diff --git a/demos/declarative/twitter/content/images/titlebar.sci b/demos/declarative/twitter/content/images/titlebar.sci new file mode 100644 index 0000000..0418d94 --- /dev/null +++ b/demos/declarative/twitter/content/images/titlebar.sci @@ -0,0 +1,5 @@ +border.left: 10 +border.top: 12 +border.bottom: 12 +border.right: 10 +source: titlebar.png diff --git a/demos/declarative/twitter/content/images/toolbutton.png b/demos/declarative/twitter/content/images/toolbutton.png Binary files differnew file mode 100644 index 0000000..1131001 --- /dev/null +++ b/demos/declarative/twitter/content/images/toolbutton.png diff --git a/demos/declarative/twitter/content/images/toolbutton.sci b/demos/declarative/twitter/content/images/toolbutton.sci new file mode 100644 index 0000000..9e4f965 --- /dev/null +++ b/demos/declarative/twitter/content/images/toolbutton.sci @@ -0,0 +1,5 @@ +border.left: 15 +border.top: 4 +border.bottom: 4 +border.right: 15 +source: toolbutton.png diff --git a/demos/declarative/twitter/twitter.qml b/demos/declarative/twitter/twitter.qml new file mode 100644 index 0000000..bb7da9c --- /dev/null +++ b/demos/declarative/twitter/twitter.qml @@ -0,0 +1,95 @@ +import Qt 4.6 +import "content" as Twitter + +Item { + id: screen; width: 320; height: 480 + property bool userView : false + property var tmpStr + function setMode(m){ + screen.userView = m; + if(m == false){ + rssModel.tags='my timeline'; + rssModel.reload(); + toolBar.button2Label = "View others"; + } else { + toolBar.button2Label = "Return home"; + } + } + //Workaround for bug 260266 + Timer{ interval: 1; running: false; repeat: false; onTriggered: reallySetUser(); id:hack } + Script { + function setUser(str){hack.running = true; tmpStr = str} + function reallySetUser(){rssModel.tags = tmpStr;} + } + + //TODO: better way to return to the auth screen + Keys.onEscapePressed: rssModel.authName='' + Rectangle { + id: background + anchors.fill: parent; color: "#343434"; + + Image { source: "content/images/stripes.png"; fillMode: Image.Tile; anchors.fill: parent; opacity: 0.3 } + + Twitter.RssModel { id: rssModel } + Twitter.Loading { anchors.centerIn: parent; visible: rssModel.status==XmlListModel.Loading && state!='unauthed'} + Text { + width: 180 + text: "Could not access twitter using this screen name and password pair."; + color: "white"; color: "#cccccc"; style: Text.Raised; styleColor: "black"; wrap: true + visible: rssModel.status==XmlListModel.Error; anchors.centerIn: parent + } + + Item { + id: views + x: 2; width: parent.width - 4 + y:60 //Below the title bars + height: 380 + + Twitter.AuthView{ + id: authView + anchors.verticalCenter: parent.verticalCenter + width: parent.width; height: parent.height-60; + x: -(screen.width * 1.5) + } + + Twitter.FatDelegate { id: fatDelegate } + ListView { + id: mainView; model: rssModel.model; delegate: fatDelegate; + width: parent.width; height: parent.height; x: 0; cacheBuffer: 100; + } + } + + Twitter.MultiTitleBar { id: titleBar; width: parent.width } + Twitter.ToolBar { id: toolBar; height: 40; + //anchors.bottom: parent.bottom; + //TODO: Use anchor changes instead of hard coding + y: screen.height - 40 + width: parent.width; opacity: 0.9 + button1Label: "Update" + button2Label: "View others" + onButton1Clicked: rssModel.reload(); + onButton2Clicked: + { + if(screen.userView == true){ + screen.setMode(false); + }else{ + rssModel.tags=''; + screen.setMode(true); + } + } + } + + states: [ + State { + name: "unauthed"; when: rssModel.authName=="" + PropertyChanges { target: authView; x: 0 } + PropertyChanges { target: mainView; x: -(parent.width * 1.5) } + PropertyChanges { target: titleBar; y: -80 } + PropertyChanges { target: toolBar; y: screen.height } + } + ] + transitions: [ + Transition { NumberAnimation { matchProperties: "x,y"; duration: 500; easing: "easeInOutQuad" } } + ] + } +} |
