Toolbar and Navigator reorganization

I noticed that extra space in your navigation icons.

When I made the three different options above, all I altered was hiding and unhiding the sidebar options in plugin manager, closing and then restarting Gramps. The space needed was automatically set by Gramps.

The Pane that actually holds the database record information can be resized. The line between the navigation icons and the pane of database information can be slid left and right.

New version available here:

I took the bar out of its cage :slight_smile: and I reversed the position of the toolbar and the horizontal bar for categories selection’s .

Best regards.

1 Like

New version available here :

Toolbar and Navigator reorganization - #56 by zebulon

Best regards.

New version :

  • popup menus replaced with popover menus
    gramps-popover-menu
  • combined trees managment button and recent trees list
  • opened tree name removed from the recent trees list
    gramps-combined-managment-recents-trees-menu

Files are here :

Toolbar and Navigator reorganization - #56 by zebulon

Best regards.

Just an observation. I do not make it to curb your efforts to enhance the Gramps environment for yourself and others.

Having an Icon on the tool bar offers one click navigation to an activity that is available navigating the Menu structure. Doesn’t burying a set of icons under a grouping icon defeat this purpose? Have you not just created another menu scheme, one just using icons?

I added the Preferences icon making it a one-click activity. Placing it under a Tools icon again makes it two clicks.

Again. I offer this only as an observation, not as a criticism.

First of all don’t worry about “observation, criticism, …” if I wasn’t open to that I wouldn’t post here :slight_smile:

So concerning your remark you’re right there is a one click gain placing those icons directly inside the toolbar versus inside a menu but both have gain about menu bar navigation as shortcuts.

The goal here for the toolbar was to clearly separate what comes from categories’s views and what comes from the rest.
That offers a gain of readability and a gain of available space for Views and their contents (this space being the true navigation part of the toolbar).
And the contents included in the toolbar’s menus being used more sporadically and less intensely than what comes from the Views I don’t think that the additional click to access is handicapping

Speaking about menu scheme you’re half right as I was thinking about a Menu bar translation to a menu like eg those used in current web browsers (the current hide/show menu bars button would display this menu).

Best regards.

To my mind, preferences are things that should be accessed only relatively rarely, so they don’t need an always visible icon. That’s a waste of precious space.

For navigation, I’d like to see:

  1. Keyboard options that all work all the time
  2. A set of icons
  3. Optional labels on the icons
  4. A way to hide the icons
1 Like

New version here :

Toolbar and Navigator reorganization - #56 by zebulon

Includes a “Dynamic Navigator” which is a mix of display button modes with and without labels.
This adds an additional display option for small screens since the width occupied by the buttons when the text of the button labels are visible depends on the text (and therefore on the language used).

To test this “Dynamic Navigator” you must have selected “Show text label beside Navigator buttons” in Preferences’s Display tab AND have modified in categogysidebar.py the line:
self.use_dyna_nav = False and use_text
in
self.use_dyna_nav = True and use_text

When the mouse hovers a button it reveals the button label.
If you select a button, it remains displayed.

Best regards.

I have updated my feature request pull to have the Plugins and Preferences icons hide / unhide.

1 Like

New files here :

Toolbar and Navigator reorganization - #56 by zebulon

Navigator mode configuration context menu (icons only, text only, icons and text, dynamic navigator +
big or small icons).
To access menu right click a button inside the Navigator.
Do your choices and restart Gramps after.

Best regards.

1 Like

Now, no restart is needed, you can do changes inside the same Gramps session.

here :
\https://gramps.discourse.group/t/toolbar-and-navigator-reorganization/916/28?u=zebulon

Best regards.

1 Like

(GrampsAIO64-5.1.3-2, Windows 10, Adwaita dark theme)

[Edited december 28 2020 : border around Views in toolbar + colors for dark and normal theme]

1 - Backup categorysidebar.py, navigator.py, viewmanager.py, grampsgui.py , dbman.py and config.py
2 - Before replacing the following files display the Navigator and select Category as view.
3 - Get the 7 modified files and replace them in your Gramps installation.
(you can see modifications by performing a text search on “###” in these files)
4 - Run Gramps
5 - Take in place your original files after test.

The 7 modified files are in the zip file here (see next message >Toolbar and Navigator reorganization - #56 by zebulon):

Install icons for Plugin manager and Preferences available here (only svg files are required) :

Add toolbar icons for Preferences and Plugin Manager by DaveSch-gramps · Pull Request #1139 · gramps-project/gramps · GitHub

To modify categories’s buttons order, separators and colors used in Navigator see the first change in file categorysidebar.py.

  • Toolbar and horizontal categories’s bar positions are inverted.
  • A button to show/hide menu bar and another one to show some tools are added to the toolbar.
  • Popup menus replaced with popover menus
  • Combined tree managment button and recent trees list menu
  • Opened tree name removed from the recent trees list
  • Added a Dynamic Navigator mode for smalls screens
  • Navigator mode configuration context menu (icons only, text only, icons and text, dynamic navigator + big or small icons).
    To access menu right click a button inside the Navigator.
  • Added a Compact menu button (see picture below)
  • If a category has a single view, the view is shown in toolbar and removed in Display menu (see picture below)
  • If you have hide the menu bar and navigator the navigator is shown after restarting Gramps.
  • Colors set for dark or normal theme (if you change theme configuration during a Gramps session you need to restart Gramps for this take effect)
  • Added a border around Views in toolbar (to be clearly identified as a selector, see picture below)

Best regards.

3 Likes

(GrampsAIO64-5.1.3-2, Windows 10, Adwaita dark theme)

[updated january 1 2021]

1 - Backup categorysidebar.py, navigator.py, viewmanager.py, grampsgui.py ,displaystate.py, dbman.py, uimanager.py, and config.py
2 - Before replacing the following files display the Navigator and select Category as view.
3 - Get the 8 modified files and replace them in your Gramps installation.
(you can see modifications by performing a text search on “###” in these files)
4 - Run Gramps
5 - Take in place your original files after test.

The 8 modified files are in the zip file here :

https://www.cjoint.com/c/KAbvmzBlPbv

Install icons for Plugin manager and Preferences available here (only svg files are required) :

Add toolbar icons for Preferences and Plugin Manager by DaveSch-gramps · Pull Request #1139 · gramps-project/gramps · GitHub

To modify categories’s buttons order, separators and colors used in Navigator see the first change in file categorysidebar.py.

  • Toolbar and horizontal categories’s bar positions are inverted.
  • A button to show/hide menu bar and another one to show some tools are added to the toolbar.
  • Popup menus replaced with popover menus
  • Combined tree managment button and recent trees list menu
  • Opened tree name removed from the recent trees list
  • Added a Dynamic Navigator mode for smalls screens
  • Navigator mode configuration context menu (icons only, text only, icons and text, dynamic navigator + big or small icons).
    To access menu right click a button inside the Navigator.
  • Added a Compact menu button (see picture below)
  • If a category has a single view, the view is shown in toolbar and removed in Display menu (see picture below)
  • If you have hide the menu bar and navigator the navigator is shown after restarting Gramps.
  • Colors set for dark or normal theme (if you change theme configuration during a Gramps session you need to restart Gramps for this take effect)
  • Added a border around Views in toolbar (to be clearly identified as a selector)
  • Moved all previous stuffs from Toolbar to Navigator bar … Toolbar is freed and can be used for stuffs relative to views only.
  • Added a button in the toolbar to show/hide Sidebar and Bottombar : not shown if no needed for the view (currently only Dashboard is concerned) (see picture below)
  • Added a button in Tools menu to open Books (see picture below)

gramps-show-hide-sidebar-bottombar

gramps-open-books

Best regards.

1 Like
  • moved to titlebar : compact menu, tools ans status bar contents (including its progress bar and warn button) :

https://www.cjoint.com/c/KAkrh6dKWxv

Best regards.

How does this make the UI easier and faster to use?

It gives more mouse movement, more movement of the hands when working for those who use mouse instead of keyboard shortcuts…?
It also makes a smaller target for the mouse cursor?

A simple test gave me 34 second longer time for a “normal” workflow with mouse usage vs. the original UI…

I’m just wonder how this can improve my workflow?

Thank you for your reply and your test (on Windows ?).

I couldn’t answer you or agree/disagree without further details.
So could you be more precise if you have time?

  • “more mouse movement”
    When and / or where?
  • “smaller target for the mouse cursor”
    Where?
  • “A simple test gave me 34 second longer time for a normal workflow”:
    How did you test?
    What’s your “normal” workflow?

Best regards.

I think I can see some of what he’s experiencing even without a workflow to replicate.

Assuming that, as English reading (left-to-right, top-to-bottom) the neutral mouse position is going to be in the upper left. Most of your mouse action should be clustered in the upper left too. But this layout has got the most necessary functions while doing data entry (the add, edit, delete icons) in the middle of the toolbar.

By this logic, the scrollbars would be more efficient at the top & left. (As should the OK, Cancel. But our intuition tells us that completion of a document is at lower right.) But a GUI config THAT big is a bit beyond scope.

And unfortunately, touchscreen interface is inverted. Neutral position is lower right… to avoid having your finger obscuring the content.

Thank you both for your answers.
I agree with you.
I must say I’m focused on the organization at this time, must recognized that something ennoyed me at the use and realized it’s what @emyoulation described very well and what @StoltHD exposed.

I set that on my todo list (I never would have thought about it).

If you right click a category button you can check “Big icons” and select “Icons” or “Icons and text”.
eg:


You give me the idea to add a “Big text” option … I set that on my todo list.

So, to move categories buttons to the left at the begining od categorysidebar.py change self.add_sep_start to read :
self.add_sep_start = 0

To move toolbar items to the left and organize them move blocks inside UIDEFAULT xml content inside grampsgui.py.

I update the link with those changes.

Best regards.

2 Likes

To get that just add :

scrollwindow.set_placement(Gtk.CornerType.BOTTOM_RIGHT)

after line 179 in \gramps\gui\views\listview.py

and

self.set_placement(Gtk.CornerType.BOTTOM_LEFT)

after line 602 in \gramps\gui\widgets\grampletbar.py

Best regards.

1 Like

The problem is not only the size of the buttons, even though that has an impact, much of the “Workflow” part of the problem will be the mouse movement it self, you need to move you hand up and then to the right<->left when you need to target something in the menu, while in the sidebar to the left, you only need to move your “mouse” hand to the left and down, since most movement of the mouse to the left also include some movement up, its a natural arc.
The larger the screen, the more movement, and for the "Up - left/right) movement, you will moste likely need to move your whole arm to be able to hit the meny buttons.

Just be clear that I’m not against more use and organizing of the meny real estate, it’s just that I think you need to think about all the movements that will be involved using the buttons for those that doesn’t use keyboard shortcuts for most of their GUI usage.

Just test it out, it’s simple, what are the most natural mouse movement for you when you move your hand away from the keyboard, on to the mouse, and shall move the mouse to somewhere on the screen, is it UP and then L/R, or is it LEFT and then Down.
Also remember that in most cases, you mouse cursor will be somewhere in the lower right after an edit… and that to have a “healthy” movement it’s recommended to not lift you mouse to repositioning it.

Hope this help a little…

PS. I only comment from my own experience, I’m in no way an “expert”…

1 Like