Set the control width of Dropdown by setting the fieldWidth property

jasp-stats · Jun 25, 2024 · 1ce5d82 · 1ce5d82
1 parent 2af581f
commit 1ce5d82
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 20 deletions.
diff --git a/QMLComponents/components/JASP/Controls/ComboBox.qml b/QMLComponents/components/JASP/Controls/ComboBox.qml
@@ -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
@@ -31,8 +31,15 @@ ComboBoxBase
 
 	onControlMinWidthChanged: _resetWidth(textMetrics.width)
 
+	property bool	_firstReset:	true // The first time the resetWidth is called, we can set automatically the fixedWidth, by checking whether the fixedWidth is set by the user
+
 	function resetWidth(values)
 	{
+		if (_firstReset && (fieldWidth > 0))
+			fixedWidth = true
+
+		_firstReset = false
+
 		var maxWidth = 0
 		var maxValue = ""
 		textMetrics.initialized = false;
@@ -55,13 +62,17 @@ 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...
+		if (_firstReset) return
+		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);
@@ -92,15 +103,14 @@ ComboBoxBase
 						anchors.top:	rectangleLabel.visible && comboBox.setLabelAbove ? rectangleLabel.bottom: comboBox.top
 
 						focus:			true
-						padding:		2 * preferencesModel.uiScale //jaspTheme.jaspControlPadding
-
-						width:			modelWidth + extraWidth
+						padding:		2 * preferencesModel.uiScale
+						width:			0
 						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
 		property bool	showEmptyValueStyle:	!comboBox.showEmptyValueAsNormal && isEmptyValue
+		property double realFieldWidth:	width
+		property double maxTextWidth:	0
 
 		TextMetrics
 		{
@@ -123,8 +133,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)
@@ -133,19 +143,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
@@ -180,7 +195,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
@@ -211,7 +226,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
@@ -239,14 +254,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

diff --git a/QMLComponents/controls/comboboxbase.cpp b/QMLComponents/controls/comboboxbase.cpp
@@ -172,6 +172,18 @@ void ComboBoxBase::activatedSlot(int index)
 	_setCurrentProperties(index);
 }
 
+void ComboBoxBase::setFixedWidth(bool fixed)
+{
+	if (fixed == _fixedWidth) return;
+
+	Log::log() << "TATA: control " << name() << " setFixedWidth: " << fixed << std::endl;
+	_fixedWidth = fixed;
+	if (!fixed)
+		_resetItemWidth();
+
+	emit fixedWidthChanged();
+}
+
 void ComboBoxBase::_resetItemWidth()
 {
 	const Terms& terms = _model->terms();

diff --git a/QMLComponents/controls/comboboxbase.h b/QMLComponents/controls/comboboxbase.h
@@ -35,6 +35,9 @@ class ComboBoxBase : public JASPListControl, public BoundControlBase
 	Q_PROPERTY( QString		startValue				READ startValue				WRITE setStartValue			NOTIFY startValueChanged			)
 	Q_PROPERTY( QString		currentColumnType		READ currentColumnType									NOTIFY currentColumnTypeChanged		)
 	Q_PROPERTY( QString		currentColumnTypeIcon	READ currentColumnTypeIcon								NOTIFY currentColumnTypeIconChanged	)
+	Q_PROPERTY( QString		currentColumnTypeIcon	READ currentColumnTypeIcon								NOTIFY currentColumnTypeIconChanged	)
+	Q_PROPERTY( bool		fixedWidth				READ fixedWidth				WRITE setFixedWidth			NOTIFY fixedWidthChanged			)
+
 public:
 	ComboBoxBase(QQuickItem* parent = nullptr);
 
@@ -53,6 +56,7 @@ class ComboBoxBase : public JASPListControl, public BoundControlBase
 	const QString&		currentColumnType()							const				{ return _currentColumnType;	}
 	const QString&		currentColumnTypeIcon()						const				{ return _currentColumnTypeIcon;}
 	int					currentIndex()								const				{ return _currentIndex;			}
+	bool				fixedWidth()								const				{ return _fixedWidth;			}
 
 	std::vector<std::string> usedVariables()						const	override;
 
@@ -65,13 +69,15 @@ class ComboBoxBase : public JASPListControl, public BoundControlBase
 	void currentColumnTypeIconChanged();
 	void currentIndexChanged();
 	void activated(int index);
+	void fixedWidthChanged();
 
 protected slots:
 	void termsChangedHandler() override;
 	void setCurrentIndex(int index);
 	void setCurrentValue(QString value);
 	void setCurrentText(QString text);
 	void activatedSlot(int index);
+	void setFixedWidth(bool fixed);
 
 	GENERIC_SET_FUNCTION(StartValue,	_startValue,	startValueChanged,	QString	)
 
@@ -84,6 +90,7 @@ protected slots:
 								_currentColumnRealType,
 								_currentColumnTypeIcon;
 	int							_currentIndex			= -1;
+	bool						_fixedWidth				= false;
 
 	int	 _getStartIndex()											const;
 	void _resetItemWidth();