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

Add tooltips to settings. #1521

Merged
merged 2 commits into from
Feb 25, 2023

Conversation

real-yfprojects
Copy link
Collaborator

Fixes #1517

  • src/vorta/store/models.py (SettingsModel): Add tooltip column.

  • src/vorta/store/migrations.py (run_migrations): Create tooltip column.

  • src/vorta/store/connection.py (init_db): Populate tooltip column. Increase SCHEMA_VERSION.

  • src/vorta/views/misc_tab.py (MiscTab.populate): Set tooltip of checkbox widgets.

  • src/vorta/store/settings.py : Add tooltips and update label of override_mount_permissions

@real-yfprojects
Copy link
Collaborator Author

Any tooltips you would like to add or rephrase @m3nu?

@m3nu
Copy link
Contributor

m3nu commented Dec 27, 2022

Tooltip texts make sense. I just wonder if it makes more sense to add it below the checkbox label? Since almost nobody looks at tooltips really? Or have (?) icon that has the tooltip associated.

Screenshot 2022-12-27 at 11 18 51

@real-yfprojects
Copy link
Collaborator Author

real-yfprojects commented Dec 27, 2022

That is a good idea. Though I do look for tooltips in many application. The KDE HIG states:

Tips eliminate the need to always have descriptive text on the screen. Novice users will use hovering to show tooltips to become familiar with the interface. This time-delay mechanism makes tips very convenient, but it also reduces their discoverability. When tips are used consistently they support user's expectation and foster predictability

However I do like the MacOS way of explaining a setting. I will look for a way to integrate this nicely into our app style.

@real-yfprojects
Copy link
Collaborator Author

What about something like this?
grafik

@m3nu
Copy link
Contributor

m3nu commented Jan 9, 2023

Yesss! That's exactly what I was thinking of. That's what I see on macOS and on the web sometimes.

@m3nu m3nu mentioned this pull request Jan 15, 2023
@real-yfprojects real-yfprojects marked this pull request as draft January 19, 2023 19:16
@real-yfprojects
Copy link
Collaborator Author

What about something like this?
grafik

@m3nu
Copy link
Contributor

m3nu commented Feb 9, 2023

Still better than a normal tooltip. I use this on the web extensively. The (?) icon just shouldn't look like a button that can be clicked.

A secondary label would be good too, but clutters the space more.

@real-yfprojects
Copy link
Collaborator Author

grafik

@m3nu
Copy link
Contributor

m3nu commented Feb 16, 2023

Usually I put the (?) in the same line instead of aligning them after. But no strong feelings about either. Aligning them per-group looks OK too, given the checkboxes on the other side.

help-icons

@real-yfprojects
Copy link
Collaborator Author

Usually I put the (?) in the same line instead of aligning them after. But no strong feelings about either.

You are right. I didn't notice that they were group aligned.

@real-yfprojects
Copy link
Collaborator Author

Implemented the about buttons:
shot

@real-yfprojects real-yfprojects marked this pull request as ready for review February 18, 2023 09:05
@m3nu
Copy link
Contributor

m3nu commented Feb 18, 2023

Looks perfect! You'll have to show us how to use this tooltip elsewhere. I think it's real useful for explaining stuff behind complex options.

@real-yfprojects
Copy link
Collaborator Author

real-yfprojects commented Feb 18, 2023

You'll have to show us how to use this tooltip elsewhere.

It can be used like a normal widget. To add it to an existing ui element, y

  • wrap the ui element in a QHBoxLayout
  • add the ToolTipButton to it
  • Set the tooltip of the ToolTipButton to the tooltip of the ui element

Example:

tb = ToolTipButton()
tb.setToolTip(setting.tooltip)
cbl = QHBoxLayout()
cbl.addWidget(cb)
if setting.tooltip:
cbl.addWidget(tb)

This still involves a few steps, I am interested in ideas for simplifying the steps needed to setup the button. I also tried to add the button to Qt Designer but didn't manage yet.

* src/vorta/store/models.py (SettingsModel): Add `tooltip` column.

* src/vorta/store/migrations.py (run_migrations): Create `tooltip` column.

* src/vorta/store/connection.py (init_db): Populate `tooltip` column. Increase `SCHEMA_VERSION`.

* src/vorta/views/misc_tab.py (MiscTab.populate): Set tooltip of checkbox widgets.

* src/vorta/store/settings.py : Add tooltips and update label of `override_mount_permissions`
@m3nu
Copy link
Contributor

m3nu commented Feb 24, 2023

One small problem: The SVG needs <svg fill="#000000" somewhere so changing the color works. And we have a function that updates icons when the color scheme changes. That's not used right now. I got this after minifying the file:

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M32 8.727A23.222 23.222 0 0 0 8.727 32 23.222 23.222 0 0 0 32 55.273 23.222 23.222 0 0 0 55.273 32 23.222 23.222 0 0 0 32 8.727Zm0 2.91A20.32 20.32 0 0 1 52.364 32 20.32 20.32 0 0 1 32 52.364 20.32 20.32 0 0 1 11.636 32 20.32 20.32 0 0 1 32 11.636zm-2.91 5.818v5.818h5.82v-5.818zm0 8.727v20.363h5.82V26.182Z" style="fill:currentColor;fill-opacity:1;stroke:none;stroke-width:2.90909;color:#000000"/></svg>

@real-yfprojects
Copy link
Collaborator Author

One small problem: The SVG needs <svg fill="#000000" somewhere so changing the color works.

The css attribute should be sufficient.

And we have a function that updates icons when the color scheme changes. That's not used right now.

I did forget to implement the code for updating the icon when the colour scheme changes but I don't think we have such a function -- we only have get_colored_icon which I used.

@m3nu
Copy link
Contributor

m3nu commented Feb 24, 2023

The css attribute should be sufficient.

Yes, the minified version works well. I think Vorta is replaceing #000000. So that needs to be somewhere. Before there was only #000, the short version.

There is some code that refreshes the icons when changing color. It's probably not critical for just this tab. Maybe there is a simple way.

These help buttons show the corresponding tooltip when the mouse hovers over them.

* src/vorta/assets/icons/help-about.svg: Add info icon.

* src/vorta/views/partials/tooltip_button.py: Implement `ToolTipButton`.

* src/vorta/views/misc_tab.py: Add `ToolTipButton` for each setting with a tooltip.
	Add `set_icons` and connect it to palette change.

* tests/test_misc.py (test_autostart): Update test.
@real-yfprojects
Copy link
Collaborator Author

Icons now change on palette change.

Copy link
Contributor

@m3nu m3nu left a comment

Choose a reason for hiding this comment

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

Looks good! This icon can be used in more places in the future. 👍

@real-yfprojects real-yfprojects merged commit 618a1fe into borgbase:master Feb 25, 2023
@real-yfprojects real-yfprojects deleted the settings-tooltip branch February 25, 2023 10:10
ratchek pushed a commit to ratchek/vorta that referenced this pull request Apr 4, 2023
This adds tooltips to the settings as well as a 'info' button that shows the tooltip when hovering over it.

* Add tooltips to settings.

* src/vorta/store/models.py (SettingsModel): Add `tooltip` column.

* src/vorta/store/migrations.py (run_migrations): Create `tooltip` column.

* src/vorta/store/connection.py (init_db): Populate `tooltip` column. Increase `SCHEMA_VERSION`.

* src/vorta/views/misc_tab.py (MiscTab.populate): Set tooltip of checkbox widgets.

* src/vorta/store/settings.py : Add tooltips and update label of `override_mount_permissions`

* Add *help* button to settings.

* src/vorta/assets/icons/help-about.svg: Add info icon.

* src/vorta/views/partials/tooltip_button.py: Implement `ToolTipButton`.

* src/vorta/views/misc_tab.py: Add `ToolTipButton` for each setting with a tooltip.
	Add `set_icons` and connect it to palette change.

* tests/test_misc.py (test_autostart): Update test.

---------

Co-authored-by: real-yfprojects <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants