feature(StatusSelectableText): Added a selectable text component (#431)

Features:
1. Select text and copy it
2. Custom highlight on selection
3. Highlight on links
4. Support for multiline text

ui/StatusQ/sandbox/Controls.qml

@@ -12,6 +12,21 @@ GridLayout {
     columnSpacing: 5
     rowSpacing: 5
 
+    StatusSelectableText {
+        color: Theme.palette.baseColor1
+        text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
+        font.pixelSize: 15
+        width: 300
+        multiline: true
+    }
+
+    StatusSelectableText {
+        color: Theme.palette.baseColor1
+        text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
+        font.pixelSize: 15
+        width: 200
+    }
+
     StatusIconTabButton {
         icon.name: "chat"
     }

ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml

@@ -206,13 +206,11 @@ Rectangle {
                                                           + divider.width + divider.anchors.leftMargin
                                                         : 0
 
-            StatusBaseText {
+            StatusSelectableText {
                 id: chatType
                 text: statusChatInfoButton.subTitle
                 color: Theme.palette.baseColor1
                 font.pixelSize: 12
-
-                elide: Text.ElideRight
                 width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
                                 implicitWidth)
             }

ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml

@@ -0,0 +1,101 @@
+import QtQuick 2.14
+
+import QtQuick.Controls 2.14 as QC
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+
+Item {
+    id: statusSelectableText
+
+    property bool multiline: false
+    property string text: ""
+    property string hoveredLinkColor: Theme.palette.directColor1
+
+    property alias selectedText: edit.selectedText
+    property alias selectedTextColor: edit.selectedTextColor
+    property alias selectionStart: edit.selectionStart
+    property alias selectionEnd: edit.selectionEnd
+    property alias cursorPosition: edit.cursorPosition
+    property alias hoveredLink: edit.hoveredLink
+    property alias color: edit.color
+    property alias font: edit.font
+    property alias focussed: edit.activeFocus
+    property alias verticalAlignmet: edit.verticalAlignment
+    property alias horizontalAlignment: edit.horizontalAlignment
+
+    implicitWidth: 448
+    implicitHeight: edit.implicitHeight
+
+    clip:true
+
+    MouseArea {
+        id: sensor
+        enabled: !edit.activeFocus
+        hoverEnabled: true
+        anchors.fill: parent
+        cursorShape: Qt.IBeamCursor
+        onClicked: {
+            edit.forceActiveFocus()
+        }
+        onExited: {
+            flick.contentX = 0
+            flick.contentY = 0
+        }
+
+        Flickable {
+            id: flick
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left:  parent.left
+            anchors.right: parent.right
+            contentWidth: edit.paintedWidth
+            contentHeight: edit.paintedHeight
+            boundsBehavior: Flickable.StopAtBounds
+            QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
+            function ensureVisible(r) {
+                if (width-contentX >= r.x) {
+                    contentX = 0;
+                }
+                else if (contentX+width <= r.x+r.width) {
+                    contentX = r.x+r.width-width;
+                }
+                if (contentY >= r.y)
+                    contentY = r.y;
+                else if (contentY+height <= r.y+r.height)
+                    contentY = r.y+r.height-height;
+            }
+            TextEdit {
+                id: edit
+                width: flick.width
+                height: flick.height
+                verticalAlignment: Text.AlignVCenter
+                readOnly: true
+                selectByMouse: true
+                selectionColor: Theme.palette.primaryColor2
+                selectedTextColor: color
+                focus: true
+                font.pixelSize: 15
+                font.family: Theme.palette.baseFont.name
+                color: Theme.palette.directColor1
+                textFormat: Text.RichText
+                onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
+                wrapMode: statusSelectableText.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
+
+                Keys.forwardTo: [statusSelectableText]
+
+                onFocusChanged: {
+                    if(!focus) {
+                        flick.contentX = 0
+                        flick.contentY = 0
+                    }
+                }
+
+                text: "<style>a:link { color: " + (!!hoveredLink ? statusSelectableText.hoveredLinkColor : Theme.palette.baseColor1) + "; }</style>" + statusSelectableText.text
+            }
+
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -19,3 +19,4 @@ StatusInput 0.1 StatusInput.qml
 StatusPickerButton 0.1 StatusPickerButton.qml
 StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
 StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
+StatusSelectableText 0.1 StatusSelectableText.qml

ui/StatusQ/statusq.qrc

@@ -269,5 +269,6 @@
         <file>src/StatusQ/Components/StatusExpandableItem.qml</file>
         <file>src/assets/img/icons/snt.svg</file>
         <file>src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml</file>
+        <file>src/StatusQ/Controls/StatusSelectableText.qml</file>
     </qresource>
 </RCC>