PR: Implement Profile Sidebar and New Setting Interface #1809

bigtedde · 2023-09-06T01:53:55Z

Description

Vorta allows configuring profiles. A profile defines a number of sources, a backup destination, a schedule and some more settings. Currently there is a ComboBox for selecting a profile at the top of the window alongside buttons for adding or removing profiles. All profiles are active at the same time. However you can only edit the profile selected. This happens in the tabs below. The Misc tab is an exception. It contains the global settings that aren't associated to a profile.
In this task you will implement a sidebar next to the tab widget that replaces the current way of selecting a profile to edit. The sidebar should be comprised of a list with the configured profiles that can be selected and a visually distinct Misc item that gives access to the global settings. The old Misc tab will be removed in favour of this new user interface. The new Misc item now provides space for an about view and a way to manage profiles configured in Vorta.

Task outline: Implement the profile list that will be part of the sidebar. Add buttons for editing the profile list. Remove the old profile management GUI elements. Implement Misc item and the corresponding view. Move global settings to the new Misc view. Create an About tab and add it to the new Misc view. Implement a repository management tab and add it to the new Misc view. Write unittests for the new GUI parts.

Related Issue

Addresses #1677

Motivation and Context

Easier management of profiles, separates the global settings tab from profile-specific tabs

How Has This Been Tested?

Due to the nature of a main window redesign, some current tests will be broken until the final design is approved and I refactor the tests.

Most Recent Demo:

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have read the CONTRIBUTING guide.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added tests to cover my changes.
All new and existing tests passed.

I provide my contribution under the terms of the license of this repository and I affirm the Developer Certificate of Origin.

@m3nu @real-yfprojects

bigtedde · 2023-09-06T04:09:26Z

Current TODO:

~~Refactor profile selector from ComboBox to a QListWidget (or something else?)~~
~~Move Vorta/Borg versions + bug report link to "about" (maybe more items here, like link to Borg Docs?)~~
Create Repository management tab and decide what should go here
Create new tests for sidebar + settings panel, refactor old tests.

Anything else that should be added, or suggestions for improving the sidebar design/implementation please let me know :)

…ified profile add button

m3nu · 2023-09-06T05:31:31Z

Screenshot looks good and there is space for a full list of profiles. 👍

real-yfprojects · 2023-09-06T11:52:36Z

As I said I dought we need a profile management tab but a repe management tab could be useful.

Can you make it so that the settings button has different states when the settings are open or closed?

bigtedde · 2023-09-06T16:27:05Z

As I said I doubt we need a profile management tab but a repo management tab could be useful.

What features would we like to see in the repo management tab? Maybe we move the repo actions from the archive tab to here?

Can you make it so that the settings button has different states when the settings are open or closed?

Sure - maybe have the button label change to " <- Home " or "Exit Settings"? Or simply fill it in with a background color?

bigtedde · 2023-09-07T01:26:27Z

Here is the latest update. I created the "about" tab UI and changed the setting button when toggled. Thoughts?

m3nu · 2023-09-07T10:44:12Z

I think you're on the right track. My thoughts:

Set the profile list to expand all the way, so there is no vertical scrolling (same as similar Apple windows)
Closing settings isn't needed IMO. When one clicks a profile, settings are gone anyways.
Button Settings and then tab Settings is confusing. Maybe we want to have a few tabs for different subcategories of settings?
What's "Repository Management" for? If this is a new feature, I'd keep it for later.

real-yfprojects · 2023-09-07T14:14:28Z

When one clicks a profile, settings are gone anyways.

When I tested this PR that wasn't the case.

real-yfprojects · 2023-09-07T14:16:24Z

Button Settings and then tab Settings is confusing.

Maybe Misc and Settings?

What's "Repository Management" for? If this is a new feature, I'd keep it for later.

It would be. The tab would resolve #1198.

bigtedde · 2023-09-07T18:01:34Z

Set the profile list to expand all the way, so there is no vertical scrolling (same as similar Apple windows)

I may need additional clarity here, or maybe an example of the Apple window you have in mind? I can allow the profile list to dynamically expand further down to accommodate more profiles, and this would cover most use cases, however with enough profiles there would inevitably be some vertical scrolling.

Closing settings isn't needed IMO. When one clicks a profile, settings are gone anyways.

This is not the current behavior, but I could implement it. I'm open to other ideas too, maybe a 'back' or 'home' button in the top left of the interface that always takes users back to the repository tab?

Button Settings and then tab Settings is confusing. Maybe we want to have a few tabs for different subcategories of settings?

@real-yfprojects idea of a MIsc button and then a Setting panel could solve this overlap.

real-yfprojects · 2023-09-07T20:55:58Z

This is not the current behavior, but I could implement it.

That would be great!

I may need additional clarity here

You can make the list expand automatically filling the room that currently resides between the list and the settings button.

bigtedde · 2023-09-07T21:00:31Z

This is not the current behavior, but I could implement it.

That would be great!

I may need additional clarity here

You can make the list expand automatically filling the room that currently resides between the list and the settings button.

I implemented both of those features this morning. Check it out and LMK when you think!

Also, regarding the repo management tab - did we want this to be a separate PR, or combine it here?

real-yfprojects · 2023-09-08T20:48:25Z

Can you swap the trash can through a minus sign? And right align the plus and minus sign while left aligning the others?

real-yfprojects · 2023-09-10T09:51:01Z

Also, regarding the repo management tab - did we want this to be a separate PR, or combine it here?

I would rather leave that for a separate PR.

Regarding the about view can you add the following?

Copyright
License
Link Repo and Docs

bigtedde · 2023-09-10T17:27:24Z

Can you swap the trash can through a minus sign? And right align the plus and minus sign while left aligning the others?

Done 👍

Regarding the about view can you add the following?

Copyright

License

Link Repo and Docs

Certainly.

What should I link to for copyright? #403 suggests linking to contributors?
For license, should I link to GitHub or open the license.txt file?

real-yfprojects · 2023-09-12T09:36:33Z

  <one line to give the program's name and a brief idea of what it does.>

Copyright (C) 2018-2020 Manuel Riel and Vorta contributors (see <CONTRIBUTORS.md>)

     Vorta is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, version 3 only.

    This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

    You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.

Then you could also add one of the GPL logos and a python logo.

bigtedde · 2023-09-26T16:19:36Z

After talking with @m3nu, a few ideas came up for discussion:

keeping the profile selector a set height (400px) instead of increasing/decreasing in size based on number of profiles.
renaming the "misc" button to a more explicit "Settings / About" button
removing the "repository management" tab from this PR, out of scope
Adding the contributions, license, and repo/docs links info to the about tab
Have the style of profile action buttons mimic the style found here:

@real-yfprojects Do you have any feedback/ideas for these topics?

real-yfprojects · 2023-09-29T17:54:40Z

keeping the profile selector a set height (400px) instead of increasing/decreasing in size based on number of profiles.

Actually, I would make the size dependent on the window size. Basically like it is done in the screenshot of the network dialog you shared.

4. Adding the contributions, license, and repo/docs links info to the about tab

Didn't we already decide to do that?

5. Have the style of profile action buttons mimic the style found here:

Not sure how this will look in Qt, but feel free to share a screenshot once possible.

bigtedde · 2023-10-16T04:16:38Z

@m3nu Added changes:

rearranged profile action buttons.
added a blue background to button when user is in the "settings / about" tab.
selecting the current profile will now return to the main screen if the settings / about tab is open.

Next I will work to allow changing the size between profile list and the rest of the app, and then I will write tests for the new features.

m3nu · 2023-10-16T14:38:24Z

Hey Ted, thanks for those latest changes. I think it's coming along nicely and gives it a new and polished look.

Regarding the button state, we need to be careful with colors due to different skins in Qt, as well as dark/light node. Maybe just make the button font bold, if that's possible? I couldn't find a suitable "button active" state in the docs.

bigtedde · 2023-10-18T02:58:57Z

Maybe just make the button font bold, if that's possible?

I implemented this change 👍

bigtedde · 2023-10-20T03:27:01Z

Marked as ready for review. Slightly reduced scope from the original outline, but this profile sidebar should make our users happy.

After this is merged into master, I will create a follow-up post about features that remain to be implemented.

m3nu · 2023-10-20T09:42:03Z

Work well here. Can be merged. What do you think @real-yfprojects @Hofer-Julian ? Some screenshots:

m3nu · 2023-10-20T10:01:03Z

Is close_X.svg still used? If not it can be removed from the PR.

Where is settings_wheel.svg from? It has some comments with "SVG mixer" ? If it's from a random site, it would be better to use a similar icon from ForkAwesome or Google Material. Since we just cleaned up our icon licenses. More here: https://vorta.borgbase.com/contributing/#icons

real-yfprojects · 2023-10-20T17:59:09Z

Looks pretty cool! That's exactly what I had in mind when added this task to the ideas page.

real-yfprojects · 2023-10-20T18:25:09Z

src/vorta/views/utils.py

+def get_colored_pixmap(icon_name, scaled_height):
+    """
+    Return SVG icon in the correct color.
+    """
+    with open(get_asset(f"icons/{icon_name}.svg"), 'rb') as svg_file:
+        svg_str = svg_file.read()
+    if uses_dark_mode():
+        svg_str = svg_str.replace(b'#000000', b'#ffffff')
+    # Reduce image size to specified scaled height
+    svg_img = QImage.fromData(svg_str).scaledToHeight(scaled_height)
+
+    return QPixmap(svg_img)


It would make sense to alter get_colored_icon so that it uses this new method.

I added a couple optional args in get_colored_icon to accomplish this 👍

Hofer-Julian

Screenshots look good to me

bigtedde · 2023-10-21T03:21:08Z

@m3nu removed extra icon, switched to Material for the settings_wheel, and removed the extra utils function @real-yfprojects pointed out. Please let me know if there is anything else to button up before merge 👍

src/vorta/views/utils.py

m3nu · 2023-10-22T14:14:14Z

Nothing left to add from me. If nobody objects, I'll merge this and do a new beta-release to get even broader testing.

Thanks all!

m3nu · 2023-10-24T08:37:53Z

This concludes @bigtedde's GSoC projects. Thanks again for the great work and for extending to finish everything.

sidebar created, settings tab created

8e6aaff

Refactored profile combobox to a list, added settings wheel icon, mod…

2155997

…ified profile add button

added aboutTab

38467c1

bigtedde added 3 commits September 6, 2023 20:26

cleanup XML

6c6918a

toggle_settings_tab streamlined

9acd029

toggle_settings_tab streamlined

e756cbd

bigtedde added 3 commits September 7, 2023 11:35

dynamically resize profile selector

58b95de

settings button renamed to Misc, change all occurences

d14a59c

profile selection closes misc tab

51e47e4

Merge remote-tracking branch 'upstream/master' into sidebar

58e97b2

swap trash can for minus sign, right allign add/remove

cee91aa

remove repo management tab, resized buttons, rename misc button

b03f725

bigtedde changed the title ~~Implement Profile Sidebar and New Setting Interface~~ PR: Implement Profile Sidebar and New Setting Interface Sep 26, 2023

bigtedde added 2 commits October 15, 2023 12:33

clicking same profile will now toggle settings tab visability

45c4c2f

added highlight to 'settings / about' button to indicate selected state

46b2b1e

removed setting button background color, added bold upon selection

0fab569

bigtedde added 2 commits October 17, 2023 21:08

began test_about module

d1a21e0

fixed aboutTab test

8003325

bigtedde marked this pull request as ready for review October 20, 2023 03:24

bigtedde added 2 commits October 19, 2023 20:31

removed test_about - was not adding value.

fea5086

simplified about_tab __init__

2051bab

m3nu previously approved these changes Oct 20, 2023

View reviewed changes

real-yfprojects reviewed Oct 20, 2023

View reviewed changes

Hofer-Julian previously approved these changes Oct 20, 2023

View reviewed changes

bigtedde added 2 commits October 20, 2023 20:08

switched to Material setting wheel, removed unused icon

2c72dd5

rewrote get_colored_icon, removed get_colored_pixmap

98af58b

bigtedde dismissed stale reviews from Hofer-Julian and m3nu via 98af58b October 21, 2023 03:19

real-yfprojects reviewed Oct 21, 2023

View reviewed changes

src/vorta/views/utils.py Outdated Show resolved Hide resolved

revert scaled height default

be0258e

m3nu approved these changes Oct 24, 2023

View reviewed changes

m3nu merged commit 071dd86 into borgbase:master Oct 24, 2023
11 checks passed

m3nu mentioned this pull request Jan 11, 2024

FR: Implement Profile Sidebar and new Settings interface #1677

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PR: Implement Profile Sidebar and New Setting Interface #1809

PR: Implement Profile Sidebar and New Setting Interface #1809

bigtedde commented Sep 6, 2023 •

edited

bigtedde commented Sep 6, 2023 •

edited

m3nu commented Sep 6, 2023

real-yfprojects commented Sep 6, 2023

bigtedde commented Sep 6, 2023 •

edited

bigtedde commented Sep 7, 2023

m3nu commented Sep 7, 2023

real-yfprojects commented Sep 7, 2023

real-yfprojects commented Sep 7, 2023

bigtedde commented Sep 7, 2023

real-yfprojects commented Sep 7, 2023

bigtedde commented Sep 7, 2023 •

edited

real-yfprojects commented Sep 8, 2023

real-yfprojects commented Sep 10, 2023

bigtedde commented Sep 10, 2023 •

edited

real-yfprojects commented Sep 12, 2023

bigtedde commented Sep 26, 2023

real-yfprojects commented Sep 29, 2023

bigtedde commented Oct 16, 2023

m3nu commented Oct 16, 2023

bigtedde commented Oct 18, 2023

bigtedde commented Oct 20, 2023

m3nu commented Oct 20, 2023

m3nu commented Oct 20, 2023

real-yfprojects commented Oct 20, 2023

real-yfprojects Oct 20, 2023

bigtedde Oct 21, 2023

Hofer-Julian left a comment

bigtedde commented Oct 21, 2023

m3nu commented Oct 22, 2023

m3nu commented Oct 24, 2023

PR: Implement Profile Sidebar and New Setting Interface #1809

PR: Implement Profile Sidebar and New Setting Interface #1809

Conversation

bigtedde commented Sep 6, 2023 • edited

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Most Recent Demo:

Types of changes

Checklist:

bigtedde commented Sep 6, 2023 • edited

m3nu commented Sep 6, 2023

real-yfprojects commented Sep 6, 2023

bigtedde commented Sep 6, 2023 • edited

bigtedde commented Sep 7, 2023

m3nu commented Sep 7, 2023

real-yfprojects commented Sep 7, 2023

real-yfprojects commented Sep 7, 2023

bigtedde commented Sep 7, 2023

real-yfprojects commented Sep 7, 2023

bigtedde commented Sep 7, 2023 • edited

real-yfprojects commented Sep 8, 2023

real-yfprojects commented Sep 10, 2023

bigtedde commented Sep 10, 2023 • edited

real-yfprojects commented Sep 12, 2023

bigtedde commented Sep 26, 2023

real-yfprojects commented Sep 29, 2023

bigtedde commented Oct 16, 2023

m3nu commented Oct 16, 2023

bigtedde commented Oct 18, 2023

bigtedde commented Oct 20, 2023

m3nu commented Oct 20, 2023

m3nu commented Oct 20, 2023

real-yfprojects commented Oct 20, 2023

real-yfprojects Oct 20, 2023

Choose a reason for hiding this comment

bigtedde Oct 21, 2023

Choose a reason for hiding this comment

Hofer-Julian left a comment

Choose a reason for hiding this comment

bigtedde commented Oct 21, 2023

m3nu commented Oct 22, 2023

m3nu commented Oct 24, 2023

bigtedde commented Sep 6, 2023 •

edited

bigtedde commented Sep 6, 2023 •

edited

bigtedde commented Sep 6, 2023 •

edited

bigtedde commented Sep 7, 2023 •

edited

bigtedde commented Sep 10, 2023 •

edited