Skip to content

Commit

Permalink
Set the control width of Dropdown by setting the fieldWidth property (#…
Browse files Browse the repository at this point in the history 
…5586)

* Add fieldWidth property to Dropdown

* let dropdown participate in aligning labelwidths

This is now easily addable to any qml control by adding the property controlXOffset and applying it to the relevant leftPadding

* use new aligning in prefsUI

---------

Co-authored-by: Joris Goosen <Joris@JorisGoosen.nl>
  • Loading branch information
@boutinb @JorisGoosen
boutinb and JorisGoosen committed Sep 30, 2024
1 parent 0cd6b07 commit 186baf9
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 138 deletions.
121 changes: 44 additions & 77 deletions Desktop/components/JASP/Widgets/FileMenu/PrefsUI.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,19 +50,44 @@ ScrollView
{
id: fontGroup
title: qsTr("Fonts")

property real maxText: Math.max(Math.max(interfaceTxt.implicitWidth, codeTxt.implicitWidth), Math.max(resultTxt.implicitWidth, languageTxt.implicitWidth));

Row
Item
{
spacing: 3 * preferencesModel.uiScale
width: parent.width
visible: false;
// If the defaultInterfaceFont etc does not exist on the machine, then the default font of the machine is used.
// These (invisible) Text items are just to ask what will be the real font used.

Text
{

id: defaultInterfaceFont
font.family: preferencesModel.defaultInterfaceFont
text: fontInfo.family
}

Text { id: interfaceTxt; width: fontGroup.maxText; text: qsTr("Interface:") }
Text
{
id: defaultRCodeFont
text: fontInfo.family
font.family: preferencesModel.defaultCodeFont
}

Text
{
id: defaultResultFont
text: fontInfo.family
font.family: preferencesModel.defaultResultFont
}
}

DropDown
GroupBox
{
width: parent.width

DropDown
{
id: interfaceFonts
label: qsTr("Interface:")
values: preferencesModel.allInterfaceFonts
addEmptyValue: true
showEmptyValueAsNormal: true
Expand All @@ -72,33 +97,12 @@ ScrollView
onValueChanged: preferencesModel.interfaceFont = (currentIndex <= 0 ? "" : value)

KeyNavigation.tab: codeFonts

control.width: parent.width - (x + control.x)


Text
{
// If the defaultInterfaceFont does not exist on the machine, then the default font of the machine is used.
// This (invisible) Text item is just to ask what will be the real font used.
id: defaultInterfaceFont
font.family: preferencesModel.defaultInterfaceFont
text: fontInfo.family
visible: false
}
}
}


Row
{
spacing: 3 * preferencesModel.uiScale
width: parent.width

Text { id: codeTxt; width: fontGroup.maxText; text: qsTr("R, JAGS, or lavaan code:") }


DropDown
{
id: codeFonts
label: qsTr("R, JAGS, or lavaan code:")
values: preferencesModel.allCodeFonts
addEmptyValue: true
showEmptyValueAsNormal: true
Expand All @@ -108,32 +112,12 @@ ScrollView
onValueChanged: preferencesModel.codeFont = (currentIndex <= 0 ? "" : value)

KeyNavigation.tab: resultFonts

control.width: parent.width - (x + control.x)

Text
{
id: defaultRCodeFont
text: fontInfo.family
font.family: preferencesModel.defaultCodeFont
visible: false
}

}


}

Row
{
spacing: 3 * preferencesModel.uiScale
width: parent.width

Text { id: resultTxt; width: fontGroup.maxText; text: qsTr("Result & help:") }

DropDown
{
id: resultFonts
label: qsTr("Result & help:")
values: preferencesModel.allResultFonts
addEmptyValue: true
showEmptyValueAsNormal: true
Expand All @@ -143,16 +127,6 @@ ScrollView
onValueChanged: preferencesModel.resultFont = (currentIndex <= 0 ? "" : value)

KeyNavigation.tab: qtTextRendering

control.width: parent.width - (x + control.x)

Text
{
id: defaultResultFont
text: fontInfo.family
font.family: preferencesModel.defaultResultFont
visible: false
}
}
}

Expand Down Expand Up @@ -207,24 +181,17 @@ ScrollView
id: languageGroup
title: qsTr("Preferred language")

Row

DropDown
{
spacing: 3 * preferencesModel.uiScale
width: parent.width

Text { id: languageTxt; width: fontGroup.maxText; text: qsTr("Choose language ") }
id: languages
label: qsTr("Choose language ")
source: languageModel
startValue: languageModel.currentLanguage
onValueChanged: languageModel.currentLanguage = value

DropDown
{
id: languages
source: languageModel
startValue: languageModel.currentLanguage
onValueChanged: languageModel.currentLanguage = value

KeyNavigation.tab: altnavcheckbox

control.width: parent.width - (x + control.x)
}
KeyNavigation.tab: altnavcheckbox

}


Expand Down
72 changes: 42 additions & 30 deletions QMLComponents/components/JASP/Controls/ComboBox.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ ComboBoxBase
property alias currentLabel: comboBox.currentText
property alias value: comboBox.currentValue
property alias indexDefaultValue: comboBox.currentIndex
property alias fieldWidth: control.modelWidth
property alias fieldWidth: control.width
property bool showVariableTypeIcon: containsVariables
property var enabledOptions: []
property bool setLabelAbove: false
Expand All @@ -28,8 +28,11 @@ ComboBoxBase
property bool showBorder: true
property bool showEmptyValueAsNormal: false
property bool addLineAfterEmptyValue: false
property double controlXOffset: 0

onControlMinWidthChanged: _resetWidth(textMetrics.width)



function resetWidth(values)
{
Expand All @@ -55,13 +58,16 @@ ComboBoxBase
_resetWidth(maxWidth)
}

function _resetWidth(maxWidth)
function _resetWidth(maxTextWidth)
{
var newWidth = maxWidth + ((comboBox.showVariableTypeIcon ? 20 : 4) * preferencesModel.uiScale);
control.modelWidth = newWidth;
if (control.width < controlMinWidth)
control.modelWidth += (controlMinWidth - control.width);
comboBox.width = comboBox.implicitWidth; // the width is not automatically updated by the implicitWidth...
control.maxTextWidth = maxTextWidth
// The real field width is composed by the type icon (if displayed) + 2-padding + max width + 5-padding + dropdownIcon width + 2-padding
var newFieldWidth = (comboBox.showVariableTypeIcon ? contentIcon.x + contentIcon.width : 0) + maxTextWidth + dropdownIcon.width + 9 * preferencesModel.uiScale
if (newFieldWidth < controlMinWidth)
newFieldWidth = controlMinWidth

control.realFieldWidth = newFieldWidth
if (!fixedWidth) control.width = newFieldWidth;
}

Component.onCompleted: control.activated.connect(activated);
Expand All @@ -85,22 +91,24 @@ ComboBoxBase

QTC.ComboBox
{
id: control
model: comboBox.model
anchors.left: !rectangleLabel.visible || comboBox.setLabelAbove ? comboBox.left : rectangleLabel.right
anchors.leftMargin: !rectangleLabel.visible || comboBox.setLabelAbove ? 0 : jaspTheme.labelSpacing
anchors.top: rectangleLabel.visible && comboBox.setLabelAbove ? rectangleLabel.bottom: comboBox.top

focus: true
padding: 2 * preferencesModel.uiScale //jaspTheme.jaspControlPadding

width: modelWidth + extraWidth
height: jaspTheme.comboBoxHeight
font: jaspTheme.font
property int modelWidth: 30 * preferencesModel.uiScale
property int extraWidth: 5 * padding + dropdownIcon.width
property bool isEmptyValue: comboBox.addEmptyValue && comboBox.currentIndex === 0
id: control
model: comboBox.model
anchors
{
top: rectangleLabel.visible && comboBox.setLabelAbove ? rectangleLabel.bottom: comboBox.top
left: !rectangleLabel.visible || comboBox.setLabelAbove ? comboBox.left : rectangleLabel.right
leftMargin: controlXOffset + (!rectangleLabel.visible || comboBox.setLabelAbove ? 0 : jaspTheme.labelSpacing)
}

focus: true
padding: 2 * preferencesModel.uiScale
width: 0
height: jaspTheme.comboBoxHeight
font: jaspTheme.font
property bool isEmptyValue: comboBox.addEmptyValue && comboBox.currentIndex === 0
property bool showEmptyValueStyle: !comboBox.showEmptyValueAsNormal && isEmptyValue
property double realFieldWidth: width
property double maxTextWidth: 0

TextMetrics
{
Expand All @@ -123,8 +131,8 @@ ComboBoxBase
{
id: contentIcon
height: 15 * preferencesModel.uiScale
width: 15 * preferencesModel.uiScale
x: 3 * preferencesModel.uiScale
width: 15 * preferencesModel.uiScale // Even if not visible, the width should stay the same: if showVariableTypeIcon is true, a value may have no icon, but an empty icon place should still be displayed
x: 2 * preferencesModel.uiScale
anchors.verticalCenter: parent.verticalCenter
source: !visible ? "" : ((comboBox.currentColumnTypeIcon && comboBox.isBound) ? comboBox.currentColumnTypeIcon : (comboBox.values && comboBox.currentIndex >= 0 && comboBox.currentIndex < comboBox.values.length ? comboBox.values[comboBox.currentIndex].columnTypeIcon : ""))
visible: comboBox.showVariableTypeIcon && !control.isEmptyValue && (comboBox.currentColumnType || !comboBox.isBound)
Expand All @@ -133,19 +141,24 @@ ComboBoxBase
Text
{
anchors.left: contentIcon.visible ? contentIcon.right : parent.left
anchors.leftMargin: 4 * preferencesModel.uiScale
anchors.leftMargin: 2 * preferencesModel.uiScale
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: control.showEmptyValueStyle ? parent.horizontalCenter : undefined
text: comboBox.currentText
font: control.font
color: (!enabled || control.showEmptyValueStyle) ? jaspTheme.grayDarker : jaspTheme.black
width: (fixedWidth ? widthWhenContralHasFixedWidth : control.maxTextWidth) + 5 * preferencesModel.uiScale
elide: Text.ElideRight

property double widthWhenContralHasFixedWidth: control.width - (x + dropdownIcon.width + 4 * preferencesModel.uiScale) // 4 = leftMargin + 2 padding right of dropdownIcon)

}
}

indicator: Image
{
id: dropdownIcon
x: control.width - width - 3 //control.spacing
x: control.width - width - 2 * preferencesModel.uiScale
y: control.topPadding + (control.availableHeight - height) / 2
width: 12 * preferencesModel.uiScale
height: 12 * preferencesModel.uiScale
Expand Down Expand Up @@ -180,7 +193,7 @@ ComboBoxBase
{
id: popupRoot
y: control.height
width: comboBoxBackground.width + scrollBar.width
width: Math.max(control.realFieldWidth, fieldWidth) + scrollBar.width

property real maxHeight: typeof mainWindowRoot !== 'undefined' ? mainWindowRoot.height // Case Dropdowns used in Desktop
: (typeof rcmdRoot !== 'undefined' ? rcmdRoot.height // Case Dropdown used in R Command
Expand Down Expand Up @@ -211,7 +224,7 @@ ComboBoxBase
contentItem: ListView
{
id: popupView
width: comboBoxBackground.width
width: popupRoot.width - scrollBar.width
height: popupRoot.height
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
Expand Down Expand Up @@ -239,14 +252,13 @@ ComboBoxBase
delegate: QTC.ItemDelegate
{
height: jaspTheme.comboBoxHeight
implicitWidth: comboBoxBackground.width
width: popupView.width
enabled: comboBox.enabledOptions.length == 0 || comboBox.enabledOptions.length <= index || comboBox.enabledOptions[index]

contentItem: Rectangle
{
id: itemRectangle
anchors.fill: parent
anchors.rightMargin: scrollBar.visible ? scrollBar.width + 2 : 0
color: comboBox.currentIndex === index ? jaspTheme.itemSelectedColor : (control.highlightedIndex === index ? jaspTheme.itemHoverColor : jaspTheme.controlBackgroundColor)

property bool isEmptyValue: comboBox.addEmptyValue && index === 0
Expand Down
Loading

0 comments on commit 186baf9

Please sign in to comment.