mirror of https://github.com/status-im/StatusQ.git
feat(StatusTextArea): Implement StatusTextArea
Implements a standard QQC2 TextArea control with Status styling Closes #236
This commit is contained in:
Lukáš Tinkl
Lukáš Tinkl
parent
e184348190
commit
e6be4d9bad
|
|
@ -197,6 +197,11 @@ StatusWindow {
|
|||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusTextArea"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusSelect"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
Column {
|
||||
id: root
|
||||
|
||||
spacing: 8
|
||||
|
||||
Component.onCompleted: {
|
||||
focusedTextArea.forceActiveFocus()
|
||||
}
|
||||
|
||||
StatusTextArea {
|
||||
id: focusedTextArea
|
||||
width: parent.width
|
||||
placeholderText: "Initially focused text area"
|
||||
KeyNavigation.tab: unfocusedTextArea
|
||||
}
|
||||
|
||||
StatusTextArea {
|
||||
id: unfocusedTextArea
|
||||
width: parent.width
|
||||
placeholderText: "Unfocused text area (hover me to see the color change)"
|
||||
KeyNavigation.tab: invalidTextArea
|
||||
}
|
||||
|
||||
StatusTextArea {
|
||||
id: invalidTextArea
|
||||
width: parent.width
|
||||
valid: false
|
||||
placeholderText: "Invalid text area, should display red border"
|
||||
KeyNavigation.tab: longTextArea
|
||||
}
|
||||
|
||||
StatusScrollView {
|
||||
padding: 0 // use our own (StatusTextArea) padding
|
||||
width: parent.width
|
||||
height: 120
|
||||
TextArea.flickable: longTextArea
|
||||
StatusTextArea {
|
||||
id: longTextArea
|
||||
text: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet lectus quis justo. Sed vel lectus. \
|
||||
Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Morbi scelerisque luctus velit. Nunc auctor. Nullam at \
|
||||
arcu a est sollicitudin euismod. Cras elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, \
|
||||
per inceptos hymenaeos. Fusce aliquam vestibulum ipsum. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. \
|
||||
Nullam sit amet magna in magna gravida vehicula. Cras pede libero, dapibus nec, pretium sit amet, tempor quis. Nullam faucibus \
|
||||
mi quis velit. Nam sed tellus id magna elementum tincidunt. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, \
|
||||
eget facilisis enim ipsum id lacus. Maecenas aliquet accumsan leo. Aliquam erat volutpat."
|
||||
KeyNavigation.tab: focusedTextArea
|
||||
}
|
||||
}
|
||||
|
||||
StatusTextArea {
|
||||
enabled: false
|
||||
placeholderText: "Disabled text area"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
/*!
|
||||
\qmltype StatusTextArea
|
||||
\inherits Item
|
||||
\inqmlmodule StatusQ.Controls
|
||||
\since StatusQ.Controls 0.1
|
||||
\brief Displays a multi line text input component.
|
||||
Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-controls2-textarea.html}{QQC.TextArea}.
|
||||
|
||||
The \c StatusTextArea displays a styled TextArea for users to type multiple lines of text.
|
||||
For example:
|
||||
|
||||
\qml
|
||||
StatusTextArea {
|
||||
width: parent.width
|
||||
placeholderText: qsTr("Search")
|
||||
}
|
||||
\endqml
|
||||
|
||||
Note: if you want to alter the TAB key behavior, just override it like this:
|
||||
\qml
|
||||
StatusTextArea {
|
||||
width: parent.width
|
||||
KeyNavigation.tab: otherItemThatAcceptsFocus
|
||||
}
|
||||
\endqml
|
||||
|
||||
Note 2: if scrolling is required, just wrap the StatusTextArea inside a StatusScrollView, e.g.:
|
||||
\qml
|
||||
StatusScrollView {
|
||||
padding: 0 // use our own (StatusTextArea) padding
|
||||
width: parent.width
|
||||
height: 120
|
||||
TextArea.flickable: longTextArea
|
||||
StatusTextArea {
|
||||
id: longTextArea
|
||||
text: "Very\nlong\ntext\nwith\nmany\nlinebreaks"
|
||||
}
|
||||
}
|
||||
\endqml
|
||||
|
||||
For a list of components available see StatusQ.
|
||||
*/
|
||||
|
||||
TextArea {
|
||||
id: root
|
||||
|
||||
/*!
|
||||
\qmlproperty bool StatusTextArea::valid
|
||||
This property sets the valid state. Default value is true.
|
||||
*/
|
||||
property bool valid: true
|
||||
|
||||
implicitWidth: 448 // by design
|
||||
implicitHeight: 108
|
||||
|
||||
leftPadding: 16
|
||||
rightPadding: 16
|
||||
topPadding: 10
|
||||
bottomPadding: 10
|
||||
|
||||
color: Theme.palette.directColor1
|
||||
selectedTextColor: color
|
||||
selectionColor: Theme.palette.primaryColor2
|
||||
placeholderTextColor: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor9
|
||||
|
||||
font {
|
||||
family: Theme.palette.baseFont.name
|
||||
pixelSize: 15
|
||||
}
|
||||
|
||||
selectByMouse: true
|
||||
wrapMode: TextEdit.WordWrap
|
||||
|
||||
activeFocusOnTab: enabled
|
||||
KeyNavigation.priority: KeyNavigation.BeforeItem
|
||||
|
||||
background: Rectangle {
|
||||
radius: 8
|
||||
color: root.enabled ? Theme.palette.baseColor2 : Theme.palette.baseColor4
|
||||
border.width: 1
|
||||
border.color: {
|
||||
if (!root.valid)
|
||||
return Theme.palette.dangerColor1
|
||||
if (root.activeFocus)
|
||||
return Theme.palette.primaryColor1
|
||||
if (root.hovered)
|
||||
return Theme.palette.primaryColor2
|
||||
return "transparent"
|
||||
}
|
||||
}
|
||||
|
||||
cursorDelegate: Rectangle {
|
||||
color: Theme.palette.primaryColor1
|
||||
implicitWidth: 2
|
||||
implicitHeight: 22
|
||||
radius: 1
|
||||
visible: root.cursorVisible
|
||||
|
||||
SequentialAnimation on visible {
|
||||
loops: Animation.Infinite
|
||||
running: root.cursorVisible
|
||||
PropertyAnimation { to: false; duration: 600 }
|
||||
PropertyAnimation { to: true; duration: 600 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -50,3 +50,4 @@ StatusIconTextButton 0.1 StatusIconTextButton.qml
|
|||
StatusScrollBar 0.1 StatusScrollBar.qml
|
||||
StatusComboBox 0.1 StatusComboBox.qml
|
||||
StatusItemDelegate 0.1 StatusItemDelegate.qml
|
||||
StatusTextArea 0.1 StatusTextArea.qml
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import QtQuick.Controls 2.13
|
|||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
FocusScope {
|
||||
id: statusAppTwoPanelLayout
|
||||
|
||||
implicitWidth: 822
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@
|
|||
<file>StatusQ/Controls/StatusToolTip.qml</file>
|
||||
<file>StatusQ/Controls/StatusWalletColorButton.qml</file>
|
||||
<file>StatusQ/Controls/StatusWalletColorSelect.qml</file>
|
||||
<file>StatusQ/Controls/StatusTextArea.qml</file>
|
||||
<file>StatusQ/Core/Backpressure/Backpressure.qml</file>
|
||||
<file>StatusQ/Core/Backpressure/LICENSE</file>
|
||||
<file>StatusQ/Core/Backpressure/qmldir</file>
|
||||
|
|
|
|||
Loading…
Reference in New Issue