summaryrefslogtreecommitdiffstats
path: root/demos/declarative/twitter/content/HomeTitleBar.qml
blob: 878a83e05ea0cdbd6ba4e626418b53321bd9165c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import Qt 4.6
import "../../flickr/mobile"
import "../../flickr/common"

Item {
    id: TitleBar

    signal update()
    onYChanged: state="" //When switching titlebars

    BorderImage { source: "../../flickr/mobile/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.send(postData);

                TitleBar.state = ""
            }
        }

        Rectangle {
            id: WhiteRect; x: 6; width: 50; height: 50; color: "white"; smooth: true
            anchors.verticalCenter: parent.verticalCenter

            UserModel { user: RssModel.authName; id: userModel }
            Component { id: imgDelegate; 
                Item { id: Wrapper
                    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: "ElideLeft"
            text: "Timeline for " + RssModel.authName
            font.pointSize: 10; font.bold: true; color: "white"; style: "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: "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: "../../flickr/mobile/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"; highlightColor: "green"
            }
            KeyProxy {
                id: Proxy
                anchors.fill: parent
                targets: [(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: Proxy; focus: true }
        }
    ]
    transitions: [
        Transition {
            from: "*"; to: "*"
            NumberAnimation { properties: "x,y,width,height"; easing: "easeInOutQuad" }
        }
    ]
}