← Back to branch summary

~nik90/ubuntu-clock-app/new-timer-design

« back to all changes in this revision

Viewing changes to stopwatch/StopwatchPage.qml

  • Committer: Nekhelesh Ramananthan
  • Date: 2013-06-21 22:06:05 UTC
  • Revision ID: krnekhelesh@gmail.com-20130621220605-jp20fhwnvez1ncg3
Basic working implementation of new visual design

Show diffs side-by-side

added added

removed removed

Lines of Context:
stopwatch/StopwatchPage.qml
46
46
        }
47
47
    }
48
48
 
49
 
    anchors.margins: units.gu(2)
50
 
 
51
49
    ListModel {
52
 
        id: laps        
 
50
        id: laps
53
51
 
54
52
        property int lapStart: 0;
55
53
 
60
58
        }
61
59
    }
62
60
 
63
 
    Label {
64
 
        id: labelStopwatch
65
 
        objectName: "labelStopwatch"
66
 
 
67
 
        anchors { left: parent.left; top: parent.top; topMargin: units.gu(5); right: parent.right }
68
 
        height: units.gu(6)
69
 
        horizontalAlignment: Text.AlignHCenter
70
 
        verticalAlignment: Text.AlignVCenter
71
 
 
72
 
        fontSize: "x-large"
73
 
        text: labelStopwatch.text = SScript.intervalToString(analogStopwatch.hours, analogStopwatch.minutes, analogStopwatch.seconds, analogStopwatch.milliseconds)
74
 
    }
75
 
 
76
61
    // Items within this container will move up/down depending on the state.
77
62
    AnimationContainer {
78
63
        id: stopwatchAnimationContainer
79
64
 
80
65
        // FIXME: The y is given a arbitary value which needs to be fixed by ensuring that the outerglow is not drawn outside the clock face area.
81
 
        initYPos: units.gu(5);
82
 
        finalYPos: -listLap.height;
83
 
 
84
 
        anchors { left: parent.left; top: labelStopwatch.bottom; right: parent.right; bottom: parent.bottom }
 
66
        initYPos: units.gu(0);
 
67
        finalYPos: -listViewLap.height;
 
68
 
 
69
        anchors.fill: parent
 
70
 
 
71
        // Label to show the current time
 
72
        Rectangle {
 
73
            id: labelContainer;
 
74
 
 
75
            z: analogStopwatch.z + 1;
 
76
            width: analogStopwatch.innerDimension; height: width;
 
77
            anchors.centerIn: analogStopwatch;
 
78
            color: "transparent"
 
79
 
 
80
            Label {
 
81
                id: labelStopwatch
 
82
                objectName: "labelStopwatch"
 
83
 
 
84
                anchors.centerIn: parent
 
85
                horizontalAlignment: Text.AlignHCenter
 
86
                verticalAlignment: Text.AlignVCenter
 
87
                color: Constants.brightWhite;
 
88
 
 
89
                fontSize: "x-large"
 
90
                text: labelStopwatch.text = SScript.intervalToString(analogStopwatch.hours, analogStopwatch.minutes, analogStopwatch.seconds, analogStopwatch.milliseconds)
 
91
            }
 
92
        }
85
93
 
86
94
        // Component which draws the analog stopwatch face, controls the timer and calculates the time.
87
95
        AnalogStopwatch {
88
96
            id: analogStopwatch
89
97
 
90
 
            anchors { top: parent.top; horizontalCenter: parent.horizontalCenter }
91
 
        }
92
 
 
93
 
        // Bottom row to display Start, Reset buttons and lap information.
94
 
        Row {
95
 
            id: rowButtonStopwatch
96
 
 
97
 
            spacing: units.gu(2)
98
 
            anchors { top: analogStopwatch.bottom; topMargin: units.gu(8); horizontalCenter: parent.horizontalCenter }
99
 
            height: childrenRect.height
100
 
 
101
 
            Button {
102
 
                id: buttonStopwatch
103
 
                objectName: "buttonStopwatch"
104
 
 
105
 
                width: units.gu(12); height: units.gu(5)
106
 
 
107
 
                color: Constants.green
108
 
                text: i18n.tr("Start")
109
 
 
110
 
                onClicked: {
111
 
                    if(analogStopwatch.timerStatus == false) {
112
 
                        analogStopwatch.start()
113
 
                        stopWatchLabelUpdate.start()
114
 
                        if (analogStopwatch.flag) {
115
 
                            analogStopwatch.startTime = SScript.timeToMs(new Date());
116
 
                            analogStopwatch.flag = false;
117
 
                        }
118
 
                        else {
119
 
                            analogStopwatch.delay = Math.abs(SScript.timeToMs(new Date()) - analogStopwatch.stopTime);
120
 
                            console.log(analogStopwatch.startTime + "| " + analogStopwatch.delay);
121
 
                            analogStopwatch.startTime = analogStopwatch.startTime + analogStopwatch.delay;
122
 
                            console.log(analogStopwatch.startTime);
123
 
                        }
124
 
                        text = i18n.tr("Stop");
125
 
                        color = Constants.ubuntuOrange;
126
 
                        buttonReset.state = "LAP";
127
 
                    } else {
128
 
                        analogStopwatch.stop()
129
 
                        stopWatchLabelUpdate.stop()
130
 
                        analogStopwatch.stopTime = SScript.timeToMs(new Date());
131
 
                        console.log(analogStopwatch.stopTime)
132
 
                        text = i18n.tr("Start");
133
 
                        color = Constants.green;
134
 
                        buttonReset.state = "RESET";
135
 
                    }
136
 
                }
137
 
            }
138
 
 
139
 
            AnimatedLabel {
140
 
                id: lapCount
141
 
                objectName: "lapCount"
142
 
 
143
 
                anchors.verticalCenter: buttonStopwatch.verticalCenter
144
 
                color: Constants.brightWhite
145
 
                textColor: Constants.ubuntuOrange
146
 
                text: Utils.numberToLocaleString(laps.count)
147
 
 
148
 
                onClicked: stopwatchAnimationContainer.swipeView()
149
 
            }
150
 
 
151
 
            Button {
152
 
                id: buttonReset
153
 
                objectName: "lapButton"
154
 
 
155
 
                width: units.gu(12); height: units.gu(5)
156
 
                color: Constants.normalGrey
157
 
                text: i18n.tr("Reset")
158
 
 
159
 
                onClicked: {
160
 
                    if(buttonReset.state == "RESET") {
161
 
                        analogStopwatch.reset();
162
 
                        labelStopwatch.text = SScript.intervalToString(0, 0, 0, 0);
163
 
                        lapStart = 0;
164
 
                        laps.clear();
165
 
                    } else if (buttonReset.state == "LAP") {
166
 
                        laps.push();
167
 
                        analogStopwatch.blipLocation = analogStopwatch.seconds
168
 
                        analogStopwatch.blipVisible = true
169
 
                    }
170
 
                }
171
 
 
172
 
                states: [
173
 
                    State {
174
 
                        name: "RESET"
175
 
                        PropertyChanges { target: buttonReset; text: i18n.tr("Reset") }
176
 
                        PropertyChanges { target: buttonReset; color: Constants.normalGrey }
177
 
                    },
178
 
 
179
 
                    State {
180
 
                        name: "LAP"
181
 
                        PropertyChanges { target: buttonReset; text: i18n.tr("Lap") }
182
 
                        PropertyChanges { target: buttonReset; color: Constants.brightWhite }
183
 
                    }
184
 
                ]
 
98
            anchors { top: parent.top; topMargin: units.gu(9); horizontalCenter: parent.horizontalCenter }
 
99
            onClicked: {
 
100
                if(analogStopwatch.timerStatus == false) {
 
101
                    analogStopwatch.start()
 
102
                    stopWatchLabelUpdate.start()
 
103
                    if (analogStopwatch.flag) {
 
104
                        analogStopwatch.startTime = SScript.timeToMs(new Date());
 
105
                        analogStopwatch.flag = false;
 
106
                    }
 
107
                    else {
 
108
                        analogStopwatch.delay = Math.abs(SScript.timeToMs(new Date()) - analogStopwatch.stopTime);
 
109
                        analogStopwatch.startTime = analogStopwatch.startTime + analogStopwatch.delay;
 
110
                    }
 
111
                } else {
 
112
                    analogStopwatch.stop()
 
113
                    stopWatchLabelUpdate.stop()
 
114
                    analogStopwatch.stopTime = SScript.timeToMs(new Date());
 
115
                }
 
116
            }
 
117
        }
 
118
 
 
119
        ImageButton {
 
120
            id: resetButton
 
121
 
 
122
            anchors { top: analogStopwatch.bottom; topMargin: units.gu(4); left: parent.left; leftMargin: units.gu(4) }
 
123
            buttonImage: Qt.resolvedUrl("../images/add_icon.png");
 
124
            buttonLabel: i18n.tr("Reset");
 
125
 
 
126
            activated: analogStopwatch.timerStatus == false ? true : false;
 
127
 
 
128
            onClicked: {
 
129
                analogStopwatch.reset();
 
130
                labelStopwatch.text = SScript.intervalToString(0, 0, 0, 0);
 
131
                lapStart = 0;
 
132
                laps.clear();
 
133
            }
 
134
        }
 
135
 
 
136
        ImageButton {
 
137
            id: lapButton
 
138
 
 
139
            anchors { top: analogStopwatch.bottom; topMargin: units.gu(4); right: parent.right; rightMargin: units.gu(4) }
 
140
            buttonImage: Qt.resolvedUrl("../images/add_icon.png");
 
141
            buttonLabel: i18n.tr("Lap");
 
142
            mirrorLayout: true;
 
143
 
 
144
            activated: analogStopwatch.timerStatus == true ? true : false;
 
145
 
 
146
            onClicked: {
 
147
                laps.push();
 
148
                analogStopwatch.blipLocation = analogStopwatch.seconds
 
149
                analogStopwatch.blipVisible = true
185
150
            }
186
151
        }
187
152
 
190
155
            id: listLap
191
156
 
192
157
            height: childrenRect.height
193
 
            anchors { left: parent.left; right: parent.right; top: rowButtonStopwatch.bottom; topMargin: units.gu(5) }
 
158
            anchors { left: parent.left; right: parent.right; top: analogStopwatch.bottom; topMargin: units.gu(13) }
194
159
 
195
 
            ListItem.Divider { }
 
160
            ListItem.ThinDivider {}
196
161
 
197
162
            ListItem.Header {
198
163
                id: lapHeader
218
183
 
219
184
                clip: true
220
185
                anchors { left: parent.left; right: parent.right; }
221
 
                height: units.gu(23)
 
186
                height: units.gu(21)
222
187
                model: laps
223
188
 
224
189
                delegate: ListItem.SingleValue {