Improve padding and radius of TextInputField and DropDown

Makes radius consistent to 3px. Matters especially when components are used close to each other.
Also fixes digits being cut off in input fields in Mixer.
This commit is contained in:
Casper Jeukendrup 2021-12-10 18:08:27 +01:00
parent 28a45afe6d
commit 4388e939b7
No known key found for this signature in database
GPG key ID: 6C571BEF59E722DD
5 changed files with 21 additions and 15 deletions

View file

@ -223,7 +223,7 @@ Item {
id: bgItem id: bgItem
anchors.fill: parent anchors.fill: parent
color: mainItem.background.color color: mainItem.background.color
radius: 4 radius: 3
border.width: ui.theme.borderWidth border.width: ui.theme.borderWidth
border.color: ui.theme.strokeColor border.color: ui.theme.strokeColor
} }

View file

@ -44,6 +44,10 @@ FocusScope {
property bool hasText: valueInput.text.length > 0 property bool hasText: valueInput.text.length > 0
property alias readOnly: valueInput.readOnly property alias readOnly: valueInput.readOnly
property real textSidePadding: 12
property real accessoriesPadding: 4
property alias radius: background.radius
property alias navigation: navCtrl property alias navigation: navCtrl
property alias accessible: navCtrl.accessible property alias accessible: navCtrl.accessible
@ -104,7 +108,7 @@ FocusScope {
id: background id: background
anchors.fill: parent anchors.fill: parent
color: ui.theme.textFieldColor color: ui.theme.textFieldColor
radius: 2 radius: 3
NavigationFocusBorder { navigationCtrl: navCtrl } NavigationFocusBorder { navigationCtrl: navCtrl }
@ -114,8 +118,8 @@ FocusScope {
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 4 anchors.leftMargin: hintIcon.visible ? 0 : root.textSidePadding
anchors.rightMargin: 4 anchors.rightMargin: clearTextButtonItem.visible ? 0 : root.textSidePadding
spacing: 0 spacing: 0
@ -123,9 +127,10 @@ FocusScope {
id: hintIcon id: hintIcon
Layout.fillHeight: true Layout.fillHeight: true
Layout.preferredWidth: hintIcon.visible ? 30 : 0 Layout.preferredWidth: height
Layout.margins: root.accessoriesPadding
visible: Boolean(!hintIcon.isEmpty) visible: !isEmpty
} }
TextField { TextField {
@ -135,6 +140,7 @@ FocusScope {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: !measureUnitsLabel.visible Layout.fillWidth: !measureUnitsLabel.visible
padding: 0
//! NOTE Disabled default Qt Accessible //! NOTE Disabled default Qt Accessible
Accessible.role: Accessible.NoRole Accessible.role: Accessible.NoRole
@ -205,7 +211,7 @@ FocusScope {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: ui.theme.fontPrimaryColor color: ui.theme.fontPrimaryColor
visible: !root.isIndeterminate && Boolean(text) visible: !root.isIndeterminate && !isEmpty
} }
FlatButton { FlatButton {
@ -213,11 +219,7 @@ FocusScope {
Layout.fillHeight: true Layout.fillHeight: true
Layout.preferredWidth: height Layout.preferredWidth: height
Layout.margins: root.accessoriesPadding
readonly property int margin: 4
Layout.topMargin: margin
Layout.bottomMargin: margin
icon: IconCode.CLOSE_X_ROUNDED icon: IconCode.CLOSE_X_ROUNDED
visible: root.clearTextButtonVisible visible: root.clearTextButtonVisible

View file

@ -65,7 +65,7 @@ Item {
id: backgroundItem id: backgroundItem
anchors.fill: parent anchors.fill: parent
color: ui.theme.buttonColor color: ui.theme.buttonColor
radius: 4 radius: 3
opacity: 0.7 opacity: 0.7
NavigationFocusBorder { navigationCtrl: navCtrl } NavigationFocusBorder { navigationCtrl: navCtrl }

View file

@ -79,11 +79,13 @@ MixerPanelSection {
anchors.verticalCenter: balanceKnob.verticalCenter anchors.verticalCenter: balanceKnob.verticalCenter
textHorizontalAlignment: Qt.AlignHCenter
height: 24 height: 24
width: 36 width: 36
textHorizontalAlignment: Qt.AlignHCenter
textSidePadding: 0
radius: 2
navigation.panel: item.panel navigation.panel: item.panel
navigation.row: root.navigationRowStart + 1 navigation.row: root.navigationRowStart + 1
navigation.accessible.name: content.accessibleName + " " + currentText navigation.accessible.name: content.accessibleName + " " + currentText

View file

@ -48,6 +48,8 @@ MixerPanelSection {
width: 46 width: 46
textHorizontalAlignment: Qt.AlignHCenter textHorizontalAlignment: Qt.AlignHCenter
textSidePadding: 0
radius: 2
navigation.name: "VolumeInputField" navigation.name: "VolumeInputField"
navigation.panel: item.panel navigation.panel: item.panel