这是indexloc提供的服务,不要输入任何密码
Skip to content

UI Feature: Improve toolbox flow layout #1916

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

Merged

Conversation

MrStevns
Copy link
Member

@MrStevns MrStevns commented Apr 29, 2025

I've given our FlowLayout class an overhaul.

Pure row height calculation has been moved into its own separate function, rather than mixing everything with the "testOnly" flag. The justified logic has been updated such that it will always try to cram as many items on a line as possible, but still be constrained to a minimum spacing.

The result of that looks like this:

Before After
old-flowlayout new-flowlayout

The sizing logic for the Tools widget has been updated as well. If there's only one row, then the items will be aligned centered and otherwise the alignment will change to justified, until all items has been layout. When all items has been layout horizontally, the flow layout will default to centered placement again.

I've also introduced a new ToolBoxLayout class in order to change the alignment of the last line, as it will otherwise align justified with no concern of aligning to lines above.

With this PR, combined with #1913, we will be able to shrink to the following.
image

Note that due to how QDockWidget sizing works, in order to get more control of how the toolbox is layout, I had to move everything into a container widget.

Because I would like to change the alignment of the items on the last line

Also fixed a bunch of layout spacing inconsistencies
This happens because they will appear next to each other initially but then hidden away. The consequence of that
is the dockwidget sizes itself based on that, even if it they are removed right after.
@MrStevns MrStevns added the UI Related to the visual appearance of the program label Apr 29, 2025
@MrStevns MrStevns changed the title Feat: Improve toolbox flow layout UI Feature: Improve toolbox flow layout Apr 29, 2025
@chchwy chchwy added this to the 0.8.0 milestone Jun 3, 2025
@chchwy
Copy link
Member

chchwy commented Jun 3, 2025

I just played this PR around on my Macbook and found that my toolbox cannot be shrunk to the minimum width in the "after" GIF because of the title bar.

圖片

@MrStevns
Copy link
Member Author

MrStevns commented Jun 3, 2025

Thanks for testing Matt

Based on the image you provided, are you certain you've pulled the latest changes?
it shouldn't be possible to have the items aligned that far to the left, instead it should align to center.
I've just re-tested the branch and it still works as expected for me.

Although the layout can be a deciding factor in how much you can shrink, with a similar Layout i am able to get:
image

And with scrollbar:
image

@chchwy
Copy link
Member

chchwy commented Jun 3, 2025

Ah! I performed a clean rebuild and now I can see the minimum width getting smaller.
圖片

@github-project-automation github-project-automation bot moved this from Needs Review to Approved in Pull Request Priority Jun 3, 2025
@chchwy
Copy link
Member

chchwy commented Jun 3, 2025

Looks good to me!

@MrStevns MrStevns merged commit bd54b72 into pencil2d:master Jun 3, 2025
8 checks passed
@github-project-automation github-project-automation bot moved this from Approved to Merged in Pull Request Priority Jun 3, 2025
chchwy pushed a commit to chchwy/pencil2d that referenced this pull request Jun 5, 2025
* FlowLayout: rewrite for maintainability sake

* Introduce customised flow layout for toolbox

Because I would like to change the alignment of the items on the last line

Also fixed a bunch of layout spacing inconsistencies

* Fix center alignment issue being off by one item

* Move Toolbox into own widget for more control of sizing

* Fix dock widget expansion caused by bucket and camera tools being layout

This happens because they will appear next to each other initially but then hidden away. The consequence of that
is the dockwidget sizes itself based on that, even if it they are removed right after.

* Add missing license header

* Cleanup
# Conflicts:
#	app/src/toolbox.cpp
#	app/src/toolbox.h
#	app/ui/toolboxwidget.ui
#	core_lib/core_lib.pro
chchwy pushed a commit that referenced this pull request Jun 5, 2025
* FlowLayout: rewrite for maintainability sake

* Introduce customised flow layout for toolbox

Because I would like to change the alignment of the items on the last line

Also fixed a bunch of layout spacing inconsistencies

* Fix center alignment issue being off by one item

* Move Toolbox into own widget for more control of sizing

* Fix dock widget expansion caused by bucket and camera tools being layout

This happens because they will appear next to each other initially but then hidden away. The consequence of that
is the dockwidget sizes itself based on that, even if it they are removed right after.

* Add missing license header

* Cleanup
# Conflicts:
#	app/src/toolbox.cpp
#	app/src/toolbox.h
#	app/ui/toolboxwidget.ui
#	core_lib/core_lib.pro
@chchwy chchwy mentioned this pull request Jun 19, 2025
32 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
UI Related to the visual appearance of the program
Projects
Development

Successfully merging this pull request may close these issues.

2 participants