From 315f91d737f1c5229ff007c9b50f1a2cfd8b8018 Mon Sep 17 00:00:00 2001 From: Khushboo-dev-cpp <60327365+Khushboo-dev-cpp@users.noreply.github.com> Date: Wed, 29 Sep 2021 21:22:23 +0200 Subject: [PATCH] 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 | 15 +++ .../StatusQ/Controls/StatusChatInfoButton.qml | 4 +- .../StatusQ/Controls/StatusSelectableText.qml | 101 ++++++++++++++++++ ui/StatusQ/src/StatusQ/Controls/qmldir | 1 + ui/StatusQ/statusq.qrc | 1 + 5 files changed, 119 insertions(+), 3 deletions(-) create mode 100644 ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml diff --git a/ui/StatusQ/sandbox/Controls.qml b/ui/StatusQ/sandbox/Controls.qml index dad350657b..d6beef58ec 100644 --- a/ui/StatusQ/sandbox/Controls.qml +++ b/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: "

This is a selectable link in rich text format to test www.google.com

" + font.pixelSize: 15 + width: 200 + } + StatusIconTabButton { icon.name: "chat" } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml index 10aadcce2e..a33efc2a4b 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml +++ b/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) } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml new file mode 100644 index 0000000000..ca594098d4 --- /dev/null +++ b/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: "" + statusSelectableText.text + } + + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index ee427574b3..8c3aa572f4 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/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 diff --git a/ui/StatusQ/statusq.qrc b/ui/StatusQ/statusq.qrc index 01a6b98770..f5a44a50a6 100644 --- a/ui/StatusQ/statusq.qrc +++ b/ui/StatusQ/statusq.qrc @@ -269,5 +269,6 @@ src/StatusQ/Components/StatusExpandableItem.qml src/assets/img/icons/snt.svg src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml + src/StatusQ/Controls/StatusSelectableText.qml