← Back to branch summary

~michael-sheldon/ubuntu-keyboard/fix-oxide-dismiss-test

« back to all changes in this revision

Viewing changes to qml/Keyboard.qml

  • Committer: Thomas Moenicke
  • Date: 2013-07-19 12:05:07 UTC
  • Revision ID: thomas.moenicke@canonical.com-20130719120507-lzw5oq50xm567x0j
initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
qml/Keyboard.qml
 
1
/*
 
2
 * This file is part of Maliit plugins
 
3
 *
 
4
 * Copyright (C) 2012 Openismus GmbH
 
5
 *
 
6
 * Contact: maliit-discuss@lists.maliit.org
 
7
 *
 
8
 * Redistribution and use in source and binary forms, with or without modification,
 
9
 * are permitted provided that the following conditions are met:
 
10
 *
 
11
 * Redistributions of source code must retain the above copyright notice, this list
 
12
 * of conditions and the following disclaimer.
 
13
 * Redistributions in binary form must reproduce the above copyright notice, this list
 
14
 * of conditions and the following disclaimer in the documentation and/or other materials
 
15
 * provided with the distribution.
 
16
 * Neither the name of Nokia Corporation nor the names of its contributors may be
 
17
 * used to endorse or promote products derived from this software without specific
 
18
 * prior written permission.
 
19
 *
 
20
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 
21
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 
22
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
 
23
 * THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 
24
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 
25
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
 
26
 * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
 
27
 * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 
28
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
29
 *
 
30
 */
 
31
 
 
32
import QtQuick 2.0
 
33
 
 
34
Item {
 
35
    id: canvas
 
36
    property alias layout: keyRepeater.model
 
37
    property variant event_handler
 
38
    property bool area_enabled // MouseArea has no id property so we cannot alias its enabled property.
 
39
    property alias title: keyboard_title.text
 
40
 
 
41
    visible: layout.visible
 
42
 
 
43
    property bool shown: false;
 
44
    property bool hideAnimationFinished: false;
 
45
    property int pressedKeyIndex: -1;
 
46
    property Item pressedKey;
 
47
 
 
48
    RotationHelper {
 
49
 
 
50
    Connections {
 
51
        target: layout
 
52
        onTitleChanged: {
 
53
            console.debug("title:" + layout.title)
 
54
            title_timeout.start()
 
55
        }
 
56
    }
 
57
 
 
58
    MouseArea {
 
59
        id: keyboardSurface
 
60
        property int jumpBackThreshold: 170
 
61
 
 
62
        drag.target: keyboardSurface
 
63
        drag.axis: Drag.YAxis;
 
64
        drag.minimumY: 0
 
65
        drag.maximumY: height
 
66
        drag.filterChildren: true
 
67
 
 
68
        x:0
 
69
        y:0
 
70
        width: parent.width
 
71
        height: parent.height
 
72
 
 
73
 
 
74
    WordRibbon {
 
75
        id: wordRibbon
 
76
 
 
77
        anchors.bottom: keypadMouseArea.top
 
78
        width: parent.width;
 
79
 
 
80
        height: maliit_wordribbon.enabled ? layout.wordribbon_height : 0
 
81
    }
 
82
 
 
83
    MouseArea {
 
84
        id: keypadMouseArea
 
85
        preventStealing: true
 
86
        anchors {
 
87
            top: wordRibbon.bottom
 
88
            fill: parent
 
89
            topMargin: layout.invisible_toucharea_height + (maliit_wordribbon.enabled ? layout.wordribbon_height : 0);
 
90
        }
 
91
 
 
92
        Item {
 
93
            id: keyboardContainer
 
94
 
 
95
            anchors.fill: parent
 
96
 
 
97
            Rectangle {
 
98
                id: background
 
99
 
 
100
                anchors.fill: parent
 
101
 
 
102
                gradient: Gradient {
 
103
                    GradientStop { position: 0.0; color: "#f1f1f1" }
 
104
                    GradientStop { position: 1.0; color: "#e4e4e4" }
 
105
                }
 
106
            }
 
107
 
 
108
            Image {
 
109
                id: borderTop
 
110
                source: "styles/ubuntu/images/border_top.png"
 
111
                width: parent.width
 
112
                anchors.top: parent.top.bottom
 
113
            }
 
114
 
 
115
            Image {
 
116
                id: borderBottom
 
117
                source: "styles/ubuntu/images/border_bottom.png"
 
118
                width: parent.width
 
119
                anchors.bottom: background.bottom
 
120
            }
 
121
 
 
122
            Item {
 
123
                id: keyPad
 
124
 
 
125
                anchors.top: borderTop.bottom
 
126
                anchors.bottom: borderBottom.top
 
127
                width: parent.width
 
128
 
 
129
            Repeater {
 
130
                id: keyRepeater
 
131
                model: layout
 
132
                anchors.fill: parent
 
133
 
 
134
                Item {
 
135
                    property alias text: key_text_item.text;
 
136
 
 
137
                    x: key_reactive_area.x
 
138
                    y: key_reactive_area.y
 
139
                    width: key_reactive_area.width
 
140
                    height: key_reactive_area.height
 
141
 
 
142
                    BorderImage {
 
143
                        x: key_rectangle.x
 
144
                        y: key_rectangle.y
 
145
                        width: key_rectangle.width
 
146
                        height: key_rectangle.height
 
147
 
 
148
                        border.left: key_background_borders.x
 
149
                        border.top: key_background_borders.y
 
150
                        border.right: key_background_borders.width
 
151
                        border.bottom: key_background_borders.height
 
152
 
 
153
                        source: key_background
 
154
 
 
155
                        Text {
 
156
                            id: key_text_item
 
157
 
 
158
                            anchors.fill: parent
 
159
                            text: key_text
 
160
                            font.family: key_font
 
161
                            font.pixelSize: key_font_size
 
162
                            color: key_font_color
 
163
                            font.bold: true
 
164
                            horizontalAlignment: Text.AlignHCenter
 
165
                            verticalAlignment: Text.AlignVCenter
 
166
                            visible: (key_text.length != 0)
 
167
                        }
 
168
 
 
169
                        Image {
 
170
                            anchors.centerIn: parent
 
171
                            source: key_icon
 
172
                            visible: (key_icon.length != 0)
 
173
                        }
 
174
                    }
 
175
 
 
176
                    MouseArea {
 
177
                        enabled: area_enabled
 
178
                        anchors.fill: parent
 
179
                        hoverEnabled: true
 
180
 
 
181
                        onEntered: event_handler.onEntered(index)
 
182
                        onExited: event_handler.onExited(index)
 
183
 
 
184
                        onPressed: {
 
185
                            if(!drag.active) {
 
186
                                pressedKeyIndex = index;
 
187
                                event_handler.onEntered(index)
 
188
                            }
 
189
 
 
190
                            if (key_action_insert)
 
191
                                pressedKey = parent
 
192
                            else
 
193
                                pressedKey = null
 
194
 
 
195
                            event_handler.onPressed(index)
 
196
                            mouse.accepted = false;
 
197
                        }
 
198
 
 
199
                        onReleased: {
 
200
                            console.error("ON_RELEASED")
 
201
                            if (pressedKeyIndex == -1)
 
202
                                return;
 
203
 
 
204
                            if (!drag.active)
 
205
                                event_handler.onReleased(pressedKeyIndex);
 
206
 
 
207
                            event_handler.onExited(pressedKeyIndex)
 
208
                            pressedKeyIndex = -1;
 
209
 
 
210
                        }
 
211
 
 
212
                        onPressAndHold: event_handler.onPressAndHold(index)
 
213
                    }
 
214
 
 
215
                } // Item
 
216
            } // Repeater
 
217
 
 
218
            } // keyPad
 
219
 
 
220
            Popper {
 
221
                id: popper
 
222
                target: pressedKey
 
223
            }
 
224
 
 
225
            // Keyboard title rendering
 
226
            // TODO: Make separate component?
 
227
            Item {
 
228
                anchors.centerIn: parent
 
229
                opacity: title_timeout.running ? 1.0 : 0.0
 
230
 
 
231
                Behavior on opacity {
 
232
                    PropertyAnimation {
 
233
                        duration: 300
 
234
                        easing.type: Easing.InOutQuad
 
235
                    }
 
236
                }
 
237
 
 
238
                Timer {
 
239
                    id: title_timeout
 
240
                    interval: 1000
 
241
                }
 
242
 
 
243
                // TODO: Make title background part of styling profile.
 
244
                BorderImage {
 
245
                    anchors.centerIn: parent
 
246
 
 
247
                    // Manual padding of text:
 
248
                    width: keyboard_title.width * 1.2
 
249
                    height: keyboard_title.height * 1.2
 
250
 
 
251
                    //anchors.fill: keyboard_title
 
252
                    source: layout.background
 
253
                    z: 1000 // Move behind Text element but in front of rest.
 
254
 
 
255
                    border.left: layout.background_borders.x
 
256
                    border.top: layout.background_borders.y
 
257
                    border.right: layout.background_borders.width
 
258
                    border.bottom: layout.background_borders.height
 
259
                }
 
260
 
 
261
                Text {
 
262
                    id: keyboard_title
 
263
                    anchors.centerIn: parent
 
264
 
 
265
                    text: title;
 
266
                    z: 1001
 
267
 
 
268
                    // TODO: Make title font part of styling profile.
 
269
                    font.pointSize: 48
 
270
                    color: "white"
 
271
                }
 
272
            }
 
273
        } // keyboardContainer
 
274
 
 
275
        onReleased: {
 
276
            if (pressedKeyIndex == -1)
 
277
                return;
 
278
 
 
279
            if (!drag.active)
 
280
                event_handler.onReleased(pressedKeyIndex);
 
281
 
 
282
            event_handler.onExited(pressedKeyIndex)
 
283
            pressedKeyIndex = -1;
 
284
            pressedKey = null;
 
285
 
 
286
        }
 
287
    } // keypadMouseArea
 
288
 
 
289
    onReleased: {
 
290
        if (y > jumpBackThreshold) {
 
291
            canvas.shown = false;
 
292
        } else {
 
293
            bounceBackAnimation.from = y
 
294
            bounceBackAnimation.start();
 
295
        }
 
296
    }
 
297
 
 
298
    PropertyAnimation {
 
299
        id: bounceBackAnimation
 
300
        target: keyboardSurface
 
301
        properties: "y"
 
302
        easing.type: Easing.OutBounce;
 
303
        easing.overshoot: 2.0
 
304
        to: 0
 
305
    }
 
306
 
 
307
    } // big mousearea
 
308
    } // rotation helper
 
309
 
 
310
    state: "HIDDEN"
 
311
 
 
312
    states: [
 
313
        State {
 
314
            name: "SHOWN"
 
315
            PropertyChanges { target: canvas; y: 0; }
 
316
            when: canvas.shown === true
 
317
            onCompleted: canvas.hideAnimationFinished = false;
 
318
        },
 
319
 
 
320
        State {
 
321
            name: "HIDDEN"
 
322
            PropertyChanges { target: canvas; y: height; }
 
323
            onCompleted: {
 
324
                keyboardSurface.y = 0;
 
325
                canvas.hideAnimationFinished = true;
 
326
            }
 
327
            when: canvas.shown === false
 
328
        }
 
329
    ]
 
330
    transitions: Transition {
 
331
        PropertyAnimation { target: canvas; properties: "y"; easing.type: Easing.InOutQuad }
 
332
    }
 
333
}
 
334