Add create folder icon

[adamscott]

Adds the missing "create folder" icon and replaces the "Create folder" text buttons of the FileDialog, the EditorFileDialog, and the ProjectDialog to an icon button.

New icon (click for better preview):

I opened the folder icon in Inkscape ( editor/icons/Folder.svg), traced the margin around the plus sign from the new file icon ( editor/icons/New.svg), did a difference operation on the folder with the trace, exported it to SVG, then I optimized it with SVGOMG.

Before	After

As you can see, the top bar occupies now less real estate and it makes the file dialogs more intuitive to use.

Relates to #88827

Edits

• 2024-02-26
  • Reverted the "Create Project" dialog edits.

[ajreckof]

Love it!
icon is clear and takes less place. Moreover it goes better with other button next to it that are icons only.

[Mickeon]

Desirable it would seem like.
Although I would keep both the name AND the icon for the Create New Project popup.

[MewPurPur]

Also, I agree with Micky.

[adamscott]

Desirable it would seem like. Although I would keep both the name AND the icon for the Create New Project popup.

I don't agree. The button would be even larger than usual. And there's a tooltip if the user doesn't know what the icon does.

No objection in modifying the icon tooltip though.

[MewPurPur]

Even with the current UI, there is enough space for many more buttons without getting in the way of project names of realistic size. Turning text into simple buttons is a compromise used to simplify complex UI and get more space, neither of which is a problem here. The compromise is that it reduces discoverability and clarity

[adamscott]

Even with the current UI, there is enough space for many more buttons without getting in the way of project names of realistic size. Turning text into simple buttons is a compromise used to simplify complex UI and get more space, neither of which is a problem here. The compromise is that it reduces discoverability and clarity

Again, I don't agree. Either we keep the text only button (which is quite ugly), or we set the icon only button. Especially since icon only buttons are flat and text buttons aren't. Why having redundancy for such a small action?

No, icons aren't just to simplify complex UI and get more space. It's about UX. I think the button as it is is way too verbose for it's own good.

There's a reason shy road panels are using pictograms instead of text.

[adamscott]

As discussed on the Godot Developer Chat:

I think the problem here is the fact that "Create folder" doesn't belong here.
What does it have to do with "Project Name"?

@KoBeWi then pointed out #56420

[akien-mga]

I'm also concerned about this change to the Create Project dialog.

The current UX is bad, and creating a folder is almost always required. Otherwise, it's very easy to inadvertently create a project in a folder with pre-existing contents (e.g. your home/documents folder), leading to importing all your personal images, etc. and littering things with .import files and hidden folders.

So I wouldn't make this button smaller before we fix the current UX issues we have.

The changes to FileDialog are fine on the other hand.

[adamscott]

I'll remove the icon replacement for the Create Project UI.

Removed!

[Calinou]

Tested locally, it works as expected.

[akien-mga]

Thanks!

[adamscott]

@Mickeon @MewPurPur @akien-mga Seems that I was wrong and you were right. My friend, who is a UX designer, sent me this article on icon usability from the Nielsen Norman Group (UX research group):

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. (And even if you’re using a standard icon, it’s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences or constraints.)

[...] stripping these icons of text labels renders them completely meaningless and is counterproductive to the goal of providing easy access to content.

So yeah, maybe we should add the folder icon next to the "Create Folder" button.