Page MenuHome

UI Demonstration: File Manager Thumbnail View
AbandonedPublic

Authored by Harley Acheson (harley) on Wed, Jul 31, 6:15 AM.
Tokens
"Like" token, awarded by dgsantana."Like" token, awarded by billreynish."Like" token, awarded by duarteframos."Like" token, awarded by amonpaike."Love" token, awarded by erickblender."Like" token, awarded by tintwotin."Love" token, awarded by EitanSomething.

Details

Summary

Just an experiment. Not sure if there is anything here we might want to use...

I've always felt that the large "Thumbnails" view in the File Manager was a bit wonky. The difference in sizes between the file and folders versus the previews make it an awkward read. The vertical alignment is clumsy with the names of folders and most documents being far away from the icon. And so much wasted space in vertical rows that are unnecessarily large.

The following image shows the changes in this patch. The top showing how it looks now, the bottom after the patch is applied (and with one image file replaced in the source):

The preview icons (folders and files) are increased from 48 to 96 pixels. The resulting image in the source is still only 384x384 since there are so few images on the sheet. But it does give more detail and allows for better scaling without jaggedness. Here I am also making the folders have a tighter bottom bend and are made to look a bit thinner. And color is added for better visual separation between folder and files since they aren't really siblings, but more like branches versus leaves of a tree.

The document icon is given a slightly smaller corner bend proportionally, the top-left gap closed, and a background added to give it some weight. The idea is to make it look less like something disabled.

Thumbnail images (blender files, images, videos, and fonts) are made rectangular landscape (Max 128x96), rather than square. It is the same amount of space for the file name but it quite drastically decreases the row spacing so you get more information on the page. The sizes and spacing makes for much more consistent rows and the names are never far from the associated icon.

Dropshadows are added to movie thumbnails to match those of image thumbnails. The small "document type" icon is placed in the center of the larger document icon, rather than off to the side. Font preview images no longer show the "F" on top of the font preview text. Font preview text reduced to three lines to better fit the preview size.

The captures above don't really do it justice; best to compile the patch and give it a spin yourself. To do so also requires that you replace "..blender/release/datafiles/prvicons.png" with the following image:

Diff Detail

Repository
rB Blender

Event Timeline

I don't mind the icons to be bigger or have drop shadows, but I think we should just keep the same icons and make them bigger or tweak proportions where needed. These new ones do not fit the style of the Blender UI.

Brecht Van Lommel (brecht) requested changes to this revision.Wed, Jul 31, 12:22 PM
This revision now requires changes to proceed.Wed, Jul 31, 12:22 PM

The increased size is certainly a benefit, with more space for the file type indicators. I also think it's nice that the folders fold is more snarp, although that is more of a subjective preference.

Also, the semi-solid file icons work well I think - it's easier to read this way when the file as whole is separated from the background.

However, the very prominent and bright blue folder icons do distract from the contents here. Next to images, they are overpowering.

It might make sense for @Andrzej Ambroz (jendrzych) to take another look at the file and folder icons to increase their size. and do other tweaks.

@William Reynish (billreynish) : increased size is certainly a benefit, with more space for the file type indicators....semi-solid file icons work well I think

I mostly just wanted to see if anyone else saw any benefit in these types of changes to "Thumbnails" view. For me, with just some small tweaks this would be the primary way I would find most files, because of the previews. I might go into "details" only if I needed to confirm dates.

However, the very prominent and bright blue folder icons do distract from the contents here. Next to images, they are overpowering.

It is a very big change. I like the color in general, but lack the skills to make it less distracting. LOL.

It might make sense for @Andrzej Ambroz (jendrzych) to take another look at the file and folder icons to increase their size. and do other tweaks.

For sure. I'm certain he could do wonders with them. I do prefer the folders to not have the current wide bottom bend that makes them look too thick. And larger sizes definitely require more detail in them.

@Brecht Van Lommel (brecht) - This patch also corrects a bit of an error that I wanted to ask about. The "document" icons used to be 9 or so separate images on that sheet. But with 2.80 we have changed to using a single document image with overlayed smaller icons to indicate the type. But we didn't actually change that in code. So the current prvicons sheet contains 9 identical document images and all are being used rather than just one. In this patch I collapsed them to one, which gives us room on the sheet for more. I'd love to use two of these to represent attached and network drives so we could (eventually) have a computer root. But my (other) hope and dream is to use four of these places for color images I could use on dialogs. As in icons to the left of "are you sure?" and "do you want to save?" popups. Would that be an acceptable use for this, or would I need to find somewhere else to put them?

An attempt to see if any objections to color folders were, at least in part, due to OS familiarity. So this version introduces Windows-esque Folder images for PC and Mac-esque Folders for Apple users.

In the following capture, the top is how a Windows user would see my sample folder, while the bottom is how a Mac user would see the same folder:

As mentioned earlier, not only do you have to apply this patch, but you must also replace "..blender/release/datafiles/prvicons.png" with the following image before compiling:

Increasing folder icon size is a big plus for me visually, it makes them much more coherent and harmonious.
As for the icon design itself the second one seems much more adequate for the current UI, but I'd go with a monochrome version of it, following the current UI button icons guidelines, so it could eventually be themable.

@Duarte Farrajota Ramos (duarteframos) - but I'd go with a monochrome version of it...

I'm sure @Andrzej Ambroz (jendrzych) could whip something up that is quite nice that would work great. Something like the blue version might work as it only uses one color, so we could have it monochrome and then tint it a themed color when used.

Monochrome will probably look the best and offer the most flexibility

@Eitan (EitanSomething) - Monochrome will probably look the best and offer the most flexibility

Yes, that's probably the big takeaway. That @Andrzej Ambroz (jendrzych) could make something simple and classy, monochrome, but with some added details to make use of the increased size. Then we can tint it with a theme color. Although then I'd have to figure out how to tint it. LOL

But I definitely like this display mode a lot more with these sizes, proportions, and spacing. Could use a few tweaks, but otherwise I would use it as my primary display mode when selecting.

I quite like this native OS style of folders. (Not a fan of monochrome stuff)

If there was a poll I'd vote for this. 🙂

If the other icons are updated with color the colored folders would no longer look out of place.

I find it quite strange to try and replicate the OS folder icons specifically but not files, or anything else. Plus, that’s quite a hacky way to do it, which won’t correctly update when the OS folders change. On Windows, I believe the folder icons also change depending on the contents, which this won’t do.

This seems like an odd half way solution.

Additionally, it’s not clear what to do for all the various Linux distros.

IMO we should just create a nice new larger and simpler folder icon that fits consistently with the file icons and leave it at that. This would fit better with our other icons and be much easier to maintain.

@William Reynish (billreynish) : won’t correctly update when the OS folders change. On Windows, I believe the folder icons also change depending on the contents, which this won’t do.

Seriously not something that anyone anywhere at any time would ever worry about. LOL

Additionally, it’s not clear what to do for all the various Linux distros.

They would be happy with anything. They are the least picky as they have more variation and are more likely to be using a custom icon set anyway. Mac users are the most picky generally, with Windows users in between.

IMO we should just create a nice new larger and simpler folder icon that fits consistently with the file icons and leave it at that. This would fit better with out other icons and be much easier to maintain.

Yes, agreed. As stated, the purpose of this exercise was to see what we like in order to know what to specifically ask @Andrzej Ambroz (jendrzych) for.

But.... while he is at it I'd also want two more icons. One to indicate locally-attached drives and another to represent network storage. We could keep using the icon we are currently using for "drive" as "removable device".

Having these would allow us to STAY within this Thumbnail view to find any files. Right now hitting the root ".." folder icon while at the root of my "F" drive takes me to the root of my "C" drive, which is not ideal. Instead the level below (or above depending how you look at it LOL) should be a "computer root" listing all drives.

Yes, agreed. As stated, the purpose of this exercise was to see what we like in order to know what to specifically ask @Andrzej Ambroz (jendrzych) for.

Yes this is a good exercise overall, and most of the proposed changes here I think are reasonable, and add a bit of extra clarity.

But.... while he is at it I'd also want two more icons. One to indicate locally-attached drives and another to represent network storage. We could keep using the icon we are currently using for "drive" as "removable device"

Seems like a good suggestion. Perhaps @Andrzej Ambroz (jendrzych) would like to create such icons? The main difficulty is in the code, to detect the difference - the icons themselves can always be tweaked.

Having these would allow us to STAY within this Thumbnail view to find any files. Right now hitting the root ".." folder icon while at the root of my "F" drive takes me to the root of my "C" drive, which is not ideal. Instead the level below (or above depending how you look at it LOL) should be a "computer root" listing all drives.

I don't get the need for that really - This is what the source list is for, and you can stay in Thumbnail view as much as you want. I guess I wouldn't particularly oppose this.

Reverts back from per-OS styling. Adds shadow to blend file thumbnails because that looks nice.

This might better reflect our current consensus. The folder is simple and flat, so that it allows us to overlay small icons on top, just like we do with documents, to indicate some special status. Like being the current blender folder, Desktop, my documents, OS font folder, etc.

Looks like we might have to (optionally) theme-color tint both folder and document icons to make them more distinct from each other and less boring. Again, hopefully @Andrzej Ambroz (jendrzych) can make something nicer.

The version of "..blender/release/datafiles/prvicons.png" for this revision:

Great. To me this seems very nice now - the folder icons are more consistent with the files and allow us to superimpose type icons as we do with files.

I stop focusing on this forum for a few weeks and you're all starting to frolic!
I put on my sleeves and try to propose something that will be close to the above suggestions and the style of the rest of icons.

@Andrzej Ambroz (jendrzych) : something that will be close to the above suggestions and the style of the rest of icon...

fawesome!

@Andrzej Ambroz (jendrzych) : you're all starting to frolic!

Note that none of this is me asking you to do anything. More like putting my wishlist on paper in case there are any angels who might answer. LOL.

The stuff discussed above is fairly straight-forward. We currently have little monochrome icons (14x14) that represent most things. But we also have a small number of larger icons on the "prvicons" sheet. That sheet now has more empty space that can be used: there are duplicated "document" icons and we only really need one of those since we are now overlaying little icons on top of the large one to indicate file type. I want to increase the exported size of that sheet so that the icons have more detail - currently 48x48 each but will probably end up at least 96x96 each. A bit larger would give some leeway for Retina display.

So most importantly we are hoping for revamped versions of "document" and "folder" that look nice at a larger size as discussed in this thread. But I am also hoping that we can one day have larger icons that can represent locally-attached drives, removable drives, and network storage - so can be used on a thumbnail-sized drive summary. We do have that one small "drive" icon that looks like a memory stick, but I am hoping we can use that idea for removable drives and have something else for other drive types. At the worst case we can continue to use one icon for all types of storage drives, but I don't think the memory stick would work well with network shares. So not only three big icons to represent these three storage types, but also small versions of these for the "volumes" list.

Similarly, but in just the small size, I am hoping for something to indicate some special folder locations, like "Desktop" and "My Documents". Not only for use in the "System" List (where all items are now using "bookmark"), but we can also use these on top of the big "Folder" image to indicate those folder locations while browsing in Thumbnail view.

There are four possible sizes of preview (View > Display size).
The largest seems to be 512px on the retina display, so the folder/file icons should be the appropriate size.
Or even better to have several sizes of each icon, to be pixel-perfect.

Currently, small icons of file types do not take into account UI scaling at all.
But on the other hand their size is influenced by the "View > Display size" option, which makes them tiny on the retina.

Check also the Link/Append, there are folders with a small overlay icon which is currently almost invisible.

@Yevgeny Makarov (jenkm) - There are four possible sizes of preview (View > Display size).

Thanks! To be honest, I did not notice those options at all.

I see some weirdness with how it is now, but my patch also makes it worse too, so I've certainly missed something.

This current patch was pretty quick and dirty as I mostly wanted to show off the idea of having different alignment and larger icons here. So I'll probably wait until after the File Manager UI merge, and with new icons from Ambroz, then play again from scratch.

At the default display size, 128pts fits within the rectangle.


(the yellow square here is 128pts)

For 2x retina, this means 256*256.

IMO, that seems like a good size for these.

Harley Acheson (harley) updated this revision to Diff 16931.EditedThu, Aug 8, 5:30 AM

Changes in this revision:

  • Aligning thumbnails to the bottom, rather than vertically centered.
  • Changed the shadows and borders of thumbnails a bit
  • Works properly with different View/Display Size now
  • Little "document type" overlay icons are scaled nicer, getting a bit bigger but never too small
  • Reduces prvicons.png from 12 slots to only the three we are now using

And most importantly uses @Andrzej Ambroz (jendrzych)'s new icons for folder and document in thumbnail view.

As before you must also replace "..blender/release/datafiles/prvicons.png" with the following image before compiling. Yes, it looks blank, but is not. LOL

Harley Acheson (harley) updated this revision to Diff 16959.EditedThu, Aug 8, 9:56 PM

Changes:

  • Better alignment of the icons to the grid
  • better placement of small overlay file type icons
  • changes to Thumbnail view sizes. Smallest was too small to be useful and some steps were too large.

As before you must also replace "..blender/release/datafiles/prvicons.png" with the following updated image before compiling. Yes, it looks blank, but is not. LOL

Assuming we don't do any further changes the following source for the icons would replace "..blender/release/datafiles/prvicons.svg":

And this updated file would replace "..blender/release/datafiles/prvicons_update.py" so that this python file creates the png from the svg at the new size.

This is already superb, with the fantastic new icons at full res & superimposed type icons.

This is how it looks inside Blender:

We could either commit directly to master or to the filebrowser_redesign branch.

Also, don't forget about Link/Append, where small data-type icons are overlaid over folders.

Looks perfect. Almost... The superimposed small pictograms seem to be too high against the file icon. It must be in the very middle of the big icon

or a bit below.

William Reynish (billreynish) requested changes to this revision.Fri, Aug 9, 12:05 PM

@Andrzej Ambroz (jendrzych) Yes I commented on the same thing privately with @Harley Acheson (harley) :)

We also have a bigger issue with superimposed icons on the folders:

Even worse on retina:

Requesting changes until this is fixed.

This revision now requires changes to proceed.Fri, Aug 9, 12:05 PM

This is now displaying file type icons nicely on folders inside Blend files when linking and appending.

The file type icons are now scaled with UI resolution scale so they are no longer too small on retina. Dealing with the loss of resolution as they get larger by lowering the opacity. This feels like a nice way to make those icons less distracting as they get larger. This can be seen below:

Note that this patch does NOT include the changes to the prvicons.svg or prvicons.png or to prvicons_update.py, all available in immediately prior comments here. Those have to be copied in place and full rebuild done after patch is applied.

This version mostly changes the vertical alignment of the filetype icons that are written inside the document and folder images:

Current File folder alignment, shown in Regular Thumbnail view, at 2X scale:

And document alignment shown at same view and scale:

Have also made the overlay icons smaller (and at bottom-left corner) when put onto a preview thumbnail, like for image, video, blend file, etc.

As before this patch does not include the three other changed files, that can be found in previous comments.

Marvelous job!
P.S. do I see a shadow under bottom-left corner overlay icons?! If so - love it.

@Andrzej Ambroz (jendrzych) - Marvelous job!

Thanks!

P.S. do I see a shadow under bottom-left corner overlay icons?! If so - love it.

Yes, I didn't have much of a choice as it really wasn't visible in a lot of circumstances. Just a one-pixel drop-shadow like offset. I tried to make it as subtle as possible.

A nicer border around preview thumbnails, like images, videos, blend files, etc

With the new changes, this looks good to me now. I think this is ready.

This patch is now incorporated into the "filebrowser_redesign" branch