diff options
| author |  Dirk Hohndel <dirk@hohndel.org> | 2021-01-15 12:27:58 -0800 |
|---|---|---|
| committer | Dirk Hohndel <dirk@hohndel.org> | 2021-01-19 12:35:29 -0800 |
| commit | 74bb2c49bff69dc622f3faa653623d4882b59af5 (patch) | |
| tree | a9e97d464d54afc73c7318a4813375c78a055dc7 /mobile-widgets/qml/SsrfTextField.qml | |
| parent | 9aa660e06ea83fa78d68266663b2a12d4c8f1d6d (diff) | |
| download | subsurface-74bb2c49bff69dc622f3faa653623d4882b59af5.tar.gz | |
mobile/UI: improve layout of styled ComboBox and TextField
This makes the TextFields (and the editable ComboBoxes with them) have a
tighter visual experience.
It also moves the indicater closer to the right edge in the ComboBox and
doesn't use preferredWidth for the slim combo box as that implies a
maximum width which could lead to unnecessary clipping.
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
Diffstat (limited to 'mobile-widgets/qml/SsrfTextField.qml')
| -rw-r--r-- | mobile-widgets/qml/SsrfTextField.qml | 21 |
1 files changed, 21 insertions, 0 deletions
diff --git a/mobile-widgets/qml/SsrfTextField.qml b/mobile-widgets/qml/SsrfTextField.qml index d91e13c2d..083235435 100644 --- a/mobile-widgets/qml/SsrfTextField.qml +++ b/mobile-widgets/qml/SsrfTextField.qml @@ -11,9 +11,30 @@ Controls.TextField { property var flickable property bool firstTime: true + /** + * set inComboBox if the TextField is used in an editable ComboBox + * this ensures that the baseline that is used to visually indicate that the user can + * edit the text as well as use the drop down is placed much closer to the actual text + */ + property bool inComboBox: false + id: stf + background: Item { + Rectangle { + width: parent.width - Kirigami.Units.smallSpacing + x: inComboBox ? Kirigami.Units.smallSpacing : -1 + height: 1 + color: stf.focus ? subsurfaceTheme.primaryColor : Qt.darker(subsurfaceTheme.backgroundColor, 1.2) + anchors.bottom: parent.bottom + anchors.bottomMargin: inComboBox ? Kirigami.Units.largeSpacing : 1 + visible: !stf.readOnly + } + } // while we are at it, let's put some common settings here into the shared element + font.pointSize: subsurfaceTheme.regularPointSize + topPadding: 0 + bottomPadding: 0 color: subsurfaceTheme.textColor onEditingFinished: { focus = false |