SVG icons

[marcpley]

Details

When modifying data in grid view, those 4 buttons are active:

• Add row
• delete row
• commit
• rollback
  
  Those buttons are very similar: same size, same chape, same colors for add/commit and delete/rollback pairs.

For colour-blind people the 4 buttons are very similar.

I propose to add a button size diff, for exemple:

They are not 16x16 px images but UI seem to deal with that.

Color diff could be added too.

[marcpley]

[pawelsalawa]

For a long time already I'm thinking about changing icons (all, in whole app) to SVG icons, which would allow toolbar buttons to be bigger, icons to be bigger and thus such buttons would be much easier to distinguish visually and easier to avoid misclicks due to small button size. Even for color-blind people.

This is especially important on high-dpi monitors, where toolbar buttons become really, really small.

The main problem with this is that it's not easy to find svg iconset that would fit all the current needs in the app.

[marcpley]

Something like that ?

[pawelsalawa]

Yes, but to use SVG icons across whole application it's not that easy, because SQLiteStudio currently uses over 200 different icons.

[pawelsalawa]

I'm hoping that we are not far from getting yet another AI model, that could generate SVG icons on demand from the prompt.

[marcpley]

Try AI option if you want, I not interested in doing this job.
I know there is a lots of icons. Are they all still used and necessary ? Lot of then can be created by duplication plus few modification.
Perhaps I would be more help full doing those svg icons than trying to correct bugs or code enhancement.

[marcpley]

Does the SVG version of SQLiteStudio need all the icon as SVG ? Can we create the SVG icons only for the most important/visible icons as a first step ?

[pawelsalawa]

It doesn't make sense to change just 1 or few icons. Making just few buttons bigger will make application ugly and weird. I mean bigger both horizontally and vertically (as this is the point for using SVG iconset).

The ultimate solution for SG icons in the app needs to address high-dpi displays and for that all icons need to be replaced with SVG.

I'm not going with AI yet, as all the tools I found so far are not good enough.

As for reusing icons by merging plus/minus mini-icons - this is already done dynamically by the application. See Icon::mergeAttribute() for that: https://github.com/pawelsalawa/sqlitestudio/blob/a16d4f8c5088ad94c4b751065a727b9707540616/SQLiteStudio3/guiSQLiteStudio/icon.cpp#L335C7-L335C27

[marcpley]

There is 221 icons. I can create those SVG. But there is a question of style. Do you want a very similar look or could I renew ? You have to agree the set of icons. I don't want to remake 2 or 3 times several icons ;-)

I would prefer to work on the enhancements I need for my usage of SQLiteSutudio, specialy:
Insert in view
User column width save
Keep focused grid row

If I work on the SVG, when would you do those enhancement and the 3.5 release ?

[pawelsalawa]

I will be honest with you - I don't know when the 3.5 release will be. It's quite big release with a lot of new features yet to be implemented. It's really hard to estimate when would I be able to finish it.

The "keep focused grid row" is planned for 3.4.5.

As for the "User column width save" - can you remind me which issue on github is it?

221 icons sounds like a lot (!) of work. Are you experienced with icons design? I would appreciate such contribution. I'm just surprised. Positively surprised.
If you really are going to do it, we can agree on creating 2-3 icons, i.e.:

• Add - which is used in multiple places,
• Database - as seen on database list panel
• Open functions editor - used on main toolbar

...as a demo and we can discuss if the style will work with the app. I think 3 icons is amount small enough not to turn you down you if something needs to be changed. Sounds good?
We need to consider icons to work well in light/dark themes, etc.

[marcpley]

Demo set of flat SVG files:

[marcpley]

The same with color gradient:

[pawelsalawa]

Impressive! I like them a lot! Are you drawing all of them from scratch or do you use some tool to generate?

I wonder what is the point of having these wider buttons for + and -? I mean if the buttons get a little bit bigger (and also on high-dpi displays they will be well visible), then even color-blind people will see the icon, which should make it easy to distinguish +, -, ✓, X buttons. Don't you agree? Why I'm not convinced to wider buttons is that they look inconsistent but I'm open for persuading.

[pawelsalawa]

Oh, and I think the gradient icons look better. What is your opinion on it?

Current icons also have a gradient, so it would be more seamless transition.

And one more thing - artifacts like these arrows:

...can they have some kind of delicate outline and gradient as well? Current iconset has these kind of attributes also outlined/gradiented and it makes the icon look ...I don't know, "clean"?

[marcpley]

Thanks :-)
They are from scratch.
I prefer with color gradient too.
OK for square size for all icons (included + -).
I will modify the flat arrows.

I need you to technically validate those SVG. Is transparency ok ? Margins ? Does it is ok when used in SQLiteStudio toolbars ?

[pawelsalawa]

Okay, give ma a day or two for that, okay? I will need to setup Qt 6.8 on my pc and play with these svg icons in SQLiteStudio developed 3.5.0 (from master branch) to see how they work out.

[pawelsalawa]

I will also experiment with merging "attributes" to parent icons - i.e. to have just one "table" icon and then have "arrow", "add", "delete", "edit" small icons (which I call attributes), so that the application itself could merge them in runtime. Currently with png icons this provides quite big flexibility with icons and I hope it will be possible with svg icons too.

[marcpley]

In some case merging SVG can save SVG designing and correcting time. But we have to be careful with that because:

• Creating or correcting singles SVG (table_add, table_add_column) is very fast when the standard SVG (table) exist and is up to date.
• The final result with a single SVG (table_add) is visible at design time when the final result with merging SVGs (table and add) is visible at runtime, so validating the result with merging is longer.
• Single SVG lets you adapt the "parent" SVG to have a better result than merging: a green column for table_add_column instead of a "green plus" in front of the standard table SVG.
• Single SVG lets you cheat and adapt the "parent" SVG to have a better result than merging: make the table or database standard SVG smaller or finer to let more room for the attribute SVG.

In any case, I need a list of SVGs to create. Actually my list is the PNGs list and I can do the job in one month. Don't complicate it too much with the merging option :-)

Thanks for already released 3.4.5 !

[pawelsalawa]

I understand downsides of merging and I'm happy to create dedicated icons for each case. I just wanted to save you some time ;)

I still need few more days to test SVG icons in master branch. The Qt 6 switch requires a bit of work from my side.

The list of all used icons can be found in https://github.com/pawelsalawa/sqlitestudio/blob/master/SQLiteStudio3/guiSQLiteStudio/iconmanager.h
All DEF_ICO* marcos there define icon objects - first parameter is C++ variable under which it will be created and second/third parameters refer to icon file:

• The DEF_ICON takes icon file name as 2nd parameter (file extension ommitted)
• The DEF_ICO2 takes already defined icon (passed in 2nd param) and merges it with another (3rd param)
• The DEF_ICO3 takes already defined icon (passed in 2nd param) and creates another C++ icon variable for exactly same icon. This is done to re-use icons, which in future may be changed to 2 different icons without changing code that uses them.

Basically all icons defined as 1st parameter needs to be created. In case of DEF_ICO3 you may stick to re-using same icon, or you can create dedicated icon for that particular case. I.e. DEF_ICO3(DELETE_COLLATION, DELETE_ROW) creates icon for deleting Collation (in Collation Editor window) by re-using icon for deleting row in Table's data grid. You may also do it by reusing icon, or you can create dedicated icon for that. I leave that to you.

[pawelsalawa]

And one more thing - if it's possible to create these "attribute" icons (arrows, small plus, small minus, etc) anyway - even if they are not used currently - it would be really nice. In 1 year you might be busy and not able to create any new icons. In such case I can always re-use some existing icon and merge it with "attribute" icon in the app. Better that than nothing.

[marcpley]

Hi Pawel. You may had a lot off work to achieve a stable release for 3.4 branch.
I'm still waiting for the result of your SVG test in Qt6 :-)

[pawelsalawa]

Right! Sorry for keeping you waiting. I've already started working on stuff in 3.5.0, but I got distracted from SVG. I will do it as soon as possible. Potentially even today.

[pawelsalawa]

On toolbars/menus, these SVG look good (I upscale my OS interface by 200% to make the difference more noticable):

The only problem I noticed so far are is database icon:

For some reason the icon is not rendered correctly and so far I haven't found way around it. I don't think it's a problem of background, or because if I open this SVG in the well-respected XnView image viewer also renders it badly:

Was there anything you did differently for the database icon, that could cause this? Like some SVG feature that is beyond SVG 1.2 standard? Qt has limited SVG support: https://doc.qt.io/qt-6/svgrendering.html. Maybe you can configure your SVG drawing software to save files using only the static features of SVG 1.2 Tiny?

[pawelsalawa]

On the contrary, the rsvg-convert does the convertion to PNG with transparency correctly... so it's about limited SVG support in Qt. I continue to explore what possibilities we have here.

[pawelsalawa]

Also Inkscape's command line interface allows for correct conversion to PNG with transparent background:

inkscape -w 128 -h 128 db.svg -o db.png

I will explore possibility of using multi-image icons (svg converted to several png sizes and used as single QIcon) and how well it behaves. In the end SQLiteStudio could just use pre-rendered PNG images with wide range of dimensions based on SVG icons. At least until Qt support for SVG improves.

[pawelsalawa]

Okay, using pre-converted PNG files in several sizes from SVG works quite well, so we can continue with SVG. By default SVG icons will be used directly, but in cases when it's causing issues (like with the database icon), pre-rendered PNGs will be used.

[marcpley]

The transparent zone is wider than the staked disks so I think it is not a transparency problem but an ellipse calculating problem. Ellipsis border are ok but filled zones no.
With Xviewer the result is ok:

So, I can not use the ellipsis if you dont find a Qt solution...

[marcpley]

Try this one

[pawelsalawa]

These books look awesome! :)

[marcpley]

Brick on a yellow book

error icon renamed warning

[massimo-cassandro]

About icons.
I don't want to be too intrusive and I realize that this discussion has been going on for a long time, but I think it would be better to have a minimalist approach, eliminating colors, gradients and everything superfluous.

something like this (from phosphoricons):

this is an example, but I think the whole icon set could be designed this way and, in my opinion, the final result would be more appreciable.

Of course, if you think the path you've already taken is better, ignore my suggestion.

[pawelsalawa]

TL;DR: I oppose flat icons in SQLiteStudio. There are places where such icons are good, but SQLiteStudio is not one of them.

I am strongly against flat icons (no colors, 3d effects forbidden, etc). They are not prettier, nor more readable. That is a false picture forced over the years, because people were getting lazier and lazier (or cheaper and cheaper) and flat icons are just easy to do.

Many flat icons are good in terms of "readability", but it's not because they are flat. It's because they were made with care for "readability" in mind. Same case could (and should) be applied to non-flat icons.

In fact I did a quick test run with Google's material icons to see how that would look like in SQLiteStudio and the result was terribly ugly.

There are numerous applications, that use flat icons and they may appear clean and pretty, but nobody ever tried to use nice colorful icons in them. It was easier to grab flat icons. It's easier to work with bright/dark themes with flat icons. They are easier to handle by developers/artists, but I think the app should be made primarily for users and easiness of development should come after that.

Usually Electron based apps (a web originated framework) use flat icons, because whole web has this "style" for last decade or so. In some cases this is justified and serves a purpose, but in most cases they are just quick, ugly way.

So.... that is that. I said it ;)

[pawelsalawa]

@marcpley Nice:

I think the brick here should have a bit bolder line. It seems thin comparing to lines on the other book icons.

[marcpley]

[pawelsalawa]

Great, thanks! We can move on.

[marcpley]

Completer and database set:
SVG_completer_db.tar.gz
I add a "list" svg file, like "plus" and "minus".
I don't create completer_pragma, you can mix database, constrain and list.
Eventually, bug_list could be replaced by mix of bug and list.

[pawelsalawa]

Thanks!

Just few remarks:

• completer_blob - I know you made it same as original. The thing here is that I picked that original icon, because there was no better suited icon in the iconset, but now we can get rid of the "down arrow" from it and just keep zeros and ones as an icon of "binary data".
• completer_operator - Currently it may be confused with "code snippet" and I would actually use it for code snippet in the completer. In exchange, for completer_operator maybe icon with %, = and + would make sense? something like:
  
  (appreciate my MS Paint skills! :) )

[pawelsalawa]

Icons with just black characters (like "completer_string", "completer_operator", "completer_blob" and "completer_number" need some kind of background, because if they are put on dark backround, they are almost invisible:

Also the "database_disconnect" is a bit difficult with the dark theme:

[marcpley]

What do you thing of that:






I will correct the others after your advice.

[marcpley]

A new db_disconnect, same color as db_connect:

and another with grey lines:

[pawelsalawa]

The last one is most readable in both dark and light themes:

I wonder if it would be possible to use slightly different color of the background for different icons (completer_blob, completer_number, etc...)?

As for the completer_blob - I think the second one is better.

[marcpley]

Random colors or is there a logic I can use ? Or coherent with others icon sets ?

[pawelsalawa]

I don't have particular colors in mind. I guess we need to try and see how they work out.

[pawelsalawa]

I think that connect/disconnect icon needs some live color (not gray), because when the button gets disabled, Qt makes the icon gray, which for an already-gray icon becomes a bit confusing - here one picture has disconnect disabled and another has connect disabled:

I propose connect to have green'ish color, while disconnect red'ish.

[marcpley]

For the completer icons, I would like to have their order if several of them can be side by side.

[marcpley]

[pawelsalawa]

Yeah, I think that's much better:

Regarding completer icons, it seems that there is a bug in completer, causing only operator to be proposed in the completer, while number, string, etc - are missing. I need to look into that, so let's postpone these icons a bit.

[marcpley]

It seem there is a bug in Draw with transparency when exporting to SVG : the result transparency in the SVG is not the same than in ODG file. So it hard to set the transparency we want in SVG. Completer icons are the firsts with transparency, we will have to well verify the SVG result.

[pawelsalawa]

Thanks. I do remember about the completer icons, but it's a Christmas time (and New Year's Eve is coming...) and I have limited time to spend on these matters, but I will definitely get back to this.

[pawelsalawa]

Here are most of the completer icons (each of them once):

...and then at the very end there is the operator icon (repeated in several rows):

[marcpley]

The completers with colored background.
SVG_completer2.tar.gz

[marcpley]

I don't understand the idea of "not null" icon:

You add a "plus" on it to make "CONSTRAINT_NOT_NULL_ADD". The result will be complicated. We could simplify "not null" icon?

[pawelsalawa]

Here are new icons in completer on dark and bright themes - all look good:

NOT NULL - yeah, let's simplify it. Something like:

or

[marcpley]

Constraint set.
2 options for pk.
SVG_constraints.tar.gz

[pawelsalawa]

All good. Thanks!

The "collate" constraint is currently re-using the icon from collation editor (it has always been to be like this), but I think in context of enabling single collation constraint a different icon could be feasible, especially that it tends to be smaller here:

Maybe something like the default constraint icon, but instead of check-list on the white page, it would be "ascending/descending order" symbols on it (just like on Collations Editor icon), so we would have icon meaning like "single collation, a page from collations book". What do you think?