Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PR: Add new combobox widgets (API) #21555

Merged
merged 15 commits into from
Dec 5, 2023

Conversation

ccordoba12
Copy link
Member

@ccordoba12 ccordoba12 commented Nov 24, 2023

Description of Changes

  • This allows us to improve the style of all comboboxes used in the application.

  • UI improvements:

    • Add more padding to combobox items (it was almost non-existent).
    • Change hover color to the one used for any other widget in Spyder.
    • Remove visual glitch to the left of items for some comboboxes.
    • Fix misalignment of combobox popup on Mac.
    • Add padding around the combobox.
    • Paint combobox separators according to the interface theme.
    • Improve style of the class/function dropdown a bit by adding margins around it and between its comboboxes.
    • Make the QFontComboBox'es used in Preferences to follow the style for other comboboxes as well.
  • UX improvements:

    • Disable context menu of editable comboboxes because it's not localized and it doesn't use our API.
  • Other changes:

    • Replace all uses of raw Qt comboboxes with the new ones in this PR.

Visual changes

Before

imagen

imagen

imagen

imagen


After

imagen

imagen

imagen

imagen

Affirmation

By submitting this Pull Request or typing my (user)name below,
I affirm the Developer Certificate of Origin
with respect to all commits and content included in this PR,
and understand I am releasing the same under Spyder's MIT (Expat) license.

I certify the above statement is true and correct: @ccordoba12

@ccordoba12
Copy link
Member Author

@dalthviz, this is ready for review. Could you also check how things look on Windows and Mac? I wouldn't expect big surprises there, but you never know.

@pep8speaks
Copy link

pep8speaks commented Nov 24, 2023

Hello @ccordoba12! Thanks for updating this PR. We checked the lines you've touched for PEP 8 issues, and found:

There are currently no PEP 8 issues detected in this Pull Request. Cheers! 🍻

Comment last updated at 2023-12-04 18:06:11 UTC

@ccordoba12 ccordoba12 force-pushed the add-spyder-combobox branch 2 times, most recently from 69b73bc to b0c1d78 Compare November 24, 2023 19:37
@ccordoba12 ccordoba12 changed the title PR: Add a new SpyderComboBox widget PR: Add a new SpyderComboBox widget (API) Nov 24, 2023
@dalthviz
Copy link
Member

Did an initial check on Windows and seems like things are looking good except for the following (although not totally sure if is caused due to this PR or something that was happening before):

  • In the working directory combobox select a path so the validation is done (a check appears). Seems like the line edit overflows vertically the combobox (bottom blue border of the combobox is not visible):

image

  • Seems like there are some extra division line in the Find in Files combox under the Clear this list action (although I think that happens on Linux too checking the OP screenshots):

image

On macOS there is a more or less noticeable misalignment for the comboboxes- The Find in Files Search in: is the one that show a more prominent misalignment:

image

image

@ccordoba12 ccordoba12 force-pushed the add-spyder-combobox branch 2 times, most recently from 7454f25 to 89ee9bd Compare November 25, 2023 15:58
@ccordoba12 ccordoba12 changed the title PR: Add a new SpyderComboBox widget (API) PR: Add new Combobox widgets (API) Nov 25, 2023
@ccordoba12
Copy link
Member Author

ccordoba12 commented Nov 26, 2023

Thanks @dalthviz for the review! About your comments:

In the working directory combobox select a path so the validation is done (a check appears). Seems like the line edit overflows vertically the combobox (bottom blue border of the combobox is not visible)

Fixed.

Seems like there are some extra division line in the Find in Files combox under the Clear this list action (although I think that happens on Linux too checking the OP screenshots)

I plan to fix that after this PR is merged. Actually, my initial motivation for this work was to fix that problem.

On macOS there is a more or less noticeable misalignment for the comboboxes

Fixed.

I also made the two QFontCombox'es we are using in Preferences to follow the style of the other comboboxes. See the updated OP for the screenshots.

@dalthviz
Copy link
Member

Checked again with the latest changes on Windows and now seems like some comboboxes that have an initial value appears with a white background?

This is what I'm seeing for the Help pane Source combobox:

image

And it also happens with the Find pane Search in: combobox. Seems like after a first interaction the background gets the correct background?:

combobox_find

Also, checked the working directory combobox but it still shows the same behavior 🤔

combobox_cwd

Also, regarding the comboboxes to select fonts seems like now the items doesn't show a preview of the font? Is not that kind of a regression or maybe for that kind of combobox a new preview widget is meant to be done?

combobox_font

@dalthviz
Copy link
Member

Did a quick check on macOS and seems like there things regarding alignment are correct now 👍

image

@ccordoba12
Copy link
Member Author

ccordoba12 commented Nov 28, 2023

Checked again with the latest changes on Windows and now seems like some comboboxes that have an initial value appears with a white background?

I was able to reproduce this and it should be fixed now.

Also, checked the working directory combobox but it still shows the same behavior 🤔

Really fixed now. I was not seeing this problem on Linux, so I thought some of my previous changes should have fixed it.

Also, regarding the comboboxes to select fonts seems like now the items doesn't show a preview of the font? Is not that kind of a regression or maybe for that kind of combobox a new preview widget is meant to be done?

I understand your point of view but I was not able to find a way to set a specific font for combobox items. And I think the current style doesn't look good, as can be seen in the OP. Furthermore, I also checked what RStudio does and it simply shows the font names, as we are doing now.

@ccordoba12 ccordoba12 changed the title PR: Add new Combobox widgets (API) PR: Add new combobox widgets (API) Nov 28, 2023
@dalthviz
Copy link
Member

Checked again and seems like things are working now 👍 Regarding the fonts comboboxes, I would suggest to make the Monospace font setting value changes affect the Preview that is already in that preference page. Going even further probably the font size preference should have a similar behavior (alter the Preview text when its value changes). A similar interaction can be seen in the Qt QFontDialog where a Sample widget shows how the font looks:

combobox_font_2

Following that idea I would also suggest to create a second preview widget for the Interface font. This could be useful since without any kind of preview now you most probably will end up having to restart Spyder multiple times to see how the different fonts look.

@ccordoba12 ccordoba12 modified the milestones: v6.0alpha3, v6.0beta1 Dec 1, 2023
@ccordoba12 ccordoba12 force-pushed the add-spyder-combobox branch 2 times, most recently from a99dc9a to 38e4b13 Compare December 4, 2023 18:05
@ccordoba12
Copy link
Member Author

ccordoba12 commented Dec 4, 2023

Checked again and seems like things are working now 👍

Great!

Regarding the fonts comboboxes, I would suggest to make the Monospace font setting value changes affect the Preview that is already in that preference page. Going even further probably the font size preference should have a similar behavior (alter the Preview text when its value changes).

Great suggestion @dalthviz! I haven't thought about doing something like that, but I agree it'd help users to understand how font changes would affect the interface.

So, I implemented that in my last two commits.

Following that idea I would also suggest to create a second preview widget for the Interface font. This could be useful since without any kind of preview now you most probably will end up having to restart Spyder multiple times to see how the different fonts look.

That's a good suggestion too, but I think out of the scope for this PR. I have some ideas on how to implement it but for that I'd require PR #21511 merged first. So, I think it's better to leave it for later.

Copy link
Member

@dalthviz dalthviz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @ccordoba12 ! Just left a comment regarding completly removing the context menu from comboboxes other than that this LGTM 👍

spyder/api/widgets/comboboxes.py Show resolved Hide resolved
Copy link
Member

@dalthviz dalthviz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @ccordoba12 !

@dalthviz
Copy link
Member

dalthviz commented Dec 5, 2023

Just in case, is there anything else you want to add here @ccordoba12 ? I just noticed that this is marked for beta1 🤔

@ccordoba12
Copy link
Member Author

ccordoba12 commented Dec 5, 2023

Nop. I thought it was going to take longer to get this PR approved, so I didn't want to delay alpha3 due to that. But since you think it's ready, let's include it in that release.

@ccordoba12 ccordoba12 modified the milestones: v6.0beta1, v6.0alpha3 Dec 5, 2023
@ccordoba12 ccordoba12 merged commit 309a298 into spyder-ide:master Dec 5, 2023
14 checks passed
@ccordoba12 ccordoba12 deleted the add-spyder-combobox branch December 5, 2023 17:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants