Add segment control component#4434
Open
gabriel-bolbotina wants to merge 4 commits intodev/filteringfrom
Open
Conversation
Added the component to the checkspage Made the checkspage scrollable
Matched the font to Figma design
Pull Request Test Coverage Report for Build 23792443815Details
💛 - Coveralls |
📦 Build Artifacts Ready
|
Withalion
reviewed
Mar 31, 2026
Comment on lines
+19
to
+22
|
|
||
| property string allText: qsTr( "All" ) | ||
| property string trueText: qsTr( "True" ) | ||
| property string falseText: qsTr( "False" ) |
Contributor
There was a problem hiding this comment.
Suggested change
| property string allText: qsTr( "All" ) | |
| property string trueText: qsTr( "True" ) | |
| property string falseText: qsTr( "False" ) |
Comment on lines
+32
to
+34
| MMText { id: allMeasure; text: root.allText; font: __style.t3; visible: false } | ||
| MMText { id: trueMeasure; text: root.trueText; font: __style.t3; visible: false } | ||
| MMText { id: falseMeasure; text: root.falseText; font: __style.t3; visible: false } |
Contributor
There was a problem hiding this comment.
Suggested change
| MMText { id: allMeasure; text: root.allText; font: __style.t3; visible: false } | |
| MMText { id: trueMeasure; text: root.trueText; font: __style.t3; visible: false } | |
| MMText { id: falseMeasure; text: root.falseText; font: __style.t3; visible: false } |
Contributor
There was a problem hiding this comment.
for the calculation of implicitWidth can't we use the width of children + margins?
| Rectangle { | ||
| anchors.fill: parent | ||
| radius: __style.radius12 | ||
| color: __style.primaryColor |
Contributor
There was a problem hiding this comment.
This color doesn't exist
Comment on lines
+48
to
+52
| model: [ | ||
| { text: root.allText, index: MMSegmentControl.Options.All }, | ||
| { text: root.trueText, index: MMSegmentControl.Options.True }, | ||
| { text: root.falseText, index: MMSegmentControl.Options.False } | ||
| ] |
Contributor
There was a problem hiding this comment.
Suggested change
| model: [ | |
| { text: root.allText, index: MMSegmentControl.Options.All }, | |
| { text: root.trueText, index: MMSegmentControl.Options.True }, | |
| { text: root.falseText, index: MMSegmentControl.Options.False } | |
| ] | |
| model: 3 |
I think this should be enough and in delegate you can work with index
| delegate: Item { | ||
| id: segment | ||
|
|
||
| required property var modelData |
Contributor
There was a problem hiding this comment.
Suggested change
| required property var modelData | |
| required property int index |
| } | ||
|
|
||
| MMText { | ||
| anchors.centerIn: parent |
Contributor
There was a problem hiding this comment.
Suggested change
| anchors.centerIn: parent | |
| anchors.centerIn: segment |
| MMText { | ||
| anchors.centerIn: parent | ||
|
|
||
| text: segment.modelData.text |
Contributor
There was a problem hiding this comment.
Suggested change
| text: segment.modelData.text | |
| text: { | |
| switch ( segment.index ) { | |
| case MMSegmentControl.Options.All: { | |
| qsTr( "All" ) | |
| break | |
| } | |
| case MMSegmentControl.Options.True: { | |
| qsTr( "True" ) | |
| break | |
| } | |
| case MMSegmentControl.Options.False: { | |
| qsTr( "False" ) | |
| break | |
| } | |
| } | |
| } |
Comment on lines
+65
to
+75
| Rectangle { | ||
| anchors.fill: parent | ||
| radius: __style.radius8 | ||
|
|
||
| visible: segment.isSelected | ||
|
|
||
| color: segment.isAllOption ? __style.mediumGreenColor : __style.positiveColor | ||
|
|
||
| border.color: segment.isAllOption ? __style.transparentColor : __style.forestColor | ||
| border.width: segment.isAllOption ? 0 : 1.0 * __dp | ||
| } |
Contributor
There was a problem hiding this comment.
Can't we use this as background for MMText?
| } | ||
|
|
||
| MouseArea { | ||
| anchors.fill: parent |
Contributor
There was a problem hiding this comment.
Suggested change
| anchors.fill: parent | |
| anchors.fill: segment |
| property string trueText: qsTr( "True" ) | ||
| property string falseText: qsTr( "False" ) | ||
|
|
||
| signal selectionChanged( int index ) |
Contributor
There was a problem hiding this comment.
We don't need this, every property in QML has onPropertyChanged signal attached by default
Contributor
|
Regarding the visuals, why do we have different highlight box for all? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Created a new segment control component.
Added it to the gallery app in the ChecksPage and made the page scrollable.
To be used for boolean values when filtering.
Visual references:
segment-control.mp4