Ckeditor5: CKFinder toolbar icon

[jodator]

The CKFinder can host Images as well as other files.

For images we will insert them as <img> tags while the other might be inserted as links to a file.

Thinks to consider is:

• do we should allow such behavior? (might be configurable through CKFinder options)
• how the icon should look like then.

/cc @Reinmar @oleq

[RyszardB]

v1:

v2:

v3:

v4:

[jodator]

From the above I like the v4. Mostly because of the + badge.

[Reinmar]

I like v4 for the "+" as well. My only worry is that people looking for "a way to embed images" will not connect the "image" and "file" concepts together. But I hope that majority of users should understand that.

[AnnaTomanek]

Also v4, also for the "+" part, but none of them is 100% convincing/understandable to me. I know it's a difficult task though :/

The folder icon is confusing, looks like some sort of browser/open files/open folder/open project.

@RyszardB any other ideas around the "+"? Can we steal some inspiration from other products?

[Reinmar]

Crazy idea (not sure if doable) – can we show that there's an image in that folder?

It came to my mind because we're considering titling this button "Insert image or file".

[RyszardB]

v5

v6

[dkonopka]

First of all, I would like to see this icon next to the other icons instead aligned to the right because I'm worried it will be looking a little bit different.

Anyway, as everyone said, I'm +1 with version number 4 👍 We could try to add inside an image, but we shouldn't overuse details (remember about Low DPI).

[RyszardB]

[RyszardB]

[dkonopka]

By "next to the other icons" I meant for example standard image icon (to check if it is simple to find the difference between them for us/users) without any separator because in the future we won't separate it I guess (?). It would be great to see it in more realistic order.

[RyszardB]

[oleq]

I created a couple of mockups too. They're more in line with the current icon convention:

v7

v7b

v8

v8b

[Reinmar]

I think I like Rysiek's proposal the most:

I'm not necessarily talking about the shape (which may need to be aligned to our convention), but the fact that both the folder and the "+" sign have white background. For me its "weight" fits our toolbar best.

[dkonopka]

I would prefer @oleq's v8 because "+" sign on the white background is hard to notice (mockup vs live demo makes difference).

Anyways I agree: light bg of plus sign is looking good on this mockups because Rysiek enlarged this icon (it's around 20px height I guess, when we are trying to make icons ~17-18px).

[RyszardB]

18x18px

[oleq]

I think I like Rysiek's proposal the most:

I also like it but when downscaled, its details are lost. It's hard to tell what the bulge on the top is about.

P.S. @RyszardB We're using 1.5px for main outlines (straight lines) in out icons.

[oleq]

Another round of designs with more variations and improvements. My personal favorites are 2.3 and 2.5.

---

1.1

1.2

1.3

1.4

2.1

2.2

2.3

2.4

2.5

3.1

3.2

3.3

3.4

[dkonopka]

3.1 - 3.4 icons looks like "Create a gallery button" so for me it's not a proper way to go.

As I said earlier, black "+" symbol is better (LoDPI issues), so I'm voting for proposal: 2.4.

OTOH I'm ok with 2.3 & 2.5. Mixing a folder, an image & a plus sign is almost impossible, so the only solution is to stay with a folder I guess.

[jodator]

2.5 :+1:

[oleq]

After "F2F" talks we went with the following design: