Merge lp:~ubuntu-sdk-team/ubuntu-ui-toolkit/tinyText into lp:ubuntu-ui-toolkit/staging

[Cris Dywan]

Tiny Text* components for experimenting

Unmerged revisions

1980. By Cris Dywan on 2016-05-25

Simplify TextArea14 and add a reference ScrollView/Flickable/TextEdit

1979. By Cris Dywan on 2016-05-20

Tiny Text* components for experimenting

=== modified file 'src/Ubuntu/Components/1.3/InputHandler.qml'
--- src/Ubuntu/Components/1.3/InputHandler.qml	2016-05-09 08:12:31 +0000
+++ src/Ubuntu/Components/1.3/InputHandler.qml	2016-05-25 12:39:37 +0000
@@ -90,10 +90,13 @@
     {
         if (flickable.moving || flickable.flicking)
             return;
+        //flickable.contentX = MathUtils.clamp(flickable.contentX, flickable.originX, flickable.originX + flickable.contentWidth - flickable.width);
+        return;
         if (flickable.contentX >= rect.x)
             flickable.contentX = rect.x;
-        else if (flickable.contentX + flickable.width <= rect.x + rect.width)
-            flickable.contentX = rect.x + rect.width - flickable.width;
+        else if (flickable.contentX + flickable.contentWidth <= rect.x + rect.width)
+            flickable.contentX = rect.x + rect.width - flickable.contentWidth;
+        return;
         if (flickable.contentY >= rect.y)
             flickable.contentY = rect.y;
         else if (flickable.contentY + flickable.height <= rect.y + rect.height)

=== modified file 'src/Ubuntu/Components/1.3/TextArea.qml'
--- src/Ubuntu/Components/1.3/TextArea.qml	2016-05-12 16:30:27 +0000
+++ src/Ubuntu/Components/1.3/TextArea.qml	2016-05-25 12:39:37 +0000
@@ -884,9 +884,10 @@
         anchors.topMargin: -internal.frameSpacing
         anchors.rightMargin: -internal.frameSpacing
         anchors.bottomMargin: -internal.frameSpacing
+        __alwaysOnScrollbars: true
         Ubuntu.StyleHints {
             // No background color
-            troughColorSteppersStyle: Qt.rgba(0, 0, 0, 0)
+            // troughColorSteppersStyle: Qt.rgba(0, 0, 0, 0)
         }
     }
 

=== added file 'src/Ubuntu/Components/1.3/TextArea14.qml'
--- src/Ubuntu/Components/1.3/TextArea14.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Components/1.3/TextArea14.qml	2016-05-25 12:39:37 +0000
@@ -0,0 +1,77 @@
+import QtQuick 2.4
+import Ubuntu.Components 1.3 as Ubuntu
+
+Ubuntu.StyledItem {
+    id: main
+    implicitWidth: units.gu(30)
+    implicitHeight: units.gu(4) * 5
+
+    property alias text: input.text
+    property string placeholderText //FIXME: placeHolder is a placeHolder for now
+
+    styleName: "TextAreaStyle"
+    Keys.forwardTo: [input]
+    // FIXME: property alias activeFocusOnPress: input.activeFocusOnPress
+    activeFocusOnPress: true
+
+    ScrollView {
+        anchors.fill: parent
+        Flickable {
+            id: flickable
+            anchors {
+                fill: parent
+            }
+            property real spacing: main.__styleInstance.frameSpacing
+            topMargin: spacing
+            leftMargin: spacing
+            boundsBehavior: Flickable.StopAtBounds
+            clip: true
+            contentX: -spacing
+            contentY: -spacing
+            contentWidth: input.paintedWidth + spacing
+            contentHeight: input.paintedHeight + spacing
+            interactive: contentHeight > height
+            flickableDirection: Flickable.VerticalFlick
+
+            TextEdit {
+                id: input
+                width: flickable.width - flickable.spacing * 2
+                height: Math.max(flickable.height - flickable.spacing * 2, contentHeight + flickable.spacing * 2)
+                wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+
+                color: main.__styleInstance.color
+                selectedTextColor: main.__styleInstance.selectedTextColor
+                selectionColor: main.__styleInstance.selectionColor
+                font.pixelSize: FontUtils.sizeToPixels("medium")
+
+                // FIXME: WIP
+                Ubuntu.Mouse.forwardTo: [main]
+                // activeFocusOnPress: false
+                onFocusChanged: if (focus) main.forceActiveFocus()
+
+                Keys.onPressed: cursorVisible = true
+                selectByMouse: true
+                mouseSelectionMode: TextInput.SelectWords
+                cursorDelegate: Component {
+                    Rectangle {
+                        color: theme.palette.normal.activity
+                        width: units.dp(2)
+                        height: input.cursorRectangle.height
+                        visible: main.activeFocus
+                    }
+                }
+                /* cursorDelegate: TextCursor {
+                    handler: handler
+                }
+
+                InputHandler {
+                    id: handler
+                    anchors.fill: parent
+                    main: main
+                    input: input
+                    flickable: flickable
+                } */
+            }
+        }
+    }
+}

=== modified file 'src/Ubuntu/Components/1.3/TextCursor.qml'
--- src/Ubuntu/Components/1.3/TextCursor.qml	2015-12-09 19:59:50 +0000
+++ src/Ubuntu/Components/1.3/TextCursor.qml	2016-05-25 12:39:37 +0000
@@ -51,21 +51,13 @@
     }
     property int absY: {
         // Take parent flickable movement into account
-        var flickable = handler.main;
+        var flickable = handler.flickable;
         do {
             flickable = flickable.parent;
         } while (flickable && !flickable.contentY && flickable != fakeCursor.parent);
         return fakeCursor.parent.mapFromItem(handler.main, cursorItem.x, cursorItem.y).y
     }
 
-    // Returns "x" or "y" relative to the item handlers are a child of
-    function mappedCursorPosition(coordinate) {
-        var cpos = cursorItem["abs" + coordinate.toUpperCase()];
-        cpos += handler.frameDistance[coordinate];
-        cpos += handler.input[coordinate];
-        cpos -= handler.flickable["content" + coordinate.toUpperCase()];
-        return cpos;
-    }
     /*
         The function opens the text input popover setting the text cursor as caller.
       */
@@ -158,7 +150,6 @@
     property Item draggedItem: Item {
         objectName: cursorItem.positionProperty + "_draggeditem"
         width: caret.width + units.gu(2)
-        onWidthChanged: draggedItem.moveToCaret()
         height: cursorItem.height + caret.height + threshold
         property real threshold: units.gu(4)
         parent: fakeCursor.parent
@@ -177,12 +168,6 @@
             preventStealing: true
             cursorShape: Qt.IBeamCursor
             enabled: parent.width && parent.height && parent.visible && !handler.doubleTapInProgress
-            onPressedChanged: {
-                if (!pressed) {
-                    // when the dragging ends, reposition the dragger back to caret
-                    draggedItem.moveToCaret();
-                }
-            }
             Ubuntu.Mouse.forwardTo: [dragger]
             Ubuntu.Mouse.onClicked: openPopover()
             Ubuntu.Mouse.onPressAndHold: {
@@ -201,16 +186,9 @@
             }
         }
 
-        // aligns the draggedItem to the caret and resets the dragger
-        function moveToCaret() {
-            if (!caret) {
-                return;
-            }
-            // The style may render handlers either on top or bottom
-            var flip = caret.rotation == 180;
-            draggedItem.x = fakeCursor.x + (flip ? -caret.width : -draggedItem.width + caret.width);
-            draggedItem.y = fakeCursor.y + caret.y + caret.height - threshold;
-        }
+        property bool flip: caret.rotation == 180
+        x: fakeCursor.x + (flip ? -caret.width : -draggedItem.width + caret.width)
+        y: fakeCursor.y + caret.y + caret.height - threshold
         // positions caret to the dragged position
         function positionCaret() {
             if (dragger.dragActive) {
@@ -303,10 +281,8 @@
         height: cursorItem.height
         Component.onCompleted: caret.parent = fakeCursor
 
-        x: mappedCursorPosition("x")
-        y: mappedCursorPosition("y")
-        onXChanged: draggedItem.moveToCaret()
-        onYChanged: draggedItem.moveToCaret()
+        x: cursorItem.absX + handler.frameDistance.x + handler.input.x - handler.flickable.contentX
+        y: cursorItem.absY + handler.frameDistance.y + handler.input.y - handler.flickable.contentY
 
         // manual clipping: the caret should be visible only while the cursor's
         // top/bottom falls into the text area

=== modified file 'src/Ubuntu/Components/1.3/TextField.qml'
--- src/Ubuntu/Components/1.3/TextField.qml	2016-05-02 18:27:11 +0000
+++ src/Ubuntu/Components/1.3/TextField.qml	2016-05-25 12:39:37 +0000
@@ -999,6 +999,8 @@
             verticalCenter: parent.verticalCenter
         }
         topMargin: internal.spacing
+        leftMargin: internal.spacing
+        rightMargin: internal.spacing
         bottomMargin: internal.spacing
         // do not allow rebounding
         boundsBehavior: Flickable.StopAtBounds

=== added file 'src/Ubuntu/Components/1.3/TextField14.qml'
--- src/Ubuntu/Components/1.3/TextField14.qml	1970-01-01 00:00:00 +0000
+++ src/Ubuntu/Components/1.3/TextField14.qml	2016-05-25 12:39:37 +0000
@@ -0,0 +1,108 @@
+import QtQuick 2.4
+import Ubuntu.Components 1.3 as Ubuntu
+
+Ubuntu.ActionItem {
+    id: main
+    implicitWidth: units.gu(25)
+    implicitHeight: units.gu(4)
+
+    property alias primaryItem: primary.data
+    Item {
+        id: primary
+        anchors {
+            left: parent.left
+            leftMargin: flickable.spacing
+        }
+        height: parent.height
+        width: childrenRect.width
+        z: 1
+        onChildrenChanged: adjustChildren(primary)
+        function adjustChildren(newParent) {
+            for (var i = 0; i < children.length; i++) {
+                var child = children[i];
+                child.parent = newParent;
+                child.anchors.verticalCenter = verticalCenter;
+            }
+        }
+    }
+    property alias secondaryItem: secondary.data
+    Item {
+        id: secondary
+        anchors {
+            right: parent.right
+            rightMargin: flickable.spacing
+        }
+        height: parent.height
+        width: childrenRect.width
+        z: 1
+        onChildrenChanged: primary.adjustChildren(secondary)
+    }
+    property alias echoMode: input.echoMode
+    property alias text: input.text
+    property string placeholderText //FIXME: placeHolder is a placeHolder for now
+
+    styleName: "TextFieldStyle"
+    Keys.forwardTo: [input]
+    // FIXME: property alias activeFocusOnPress: input.activeFocusOnPress
+    activeFocusOnPress: true
+
+    Flickable {
+        id: flickable
+        anchors {
+            left: primary.right
+            right: secondary.left
+            margins: spacing
+            verticalCenter: parent.verticalCenter
+        }
+        property real spacing: main.__styleInstance.frameSpacing
+        topMargin: spacing
+        leftMargin: spacing
+        rightMargin: spacing
+        bottomMargin: spacing
+        boundsBehavior: Flickable.StopAtBounds
+        clip: true
+        contentWidth: input.contentWidth
+        contentHeight: input.contentHeight
+        height: input.contentHeight
+
+        TextInput {
+            id: input
+            width: parent.width
+            height: parent.height
+
+            color: main.__styleInstance.color
+            selectedTextColor: main.__styleInstance.selectedTextColor
+            selectionColor: main.__styleInstance.selectionColor
+            font.pixelSize: FontUtils.sizeToPixels("medium")
+            passwordCharacter: "\u2022"
+
+            // FIXME: WIP
+            Ubuntu.Mouse.forwardTo: [main]
+            // activeFocusOnPress: false
+            onFocusChanged: if (focus) main.forceActiveFocus()
+
+            Keys.onPressed: cursorVisible = true
+            selectByMouse: true
+            mouseSelectionMode: TextInput.SelectWords
+            cursorDelegate: Component {
+                Rectangle {
+                    color: theme.palette.normal.activity
+                    width: units.dp(2)
+                    height: input.cursorRectangle.height
+                    visible: main.activeFocus
+                }
+            }
+            /* cursorDelegate: TextCursor {
+                handler: handler
+            }
+
+            InputHandler {
+                id: handler
+                anchors.fill: parent
+                main: main
+                input: input
+                flickable: flickable
+            } */
+        }
+    }
+}

=== modified file 'src/Ubuntu/Components/ComponentModule.pro'
--- src/Ubuntu/Components/ComponentModule.pro	2016-02-16 11:39:32 +0000
+++ src/Ubuntu/Components/ComponentModule.pro	2016-05-25 12:39:37 +0000
@@ -112,8 +112,10 @@
              1.3/Tab.qml \
              1.3/Tabs.qml \
              1.3/TextArea.qml \
+             1.3/TextArea14.qml \
              1.3/TextCursor.qml \
              1.3/TextField.qml \
+             1.3/TextField14.qml \
              1.3/TextInputPopover.qml \
              1.3/Toolbar.qml \
              1.3/ToolbarButton.qml \

=== modified file 'src/Ubuntu/Components/Themes/Ambiance/1.3/TextAreaStyle.qml'
--- src/Ubuntu/Components/Themes/Ambiance/1.3/TextAreaStyle.qml	2016-05-10 12:08:32 +0000
+++ src/Ubuntu/Components/Themes/Ambiance/1.3/TextAreaStyle.qml	2016-05-25 12:39:37 +0000
@@ -54,8 +54,6 @@
     anchors.fill: parent
     objectName: "textarea_style"
 
-    z: -1
-
     /*!
       Text input background
       */

=== modified file 'src/Ubuntu/Components/qmldir'
--- src/Ubuntu/Components/qmldir	2016-02-16 11:39:32 +0000
+++ src/Ubuntu/Components/qmldir	2016-05-25 12:39:37 +0000
@@ -110,8 +110,10 @@
 Tabs 1.3 1.3/Tabs.qml
 ActivityIndicator 1.3 1.3/ActivityIndicator.qml
 ProgressBar 1.3 1.3/ProgressBar.qml
-TextField 1.3 1.3/TextField.qml
-TextArea 1.3 1.3/TextArea.qml
+# TextField 1.3 1.3/TextField.qml
+TextField 1.3 1.3/TextField14.qml
+# TextArea 1.3 1.3/TextArea.qml
+TextArea 1.3 1.3/TextArea14.qml
 Switch 1.3 1.3/Switch.qml
 CheckBox 1.3 1.3/CheckBox.qml
 Slider 1.3 1.3/Slider.qml

=== modified file 'tests/unit_x11/tst_components/tst_textinput_common13.qml'
--- tests/unit_x11/tst_components/tst_textinput_common13.qml	2016-05-11 10:59:50 +0000
+++ tests/unit_x11/tst_components/tst_textinput_common13.qml	2016-05-25 12:39:37 +0000
@@ -18,12 +18,17 @@
 import QtTest 1.0
 import Ubuntu.Test 1.3
 import Ubuntu.Components 1.3
+import Ubuntu.Components.Private 1.3
 import Ubuntu.Components.Popups 1.3
 
 Item {
     id: testMain
     width: units.gu(40)
+<<<<<<< TREE
     height: units.gu(70)
+=======
+    height: units.gu(90)
+>>>>>>> MERGE-SOURCE
 
     Component {
         id: popoverComponent
@@ -95,6 +100,8 @@
 
         TextField {
             id: textField
+            text: i18n.tr("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.")
+            height: units.gu(6)
         }
 
         FocusScope {
@@ -126,21 +133,32 @@
 
         TextField {
             id: customTextField
-            text: 'Lorem ipsum dolor sit amet'
+            text: i18n.tr("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.")
             primaryItem: AbstractButton {
                 id: primaryButton
-                height: parent.height
+                height: parent.height / 1.7
                 width: height
                 Image {
                     anchors.fill: parent
                     anchors.margins: units.gu(0.5)
                     source: 'image://theme/torch-on'
                 }
+                Frame {
+                    anchors.fill: parent
+                    anchors.margins: -units.gu(0.46)
+                    thickness: units.gu(0.21)
+                    radius: units.gu(1.7)
+                    color: theme.palette.normal.focus
+                    visible: parent.keyNavigationFocus
+                }
+                // FIXME: activeFocusOnTab: true
+                Component.onCompleted: activeFocusOnTab = true
             }
-            secondaryItem: AbstractButton {
+            secondaryItem: /*Abstract*/Button {
                 id: secondaryButton
-                height: parent.height
+                height: parent.height / 1.7
                 width: height
+                color: activeFocus ? UbuntuColors.orange : UbuntuColors.blue
                 Image {
                     anchors.fill: parent
                     anchors.margins: units.gu(0.5)
@@ -148,8 +166,68 @@
                 }
             }
         }
+
+        AbstractButton {
+            width: units.gu(10)
+            height: units.gu(5)
+            Component.onCompleted: activeFocusOnTab = true
+            Frame {
+                anchors.fill: parent
+                anchors.margins: units.gu(0.46)
+                thickness: units.gu(0.21)
+                radius: units.gu(1.7)
+                color: parent.keyNavigationFocus ? theme.palette.normal.focus : theme.palette.normal.foreground
+
+                AbstractButton {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.right: parent.right
+                    width: height
+                    height: parent.height / 1.2
+                    Component.onCompleted: activeFocusOnTab = true
+                    Frame {
+                        anchors.fill: parent
+                        anchors.margins: units.gu(0.46)
+                        thickness: units.gu(0.21)
+                        radius: units.gu(1.7)
+                        color: parent.keyNavigationFocus ? theme.palette.normal.focus : theme.palette.normal.foreground
+                    }
+                }
+            }
+        }
+
         TextArea {
             id: textArea
+            text: i18n.tr("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.")
+             + i18n.tr("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.")
+             + i18n.tr("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.")
+             + i18n.tr("Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.")
+        }
+        ScrollView {
+            width: units.gu(30)
+            height: units.gu(12)
+            Flickable {
+                id: flickable
+                anchors.fill: parent
+                contentWidth: textInput.paintedWidth
+                contentHeight: textInput.paintedHeight
+                topMargin: units.gu(2)
+                leftMargin: units.gu(2)
+                contentX: leftMargin
+                contentY: topMargin
+                TextEdit {
+                    id: textInput
+                    text: textArea.text
+                    width: flickable.width
+                    height: flickable.height
+                    wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
+                }
+                Rectangle {
+                    anchors.fill: parent
+                    opacity: 0.3
+                    color: UbuntuColors.blue // theme.palette.normal.field
+                }
+
+            }
         }
         TextField {
             id: password