diff --git a/ui/StatusQ/sandbox/StatusInputPage.qml b/ui/StatusQ/sandbox/StatusInputPage.qml index 8460410ea2..86549f6f71 100644 --- a/ui/StatusQ/sandbox/StatusInputPage.qml +++ b/ui/StatusQ/sandbox/StatusInputPage.qml @@ -10,40 +10,45 @@ import Sandbox 0.1 Column { spacing: 8 - StatusBaseInput { - placeholderText: "Placeholder" + StatusInput { + input.placeholderText: "Placeholder" } - StatusBaseInput { - placeholderText: "Disabled" - enabled: false + StatusInput { + input.placeholderText: "Disabled" + input.enabled: false } - StatusBaseInput { - placeholderText: "Clearable" - clearable: true + StatusInput { + input.placeholderText: "Clearable" + input.clearable: true } - StatusBaseInput { - placeholderText: "Invalid" - valid: false + StatusInput { + input.placeholderText: "Invalid" + input.valid: false } - StatusBaseInput { - multiline: true - placeholderText: "Multiline" + StatusInput { + label: "Label" + input.placeholderText: "Placeholder" } - StatusBaseInput { - multiline: true - placeholderText: "Multiline with static height" - implicitHeight: 100 + StatusInput { + input.multiline: true + input.placeholderText: "Multiline" } - StatusBaseInput { - multiline: true - placeholderText: "Multiline with max/min" - minimumHeight: 80 - maximumHeight: 200 + StatusInput { + input.multiline: true + input.placeholderText: "Multiline with static height" + input.implicitHeight: 100 + } + + StatusInput { + input.multiline: true + input.placeholderText: "Multiline with max/min" + input.minimumHeight: 80 + input.maximumHeight: 200 } } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml new file mode 100644 index 0000000000..288860d32f --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml @@ -0,0 +1,42 @@ +import QtQuick 2.14 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 + +Item { + id: root + + implicitWidth: 480 + height: label.anchors.topMargin + + label.height + + statusBaseInput.anchors.topMargin + + statusBaseInput.height + 8 + + property alias input: statusBaseInput + property string label: "" + + StatusBaseText { + id: label + height: visible ? implicitHeight : 0 + anchors.top: parent.top + anchors.left: parent.left + anchors.topMargin: visible ? 8 : 0 + anchors.leftMargin: 16 + visible: !!root.label + + text: root.label + font.pixelSize: 15 + color: Theme.palette.directColor1 + } + + StatusBaseInput { + id: statusBaseInput + anchors.top: label.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.topMargin: 8 + anchors.leftMargin: 16 + anchors.rightMargin: 16 + } +} diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index 0445d125be..48de26c135 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/ui/StatusQ/src/StatusQ/Controls/qmldir @@ -15,4 +15,5 @@ StatusRadioButton 0.1 StatusRadioButton.qml StatusCheckBox 0.1 StatusCheckBox.qml StatusSlider 0.1 StatusSlider.qml StatusBaseInput 0.1 StatusBaseInput.qml +StatusInput 0.1 StatusInput.qml StatusPickerButton 0.1 StatusPickerButton.qml