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 | |
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>
-rw-r--r-- | mobile-widgets/qml/SsrfTextField.qml | 21 | ||||
-rw-r--r-- | mobile-widgets/qml/TemplateComboBox.qml | 6 | ||||
-rw-r--r-- | mobile-widgets/qml/TemplateSlimComboBox.qml | 2 |
3 files changed, 27 insertions, 2 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 diff --git a/mobile-widgets/qml/TemplateComboBox.qml b/mobile-widgets/qml/TemplateComboBox.qml index 82b5fbf9f..10ffdb93e 100644 --- a/mobile-widgets/qml/TemplateComboBox.qml +++ b/mobile-widgets/qml/TemplateComboBox.qml @@ -6,10 +6,12 @@ import org.kde.kirigami 2.4 as Kirigami ComboBox { id: cb + editable: false Layout.fillWidth: true - Layout.preferredHeight: Kirigami.Units.gridUnit * 2.5 + Layout.preferredHeight: Kirigami.Units.gridUnit * 2.0 inputMethodHints: Qt.ImhNoPredictiveText font.pointSize: subsurfaceTheme.regularPointSize + rightPadding: Kirigami.Units.smallSpacing property var flickable // used to ensure the combobox is visible on screen delegate: ItemDelegate { width: cb.width @@ -49,6 +51,7 @@ ComboBox { } contentItem: SsrfTextField { + inComboBox: cb.editable readOnly: !cb.editable anchors.right: indicator.left anchors.left: cb.left @@ -59,6 +62,7 @@ ComboBox { font: cb.font color: subsurfaceTheme.textColor verticalAlignment: Text.AlignVCenter + onPressed: { if (readOnly) { if (cb.popup.opened) { diff --git a/mobile-widgets/qml/TemplateSlimComboBox.qml b/mobile-widgets/qml/TemplateSlimComboBox.qml index 36137770a..896871be1 100644 --- a/mobile-widgets/qml/TemplateSlimComboBox.qml +++ b/mobile-widgets/qml/TemplateSlimComboBox.qml @@ -8,7 +8,7 @@ TemplateComboBox { id: cb Layout.fillWidth: false Layout.preferredHeight: Kirigami.Units.gridUnit * 2 - Layout.preferredWidth: Kirigami.Units.gridUnit * 8 + Layout.minimumWidth: Kirigami.Units.gridUnit * 8 contentItem: Text { text: cb.displayText font.pointSize: subsurfaceTheme.regularPointSize |