mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2025-02-19 22:16:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

mobile/UI: improve layout of styled ComboBox and TextField

Browse source 
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>
This commit is contained in:
Dirk Hohndel 2021-01-15 12:27:58 -08:00
parent 9aa660e06e
commit 74bb2c49bf
3 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
mobile-widgets/qml/SsrfTextField.qml
View file

@ -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

6
mobile-widgets/qml/TemplateComboBox.qml
View file

@ -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) {

2
mobile-widgets/qml/TemplateSlimComboBox.qml
View file

@ -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