PR: Improve style of the Preferences dialog (UI) #21233

ccordoba12 · 2023-08-08T19:35:59Z

Description of Changes

Organize entries on the left according to the following order:
- Show the most important pages first.
- Then show the rest of plugin pages in alphabetical order.
- Show the Plugins page last.
Prevent pages to fill the entire width of the dialog.
Set background color for the pages area to make it different from the options one.
Fix setting and restoring Preferences dialog size (this was probably broken in Spyder 5).
Show wait cursor when opening the dialog.
Remove borders around QGroupBox and tabs.
Style fixes in several pages.
Add superqt as a new dependency to use some of the utilities declared on it.

Before

After

macOS

Windows

Linux

Issue(s) Resolved

Fixes #15073.

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

dalthviz

Thanks @ccordoba12 ! Checked this locally and I noticed a couple of behaviors that maybe are not wanted:

It is possible to set a minimum height for the preferences dialog that seems like quite small:

Seems like the Appearance page triggers an horizontal scrollbar:

A small enough dialog height causes some pages to show labels cutted off (Application and Editor > Advanced settings):

Also, thinking about this style, should the About dialog also use the new tabbar style and border removal idea? Comparing the dialogs side by side:

spyder/utils/stylesheet.py

spyder/plugins/preferences/widgets/configdialog.py

That way we avoid them to take the entire width of the config dialog.

Also, remove dead code related to that

- Add background color to the entries area to visually distinguish it from the options one. - Increase entries font size in one point. - Remove border from and add padding to options area.

Introduce a new SpecialTabBarStyleSheet class for that.

- Break ungrouped options into groups so users can tell them apart more easily. - Improve names of some options and add tooltips to others.

- Make consistent the use of "Interface" and "Display" with other plugins. - Add a new section about "Confirmations" in the "Interface" tab.

That's because that module was not really exposing an API but just declaring several widgets.

The most important sections are shown first, then the other plugin pages are shown alphabetically and finally we show the Plugins page.

Also, reduce the size of that area.

This happened only when the table has no widgets

- It seems to not be necessary anymore. - Besides, it was being called on enter and leave events, which was a waste of resources.

pep8speaks · 2023-09-18T23:39:18Z

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

In the file spyder/dependencies.py:

Line 251:6: E131 continuation line unaligned for hanging indent
Line 252:6: E128 continuation line under-indented for visual indent
Line 253:6: E128 continuation line under-indented for visual indent
Line 254:6: E128 continuation line under-indented for visual indent

In the file spyder/plugins/preferences/widgets/config_widgets.py:

Line 254:80: E501 line too long (80 > 79 characters)

Comment last updated at 2023-11-04 14:30:53 UTC

- This is necessary for Mac. - Also, fix style of tabbar scroll buttons on Windows and Mac.

- This prevents text from being clipped when there's not enough space available. - Also, fix similar error in the editor config page.

Also, improve description of some dependencies

Also, use signals_blocked utility of superqt to simplify a bit of code.

This is only necessary on Mac.

- Set default and min sizes for its dialog. - Increase items padding on Linux. - Decrease contents area width on Windows and increase it on Linux. - Adjust min height of editor config page to avoid clipped text.

ccordoba12 · 2023-10-25T01:46:43Z

@dalthviz, this is ready for another review. About your comments above:

It is possible to set a minimum height for the preferences dialog that seems like quite small

Well thought! I followed your recommendation and did exactly that.

Seems like the Appearance page triggers an horizontal scrollbar

Fixed by setting a min width.

A small enough dialog height causes some pages to show labels cutted off (Application and Editor > Advanced settings)

Thanks for noticing it! This problem shouldn't show up anymore.

Also, thinking about this style, should the About dialog also use the new tabbar style and border removal idea? Comparing the dialogs side by side

I thought exactly the same! The refactoring you suggested (i.e. creating PreferencesTabBarStyleSheet) will help me to do that, but I'll leave it for another PR because this one is already too big.

ccordoba12 · 2023-10-25T01:52:05Z

Also @dalthviz, the Mac and Windows screenshots in the OP are slightly outdated. Could you give me a hand and upload new ones with my latest changes? Thanks!

Also, fix small style issue.

dalthviz

Thanks @ccordoba12 ! I checked locally on Windows and seems like things are working as expected. I left a comment regarding the preferences plugin widgets/API namespace change. Anyhow, since this is kind of needed for other things you're working on, I'm leaving this approved so feel free to merge if you think no further changes are needed 👍

dalthviz · 2023-11-03T21:22:16Z

spyder/api/preferences.py

+from spyder.plugins.preferences.widgets.config_widgets import (
+    SpyderConfigPage,
+    BaseConfigTab
+)


Should we preserve the import call that was before and instead do this new import from spyder.plugins.preferences.api? Although those definitions are widgets, it is also true that they are part of the preferences plugin API, no?

Although those definitions are widgets, it is also true that they are part of the preferences plugin API, no?

I'd say that not really. I mean, I think what we should put in spyder/plugins/myplugin/api.py are things that other plugins need to import to work in relationship to myplugin. That's why we have mainly enums for actions in the api module of most of our plugins (to place other actions in menus or toolbars before or after them, for instance).

In this particular case, other plugins don't need to import SpyderConfigPage and BaseConfigTab but SpyderPreferencesTab and PluginConfigPage, which are declared here.

However, your comment made me realize that the MOST_IMPORTANT_PAGES constant that I added to spyder.plugins.preferences.api shouldn't be there. That's because that constant is not needed by other plugins but by several modules in the Preferences plugin. So, I put it in api.py to avoid circular imports, but I think it's better placed in spyder.plugins.preferences.__init__, which is where I'll move it in my next commit.

- That's because that constant doesn't need to be imported by other plugins but shared by several modules in this one. - So, we need a separate module to declare it in order to avoid circular imports.

* Return value of `.create_checkbox()` changed in spyder-ide/spyder#20926 (Show tooltips in Preferences). * Handling of Prefs dialog box size changed in spyder-ide/spyder#21233 (Improve style of Preferences dialog box).

ccordoba12 added type:Enhancement component:Preferences User Interface (UI) labels Aug 8, 2023

ccordoba12 requested a review from dalthviz August 8, 2023 19:35

ccordoba12 self-assigned this Aug 8, 2023

dalthviz reviewed Aug 9, 2023

View reviewed changes

spyder/utils/stylesheet.py Outdated Show resolved Hide resolved

spyder/plugins/preferences/widgets/configdialog.py Outdated Show resolved Hide resolved

ccordoba12 force-pushed the improve-preferences-ui branch from f86d9e9 to fb661b6 Compare September 16, 2023 03:53

ccordoba12 added 16 commits September 16, 2023 12:10

Preferences: Add a max width to all pages

a8ed626

That way we avoid them to take the entire width of the config dialog.

Preferences: Fix layout of Appearance page after last changes

b4ab294

Preferences: Replace splitter for a grid layout in config dialog

db007c2

Fix setting and restoring Preferences dialog size

e38f331

Also, remove dead code related to that

Stylesheet: Change QGroupBox style in the application

088b3b9

Preferences: Add a modern style for its dialog

92b6717

- Add background color to the entries area to visually distinguish it from the options one. - Increase entries font size in one point. - Remove border from and add padding to options area.

Preferences: Remove unneeded margins in "Completions and linting" tabs

b3cc034

Preferences: Set for its tabs the same style used for dockwidget tabbars

c7f6101

Introduce a new SpecialTabBarStyleSheet class for that.

Preferences: Show wait cursor when opening its dialog

d6e7a3f

Preferences: Small style fixes in several pages

9c05e3a

Preferences: Show tooltips for plugin names whose text is elided

4c33c52

Editor: Improve config page

25af2a6

- Break ungrouped options into groups so users can tell them apart more easily. - Improve names of some options and add tooltips to others.

IPython console: Improve its config page

78f5477

- Make consistent the use of "Interface" and "Display" with other plugins. - Add a new section about "Confirmations" in the "Interface" tab.

Preferences: Increase tabs font size and padding per review

001db9f

Preferences: Add header sections to its plugin and minor style fixes

3c63e25

Preferences: Move api module to widgets/config_widgets.py

9f2033b

That's because that module was not really exposing an API but just declaring several widgets.

ccordoba12 force-pushed the improve-preferences-ui branch from fb661b6 to ebdf18d Compare September 17, 2023 17:23

ccordoba12 added 6 commits September 18, 2023 10:38

Preferences: Organize page entries in different sections

bb51667

The most important sections are shown first, then the other plugin pages are shown alphabetically and finally we show the Plugins page.

Preferences: Improve how we add tooltips to contents_widget elided items

c7894fc

Also, reduce the size of that area.

Preferences: Move Qt method to the right section

f7062b0

Widgets: Fix bug in ElementsTable when hovering

678d6bb

This happened only when the table has no widgets

Widgets: Fix right margin of ElementsTable last column on Mac

9fd5d0a

Widgets: Remove setting ElementsTable layout on QEvent.LayoutRequest

f501efd

- It seems to not be necessary anymore. - Besides, it was being called on enter and leave events, which was a waste of resources.

ccordoba12 force-pushed the improve-preferences-ui branch from ebdf18d to 3fde5e9 Compare September 18, 2023 23:38

Set scroll buttons and prevent eliding text on dock and preference tabs

175953d

- This is necessary for Mac. - Also, fix style of tabbar scroll buttons on Windows and Mac.

ccordoba12 force-pushed the improve-preferences-ui branch from 3fde5e9 to 175953d Compare September 19, 2023 00:32

Merge branch 'master' into improve-preferences-ui

acefd0d

ccordoba12 force-pushed the improve-preferences-ui branch from 1d83832 to e37a538 Compare October 21, 2023 22:46

ccordoba12 added 2 commits October 21, 2023 18:34

Testing: Fix tests related to Preferences

5d4c23d

Preferences: Set min height for config pages

9935686

- This prevents text from being clipped when there's not enough space available. - Also, fix similar error in the editor config page.

ccordoba12 force-pushed the improve-preferences-ui branch from e37a538 to 9935686 Compare October 21, 2023 23:34

ccordoba12 added 4 commits October 21, 2023 20:56

Add superqt as a new dependency

189806e

Also, improve description of some dependencies

Preferences: Debounce operations when its dialog is resized

4fb839f

Also, use signals_blocked utility of superqt to simplify a bit of code.

Preferences: Adjust separators width when its dialog is resized

85310f8

This is only necessary on Mac.

Widgets: Debounce operations when resizing ElementsTable

7c7c396

ccordoba12 force-pushed the improve-preferences-ui branch from 5f50102 to a6aa3c1 Compare October 23, 2023 17:49

Preferences: Make several adjustments per operating system

66700f0

- Set default and min sizes for its dialog. - Increase items padding on Linux. - Decrease contents area width on Windows and increase it on Linux. - Adjust min height of editor config page to avoid clipped text.

ccordoba12 force-pushed the improve-preferences-ui branch from a6aa3c1 to 66700f0 Compare October 24, 2023 18:25

ccordoba12 added 2 commits October 24, 2023 22:29

Stylesheet: Create a new class for tab bars used in Preferences

69fa4ba

Preferences: Show "Main interpreter" entry above "Keyboard shortcuts"

f739662

Also, fix small style issue.

ccordoba12 force-pushed the improve-preferences-ui branch from b573301 to f739662 Compare October 25, 2023 03:32

dalthviz approved these changes Nov 3, 2023

View reviewed changes

ccordoba12 added 2 commits November 4, 2023 09:28

Preferences: Move MOST_IMPORTANT_PAGES constant to its init module

c59a2e5

- That's because that constant doesn't need to be imported by other plugins but shared by several modules in this one. - So, we need a separate module to declare it in order to avoid circular imports.

Merge branch 'master' into improve-preferences-ui

34f5bdc

ccordoba12 merged commit 7ee864a into spyder-ide:master Nov 4, 2023
22 checks passed

ccordoba12 deleted the improve-preferences-ui branch November 4, 2023 17:34

ccordoba12 added this to the v6.0alpha3 milestone Nov 4, 2023

jitseniesen mentioned this pull request Nov 7, 2023

Update plugin and tests for Spyder 6.0.0a2 and 6.0.0a3 spyder-ide/spyder-unittest#218

Merged

dalthviz mentioned this pull request Dec 11, 2023

Spyder 6.0 alpha3 release #21591

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PR: Improve style of the Preferences dialog (UI) #21233

PR: Improve style of the Preferences dialog (UI) #21233

ccordoba12 commented Aug 8, 2023 •

edited by dalthviz

Loading

dalthviz left a comment

pep8speaks commented Sep 18, 2023 •

edited

Loading

ccordoba12 commented Oct 25, 2023 •

edited

Loading

ccordoba12 commented Oct 25, 2023 •

edited

Loading

dalthviz left a comment

dalthviz Nov 3, 2023

ccordoba12 Nov 4, 2023 •

edited

Loading

PR: Improve style of the Preferences dialog (UI) #21233

PR: Improve style of the Preferences dialog (UI) #21233

Conversation

ccordoba12 commented Aug 8, 2023 • edited by dalthviz Loading

Description of Changes

Issue(s) Resolved

Affirmation

dalthviz left a comment

Choose a reason for hiding this comment

pep8speaks commented Sep 18, 2023 • edited Loading

Comment last updated at 2023-11-04 14:30:53 UTC

ccordoba12 commented Oct 25, 2023 • edited Loading

ccordoba12 commented Oct 25, 2023 • edited Loading

dalthviz left a comment

Choose a reason for hiding this comment

dalthviz Nov 3, 2023

Choose a reason for hiding this comment

ccordoba12 Nov 4, 2023 • edited Loading

Choose a reason for hiding this comment

ccordoba12 commented Aug 8, 2023 •

edited by dalthviz

Loading

pep8speaks commented Sep 18, 2023 •

edited

Loading

ccordoba12 commented Oct 25, 2023 •

edited

Loading

ccordoba12 commented Oct 25, 2023 •

edited

Loading

ccordoba12 Nov 4, 2023 •

edited

Loading