Merge lp:~zsombi/ubuntu-ui-toolkit/textinput-carets into lp:ubuntu-ui-toolkit/staging
- textinput-carets
- Merge into staging
| Status: | Merged |
|---|---|
| Approved by: | Zsombor Egri |
| Approved revision: | 1036 |
| Merged at revision: | 1037 |
| Proposed branch: | lp:~zsombi/ubuntu-ui-toolkit/textinput-carets |
| Merge into: | lp:ubuntu-ui-toolkit/staging |
| Prerequisite: | lp:~zsombi/ubuntu-ui-toolkit/textinputs-rightclick |
| Diff against target: |
1322 lines (+808/-173) 16 files modified
components.api (+1/-0) modules/Ubuntu/Components/InputHandler.qml (+107/-5) modules/Ubuntu/Components/TextArea.qml (+10/-72) modules/Ubuntu/Components/TextCursor.qml (+235/-26) modules/Ubuntu/Components/TextField.qml (+11/-21) modules/Ubuntu/Components/Themes/Ambiance/TextAreaStyle.qml (+16/-1) modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml (+58/-40) modules/Ubuntu/Components/Themes/Ambiance/TextFieldStyle.qml (+1/-0) modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml (+66/-0) modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml (+66/-0) modules/Ubuntu/Components/Themes/Ambiance/qmldir (+3/-0) modules/Ubuntu/Test/UbuntuTestCase.qml (+25/-2) tests/resources/inputs/TextInputs.qml (+4/-0) tests/unit_x11/tst_components/tst_textarea.qml (+6/-5) tests/unit_x11/tst_components/tst_textfield.qml (+1/-1) tests/unit_x11/tst_components/tst_textinput_common.qml (+198/-0) |
| To merge this branch: | bzr merge lp:~zsombi/ubuntu-ui-toolkit/textinput-carets |
| Related bugs: |
| Reviewer | Review Type | Date Requested | Status |
|---|---|---|---|
| PS Jenkins bot | continuous-integration | Approve | |
| Cris Dywan | Approve | ||
|
Review via email:
|
|||
Commit message
Text input caret handler visuals and functionality.
Description of the change
| Cris Dywan (kalikiana) wrote : | # |
| Zsombor Egri (zsombi) wrote : | # |
> The carrots actually do a nice job on the desktop enabling me to extend
> selections with just a mouse - ordinarily it would require ⇧Arrow.
>
> A single carrot is visible when there's no selection but can't be dragged.
The single caret is just to grab the cursor for easy positioning of it. It's not a selection caret. The selection cares get visible when there is selected text.
>
> If the selection is at the very start of the text field the first carrot is
> clipped.
The carets are clipped in the input area atm, so the selection beginning will be clipped yet. I'll try to get a similar image above the actual one, but unfortunately positioning the overlay caret is not that stable... And may require changes in the logic...
>
> 505 - Ubuntu.
> 506 +// Ubuntu.
>
> Accident?
Yes, good catch!
>
> 526 +// FIXME: stabilize API
>
> What does this mean? Could you make the comment more verbose or mention a bug?
Means that the API will be moved in Ubuntu.
| Cris Dywan (kalikiana) wrote : | # |
> > The carrots actually do a nice job on the desktop enabling me to extend
> > selections with just a mouse - ordinarily it would require ⇧Arrow.
> >
> > A single carrot is visible when there's no selection but can't be dragged.
>
> The single caret is just to grab the cursor for easy positioning of it. It's
> not a selection caret. The selection cares get visible when there is selected
> text.
The problem with that is to start a selection you still have to aim freely, so there's no benefit in precisely moving the caret right now - unless there is going to be a way to long press/ right-click the carrot itself to start a selection or invoke the context menu.
> > If the selection is at the very start of the text field the first carrot is
> > clipped.
>
> The carets are clipped in the input area atm, so the selection beginning will
> be clipped yet. I'll try to get a similar image above the actual one, but
> unfortunately positioning the overlay caret is not that stable... And may
> require changes in the logic...
I could agree to filing a bug for it and leaving it as-is for now, it's not a deal breaker for typical use.
> >
> > 526 +// FIXME: stabilize API
> >
> > What does this mean? Could you make the comment more verbose or mention a
> bug?
>
> Means that the API will be moved in Ubuntu.
> everything done, and in a separate MR perhaps.
Maybe just leave that out of this branch then? Since it's not actually a bug or anything, more like something that belongs in a bug or blueprint.
| PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:1032
http://
Executed test runs:
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
FAILURE: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
| PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:1033
http://
Executed test runs:
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
FAILURE: http://
Click here to trigger a rebuild:
http://
| PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:1034
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
| Cris Dywan (kalikiana) wrote : | # |
> > > A single carrot is visible when there's no selection but can't be dragged.
> > The single caret is just to grab the cursor for easy positioning of it. It's
> > not a selection caret.
> The problem with that is to start a selection you still have to aim freely, so
> there's no benefit in precisely moving the caret right now - unless there is
> going to be a way to long press/ right-click the carrot itself to start a
> selection or invoke the context menu.
?
> > > at the very start of the text field the first carrot is clipped.
> > The carets are clipped in the input area atm
It would seem to be fixed now. Nice.
> > > 526 +// FIXME: stabilize API
> > > What does this mean? Could you make the comment more verbose
> > Means that the API will be moved in Ubuntu.
> > everything done, and in a separate MR perhaps.
> Maybe just leave that out of this branch then? Since it's not actually a bug
> or anything, more like something that belongs in a bug or blueprint.
?
From more testing I noticed, sometimes selecting text with the mouse gets ignored, even if you try a few times, and then it works again. Not sure what exactly causes it, it's hard to say if it's stuck or a timeout is catching it. I almost thought the last changes broke normal mouse selection :-(
| Zsombor Egri (zsombi) wrote : | # |
> > > > A single carrot is visible when there's no selection but can't be
> dragged.
> > > The single caret is just to grab the cursor for easy positioning of it.
> It's
> > > not a selection caret.
> > The problem with that is to start a selection you still have to aim freely,
> so
> > there's no benefit in precisely moving the caret right now - unless there is
> > going to be a way to long press/ right-click the carrot itself to start a
> > selection or invoke the context menu.
>
> ?
So, first of all, the caret is a handler which is used to grab the cursor (both in edit and select modes). We need them in all the modes, not only in selection mode.
You need to be able to position the cursor pretty precisely if you want to insert some text at a given position. When you have a single caret, you only have the cursor, you are not in the selection mode yet. That caret moves the cursor in a way so you can see where it actually gets positioned.
>
> > > > at the very start of the text field the first carrot is clipped.
> > > The carets are clipped in the input area atm
>
> It would seem to be fixed now. Nice.
>
> > > > 526 +// FIXME: stabilize API
> > > > What does this mean? Could you make the comment more verbose
> > > Means that the API will be moved in Ubuntu.
> > > everything done, and in a separate MR perhaps.
> > Maybe just leave that out of this branch then? Since it's not actually a bug
> > or anything, more like something that belongs in a bug or blueprint.
>
> ?
FIXME comments we use not only to fix something, but to remember that there's more work to be done there. I can remove that of course, and I won't have the API stabilized in this MR for sure, but it is good to have extra reminders that these kind of tasks should also be done.
>
> From more testing I noticed, sometimes selecting text with the mouse gets
> ignored, even if you try a few times, and then it works again. Not sure what
> exactly causes it, it's hard to say if it's stuck or a timeout is catching it.
> I almost thought the last changes broke normal mouse selection :-(
Double tap? I noticed that because of the caret positioning, if you tap too close to the caret, the double tap will get stolen by the caret dragger... Perhaps I'd need to position the caret a bit closer to the bottom of the cursor so it doesn't interfere with the clicks...
| Cris Dywan (kalikiana) wrote : | # |
Very nice to have the cursor take events now. And I can actually open the menu more precisely through the carrot in tricky cases with small letters.
As I double-checked, the ignored selections are not new in this branch, just depend a lot on the exact mouse movement, so let's not worry about it here.
| PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:1035
http://
Executed test runs:
SUCCESS: http://
FAILURE: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
FAILURE: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
| PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Autolanding.
More details in the following jenkins job:
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
- 1036. By Zsombor Egri
-
staging merge
| PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:1036
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
Preview Diff
| 1 | === modified file 'components.api' | |||
| 2 | --- components.api 2014-05-02 11:09:58 +0000 | |||
| 3 | +++ components.api 2014-05-06 12:22:48 +0000 | |||
| 4 | @@ -605,6 +605,7 @@ | |||
| 5 | 605 | TestCase | 605 | TestCase |
| 6 | 606 | function findChild(obj,objectName) | 606 | function findChild(obj,objectName) |
| 7 | 607 | function findInvisibleChild(obj,objectName) | 607 | function findInvisibleChild(obj,objectName) |
| 8 | 608 | function findChildWithProperty(item, property, value) | ||
| 9 | 608 | function mouseMoveSlowly(item,x,y,dx,dy,steps,stepdelay) | 609 | function mouseMoveSlowly(item,x,y,dx,dy,steps,stepdelay) |
| 10 | 609 | function flick(item, x, y, dx, dy, pressTimeout, steps, button, modifiers, delay) | 610 | function flick(item, x, y, dx, dy, pressTimeout, steps, button, modifiers, delay) |
| 11 | 610 | function mouseLongPress(item, x, y, button, modifiers, delay) | 611 | function mouseLongPress(item, x, y, button, modifiers, delay) |
| 12 | 611 | 612 | ||
| 13 | === modified file 'modules/Ubuntu/Components/InputHandler.qml' | |||
| 14 | --- modules/Ubuntu/Components/InputHandler.qml 2014-05-01 12:15:29 +0000 | |||
| 15 | +++ modules/Ubuntu/Components/InputHandler.qml 2014-05-06 12:22:48 +0000 | |||
| 16 | @@ -29,7 +29,7 @@ | |||
| 17 | 29 | property Item main | 29 | property Item main |
| 18 | 30 | // the input instance | 30 | // the input instance |
| 19 | 31 | property Item input | 31 | property Item input |
| 21 | 32 | // the Flickable holdiong the input instance | 32 | // the Flickable holding the input instance |
| 22 | 33 | property Flickable flickable | 33 | property Flickable flickable |
| 23 | 34 | // selection cursor mode | 34 | // selection cursor mode |
| 24 | 35 | property bool selectionCursor: input && input.selectedText !== "" | 35 | property bool selectionCursor: input && input.selectedText !== "" |
| 25 | @@ -38,7 +38,20 @@ | |||
| 26 | 38 | // property holding the selection mode timeout | 38 | // property holding the selection mode timeout |
| 27 | 39 | property int selectionModeTimeout: 200 | 39 | property int selectionModeTimeout: 200 |
| 28 | 40 | 40 | ||
| 30 | 41 | // signal triggered when popup shoudl be opened | 41 | // item filling the text input visible area, used to check teh caret handler |
| 31 | 42 | // visibility | ||
| 32 | 43 | property Item visibleArea: Item { | ||
| 33 | 44 | parent: flickable | ||
| 34 | 45 | anchors.fill: parent | ||
| 35 | 46 | } | ||
| 36 | 47 | |||
| 37 | 48 | // line size and spacing | ||
| 38 | 49 | property real lineSpacing: units.dp(3) | ||
| 39 | 50 | property real lineSize: input.font.pixelSize + lineSpacing | ||
| 40 | 51 | // input x/y distance from the frame | ||
| 41 | 52 | property point frameDistance: Qt.point(0,0) | ||
| 42 | 53 | |||
| 43 | 54 | // signal triggered when popup should be opened | ||
| 44 | 42 | signal pressAndHold(int pos) | 55 | signal pressAndHold(int pos) |
| 45 | 43 | 56 | ||
| 46 | 44 | function activateInput() { | 57 | function activateInput() { |
| 47 | @@ -80,9 +93,11 @@ | |||
| 48 | 80 | readonly property Flickable scroller: (scrollingDisabled && grandScroller) ? grandScroller : flickable | 93 | readonly property Flickable scroller: (scrollingDisabled && grandScroller) ? grandScroller : flickable |
| 49 | 81 | 94 | ||
| 50 | 82 | // ensures the text cusrorRectangle is always in the internal Flickable's visible area | 95 | // ensures the text cusrorRectangle is always in the internal Flickable's visible area |
| 52 | 83 | function ensureVisible() | 96 | function ensureVisible(rect) |
| 53 | 84 | { | 97 | { |
| 55 | 85 | var rect = input.cursorRectangle; | 98 | if (rect === undefined) { |
| 56 | 99 | rect = input.cursorRectangle; | ||
| 57 | 100 | } | ||
| 58 | 86 | if (flickable.moving || flickable.flicking) | 101 | if (flickable.moving || flickable.flicking) |
| 59 | 87 | return; | 102 | return; |
| 60 | 88 | if (flickable.contentX >= rect.x) | 103 | if (flickable.contentX >= rect.x) |
| 61 | @@ -94,9 +109,14 @@ | |||
| 62 | 94 | else if (flickable.contentY + flickable.height <= rect.y + rect.height) | 109 | else if (flickable.contentY + flickable.height <= rect.y + rect.height) |
| 63 | 95 | flickable.contentY = rect.y + rect.height - flickable.height; | 110 | flickable.contentY = rect.y + rect.height - flickable.height; |
| 64 | 96 | } | 111 | } |
| 65 | 112 | // returns the cursor position from x,y pair | ||
| 66 | 113 | function cursorPosition(x, y) { | ||
| 67 | 114 | return singleLine ? input.positionAt(x, TextInput.CursorOnCharacter) : input.positionAt(x, y, TextInput.CursorOnCharacter); | ||
| 68 | 115 | } | ||
| 69 | 116 | |||
| 70 | 97 | // returns the mouse position | 117 | // returns the mouse position |
| 71 | 98 | function mousePosition(mouse) { | 118 | function mousePosition(mouse) { |
| 73 | 99 | return singleLine ? input.positionAt(mouse.x) : input.positionAt(mouse.x, mouse.y); | 119 | return cursorPosition(mouse.x, mouse.y); |
| 74 | 100 | } | 120 | } |
| 75 | 101 | // checks whether the position is in the selected text | 121 | // checks whether the position is in the selected text |
| 76 | 102 | function positionInSelection(pos) { | 122 | function positionInSelection(pos) { |
| 77 | @@ -165,6 +185,30 @@ | |||
| 78 | 165 | } | 185 | } |
| 79 | 166 | } | 186 | } |
| 80 | 167 | 187 | ||
| 81 | 188 | // moves the specified position, called by the cursor handler | ||
| 82 | 189 | // positioner = "currentPosition/selectionStart/selectionEnd" | ||
| 83 | 190 | function positionCaret(positioner, x, y) { | ||
| 84 | 191 | if (positioner === "cursorPosition") { | ||
| 85 | 192 | input[positioner] = cursorPosition(x, y); | ||
| 86 | 193 | } else { | ||
| 87 | 194 | var pos = cursorPosition(x, y); | ||
| 88 | 195 | if (positioner === "selectionStart" && (pos < input.selectionEnd)) { | ||
| 89 | 196 | input.select(pos, input.selectionEnd); | ||
| 90 | 197 | } else if (positioner === "selectionEnd" && (pos > input.selectionStart)) { | ||
| 91 | 198 | input.select(input.selectionStart, pos); | ||
| 92 | 199 | } | ||
| 93 | 200 | } | ||
| 94 | 201 | } | ||
| 95 | 202 | |||
| 96 | 203 | // returns the styles for the cursors depending on the position property given | ||
| 97 | 204 | function textCursorStyle(positionProperty) { | ||
| 98 | 205 | switch (positionProperty) { | ||
| 99 | 206 | case "cursorPosition": return main.__styleInstance.mainCursorStyle; | ||
| 100 | 207 | case "selectionStart": return main.__styleInstance.selectionStartCursorStyle; | ||
| 101 | 208 | case "selectionEnd": return main.__styleInstance.selectionEndCursorStyle; | ||
| 102 | 209 | } | ||
| 103 | 210 | } | ||
| 104 | 211 | |||
| 105 | 168 | Component.onCompleted: { | 212 | Component.onCompleted: { |
| 106 | 169 | state = (main.focus) ? "" : "inactive"; | 213 | state = (main.focus) ? "" : "inactive"; |
| 107 | 170 | } | 214 | } |
| 108 | @@ -313,4 +357,62 @@ | |||
| 109 | 313 | // trigger pressAndHold | 357 | // trigger pressAndHold |
| 110 | 314 | onReleased: openContextMenu(mouse) | 358 | onReleased: openContextMenu(mouse) |
| 111 | 315 | } | 359 | } |
| 112 | 360 | |||
| 113 | 361 | // cursors to use when text is selected | ||
| 114 | 362 | Connections { | ||
| 115 | 363 | property Item selectionStartCursor: null | ||
| 116 | 364 | property Item selectionEndCursor: null | ||
| 117 | 365 | target: input | ||
| 118 | 366 | onSelectedTextChanged: { | ||
| 119 | 367 | if (selectedText !== "" && input.cursorDelegate) { | ||
| 120 | 368 | if (!selectionStartCursor) { | ||
| 121 | 369 | selectionStartCursor = input.cursorDelegate.createObject( | ||
| 122 | 370 | input, { | ||
| 123 | 371 | "positionProperty": "selectionStart", | ||
| 124 | 372 | "height": lineSize, | ||
| 125 | 373 | "handler": inputHandler, | ||
| 126 | 374 | } | ||
| 127 | 375 | ); | ||
| 128 | 376 | moveSelectionCursor(selectionStartCursor); | ||
| 129 | 377 | } | ||
| 130 | 378 | if (!selectionEndCursor) { | ||
| 131 | 379 | selectionEndCursor = input.cursorDelegate.createObject( | ||
| 132 | 380 | input, { | ||
| 133 | 381 | "positionProperty": "selectionEnd", | ||
| 134 | 382 | "height": lineSize, | ||
| 135 | 383 | "handler": inputHandler, | ||
| 136 | 384 | } | ||
| 137 | 385 | ); | ||
| 138 | 386 | moveSelectionCursor(selectionEndCursor); | ||
| 139 | 387 | } | ||
| 140 | 388 | } else { | ||
| 141 | 389 | if (selectionStartCursor) { | ||
| 142 | 390 | selectionStartCursor.destroy(); | ||
| 143 | 391 | selectionStartCursor = null; | ||
| 144 | 392 | } | ||
| 145 | 393 | if (selectionEndCursor) { | ||
| 146 | 394 | selectionEndCursor.destroy(); | ||
| 147 | 395 | selectionEndCursor = null; | ||
| 148 | 396 | } | ||
| 149 | 397 | } | ||
| 150 | 398 | } | ||
| 151 | 399 | onSelectionStartChanged: moveSelectionCursor(selectionStartCursor, true); | ||
| 152 | 400 | onSelectionEndChanged: moveSelectionCursor(selectionEndCursor, true); | ||
| 153 | 401 | |||
| 154 | 402 | function moveSelectionCursor(cursor, updateProperty) { | ||
| 155 | 403 | if (!cursor) { | ||
| 156 | 404 | return; | ||
| 157 | 405 | } | ||
| 158 | 406 | // workaround for https://bugreports.qt-project.org/browse/QTBUG-38704 | ||
| 159 | 407 | // selectedTextChanged signal is not emitted for TextEdit when selectByMouse is false | ||
| 160 | 408 | if (updateProperty && QuickUtils.className(input) === "QQuickTextEdit") { | ||
| 161 | 409 | input.selectedTextChanged(); | ||
| 162 | 410 | } | ||
| 163 | 411 | |||
| 164 | 412 | var pos = input.positionToRectangle(input[cursor.positionProperty]); | ||
| 165 | 413 | cursor.x = pos.x; | ||
| 166 | 414 | cursor.y = pos.y; | ||
| 167 | 415 | ensureVisible(pos); | ||
| 168 | 416 | } | ||
| 169 | 417 | } | ||
| 170 | 316 | } | 418 | } |
| 171 | 317 | 419 | ||
| 172 | === modified file 'modules/Ubuntu/Components/TextArea.qml' | |||
| 173 | --- modules/Ubuntu/Components/TextArea.qml 2014-04-28 06:48:28 +0000 | |||
| 174 | +++ modules/Ubuntu/Components/TextArea.qml 2014-05-06 12:22:48 +0000 | |||
| 175 | @@ -158,7 +158,7 @@ | |||
| 176 | 158 | area defined in the current theme. The default value is the same as the visible | 158 | area defined in the current theme. The default value is the same as the visible |
| 177 | 159 | input area's width. | 159 | input area's width. |
| 178 | 160 | */ | 160 | */ |
| 180 | 161 | property real contentWidth: internal.inputAreaWidth | 161 | property real contentWidth: control.width - 2 * internal.frameSpacing |
| 181 | 162 | 162 | ||
| 182 | 163 | /*! | 163 | /*! |
| 183 | 164 | The property folds the height of the text editing content. This can be equal or | 164 | The property folds the height of the text editing content. This can be equal or |
| 184 | @@ -166,7 +166,7 @@ | |||
| 185 | 166 | area defined in the current theme. The default value is the same as the visible | 166 | area defined in the current theme. The default value is the same as the visible |
| 186 | 167 | input area's height. | 167 | input area's height. |
| 187 | 168 | */ | 168 | */ |
| 189 | 169 | property real contentHeight: internal.inputAreaHeight | 169 | property real contentHeight: control.height - 2 * internal.frameSpacing |
| 190 | 170 | 170 | ||
| 191 | 171 | /*! | 171 | /*! |
| 192 | 172 | The property overrides the default popover of the TextArea. When set, the | 172 | The property overrides the default popover of the TextArea. When set, the |
| 193 | @@ -233,10 +233,8 @@ | |||
| 194 | 233 | 233 | ||
| 195 | 234 | Note that the root item of the delegate component must be a QQuickItem or | 234 | Note that the root item of the delegate component must be a QQuickItem or |
| 196 | 235 | QQuickItem derived item. | 235 | QQuickItem derived item. |
| 197 | 236 | |||
| 198 | 237 | \qmlproperty Component cursorDelegate | ||
| 199 | 238 | */ | 236 | */ |
| 201 | 239 | property alias cursorDelegate: editor.cursorDelegate | 237 | property Component cursorDelegate: null |
| 202 | 240 | 238 | ||
| 203 | 241 | /*! | 239 | /*! |
| 204 | 242 | The position of the cursor in the TextArea. | 240 | The position of the cursor in the TextArea. |
| 205 | @@ -731,7 +729,6 @@ | |||
| 206 | 731 | /*!\internal - to remove warnings */ | 729 | /*!\internal - to remove warnings */ |
| 207 | 732 | Component.onCompleted: { | 730 | Component.onCompleted: { |
| 208 | 733 | editor.linkActivated.connect(control.linkActivated); | 731 | editor.linkActivated.connect(control.linkActivated); |
| 209 | 734 | internal.prevShowCursor = control.cursorVisible; | ||
| 210 | 735 | } | 732 | } |
| 211 | 736 | 733 | ||
| 212 | 737 | // activation area on mouse click | 734 | // activation area on mouse click |
| 213 | @@ -756,15 +753,6 @@ | |||
| 214 | 756 | control.focus = false; | 753 | control.focus = false; |
| 215 | 757 | } | 754 | } |
| 216 | 758 | 755 | ||
| 217 | 759 | /*!\internal */ | ||
| 218 | 760 | onContentWidthChanged: internal.inputAreaWidth = control.contentWidth | ||
| 219 | 761 | /*!\internal */ | ||
| 220 | 762 | onContentHeightChanged: internal.inputAreaHeight = control.contentHeight | ||
| 221 | 763 | /*!\internal */ | ||
| 222 | 764 | onWidthChanged: internal.inputAreaWidth = control.width - 2 * internal.frameSpacing | ||
| 223 | 765 | /*!\internal */ | ||
| 224 | 766 | onHeightChanged: internal.inputAreaHeight = control.height - 2 * internal.frameSpacing | ||
| 225 | 767 | |||
| 226 | 768 | LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft | 756 | LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft |
| 227 | 769 | LayoutMirroring.childrenInherit: true | 757 | LayoutMirroring.childrenInherit: true |
| 228 | 770 | 758 | ||
| 229 | @@ -772,32 +760,12 @@ | |||
| 230 | 772 | id: internal | 760 | id: internal |
| 231 | 773 | // public property locals enabling aliasing | 761 | // public property locals enabling aliasing |
| 232 | 774 | property string displayText: editor.getText(0, editor.length) | 762 | property string displayText: editor.getText(0, editor.length) |
| 233 | 775 | property real lineSpacing: units.dp(3) | ||
| 234 | 776 | property real frameSpacing: control.__styleInstance.frameSpacing | 763 | property real frameSpacing: control.__styleInstance.frameSpacing |
| 235 | 777 | property real lineSize: editor.font.pixelSize + lineSpacing | ||
| 236 | 778 | property real minimumSize: units.gu(4) | 764 | property real minimumSize: units.gu(4) |
| 237 | 779 | property real inputAreaWidth: control.width - 2 * frameSpacing | ||
| 238 | 780 | property real inputAreaHeight: control.height - 2 * frameSpacing | ||
| 239 | 781 | //selection properties | ||
| 240 | 782 | property bool prevShowCursor | ||
| 241 | 783 | |||
| 242 | 784 | function toggleSelectionCursors(show) | ||
| 243 | 785 | { | ||
| 244 | 786 | if (!show) { | ||
| 245 | 787 | leftCursorLoader.sourceComponent = undefined; | ||
| 246 | 788 | rightCursorLoader.sourceComponent = undefined; | ||
| 247 | 789 | editor.cursorVisible = prevShowCursor; | ||
| 248 | 790 | } else { | ||
| 249 | 791 | prevShowCursor = editor.cursorVisible; | ||
| 250 | 792 | editor.cursorVisible = false; | ||
| 251 | 793 | leftCursorLoader.sourceComponent = cursor; | ||
| 252 | 794 | rightCursorLoader.sourceComponent = cursor; | ||
| 253 | 795 | } | ||
| 254 | 796 | } | ||
| 255 | 797 | 765 | ||
| 256 | 798 | function linesHeight(lines) | 766 | function linesHeight(lines) |
| 257 | 799 | { | 767 | { |
| 259 | 800 | var lineHeight = editor.font.pixelSize * lines + lineSpacing * lines | 768 | var lineHeight = editor.font.pixelSize * lines + inputHandler.lineSpacing * lines |
| 260 | 801 | return lineHeight + 2 * frameSpacing; | 769 | return lineHeight + 2 * frameSpacing; |
| 261 | 802 | } | 770 | } |
| 262 | 803 | 771 | ||
| 263 | @@ -829,39 +797,6 @@ | |||
| 264 | 829 | } | 797 | } |
| 265 | 830 | Keys.onReleased: event.accepted = (event.key === Qt.Key_Enter) || (event.key === Qt.Key_Return) | 798 | Keys.onReleased: event.accepted = (event.key === Qt.Key_Enter) || (event.key === Qt.Key_Return) |
| 266 | 831 | 799 | ||
| 267 | 832 | // cursor is FIXME: move in a separate element and align with TextField | ||
| 268 | 833 | Component { | ||
| 269 | 834 | id: cursor | ||
| 270 | 835 | TextCursor { | ||
| 271 | 836 | id: cursorItem | ||
| 272 | 837 | editorItem: control | ||
| 273 | 838 | height: internal.lineSize | ||
| 274 | 839 | popover: control.popover | ||
| 275 | 840 | visible: editor.cursorVisible | ||
| 276 | 841 | |||
| 277 | 842 | Component.onCompleted: inputHandler.pressAndHold.connect(cursorItem.openPopover) | ||
| 278 | 843 | } | ||
| 279 | 844 | } | ||
| 280 | 845 | // selection cursor loader | ||
| 281 | 846 | Loader { | ||
| 282 | 847 | id: leftCursorLoader | ||
| 283 | 848 | onStatusChanged: { | ||
| 284 | 849 | if (status == Loader.Ready && item) { | ||
| 285 | 850 | item.positionProperty = "selectionStart"; | ||
| 286 | 851 | item.parent = editor; | ||
| 287 | 852 | } | ||
| 288 | 853 | } | ||
| 289 | 854 | } | ||
| 290 | 855 | Loader { | ||
| 291 | 856 | id: rightCursorLoader | ||
| 292 | 857 | onStatusChanged: { | ||
| 293 | 858 | if (status == Loader.Ready && item) { | ||
| 294 | 859 | item.positionProperty = "selectionEnd"; | ||
| 295 | 860 | item.parent = editor; | ||
| 296 | 861 | } | ||
| 297 | 862 | } | ||
| 298 | 863 | } | ||
| 299 | 864 | |||
| 300 | 865 | // holding default values | 800 | // holding default values |
| 301 | 866 | Label { id: fontHolder } | 801 | Label { id: fontHolder } |
| 302 | 867 | 802 | ||
| 303 | @@ -911,13 +846,15 @@ | |||
| 304 | 911 | readOnly: false | 846 | readOnly: false |
| 305 | 912 | id: editor | 847 | id: editor |
| 306 | 913 | focus: true | 848 | focus: true |
| 309 | 914 | width: internal.inputAreaWidth | 849 | width: control.contentWidth |
| 310 | 915 | height: Math.max(internal.inputAreaHeight, editor.contentHeight) | 850 | height: Math.max(control.contentHeight, editor.contentHeight) |
| 311 | 916 | wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere | 851 | wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere |
| 312 | 917 | mouseSelectionMode: TextEdit.SelectWords | 852 | mouseSelectionMode: TextEdit.SelectWords |
| 313 | 918 | selectByMouse: false | 853 | selectByMouse: false |
| 314 | 919 | activeFocusOnPress: false | 854 | activeFocusOnPress: false |
| 316 | 920 | cursorDelegate: cursor | 855 | cursorDelegate: TextCursor { |
| 317 | 856 | handler: inputHandler | ||
| 318 | 857 | } | ||
| 319 | 921 | color: control.__styleInstance.color | 858 | color: control.__styleInstance.color |
| 320 | 922 | selectedTextColor: Theme.palette.selected.foregroundText | 859 | selectedTextColor: Theme.palette.selected.foregroundText |
| 321 | 923 | selectionColor: Theme.palette.selected.foreground | 860 | selectionColor: Theme.palette.selected.foreground |
| 322 | @@ -937,6 +874,7 @@ | |||
| 323 | 937 | input: editor | 874 | input: editor |
| 324 | 938 | flickable: flicker | 875 | flickable: flicker |
| 325 | 939 | selectionModeTimeout: control.__styleInstance.selectionModeTimeout | 876 | selectionModeTimeout: control.__styleInstance.selectionModeTimeout |
| 326 | 877 | frameDistance: Qt.point(internal.frameSpacing, internal.frameSpacing) | ||
| 327 | 940 | } | 878 | } |
| 328 | 941 | } | 879 | } |
| 329 | 942 | } | 880 | } |
| 330 | 943 | 881 | ||
| 331 | === modified file 'modules/Ubuntu/Components/TextCursor.qml' | |||
| 332 | --- modules/Ubuntu/Components/TextCursor.qml 2014-04-28 06:48:28 +0000 | |||
| 333 | +++ modules/Ubuntu/Components/TextCursor.qml 2014-05-06 12:22:48 +0000 | |||
| 334 | @@ -15,48 +15,257 @@ | |||
| 335 | 15 | */ | 15 | */ |
| 336 | 16 | 16 | ||
| 337 | 17 | import QtQuick 2.0 | 17 | import QtQuick 2.0 |
| 338 | 18 | import Ubuntu.Components 1.1 as Ubuntu | ||
| 339 | 18 | import Ubuntu.Components.Popups 1.0 | 19 | import Ubuntu.Components.Popups 1.0 |
| 340 | 19 | 20 | ||
| 342 | 20 | StyledItem { | 21 | Ubuntu.StyledItem { |
| 343 | 21 | id: cursorItem | 22 | id: cursorItem |
| 344 | 22 | 23 | ||
| 345 | 23 | width: units.dp(1) | 24 | width: units.dp(1) |
| 346 | 24 | 25 | ||
| 347 | 25 | /* | 26 | /* |
| 348 | 26 | Property holding the text input item instance. | ||
| 349 | 27 | */ | ||
| 350 | 28 | property var editorItem | ||
| 351 | 29 | |||
| 352 | 30 | /* | ||
| 353 | 31 | Property holding the text input's custor position property. Can be one of | 27 | Property holding the text input's custor position property. Can be one of |
| 354 | 32 | the following ones: cursorPosition, selectionStart and selectionEnd. | 28 | the following ones: cursorPosition, selectionStart and selectionEnd. |
| 355 | 33 | */ | 29 | */ |
| 356 | 34 | property string positionProperty: "cursorPosition" | 30 | property string positionProperty: "cursorPosition" |
| 357 | 35 | 31 | ||
| 358 | 36 | /* | 32 | /* |
| 363 | 37 | The property contains the custom popover to be shown. | 33 | Input handler instance |
| 364 | 38 | */ | 34 | */ |
| 365 | 39 | property var popover | 35 | property InputHandler handler |
| 366 | 40 | 36 | ||
| 367 | 37 | /* | ||
| 368 | 38 | Cursor delegate used. This is the visual component from the main | ||
| 369 | 39 | */ | ||
| 370 | 40 | readonly property Component cursorDelegate: handler.main.cursorDelegate ? | ||
| 371 | 41 | handler.main.cursorDelegate : | ||
| 372 | 42 | __styleInstance.cursorDelegate | ||
| 373 | 43 | |||
| 374 | 44 | // depending on the positionProperty, we chose different styles | ||
| 375 | 45 | style: Theme.createStyleComponent(handler.textCursorStyle(positionProperty), cursorItem); | ||
| 376 | 46 | |||
| 377 | 47 | //Caret instance from the style. | ||
| 378 | 48 | property Item caret: __styleInstance.caret | ||
| 379 | 49 | property real caretX: caret ? caret.x : 0 | ||
| 380 | 50 | property real caretY: caret ? caret.y : 0 | ||
| 381 | 51 | |||
| 382 | 52 | // returns the mapped cursor position to a position relative to the main component | ||
| 383 | 53 | function mappedCursorPosition(pos) { | ||
| 384 | 54 | return cursorItem[pos] + handler.frameDistance[pos] - handler.flickable["content"+pos.toUpperCase()]; | ||
| 385 | 55 | } | ||
| 386 | 41 | /* | 56 | /* |
| 387 | 42 | The function opens the text input popover setting the text cursor as caller. | 57 | The function opens the text input popover setting the text cursor as caller. |
| 388 | 43 | */ | 58 | */ |
| 389 | 59 | Connections { | ||
| 390 | 60 | target: inputHandler | ||
| 391 | 61 | onPressAndHold: openPopover() | ||
| 392 | 62 | } | ||
| 393 | 63 | |||
| 394 | 44 | function openPopover() { | 64 | function openPopover() { |
| 396 | 45 | if (!visible) | 65 | if (!visible || opacity === 0.0 || dragger.drag.active) { |
| 397 | 46 | return; | 66 | return; |
| 413 | 47 | if (popover === undefined) { | 67 | } |
| 414 | 48 | // open the default one | 68 | // open context menu only for cursorPosition or selectionEnd |
| 415 | 49 | PopupUtils.open(Qt.resolvedUrl("TextInputPopover.qml"), cursorItem, | 69 | if (positionProperty !== "selectionStart") { |
| 416 | 50 | { | 70 | if (handler.main.popover === undefined) { |
| 417 | 51 | "target": editorItem | 71 | // open the default one |
| 418 | 52 | }) | 72 | PopupUtils.open(Qt.resolvedUrl("TextInputPopover.qml"), cursorItem, |
| 419 | 53 | } else { | 73 | { |
| 420 | 54 | PopupUtils.open(popover, cursorItem, | 74 | "target": handler.main |
| 421 | 55 | { | 75 | }) |
| 422 | 56 | "target": editorItem | 76 | } else { |
| 423 | 57 | }) | 77 | PopupUtils.open(handler.main.popover, cursorItem, |
| 424 | 58 | } | 78 | { |
| 425 | 59 | } | 79 | "target": handler.main |
| 426 | 60 | 80 | }) | |
| 427 | 61 | style: Theme.createStyleComponent("TextCursorStyle.qml", cursorItem) | 81 | } |
| 428 | 82 | } | ||
| 429 | 83 | } | ||
| 430 | 84 | |||
| 431 | 85 | visible: handler.main.cursorVisible | ||
| 432 | 86 | // change opacity to 0 if text is selected and the positionProperty is cursorPosition | ||
| 433 | 87 | // note: we should not touch visibility as cursorVisible alters that! | ||
| 434 | 88 | opacity: (positionProperty === "cursorPosition") && (handler.main.selectedText !== "") ? 0.0 : 1.0 | ||
| 435 | 89 | |||
| 436 | 90 | // cursor visual loader | ||
| 437 | 91 | Loader { | ||
| 438 | 92 | id: cursorLoader | ||
| 439 | 93 | sourceComponent: cursorDelegate | ||
| 440 | 94 | height: parent.height | ||
| 441 | 95 | onItemChanged: { | ||
| 442 | 96 | if (item) { | ||
| 443 | 97 | cursorItem.width = item.width; | ||
| 444 | 98 | } | ||
| 445 | 99 | } | ||
| 446 | 100 | // bind the cursor height as it may change depending on the text size | ||
| 447 | 101 | Binding { | ||
| 448 | 102 | target: cursorLoader.item | ||
| 449 | 103 | property: "height" | ||
| 450 | 104 | value: cursorLoader.height | ||
| 451 | 105 | when: cursorLoader.item | ||
| 452 | 106 | } | ||
| 453 | 107 | } | ||
| 454 | 108 | |||
| 455 | 109 | /* | ||
| 456 | 110 | * Handle pressAndHold as well as right clicks when pressed around the | ||
| 457 | 111 | */ | ||
| 458 | 112 | MouseArea { | ||
| 459 | 113 | anchors { | ||
| 460 | 114 | fill: parent | ||
| 461 | 115 | margins: -units.dp(4) | ||
| 462 | 116 | } | ||
| 463 | 117 | acceptedButtons: Qt.LeftButon | Qt.RightButton | ||
| 464 | 118 | preventStealing: false | ||
| 465 | 119 | onPressAndHold: openPopover() | ||
| 466 | 120 | onClicked: if (mouse.button === Qt.RightButton) openPopover() | ||
| 467 | 121 | } | ||
| 468 | 122 | |||
| 469 | 123 | /* | ||
| 470 | 124 | * Caret dragging handling. We need a separate item which is dragged along the | ||
| 471 | 125 | * component's area, which can move freely and not attached to the caret itself. | ||
| 472 | 126 | * This area will then be used to update the caret position. | ||
| 473 | 127 | */ | ||
| 474 | 128 | onXChanged: if (draggedItem.state === "") draggedItem.moveToCaret() | ||
| 475 | 129 | onYChanged: if (draggedItem.state === "") draggedItem.moveToCaret() | ||
| 476 | 130 | Component.onCompleted: draggedItem.moveToCaret() | ||
| 477 | 131 | |||
| 478 | 132 | //dragged item | ||
| 479 | 133 | Item { | ||
| 480 | 134 | id: draggedItem | ||
| 481 | 135 | objectName: cursorItem.positionProperty + "_draggeditem" | ||
| 482 | 136 | width: caret ? caret.width : 0 | ||
| 483 | 137 | height: caret ? caret.height : 0 | ||
| 484 | 138 | parent: handler.main | ||
| 485 | 139 | visible: cursorItem.visible && (cursorItem.opacity > 0.0) | ||
| 486 | 140 | |||
| 487 | 141 | // when the dragging ends, reposition the dragger back to caret | ||
| 488 | 142 | onStateChanged: { | ||
| 489 | 143 | if (state === "") { | ||
| 490 | 144 | draggedItem.moveToCaret(); | ||
| 491 | 145 | } | ||
| 492 | 146 | } | ||
| 493 | 147 | |||
| 494 | 148 | /* | ||
| 495 | 149 | Mouse area to turn on dragging or selection mode when pressed | ||
| 496 | 150 | on the handler area. The drag mode is turned off when the drag | ||
| 497 | 151 | gets inactive or when the LeftButton is released. | ||
| 498 | 152 | */ | ||
| 499 | 153 | MouseArea { | ||
| 500 | 154 | objectName: cursorItem.positionProperty + "_activator" | ||
| 501 | 155 | anchors.fill: parent | ||
| 502 | 156 | acceptedButtons: Qt.LeftButton | Qt.RightButton | ||
| 503 | 157 | preventStealing: true | ||
| 504 | 158 | enabled: parent.width && parent.height | ||
| 505 | 159 | |||
| 506 | 160 | onPressed: { | ||
| 507 | 161 | draggedItem.moveToCaret(mouse.x, mouse.y); | ||
| 508 | 162 | draggedItem.state = "dragging"; | ||
| 509 | 163 | } | ||
| 510 | 164 | onPressAndHold: openPopover() | ||
| 511 | 165 | onClicked: if (mouse.button === Qt.RightButton) openPopover() | ||
| 512 | 166 | Ubuntu.Mouse.forwardTo: [dragger] | ||
| 513 | 167 | /* | ||
| 514 | 168 | As we are forwarding the events to the upper mouse area, the release | ||
| 515 | 169 | will not get into the normal MosueArea onRelease signal as the preventStealing | ||
| 516 | 170 | will not have any effect on the handling. However due to the mouse | ||
| 517 | 171 | filter's nature, we will still be able to grab mouse events and we | ||
| 518 | 172 | can stop dragging. We only handle the release in case the drag hasn't | ||
| 519 | 173 | been active at all, otherwise the drag will not be deactivated and we | ||
| 520 | 174 | will end up in a binding loop on the moveToCaret() next time the caret | ||
| 521 | 175 | handler is grabbed. | ||
| 522 | 176 | */ | ||
| 523 | 177 | Ubuntu.Mouse.onReleased: { | ||
| 524 | 178 | if (!dragger.drag.active) { | ||
| 525 | 179 | draggedItem.state = ""; | ||
| 526 | 180 | } | ||
| 527 | 181 | } | ||
| 528 | 182 | } | ||
| 529 | 183 | |||
| 530 | 184 | // aligns the draggedItem to the caret and resets the dragger | ||
| 531 | 185 | function moveToCaret(cx, cy) { | ||
| 532 | 186 | if (cx === undefined && cy === undefined) { | ||
| 533 | 187 | cx = mappedCursorPosition("x") + caretX; | ||
| 534 | 188 | cy = mappedCursorPosition("y") + caretY; | ||
| 535 | 189 | } else { | ||
| 536 | 190 | // move mouse position to caret | ||
| 537 | 191 | cx += draggedItem.x; | ||
| 538 | 192 | cy += draggedItem.y; | ||
| 539 | 193 | } | ||
| 540 | 194 | |||
| 541 | 195 | draggedItem.x = cx; | ||
| 542 | 196 | draggedItem.y = cy; | ||
| 543 | 197 | dragger.resetDrag(); | ||
| 544 | 198 | } | ||
| 545 | 199 | // positions caret to the dragged position | ||
| 546 | 200 | function positionCaret() { | ||
| 547 | 201 | if (dragger.drag.active) { | ||
| 548 | 202 | handler.positionCaret(positionProperty, | ||
| 549 | 203 | dragger.thumbStartX + dragger.dragAmountX + handler.flickable.contentX, | ||
| 550 | 204 | dragger.thumbStartY + dragger.dragAmountY + handler.flickable.contentY); | ||
| 551 | 205 | } | ||
| 552 | 206 | } | ||
| 553 | 207 | } | ||
| 554 | 208 | MouseArea { | ||
| 555 | 209 | id: dragger | ||
| 556 | 210 | objectName: cursorItem.positionProperty + "_dragger" | ||
| 557 | 211 | // fill the entire component area | ||
| 558 | 212 | parent: handler.main | ||
| 559 | 213 | anchors.fill: parent | ||
| 560 | 214 | hoverEnabled: true | ||
| 561 | 215 | preventStealing: drag.active | ||
| 562 | 216 | enabled: draggedItem.enabled && draggedItem.state === "dragging" | ||
| 563 | 217 | |||
| 564 | 218 | property int thumbStartX | ||
| 565 | 219 | property int dragStartX | ||
| 566 | 220 | property int dragAmountX: dragger.drag.target.x - dragStartX | ||
| 567 | 221 | property int thumbStartY | ||
| 568 | 222 | property int dragStartY | ||
| 569 | 223 | property int dragAmountY: dragger.drag.target.y - dragStartY | ||
| 570 | 224 | |||
| 571 | 225 | function resetDrag() { | ||
| 572 | 226 | thumbStartX = mappedCursorPosition("x"); | ||
| 573 | 227 | thumbStartY = mappedCursorPosition("y"); | ||
| 574 | 228 | dragStartX = drag.target.x; | ||
| 575 | 229 | dragStartY = drag.target.y; | ||
| 576 | 230 | } | ||
| 577 | 231 | |||
| 578 | 232 | // do not set minimum/maximum so we can drag outside of the Flickable area | ||
| 579 | 233 | drag { | ||
| 580 | 234 | target: draggedItem | ||
| 581 | 235 | axis: handler.singleLine ? Drag.XAxis : Drag.XAndYAxis | ||
| 582 | 236 | // deactivate dragging | ||
| 583 | 237 | onActiveChanged: { | ||
| 584 | 238 | if (!drag.active) { | ||
| 585 | 239 | draggedItem.state = ""; | ||
| 586 | 240 | } | ||
| 587 | 241 | } | ||
| 588 | 242 | } | ||
| 589 | 243 | |||
| 590 | 244 | onDragAmountXChanged: draggedItem.positionCaret() | ||
| 591 | 245 | onDragAmountYChanged: draggedItem.positionCaret() | ||
| 592 | 246 | } | ||
| 593 | 247 | |||
| 594 | 248 | // fake cursor, caret is reparented to it to avoid caret clipping | ||
| 595 | 249 | Item { | ||
| 596 | 250 | id: fakeCursor | ||
| 597 | 251 | parent: handler.main | ||
| 598 | 252 | width: cursorItem.width | ||
| 599 | 253 | height: cursorItem.height | ||
| 600 | 254 | //reparent caret to it | ||
| 601 | 255 | Component.onCompleted: if (caret) caret.parent = fakeCursor | ||
| 602 | 256 | |||
| 603 | 257 | x: mappedCursorPosition("x") | ||
| 604 | 258 | y: mappedCursorPosition("y") | ||
| 605 | 259 | |||
| 606 | 260 | // manual clipping: the caret should be visible only while the cursor's | ||
| 607 | 261 | // top/bottom falls into the text area | ||
| 608 | 262 | visible: { | ||
| 609 | 263 | if (!caret || !cursorItem.visible || cursorItem.opacity < 1.0) | ||
| 610 | 264 | return false; | ||
| 611 | 265 | |||
| 612 | 266 | var leftTop = Qt.point(x - handler.frameDistance.x, y + handler.frameDistance.y + handler.lineSpacing); | ||
| 613 | 267 | var rightBottom = Qt.point(x - handler.frameDistance.x, y + height - handler.frameDistance.y - handler.lineSpacing); | ||
| 614 | 268 | return (handler.visibleArea.contains(leftTop) || handler.visibleArea.contains(rightBottom)); | ||
| 615 | 269 | } | ||
| 616 | 270 | } | ||
| 617 | 62 | } | 271 | } |
| 618 | 63 | 272 | ||
| 619 | === modified file 'modules/Ubuntu/Components/TextField.qml' | |||
| 620 | --- modules/Ubuntu/Components/TextField.qml 2014-04-28 06:48:28 +0000 | |||
| 621 | +++ modules/Ubuntu/Components/TextField.qml 2014-05-06 12:22:48 +0000 | |||
| 622 | @@ -244,10 +244,8 @@ | |||
| 623 | 244 | 244 | ||
| 624 | 245 | Note that the root item of the delegate component must be a QQuickItem or | 245 | Note that the root item of the delegate component must be a QQuickItem or |
| 625 | 246 | QQuickItem derived item. | 246 | QQuickItem derived item. |
| 626 | 247 | |||
| 627 | 248 | \qmlproperty Component cursorDelegate | ||
| 628 | 249 | */ | 247 | */ |
| 630 | 250 | property alias cursorDelegate: editor.cursorDelegate | 248 | property Component cursorDelegate: null |
| 631 | 251 | 249 | ||
| 632 | 252 | /*! | 250 | /*! |
| 633 | 253 | The position of the cursor in the TextField. | 251 | The position of the cursor in the TextField. |
| 634 | @@ -910,20 +908,6 @@ | |||
| 635 | 910 | } | 908 | } |
| 636 | 911 | } | 909 | } |
| 637 | 912 | 910 | ||
| 638 | 913 | // cursor | ||
| 639 | 914 | Component { | ||
| 640 | 915 | id: cursor | ||
| 641 | 916 | TextCursor { | ||
| 642 | 917 | //FIXME: connect to root object once we have all TextInput properties exposed | ||
| 643 | 918 | editorItem: editor | ||
| 644 | 919 | height: internal.lineSize | ||
| 645 | 920 | popover: control.popover | ||
| 646 | 921 | visible: editor.cursorVisible | ||
| 647 | 922 | |||
| 648 | 923 | Component.onCompleted: inputHandler.pressAndHold.connect(openPopover) | ||
| 649 | 924 | } | ||
| 650 | 925 | } | ||
| 651 | 926 | |||
| 652 | 927 | AbstractButton { | 911 | AbstractButton { |
| 653 | 928 | id: clearButton | 912 | id: clearButton |
| 654 | 929 | objectName: "clear_button" | 913 | objectName: "clear_button" |
| 655 | @@ -939,7 +923,6 @@ | |||
| 656 | 939 | (control.activeFocus && ((editor.text != "") || editor.inputMethodComposing)) | 923 | (control.activeFocus && ((editor.text != "") || editor.inputMethodComposing)) |
| 657 | 940 | 924 | ||
| 658 | 941 | Image { | 925 | Image { |
| 659 | 942 | //anchors.fill: parent | ||
| 660 | 943 | anchors.verticalCenter: parent.verticalCenter | 926 | anchors.verticalCenter: parent.verticalCenter |
| 661 | 944 | width: units.gu(3) | 927 | width: units.gu(3) |
| 662 | 945 | height: width | 928 | height: width |
| 663 | @@ -997,9 +980,9 @@ | |||
| 664 | 997 | // FocusScope will forward focus to this component | 980 | // FocusScope will forward focus to this component |
| 665 | 998 | focus: true | 981 | focus: true |
| 666 | 999 | anchors.verticalCenter: parent.verticalCenter | 982 | anchors.verticalCenter: parent.verticalCenter |
| 670 | 1000 | // get the control's style | 983 | cursorDelegate: TextCursor { |
| 671 | 1001 | clip: true | 984 | handler: inputHandler |
| 672 | 1002 | cursorDelegate: cursor | 985 | } |
| 673 | 1003 | color: control.__styleInstance.color | 986 | color: control.__styleInstance.color |
| 674 | 1004 | selectedTextColor: Theme.palette.selected.foregroundText | 987 | selectedTextColor: Theme.palette.selected.foregroundText |
| 675 | 1005 | selectionColor: Theme.palette.selected.foreground | 988 | selectionColor: Theme.palette.selected.foreground |
| 676 | @@ -1021,6 +1004,13 @@ | |||
| 677 | 1021 | input: editor | 1004 | input: editor |
| 678 | 1022 | flickable: flicker | 1005 | flickable: flicker |
| 679 | 1023 | selectionModeTimeout: control.__styleInstance.selectionModeTimeout | 1006 | selectionModeTimeout: control.__styleInstance.selectionModeTimeout |
| 680 | 1007 | /* | ||
| 681 | 1008 | In x direction we use 2 times the configured spacing, as we have | ||
| 682 | 1009 | both the overlay and the Flickable aligned with margins. On y | ||
| 683 | 1010 | direction we only use the simple spacing, the Flickable moves the | ||
| 684 | 1011 | top downwards. | ||
| 685 | 1012 | */ | ||
| 686 | 1013 | frameDistance: Qt.point(2 * internal.spacing, internal.spacing) | ||
| 687 | 1024 | } | 1014 | } |
| 688 | 1025 | } | 1015 | } |
| 689 | 1026 | } | 1016 | } |
| 690 | 1027 | 1017 | ||
| 691 | === modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextAreaStyle.qml' | |||
| 692 | --- modules/Ubuntu/Components/Themes/Ambiance/TextAreaStyle.qml 2014-04-25 12:53:58 +0000 | |||
| 693 | +++ modules/Ubuntu/Components/Themes/Ambiance/TextAreaStyle.qml 2014-05-06 12:22:48 +0000 | |||
| 694 | @@ -18,6 +18,7 @@ | |||
| 695 | 18 | import Ubuntu.Components 1.1 | 18 | import Ubuntu.Components 1.1 |
| 696 | 19 | 19 | ||
| 697 | 20 | // frame | 20 | // frame |
| 698 | 21 | // FIXME: stabilize API | ||
| 699 | 21 | Item { | 22 | Item { |
| 700 | 22 | id: visuals | 23 | id: visuals |
| 701 | 23 | // style properties | 24 | // style properties |
| 702 | @@ -36,17 +37,31 @@ | |||
| 703 | 36 | Spacing between the frame and the text editor area | 37 | Spacing between the frame and the text editor area |
| 704 | 37 | */ | 38 | */ |
| 705 | 38 | property real frameSpacing: units.gu(1) | 39 | property real frameSpacing: units.gu(1) |
| 707 | 39 | property real overlaySpacing: units.gu(0.5) | 40 | property real overlaySpacing: frameSpacing / 2 |
| 708 | 40 | 41 | ||
| 709 | 41 | /*! | 42 | /*! |
| 710 | 42 | Property holding the timeout in milliseconds the component enters into selection mode. | 43 | Property holding the timeout in milliseconds the component enters into selection mode. |
| 711 | 43 | */ | 44 | */ |
| 712 | 44 | property int selectionModeTimeout: 300 | 45 | property int selectionModeTimeout: 300 |
| 713 | 45 | 46 | ||
| 714 | 47 | /*! | ||
| 715 | 48 | The following properties define the name of the style components declaring | ||
| 716 | 49 | the styles for the main and the selection cursors. All cursors must defive | ||
| 717 | 50 | from TextCursorStyle. | ||
| 718 | 51 | */ | ||
| 719 | 52 | property string mainCursorStyle: "TextCursorStyle.qml" | ||
| 720 | 53 | property string selectionStartCursorStyle: "TextSelectionStartCursorStyle.qml" | ||
| 721 | 54 | property string selectionEndCursorStyle: "TextSelectionEndCursorStyle.qml" | ||
| 722 | 55 | |||
| 723 | 56 | // style body | ||
| 724 | 46 | anchors.fill: parent | 57 | anchors.fill: parent |
| 725 | 58 | objectName: "textarea_style" | ||
| 726 | 47 | 59 | ||
| 727 | 48 | z: -1 | 60 | z: -1 |
| 728 | 49 | 61 | ||
| 729 | 62 | /*! | ||
| 730 | 63 | Text input background | ||
| 731 | 64 | */ | ||
| 732 | 50 | property Component background: UbuntuShape { | 65 | property Component background: UbuntuShape { |
| 733 | 51 | property bool error: (styledItem.hasOwnProperty("errorHighlight") && styledItem.errorHighlight && !styledItem.acceptableInput) | 66 | property bool error: (styledItem.hasOwnProperty("errorHighlight") && styledItem.errorHighlight && !styledItem.acceptableInput) |
| 734 | 52 | onErrorChanged: (error) ? visuals.errorColor : visuals.backgroundColor; | 67 | onErrorChanged: (error) ? visuals.errorColor : visuals.backgroundColor; |
| 735 | 53 | 68 | ||
| 736 | === modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml' | |||
| 737 | --- modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml 2013-07-01 06:33:24 +0000 | |||
| 738 | +++ modules/Ubuntu/Components/Themes/Ambiance/TextCursorStyle.qml 2014-05-06 12:22:48 +0000 | |||
| 739 | @@ -16,48 +16,66 @@ | |||
| 740 | 16 | 16 | ||
| 741 | 17 | import QtQuick 2.0 | 17 | import QtQuick 2.0 |
| 742 | 18 | 18 | ||
| 743 | 19 | // FIXME : move the API into Ubuntu.Components.Style | ||
| 744 | 19 | Item { | 20 | Item { |
| 785 | 20 | id: visuals | 21 | id: cursorStyle |
| 786 | 21 | /*! | 22 | /*! |
| 787 | 22 | Cursor color | 23 | Property specifying the visible timeout of the cursor. It is not mandatory |
| 788 | 23 | */ | 24 | for styles to define values for this property if the cursor blinking is not |
| 789 | 24 | property color color: Theme.palette.selected.foreground | 25 | desired. A value of 0 turns off the cursor blinking. |
| 790 | 25 | 26 | */ | |
| 791 | 26 | /*! | 27 | property int cursorVisibleTimeout: 800 |
| 792 | 27 | Properties driving cursor blinking. If either of these values are 0, no | 28 | /*! |
| 793 | 28 | blinking is provided. | 29 | Property specifying the hidden timeout of the cursor. It is not mandatory |
| 794 | 29 | */ | 30 | for styles to define values for this property if the cursor blinking is not |
| 795 | 30 | property bool blinking: true | 31 | desired. A value of 0 turns off the cursor blinking. |
| 796 | 31 | property int blinkTimeoutShown: 800 | 32 | */ |
| 797 | 32 | property int blinkTimeoutHidden: 400 | 33 | property int cursorHiddenTimeout: 400 |
| 798 | 33 | 34 | ||
| 799 | 34 | /*! | 35 | /*! |
| 800 | 35 | Selection mode pin styles | 36 | Component defining the default cursor visuals. |
| 801 | 36 | */ | 37 | */ |
| 802 | 37 | property var pinSize: units.gu(1.2) | 38 | property Component cursorDelegate: delegate |
| 803 | 38 | property var pinSensingOffset: units.dp(4) | 39 | |
| 804 | 39 | property color pinColor: Theme.palette.selected.foreground | 40 | /*! |
| 805 | 40 | 41 | The item pointing to the cursor handler. Styles should set to null if the | |
| 806 | 41 | anchors.fill: parent | 42 | cursor does not have handler at all. |
| 807 | 42 | Rectangle { | 43 | */ |
| 808 | 43 | id: cursor | 44 | property Item caret: caretItem |
| 809 | 44 | 45 | ||
| 810 | 45 | property bool showCursor: styledItem.visible | 46 | // style body |
| 811 | 46 | property bool timerShowCursor: true | 47 | Component { |
| 812 | 47 | 48 | id: delegate | |
| 813 | 48 | visible: showCursor && timerShowCursor | 49 | Rectangle { |
| 814 | 49 | color: visuals.color | 50 | width: units.dp(1) |
| 815 | 50 | anchors.fill: parent | 51 | color: Theme.palette.selected.foreground |
| 816 | 51 | 52 | visible: blinkTimer.timerShowCursor | |
| 817 | 52 | Timer { | 53 | Timer { |
| 818 | 53 | interval: visuals.blinkTimeoutShown | 54 | id: blinkTimer |
| 819 | 54 | running: cursor.showCursor && (visuals.blinkTimeoutShown > 0) && (visuals.blinkTimeoutHidden > 0) && visuals.blinking | 55 | interval: cursorStyle.cursorVisibleTimeout |
| 820 | 55 | repeat: true | 56 | running: (cursorStyle.cursorVisibleTimeout > 0) && |
| 821 | 56 | onTriggered: { | 57 | (cursorStyle.cursorHiddenTimeout > 0) && |
| 822 | 57 | interval = (interval == visuals.blinkTimeoutShown) ? | 58 | styledItem.visible |
| 823 | 58 | visuals.blinkTimeoutHidden : visuals.blinkTimeoutShown; | 59 | repeat: true |
| 824 | 59 | cursor.timerShowCursor = !cursor.timerShowCursor; | 60 | property bool timerShowCursor: true |
| 825 | 61 | onTriggered: { | ||
| 826 | 62 | interval = (interval == cursorStyle.cursorVisibleTimeout) ? | ||
| 827 | 63 | cursorStyle.cursorHiddenTimeout : cursorStyle.cursorVisibleTimeout; | ||
| 828 | 64 | timerShowCursor = !timerShowCursor; | ||
| 829 | 65 | } | ||
| 830 | 60 | } | 66 | } |
| 831 | 61 | } | 67 | } |
| 832 | 62 | } | 68 | } |
| 833 | 69 | |||
| 834 | 70 | // caretItem | ||
| 835 | 71 | Image { | ||
| 836 | 72 | id: caretItem | ||
| 837 | 73 | source: "artwork/teardrop-left.png" | ||
| 838 | 74 | anchors { | ||
| 839 | 75 | top: parent.bottom | ||
| 840 | 76 | horizontalCenter: parent.horizontalCenter | ||
| 841 | 77 | topMargin: -units.gu(0.5) | ||
| 842 | 78 | horizontalCenterOffset: units.gu(0.7) | ||
| 843 | 79 | } | ||
| 844 | 80 | } | ||
| 845 | 63 | } | 81 | } |
| 846 | 64 | 82 | ||
| 847 | === modified file 'modules/Ubuntu/Components/Themes/Ambiance/TextFieldStyle.qml' | |||
| 848 | --- modules/Ubuntu/Components/Themes/Ambiance/TextFieldStyle.qml 2013-06-27 15:20:12 +0000 | |||
| 849 | +++ modules/Ubuntu/Components/Themes/Ambiance/TextFieldStyle.qml 2014-05-06 12:22:48 +0000 | |||
| 850 | @@ -17,4 +17,5 @@ | |||
| 851 | 17 | import QtQuick 2.0 | 17 | import QtQuick 2.0 |
| 852 | 18 | 18 | ||
| 853 | 19 | TextAreaStyle { | 19 | TextAreaStyle { |
| 854 | 20 | objectName: "textfield_style" | ||
| 855 | 20 | } | 21 | } |
| 856 | 21 | 22 | ||
| 857 | === added file 'modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml' | |||
| 858 | --- modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml 1970-01-01 00:00:00 +0000 | |||
| 859 | +++ modules/Ubuntu/Components/Themes/Ambiance/TextSelectionEndCursorStyle.qml 2014-05-06 12:22:48 +0000 | |||
| 860 | @@ -0,0 +1,66 @@ | |||
| 861 | 1 | /* | ||
| 862 | 2 | * Copyright 2014 Canonical Ltd. | ||
| 863 | 3 | * | ||
| 864 | 4 | * This program is free software; you can redistribute it and/or modify | ||
| 865 | 5 | * it under the terms of the GNU Lesser General Public License as published by | ||
| 866 | 6 | * the Free Software Foundation; version 3. | ||
| 867 | 7 | * | ||
| 868 | 8 | * This program is distributed in the hope that it will be useful, | ||
| 869 | 9 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| 870 | 10 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| 871 | 11 | * GNU Lesser General Public License for more details. | ||
| 872 | 12 | * | ||
| 873 | 13 | * You should have received a copy of the GNU Lesser General Public License | ||
| 874 | 14 | * along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
| 875 | 15 | */ | ||
| 876 | 16 | |||
| 877 | 17 | import QtQuick 2.0 | ||
| 878 | 18 | |||
| 879 | 19 | // FIXME : move the API into Ubuntu.Components.Style | ||
| 880 | 20 | Item { | ||
| 881 | 21 | id: cursorStyle | ||
| 882 | 22 | /*! | ||
| 883 | 23 | Property specifying the visible timeout of the cursor. It is not mandatory | ||
| 884 | 24 | for styles to define values for this property if the cursor blinking is not | ||
| 885 | 25 | desired. A value of 0 turns off the cursor blinking. | ||
| 886 | 26 | */ | ||
| 887 | 27 | property int cursorVisibleTimeout: 0 | ||
| 888 | 28 | /*! | ||
| 889 | 29 | Property specifying the hidden timeout of the cursor. It is not mandatory | ||
| 890 | 30 | for styles to define values for this property if the cursor blinking is not | ||
| 891 | 31 | desired. A value of 0 turns off the cursor blinking. | ||
| 892 | 32 | */ | ||
| 893 | 33 | property int cursorHiddenTimeout: 0 | ||
| 894 | 34 | |||
| 895 | 35 | /*! | ||
| 896 | 36 | Component defining the default cursor visuals. | ||
| 897 | 37 | */ | ||
| 898 | 38 | property Component cursorDelegate: delegate | ||
| 899 | 39 | |||
| 900 | 40 | /*! | ||
| 901 | 41 | The item pointing to the cursor handler. Styles should set to null if the | ||
| 902 | 42 | cursor does not have handler at all. | ||
| 903 | 43 | */ | ||
| 904 | 44 | property Item caret: caretItem | ||
| 905 | 45 | |||
| 906 | 46 | // style body | ||
| 907 | 47 | Component { | ||
| 908 | 48 | id: delegate | ||
| 909 | 49 | Rectangle { | ||
| 910 | 50 | width: units.dp(1) | ||
| 911 | 51 | color: Theme.palette.selected.foreground | ||
| 912 | 52 | } | ||
| 913 | 53 | } | ||
| 914 | 54 | |||
| 915 | 55 | // caretItem | ||
| 916 | 56 | Image { | ||
| 917 | 57 | id: caretItem | ||
| 918 | 58 | source: "artwork/teardrop-left.png" | ||
| 919 | 59 | anchors { | ||
| 920 | 60 | top: parent.bottom | ||
| 921 | 61 | horizontalCenter: parent.horizontalCenter | ||
| 922 | 62 | topMargin: -units.gu(0.5) | ||
| 923 | 63 | horizontalCenterOffset: units.gu(0.7) | ||
| 924 | 64 | } | ||
| 925 | 65 | } | ||
| 926 | 66 | } | ||
| 927 | 0 | 67 | ||
| 928 | === added file 'modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml' | |||
| 929 | --- modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml 1970-01-01 00:00:00 +0000 | |||
| 930 | +++ modules/Ubuntu/Components/Themes/Ambiance/TextSelectionStartCursorStyle.qml 2014-05-06 12:22:48 +0000 | |||
| 931 | @@ -0,0 +1,66 @@ | |||
| 932 | 1 | /* | ||
| 933 | 2 | * Copyright 2014 Canonical Ltd. | ||
| 934 | 3 | * | ||
| 935 | 4 | * This program is free software; you can redistribute it and/or modify | ||
| 936 | 5 | * it under the terms of the GNU Lesser General Public License as published by | ||
| 937 | 6 | * the Free Software Foundation; version 3. | ||
| 938 | 7 | * | ||
| 939 | 8 | * This program is distributed in the hope that it will be useful, | ||
| 940 | 9 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| 941 | 10 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| 942 | 11 | * GNU Lesser General Public License for more details. | ||
| 943 | 12 | * | ||
| 944 | 13 | * You should have received a copy of the GNU Lesser General Public License | ||
| 945 | 14 | * along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
| 946 | 15 | */ | ||
| 947 | 16 | |||
| 948 | 17 | import QtQuick 2.0 | ||
| 949 | 18 | |||
| 950 | 19 | // FIXME : move the API into Ubuntu.Components.Style | ||
| 951 | 20 | Item { | ||
| 952 | 21 | id: cursorStyle | ||
| 953 | 22 | /*! | ||
| 954 | 23 | Property specifying the visible timeout of the cursor. It is not mandatory | ||
| 955 | 24 | for styles to define values for this property if the cursor blinking is not | ||
| 956 | 25 | desired. A value of 0 turns off the cursor blinking. | ||
| 957 | 26 | */ | ||
| 958 | 27 | property int cursorVisibleTimeout: 0 | ||
| 959 | 28 | /*! | ||
| 960 | 29 | Property specifying the hidden timeout of the cursor. It is not mandatory | ||
| 961 | 30 | for styles to define values for this property if the cursor blinking is not | ||
| 962 | 31 | desired. A value of 0 turns off the cursor blinking. | ||
| 963 | 32 | */ | ||
| 964 | 33 | property int cursorHiddenTimeout: 0 | ||
| 965 | 34 | |||
| 966 | 35 | /*! | ||
| 967 | 36 | Component defining the default cursor visuals. | ||
| 968 | 37 | */ | ||
| 969 | 38 | property Component cursorDelegate: delegate | ||
| 970 | 39 | |||
| 971 | 40 | /*! | ||
| 972 | 41 | The item pointing to the cursor handler. Styles should set to null if the | ||
| 973 | 42 | cursor does not have handler at all. | ||
| 974 | 43 | */ | ||
| 975 | 44 | property Item caret: caretItem | ||
| 976 | 45 | |||
| 977 | 46 | // style body | ||
| 978 | 47 | Component { | ||
| 979 | 48 | id: delegate | ||
| 980 | 49 | Rectangle { | ||
| 981 | 50 | width: units.dp(1) | ||
| 982 | 51 | color: Theme.palette.selected.foreground | ||
| 983 | 52 | } | ||
| 984 | 53 | } | ||
| 985 | 54 | |||
| 986 | 55 | // caretItem | ||
| 987 | 56 | Image { | ||
| 988 | 57 | id: caretItem | ||
| 989 | 58 | source: "artwork/teardrop-right.png" | ||
| 990 | 59 | anchors { | ||
| 991 | 60 | top: parent.bottom | ||
| 992 | 61 | horizontalCenter: parent.horizontalCenter | ||
| 993 | 62 | topMargin: -units.gu(0.5) | ||
| 994 | 63 | horizontalCenterOffset: -units.gu(0.7) | ||
| 995 | 64 | } | ||
| 996 | 65 | } | ||
| 997 | 66 | } | ||
| 998 | 0 | 67 | ||
| 999 | === added file 'modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-left@20.png' | |||
| 1000 | 1 | Binary files modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-left@20.png 1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-left@20.png 2014-05-06 12:22:48 +0000 differ | 68 | Binary files modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-left@20.png 1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-left@20.png 2014-05-06 12:22:48 +0000 differ |
| 1001 | === added file 'modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-right@20.png' | |||
| 1002 | 2 | Binary files modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-right@20.png 1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-right@20.png 2014-05-06 12:22:48 +0000 differ | 69 | Binary files modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-right@20.png 1970-01-01 00:00:00 +0000 and modules/Ubuntu/Components/Themes/Ambiance/artwork/teardrop-right@20.png 2014-05-06 12:22:48 +0000 differ |
| 1003 | === modified file 'modules/Ubuntu/Components/Themes/Ambiance/qmldir' | |||
| 1004 | --- modules/Ubuntu/Components/Themes/Ambiance/qmldir 2014-04-28 14:04:29 +0000 | |||
| 1005 | +++ modules/Ubuntu/Components/Themes/Ambiance/qmldir 2014-05-06 12:22:48 +0000 | |||
| 1006 | @@ -46,3 +46,6 @@ | |||
| 1007 | 46 | 46 | ||
| 1008 | 47 | #version 1.1 | 47 | #version 1.1 |
| 1009 | 48 | ComboButtonStyle 1.1 ComboButtonStyle.qml | 48 | ComboButtonStyle 1.1 ComboButtonStyle.qml |
| 1010 | 49 | |||
| 1011 | 50 | internal TextSelectionStartCursorStyle TextSelectionStartCursorStyle.qml | ||
| 1012 | 51 | internal TextSelectionEndCursorStyle TextSelectionEndCursorStyle.qml | ||
| 1013 | 49 | 52 | ||
| 1014 | === modified file 'modules/Ubuntu/Test/UbuntuTestCase.qml' | |||
| 1015 | --- modules/Ubuntu/Test/UbuntuTestCase.qml 2014-04-28 06:06:32 +0000 | |||
| 1016 | +++ modules/Ubuntu/Test/UbuntuTestCase.qml 2014-05-06 12:22:48 +0000 | |||
| 1017 | @@ -66,6 +66,28 @@ | |||
| 1018 | 66 | return null; | 66 | return null; |
| 1019 | 67 | } | 67 | } |
| 1020 | 68 | 68 | ||
| 1021 | 69 | /*! | ||
| 1022 | 70 | Finds a visible child of an \a item having a given \a property with a given | ||
| 1023 | 71 | \a value. | ||
| 1024 | 72 | */ | ||
| 1025 | 73 | function findChildWithProperty(item, property, value) { | ||
| 1026 | 74 | var childs = new Array(0); | ||
| 1027 | 75 | childs.push(item) | ||
| 1028 | 76 | while (childs.length > 0) { | ||
| 1029 | 77 | var child = childs[0]; | ||
| 1030 | 78 | if (child.hasOwnProperty(property) && (child[property] === value)) { | ||
| 1031 | 79 | return child; | ||
| 1032 | 80 | } | ||
| 1033 | 81 | for (var i in childs[0].children) { | ||
| 1034 | 82 | childs.push(childs[0].children[i]) | ||
| 1035 | 83 | } | ||
| 1036 | 84 | childs.splice(0, 1); | ||
| 1037 | 85 | } | ||
| 1038 | 86 | return null; | ||
| 1039 | 87 | } | ||
| 1040 | 88 | |||
| 1041 | 89 | |||
| 1042 | 90 | |||
| 1043 | 69 | /*! | 91 | /*! |
| 1044 | 70 | Move Mouse from x,y to distance of dx, dy divided to steps with a stepdelay (ms). | 92 | Move Mouse from x,y to distance of dx, dy divided to steps with a stepdelay (ms). |
| 1045 | 71 | */ | 93 | */ |
| 1046 | @@ -152,8 +174,9 @@ | |||
| 1047 | 152 | */ | 174 | */ |
| 1048 | 153 | function mouseLongPress(item, x, y, button, modifiers, delay) { | 175 | function mouseLongPress(item, x, y, button, modifiers, delay) { |
| 1049 | 154 | mousePress(item, x, y, button, modifiers, delay); | 176 | mousePress(item, x, y, button, modifiers, delay); |
| 1052 | 155 | // the delay is taken from QQuickMouseArea | 177 | // the delay is taken from QQuickMouseArea, add few miliseconds to it to make sure we have |
| 1053 | 156 | wait(800); | 178 | // the long press triggered |
| 1054 | 179 | wait(900); | ||
| 1055 | 157 | } | 180 | } |
| 1056 | 158 | 181 | ||
| 1057 | 159 | /*! | 182 | /*! |
| 1058 | 160 | 183 | ||
| 1059 | === modified file 'tests/resources/inputs/TextInputs.qml' | |||
| 1060 | --- tests/resources/inputs/TextInputs.qml 2014-04-07 10:37:36 +0000 | |||
| 1061 | +++ tests/resources/inputs/TextInputs.qml 2014-05-06 12:22:48 +0000 | |||
| 1062 | @@ -74,6 +74,10 @@ | |||
| 1063 | 74 | autoSize: true | 74 | autoSize: true |
| 1064 | 75 | maximumLineCount: 0 | 75 | maximumLineCount: 0 |
| 1065 | 76 | text: "Lorem Ipsum is simply dummy text\nof the printing and typesetting\nindustry.\n" | 76 | text: "Lorem Ipsum is simply dummy text\nof the printing and typesetting\nindustry.\n" |
| 1066 | 77 | cursorDelegate: Rectangle { | ||
| 1067 | 78 | width: units.dp(4) | ||
| 1068 | 79 | color: "blue" | ||
| 1069 | 80 | } | ||
| 1070 | 77 | } | 81 | } |
| 1071 | 78 | TextArea { | 82 | TextArea { |
| 1072 | 79 | autoSize: true | 83 | autoSize: true |
| 1073 | 80 | 84 | ||
| 1074 | === modified file 'tests/unit_x11/tst_components/tst_textarea.qml' | |||
| 1075 | --- tests/unit_x11/tst_components/tst_textarea.qml 2014-04-28 06:06:32 +0000 | |||
| 1076 | +++ tests/unit_x11/tst_components/tst_textarea.qml 2014-05-06 12:22:48 +0000 | |||
| 1077 | @@ -138,7 +138,7 @@ | |||
| 1078 | 138 | } | 138 | } |
| 1079 | 139 | 139 | ||
| 1080 | 140 | function test_0_cursorDelegate() { | 140 | function test_0_cursorDelegate() { |
| 1082 | 141 | compare((textArea.cursorDelegate!=null),true,"TextArea.cursorDelegate is not null") | 141 | verify(textArea.cursorDelegate === null, "TextArea.cursorDelegate is not null") |
| 1083 | 142 | } | 142 | } |
| 1084 | 143 | 143 | ||
| 1085 | 144 | function test_0_cursorPosition() { | 144 | function test_0_cursorPosition() { |
| 1086 | @@ -242,15 +242,16 @@ | |||
| 1087 | 242 | compare(textArea.highlighted, textArea.focus, "highlighted is the same as focused"); | 242 | compare(textArea.highlighted, textArea.focus, "highlighted is the same as focused"); |
| 1088 | 243 | } | 243 | } |
| 1089 | 244 | 244 | ||
| 1092 | 245 | function test_contentHeight() { | 245 | function test_0_contentHeight() { |
| 1093 | 246 | compare(textArea.contentHeight>0,true,"contentHeight over 0 units on default") | 246 | verify(textArea.contentHeight > 0, "contentHeight over 0 units on default") |
| 1094 | 247 | var newValue = 200; | 247 | var newValue = 200; |
| 1095 | 248 | textArea.contentHeight = newValue; | 248 | textArea.contentHeight = newValue; |
| 1096 | 249 | compare(textArea.contentHeight,newValue,"set/get"); | 249 | compare(textArea.contentHeight,newValue,"set/get"); |
| 1097 | 250 | } | 250 | } |
| 1098 | 251 | 251 | ||
| 1101 | 252 | function test_contentWidth() { | 252 | function test_0_contentWidth() { |
| 1102 | 253 | compare(textArea.contentWidth,units.gu(30),"contentWidth is 30 units on default") | 253 | var style = findChild(textArea, "textarea_style"); |
| 1103 | 254 | compare(textArea.contentWidth, units.gu(30) - 2 * style.frameSpacing, "contentWidth is the implicitWidth - 2 times the frame size on default") | ||
| 1104 | 254 | var newValue = 200; | 255 | var newValue = 200; |
| 1105 | 255 | textArea.contentWidth = newValue; | 256 | textArea.contentWidth = newValue; |
| 1106 | 256 | compare(textArea.contentWidth,newValue,"set/get"); | 257 | compare(textArea.contentWidth,newValue,"set/get"); |
| 1107 | 257 | 258 | ||
| 1108 | === modified file 'tests/unit_x11/tst_components/tst_textfield.qml' | |||
| 1109 | --- tests/unit_x11/tst_components/tst_textfield.qml 2014-04-28 06:06:32 +0000 | |||
| 1110 | +++ tests/unit_x11/tst_components/tst_textfield.qml 2014-05-06 12:22:48 +0000 | |||
| 1111 | @@ -156,7 +156,7 @@ | |||
| 1112 | 156 | } | 156 | } |
| 1113 | 157 | 157 | ||
| 1114 | 158 | function test_0_cursorDelegate() { | 158 | function test_0_cursorDelegate() { |
| 1116 | 159 | verify(textField.cursorDelegate, "cursorDelegate set by default") | 159 | verify(textField.cursorDelegate === null, "cursorDelegate not set by default") |
| 1117 | 160 | } | 160 | } |
| 1118 | 161 | 161 | ||
| 1119 | 162 | function test_0_cursorPosition() { | 162 | function test_0_cursorPosition() { |
| 1120 | 163 | 163 | ||
| 1121 | === added file 'tests/unit_x11/tst_components/tst_textinput_common.qml' | |||
| 1122 | --- tests/unit_x11/tst_components/tst_textinput_common.qml 1970-01-01 00:00:00 +0000 | |||
| 1123 | +++ tests/unit_x11/tst_components/tst_textinput_common.qml 2014-05-06 12:22:48 +0000 | |||
| 1124 | @@ -0,0 +1,198 @@ | |||
| 1125 | 1 | /* | ||
| 1126 | 2 | * Copyright 2014 Canonical Ltd. | ||
| 1127 | 3 | * | ||
| 1128 | 4 | * This program is free software; you can redistribute it and/or modify | ||
| 1129 | 5 | * it under the terms of the GNU Lesser General Public License as published by | ||
| 1130 | 6 | * the Free Software Foundation; version 3. | ||
| 1131 | 7 | * | ||
| 1132 | 8 | * This program is distributed in the hope that it will be useful, | ||
| 1133 | 9 | * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| 1134 | 10 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| 1135 | 11 | * GNU Lesser General Public License for more details. | ||
| 1136 | 12 | * | ||
| 1137 | 13 | * You should have received a copy of the GNU Lesser General Public License | ||
| 1138 | 14 | * along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
| 1139 | 15 | */ | ||
| 1140 | 16 | |||
| 1141 | 17 | import QtQuick 2.0 | ||
| 1142 | 18 | import QtTest 1.0 | ||
| 1143 | 19 | import Ubuntu.Test 1.0 | ||
| 1144 | 20 | import Ubuntu.Components 1.1 | ||
| 1145 | 21 | |||
| 1146 | 22 | Item { | ||
| 1147 | 23 | id: testMain | ||
| 1148 | 24 | width: units.gu(40) | ||
| 1149 | 25 | height: units.gu(71) | ||
| 1150 | 26 | |||
| 1151 | 27 | Column { | ||
| 1152 | 28 | spacing: units.gu(1) | ||
| 1153 | 29 | TextField { | ||
| 1154 | 30 | id: textField | ||
| 1155 | 31 | } | ||
| 1156 | 32 | TextArea { | ||
| 1157 | 33 | id: textArea | ||
| 1158 | 34 | } | ||
| 1159 | 35 | } | ||
| 1160 | 36 | |||
| 1161 | 37 | SignalSpy { | ||
| 1162 | 38 | id: cursorPositionSpy | ||
| 1163 | 39 | signalName: "onCursorPositionChanged" | ||
| 1164 | 40 | } | ||
| 1165 | 41 | SignalSpy { | ||
| 1166 | 42 | id: selectionStartSpy | ||
| 1167 | 43 | signalName: "onSelectionStartChanged" | ||
| 1168 | 44 | } | ||
| 1169 | 45 | SignalSpy { | ||
| 1170 | 46 | id: selectionEndSpy | ||
| 1171 | 47 | signalName: "onSelectionEndChanged" | ||
| 1172 | 48 | } | ||
| 1173 | 49 | SignalSpy { | ||
| 1174 | 50 | id: selectedTextSpy | ||
| 1175 | 51 | signalName: "onSelectedTextChanged" | ||
| 1176 | 52 | } | ||
| 1177 | 53 | SignalSpy { | ||
| 1178 | 54 | id: popupSpy | ||
| 1179 | 55 | signalName: "pressAndHold" | ||
| 1180 | 56 | } | ||
| 1181 | 57 | SignalSpy { | ||
| 1182 | 58 | id: movementXSpy | ||
| 1183 | 59 | signalName: "onContentXChanged" | ||
| 1184 | 60 | } | ||
| 1185 | 61 | SignalSpy { | ||
| 1186 | 62 | id: movementYSpy | ||
| 1187 | 63 | signalName: "contentYChanged" | ||
| 1188 | 64 | } | ||
| 1189 | 65 | |||
| 1190 | 66 | UbuntuTestCase { | ||
| 1191 | 67 | name: "TextInputCaretTest" | ||
| 1192 | 68 | when: windowShown | ||
| 1193 | 69 | |||
| 1194 | 70 | function init() { | ||
| 1195 | 71 | textField.text = "This is a single line text input called TextField."; | ||
| 1196 | 72 | textArea.text = "This is a multiline text input component called TextArea. It supports fix size as well as auto-expanding behavior."; | ||
| 1197 | 73 | textField.cursorPosition = 0; | ||
| 1198 | 74 | textArea.cursorPosition = 0; | ||
| 1199 | 75 | waitForRendering(textField, 500); | ||
| 1200 | 76 | waitForRendering(textArea, 500); | ||
| 1201 | 77 | } | ||
| 1202 | 78 | |||
| 1203 | 79 | function cleanup() { | ||
| 1204 | 80 | textField.focus = false; | ||
| 1205 | 81 | textArea.focus = false; | ||
| 1206 | 82 | cursorPositionSpy.clear(); | ||
| 1207 | 83 | selectionStartSpy.clear(); | ||
| 1208 | 84 | selectionEndSpy.clear(); | ||
| 1209 | 85 | selectedTextSpy.clear(); | ||
| 1210 | 86 | popupSpy.clear(); | ||
| 1211 | 87 | movementXSpy.clear(); | ||
| 1212 | 88 | movementYSpy.clear(); | ||
| 1213 | 89 | } | ||
| 1214 | 90 | |||
| 1215 | 91 | function test_textfield_grab_caret_data() { | ||
| 1216 | 92 | return [ | ||
| 1217 | 93 | {input: textField}, | ||
| 1218 | 94 | {input: textArea}, | ||
| 1219 | 95 | ]; | ||
| 1220 | 96 | } | ||
| 1221 | 97 | |||
| 1222 | 98 | function test_textfield_grab_caret(data) { | ||
| 1223 | 99 | data.input.focus = true; | ||
| 1224 | 100 | |||
| 1225 | 101 | var draggedItem = findChild(data.input, "cursorPosition_draggeditem"); | ||
| 1226 | 102 | var drag_activator = findChild(data.input, "cursorPosition_activator"); | ||
| 1227 | 103 | var dragger = findChild(data.input, "cursorPosition_dragger"); | ||
| 1228 | 104 | |||
| 1229 | 105 | // drag the cursor, observe cursorPositionChanged | ||
| 1230 | 106 | cursorPositionSpy.target = data.input; | ||
| 1231 | 107 | var x = drag_activator.width / 2; | ||
| 1232 | 108 | var y = drag_activator.height / 2; | ||
| 1233 | 109 | mousePress(drag_activator, x, y); | ||
| 1234 | 110 | compare(draggedItem.state, "dragging", "the caret hasn't been activated"); | ||
| 1235 | 111 | // drag the mouse | ||
| 1236 | 112 | mouseMoveSlowly(dragger, x, y, 100, 0, 10, 0); | ||
| 1237 | 113 | mouseRelease(dragger, x + 100, y); | ||
| 1238 | 114 | waitForRendering(data.input, 1000); | ||
| 1239 | 115 | compare(draggedItem.state, "", "the caret hasn't been deactivated"); | ||
| 1240 | 116 | cursorPositionSpy.wait(); | ||
| 1241 | 117 | } | ||
| 1242 | 118 | |||
| 1243 | 119 | function test_textfield_grab_selection_cursors_data() { | ||
| 1244 | 120 | return [ | ||
| 1245 | 121 | {input: textField, cursorSpy: selectionStartSpy, dragPrefix: "selectionStart", startDx: 0, startDy: 0, dragDx: 100, dragDy: 0, movingSpy: null}, | ||
| 1246 | 122 | {input: textArea, cursorSpy: selectionStartSpy, dragPrefix: "selectionStart", startDx: 0, startDy: 0, dragDx: 100, dragDy: 0, movingSpy: null}, | ||
| 1247 | 123 | {input: textField, cursorSpy: selectionEndSpy, dragPrefix: "selectionEnd", startDx: 0, startDy: 0, dragDx: 200, dragDy: 100, movingSpy: movementXSpy, flicker: "textfield_scroller"}, | ||
| 1248 | 124 | {input: textArea, cursorSpy: selectionEndSpy, dragPrefix: "selectionEnd", startDx: 0, startDy: 0, dragDx: 200, dragDy: 100, movingSpy: movementYSpy, flicker: "textarea_scroller"}, | ||
| 1249 | 125 | ]; | ||
| 1250 | 126 | } | ||
| 1251 | 127 | function test_textfield_grab_selection_cursors(data) { | ||
| 1252 | 128 | if (data.movingSpy) { | ||
| 1253 | 129 | var flicker = findChild(data.input, data.flicker) | ||
| 1254 | 130 | data.movingSpy.target = flicker; | ||
| 1255 | 131 | } | ||
| 1256 | 132 | data.input.focus = true; | ||
| 1257 | 133 | // make sure the text is long enough | ||
| 1258 | 134 | data.input.text += data.input.text; | ||
| 1259 | 135 | |||
| 1260 | 136 | // select text in front | ||
| 1261 | 137 | data.input.select(0, 10); | ||
| 1262 | 138 | var draggedItem = findChild(data.input, data.dragPrefix + "_draggeditem"); | ||
| 1263 | 139 | var drag_activator = findChild(data.input, data.dragPrefix + "_activator"); | ||
| 1264 | 140 | var dragger = findChild(data.input, data.dragPrefix + "_dragger"); | ||
| 1265 | 141 | data.cursorSpy.target = data.input; | ||
| 1266 | 142 | |||
| 1267 | 143 | // grab the selection and drag it | ||
| 1268 | 144 | var x = drag_activator.width / 2 + data.startDx; | ||
| 1269 | 145 | var y = drag_activator.height / 2 + data.startDy; | ||
| 1270 | 146 | selectedTextSpy.target = data.input; | ||
| 1271 | 147 | mousePress(drag_activator, x, y); | ||
| 1272 | 148 | compare(draggedItem.state, "dragging", "the caret hasn't been activated"); | ||
| 1273 | 149 | // drag the mouse | ||
| 1274 | 150 | mouseMoveSlowly(dragger, x, y, data.dragDx, data.dragDy, 15, 100); | ||
| 1275 | 151 | mouseRelease(dragger, x + data.dragDx, y + data.dragDy); | ||
| 1276 | 152 | waitForRendering(data.input, 500); | ||
| 1277 | 153 | compare(draggedItem.state, "", "the caret hasn't been deactivated"); | ||
| 1278 | 154 | data.cursorSpy.wait(); | ||
| 1279 | 155 | selectedTextSpy.wait(); | ||
| 1280 | 156 | if (data.movingSpy) { | ||
| 1281 | 157 | data.movingSpy.wait(); | ||
| 1282 | 158 | } | ||
| 1283 | 159 | } | ||
| 1284 | 160 | |||
| 1285 | 161 | function test_clear_text_using_popover_data() { | ||
| 1286 | 162 | return [ | ||
| 1287 | 163 | {input: textField}, | ||
| 1288 | 164 | {input: textArea}, | ||
| 1289 | 165 | ]; | ||
| 1290 | 166 | } | ||
| 1291 | 167 | |||
| 1292 | 168 | function test_clear_text_using_popover(data) { | ||
| 1293 | 169 | var handler = findChild(data.input, "input_handler"); | ||
| 1294 | 170 | popupSpy.target = handler; | ||
| 1295 | 171 | data.input.focus = true; | ||
| 1296 | 172 | |||
| 1297 | 173 | // invoke popover | ||
| 1298 | 174 | var x = data.input.width / 2; | ||
| 1299 | 175 | var y = data.input.height / 2; | ||
| 1300 | 176 | mouseLongPress(data.input, x, y); | ||
| 1301 | 177 | popupSpy.wait(); | ||
| 1302 | 178 | mouseRelease(data.input, x, y); | ||
| 1303 | 179 | var popover = findChild(testMain, "text_input_popover"); | ||
| 1304 | 180 | verify(popover, "Cannot retrieve default TextInputPopover"); | ||
| 1305 | 181 | waitForRendering(popover); | ||
| 1306 | 182 | // select all | ||
| 1307 | 183 | var selectAll = findChildWithProperty(popover, "text", "Select All"); | ||
| 1308 | 184 | verify(selectAll, "Select All item not found"); | ||
| 1309 | 185 | mouseClick(selectAll, selectAll.width / 2, selectAll.height / 2); | ||
| 1310 | 186 | waitForRendering(data.input, 1000); | ||
| 1311 | 187 | compare(data.input.text, data.input.selectedText, "Not all the text is selected"); | ||
| 1312 | 188 | // delete with key press | ||
| 1313 | 189 | keyClick(Qt.Key_Backspace); | ||
| 1314 | 190 | waitForRendering(data.input, 1000); | ||
| 1315 | 191 | compare(data.input.text, "", "The text has not been deleted"); | ||
| 1316 | 192 | |||
| 1317 | 193 | // dismiss popover | ||
| 1318 | 194 | mouseClick(testMain, testMain.width / 2, testMain.height / 2); | ||
| 1319 | 195 | wait(200); | ||
| 1320 | 196 | } | ||
| 1321 | 197 | } | ||
| 1322 | 198 | } | ||
The carrots actually do a nice job on the desktop enabling me to extend selections with just a mouse - ordinarily it would require ⇧Arrow.
A single carrot is visible when there's no selection but can't be dragged.
If the selection is at the very start of the text field the first carrot is clipped.
505 - Ubuntu.
506 +// Ubuntu.
Accident?
526 +// FIXME: stabilize API
What does this mean? Could you make the comment more verbose or mention a bug?