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]

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?

[marcpley]

integrity_check and ddl_history: db+constraint+list
or something new if you want

delete_selected: act_select_all+minus

directory: perhaps I don't have to make the standard icons ?

SVG_constraint_delete_vacuum.tar.gz

[pawelsalawa]

For vacuum the icon is a bit misleading, because it may suggest that it erases entire database contents. How about something like:

It doesn't have to be as sophisticated, but generally to indicate vacuuming, cleaning the leftovers, not erasing everything ;)

I'll test the collation constraint icon in the dialog when I'm home later today. Thanks!

[marcpley]

I reused the red withe eraser, for coherence with act_clear and clear history.

[pawelsalawa]

I know, but that's the point - there the icon means "erase history". If you use similar icon with a database icon in the back, it would suggest you are about to erase the database :) which is not the case

[pawelsalawa]

Because I was looking around for the "directory" icon I have found two pretty nice SVG pages with Public Domain vector graphics, including icons:

• https://publicdomainvectors.org/
• https://openclipart.org/

A lot of icons there are not suitable for the project, but some are good (like the directory). I also found a "vacuum_db" icon.
I'm in a process of filling as many icons as possible from these pages. Some of them I have to modify, but it's fine, since they are Public Domain - which is great!

I will let you know what is left.

[pawelsalawa]

Constraint icon looks great. Thanks!

Delete icon is good too.

I've added several icons yesterday and I will continue to do so in upcoming days. Please hold with any icons work. Once I run out of suitable free icons, I will let you know what we have left (hopefully it will be very little).

Oh, and one more thing. I found icon for "Configuration" button, which was so pretty, I could not resist. I hope you don't mind I replaced your icon with it? Sorry you spent time one it, but it would be shame not to use it:

[marcpley]

I don't mind :-)
Cool the todo list decrease.

[pawelsalawa]

I've finished replacing the rest of icons with SVG. No more icons are remaining ;)
I still need to adjust the code here and there to adopt the svg scalability, but overall it's good.

[pawelsalawa]

Thanks for your huge contribution!

[pawelsalawa]

All seems to be done here. Merged to master branch.