feat(Controls): introduce StatusBaseInput

Usage: The same interface like TextField

Closes: #106
This commit is contained in:
B.Melnik 2021-06-28 16:36:51 +03:00 committed by Pascal Precht
parent 0072154f9f
commit 1321760442
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
4 changed files with 178 additions and 0 deletions

View File

@ -5,6 +5,8 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import Sandbox 0.1
GridLayout { GridLayout {
columns: 6 columns: 6
columnSpacing: 5 columnSpacing: 5
@ -141,4 +143,32 @@ GridLayout {
to: 100 to: 100
value: 40 value: 40
} }
StatusBaseInput {
placeholderText: "One line"
}
StatusBaseInput {
multiline: true
placeholderText: "Multiline"
}
StatusBaseInput {
multiline: true
placeholderText: "Multiline with static height"
implicitHeight: 100
}
Item {
implicitHeight: 300
implicitWidth: 300
StatusBaseInput {
anchors.centerIn: parent
multiline: true
placeholderText: "Multiline with max/min"
minimumHeight: 80
maximumHeight: 200
}
}
} }

View File

@ -0,0 +1,146 @@
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: statusBaseInput
property bool multiline: false
property bool clearable: false
property alias inputMethodHints: edit.inputMethodHints
property alias selectedText: edit.selectedText
property alias selectedTextColor: edit.selectedTextColor
property alias selectionStart: edit.selectionStart
property alias selectionEnd: edit.selectionEnd
property alias color: edit.color
property alias font: edit.font
property alias verticalAlignmet: edit.verticalAlignment
property alias horizontalAlignment: edit.horizontalAlignment
property alias placeholderText: placeholder.text
property alias placeholderTextColor: placeholder.color
property alias placeholderFont: placeholder.font
property real leftPadding: 16
property real rightPadding: 16
property real topPadding: 11
property real bottomPadding: 11
property real minimumHeight: 0
property real maximumHeight: 0
implicitWidth: 200
implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 40) : 40
Rectangle {
width: parent.width
height: maximumHeight != 0 ? Math.min(
minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
: implicitHeight,
maximumHeight)
: parent.height
color: Theme.palette.baseColor2
radius: 8
clip: true
Flickable {
id: flick
anchors.fill: parent
anchors.leftMargin: statusBaseInput.leftPadding
anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButtton.width : 0
anchors.topMargin: statusBaseInput.topPadding
anchors.bottomMargin: statusBaseInput.bottomPadding
contentWidth: edit.paintedWidth
contentHeight: edit.paintedHeight
clip: true
QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline }
function ensureVisible(r) {
if (contentX >= r.x)
contentX = r.x;
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
selectByMouse: true
anchors.verticalCenter: parent.verticalCenter
focus: true
font.pixelSize: 15
font.family: Theme.palette.baseFont.name
color: Theme.palette.directColor1
onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
wrapMode: TextEdit.NoWrap
Keys.onReturnPressed: {
if (multiline) {
event.accepted = false
} else {
event.accepted = true
}
}
Keys.onEnterPressed: {
if (multiline) {
event.accepted = false
} else {
event.accepted = true
}
}
StatusBaseText {
id: placeholder
visible: edit.text.length === 0
anchors.left: parent.left
anchors.right: parent.right
font.pixelSize: 15
elide: StatusBaseText.ElideRight
font.family: Theme.palette.baseFont.name
color: Theme.palette.baseColor1
}
}
} // Flickable
} // Rectangle
StatusFlatRoundButton {
id: clearButtton
visible: edit.text.length != 0 && statusBaseInput.clearable && !statusBaseInput.multiline
anchors.right: parent.right
anchors.rightMargin: 11
anchors.verticalCenter: parent.verticalCenter
type: StatusFlatRoundButton.Type.Secondary
width: 14
height: 14
icon.name: "clear"
icon.width: 14
icon.height: 14
onClicked: {
edit.clear()
}
}
}

View File

@ -14,3 +14,4 @@ StatusSwitch 0.1 StatusSwitch.qml
StatusRadioButton 0.1 StatusRadioButton.qml StatusRadioButton 0.1 StatusRadioButton.qml
StatusCheckBox 0.1 StatusCheckBox.qml StatusCheckBox 0.1 StatusCheckBox.qml
StatusSlider 0.1 StatusSlider.qml StatusSlider 0.1 StatusSlider.qml
StatusBaseInput 0.1 StatusBaseInput.qml

View File

@ -241,6 +241,7 @@
<file>src/assets/img/icons/activity.svg</file> <file>src/assets/img/icons/activity.svg</file>
<file>src/StatusQ/Components/StatusChatListCategoryItem.qml</file> <file>src/StatusQ/Components/StatusChatListCategoryItem.qml</file>
<file>src/StatusQ/Components/StatusChatListCategory.qml</file> <file>src/StatusQ/Components/StatusChatListCategory.qml</file>
<file>src/StatusQ/Controls/StatusBaseInput.qml</file>
<file>src/StatusQ/Controls/StatusChatListCategoryItemButton.qml</file> <file>src/StatusQ/Controls/StatusChatListCategoryItemButton.qml</file>
<file>src/StatusQ/Components/StatusChatList.qml</file> <file>src/StatusQ/Components/StatusChatList.qml</file>
<file>src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml</file> <file>src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml</file>