Community feedback: Custom icons for external applications

[halirutan]

As you all know, we use one-colored, flat Material Design Icons in JabRef. They look great and there is only one little drawback: For some specific things they are not available. Especially, the "push to external application" button does not fit well into the overall appearance

I spend some time to create the missing icons in the Material Design look. However, icons like the one of TeXStudio which is colored and has much detail, cannot be converted one-to-one to the same style. The goal should be that the application icons can be recognized as good as possible by the users of JabRef. I have created icons for TeXStudio, TeXMaker, Vim, OpenOffice, Emacs, Lyx, and WinEdt:

and they would like this in the (new JavaFX) toolbar

I spend quite some time especially with the TeXStudio and TeXMaker icons but there were many issues. The famous TEX letters are too thin a looked awful as an icon. The details of the lamp were impossible to recognize, let alone the light-beam that appears in the original icon. Incidentally, the TeXStudio guys are currently settling for a new icon that actually can easily be converted but until then, we need a solution.

I'm looking for some kind of feedback and suggestions for improvement.

[tobiasdiez]

You should also cross-post it to our forum as there are more active users than here. However, I really like your icons so we can just directly include them in my opinion.

[AEgit]

First of a warning: I haven't used any of the icons in the JabRef panel to call these external programs and I probably won't do that, as I have a different workflow. So take my opinion with a pinch of salt.

Having said that, I've worked with pretty much all of the applications represented by the icons and I think they can easily be recognised from the proposed icons. Overall, I think the icons look really good!

[halirutan]

@tobiasdiez @AEgit Thank you both for your replies. The current version of the icons is already included in the consistent-fxcolors branch.

@AEgit If you happen to have too much time, you could take a look at the general redesign. The snapshot can be downloaded here. This branch based on the new maintable-beta which unfortunately is still not completely functional.

[stefan-kolb]

I think you did a great work here 👍
Like you said it's quite hard when the icons become really small.
Why don't you use the official OO logo?

The emacs logo could be inverted like this too. Or did you try and and it didn't look good?

[halirutan]

@stefan-kolb Actually, I probably spend too much time on such details than I'd like to admit. But you are right, the official logo works as well. I already had it and I also have the Emacs icon in that style. Before I wanted to switch it, I had already tried so many version that I wanted to ask the community first.

My reasoning was as follows: The current toolbar with all icons (some of which I have swapped for better ones) looks like this

We have a mixture of two types of icons. The ones on the left are (now) completely filled. I wanted to use only filled versions for better consistency, but for the love of god, there was no filled version of Copy and Paste. I tried the other way around and changed all to outlined version, bu not all were available as well and the outlined version of the trash bin didn't look so good.

That's when I decided to ask before I keep on working on this. In conclusion, you are right. I will use the filled versions of Emacs and OO.

Btw, I have never seen a more unbalanced icon than the one of Vim. How anyone could ever think that making the diagonal line of the V and the italics "im" so different looks good is a mystery to me.

[halirutan]

Small update. Fixed Open-office and Emacs. Created a filled version of copy and paste. Made WinEdt slightly thicker and I added an alternative version for Vim that follows the original by including the background-rectangle. First the toolbar in comparison old vs. new

Here are all icons in a larger resolution

[stefan-kolb]

The new OO and Emacs logos look great 😄
Also great work on the WinEdt, much better recognizable now!

For the case of Vim I would suggest to just use the V as it is the main element of the logo and just skip the im. The V is not so well recognizable in front of the rectangle but it would still be ok.

I would rather keep the current copy & paste icons, looks fine to me. Also you lost a bit of size with the new icons.

[halirutan]

I would rather keep the current copy & paste icons, looks fine to me. Also you lost a bit of size with the new icons.

I lost it on purpose because the original ones were too large. I consider asking another question on the Mat. Des. Ico. repo because the template contains a bounding box. The small round thing on the top of the Paste icon and the background paper in the Copy icon extend into this bounding box area. That makes copy, paste, and the scissors larger than others. I'm not sure when this is allowed but I guess that these icons are very old and standardized for a long time and can break the rules.

[stefan-kolb]

Hm maybe they are larger because they look smaller otherwise, due to less filled areas? Put differently:
Actually, when I look at your icons, I think they are smaller now than the other icons. But if you say they are exactly inside the bounding box as the others that's an optical illusion 😄

[AEgit]

@halirutan : I had a go with:
JabRef 4.2-dev--snapshot--2018-03-23--consistent-fxcolors--36303bc4b
Windows 10 10.0 amd64
Java 1.8.0_161

I will only comment on the appearance as other issues I ran into (e.g., poor performance, search function not displaying results, etc.) are probably related to the maintable-branch and are therefore not of concern here.

I think the new icons look really nice and overall JabRef has a modern very user-friendly look! Good job!
There are two things I noticed - but they might be also related to the maintable branch, so please forgive if this is not the right place to mention them.

1. Entries that I had marked in JabRef 3.8.2 with different colours are no longer marked (or at least no colours are shown). The groups panel contains a "Markings" group, but this seems to group items according to different users that had marked some items in the past.
2. Nested groups take too much space in the groups panel. If you have a deep group structure, some of the subgroups will not be shown in the groups panel unless you give much more space to the whole groups panel (which is not feasible). Otherwise you literally see just a white area instead of the subgroups name. I guess if you have a multi-monitor setup with JabRef running in fullscreen on a separate monitor you will not notice this. But already if you just use half of the screen on a 24'' monitor and a resolution of 1920*1080 you end up with the issue I just described.

[halirutan]

@AEgit Thank you very much for taking this time. We need to discuss issue 1 with the devs why this doesn't work anymore. About issue 2: I believe I'm using your database right now and yes, there is a deep nesting of groups. A short snipped would look like this:

I see two things that we can attack. First is the size of the indent that is added with each new sub-level in front of it. The second thing is the whitespace between the little triangle and the group name. The major thing, however, is the indent, since it adds up quickly and maybe we don't need it that large to keep the group-levels visually separated. @tobiasdiez Would you happen to know if we already set the indent size for the sub-groups explicitly in the CSS?

[AEgit]

Cheers! Yes, the screenshot you show exemplifies issue 2 (the problem gets even worse, with deeper nested groups).

[tobiasdiez]

@AEgit The old marking feature was removed and merged with the groups feature. You can now specify a color of a group and entries matched by it get a small colored bar in front of them. The "Markings" group appears to make it easier to migrate from the old markings to groups.

@halirutan I think the following code specifies the indent

jabref/src/main/java/org/jabref/gui/groups/GroupTree.css

Lines 54 to 56 in 183fdd0

	.tree-table-row-cell:sub > .tree-table-cell {
	-fx-padding: 0.20em 0em 0.20em 0em;
	}

Since it has 0 left padding, I assume that it is the default javafx indent. Maybe specifying a negative padding decreases the indent.

[AEgit]

Hmmm, that is a bit unfortunate. I really like the marking feature and used it independently from the groups I assigned. This way it was easy to find the important papers of a certain group. I presume this feature is not going to come back the old way, or is it?

I guess the way I used the marking feature is how the "Ranks" feature was supposed to be used. I just found it visually more attractive to use colours instead of the 5 ranks to indicate different importance of articles.
If the old feature is not going to return: Is there a simple way for me to convert the colours to ranks instead of going manually through the database and adding the ranks according to my colour scheme?

[stefan-kolb]

We did find a consensus here, right?

[halirutan]

@stefan-kolb In the case of the icons, I believe we the issue is settled and we can close this. The bigger picture, however, is that we should communicate changes in functionality to our users; especially, when we remove features. I am well aware that someone like @AEgit uses JabRef at a level I can not compete with. And yet, I am one of the people that work on the code and I might make changes users don't agree with.

That was the main reason why I tried to communicate all the annoyingly small details of the overall color redesign instead of just pushing them. I wanted a consensus, even if it meant that not all my brilliant ideas are making it through.

The removal of the color markup for entries is one of such cases. I wasn't even aware someone really uses it and I might have removed it as well. This proves that we should aim to communicate feature changes before they are implemented. The question is, what is the best platform? The forum seems not so popular as I haven't received any feedback from there. GitHub only reaches the real heroic people like @AEgit that want to actively participate.

@stefan-kolb Do you think a FB post like "Look, here is the new redesign. What do you think?" would attract more attention?

[stefan-kolb]

No, it is totally fine that you opened an issue here. If you want to attract the maximum attention I would use all channels that we have. Also, this pushes our channels as we have more action on all of them. It just looked that the issue served it's purpose already that's why I asked if we can close it. Overall, we should try to keep the issue count low on Github, as we are already in the high hundreds. Otherwise it is hard to keep track of them and it also doesn't look good if the project has a lot of issues opened 😉

[tobiasdiez]

@AEgit With 5.0 the markings are converted into groups. So if you had an article marked in category "1" you get a new "marking 1" group. Then you can assign a color to this group, to get something similar to the old marking feature. Or you just select all entries matched by the group and change their rating.

@halirutan what do you think about coloring each row in the maintable according to the entries rating? Do you think that it will be too colorful?

[halirutan]

@tobiasdiez That would be an extreme solution and if we go for that, we definitely have to make this a feature that can be switched off. There are several issues we have to take into account:

1. We need to provide a set of colors that are (can be) used and not the users. The reason is simple: Icons and text need to be readable under the color highlighting. My approach here would be to define a certain saturation and a brightness derived from the theme. Then, I would sample the color circle creating possibly as much as 5-10 different colors.
2. If we color the whole row, we interfere with the coloring of the other icons that are possible in the other columns

A not so drastic solution would be to color only the Rating cell. This would still stand out very well.

[tobiasdiez]

@halirutan I totally agree! Thus for the moment I would propose to not highlight the entry based on the rating but we should keep this option in the back of our heads if more user want a highlighting similar to the old marking feature.

[AEgit]

@tobiasdiez : Thank you for the information! Once version 5.0 is released I will try and see, how it works - maybe I just need to get used to the new system. I just had the impression, that the different colours would make it easier to identify important entries than the ranking system. After all, you have to count the number of stars to gauge the importance of an entry - with 5 stars, this appears less convenient than just looking at the different colours. Furthermore, the colour solution requires less space as you don't need another column in the main table view to assess the importance of an entry. In fact, previously I never used the ranking system for my actual database so I would have been fine with dropping that ;)
But maybe I just need to get used to it.

Are there any obvious advantages of the ranking system? Or is it mainly a style decision?

[koppor]

@AEgit In case the database is really large, I can support you on a conversion of the markings to rank groups

The "only" advantage of the new ranking system is that it is consistent with other uis such as spotify, ...

[AEgit]

@koppor Thanks for the offer. I might come back to it, once I actually move to version 5 - the current performance issues prevent me from doing so, so for now I will still stick to version 3.8.2. But once those issues are solved I will let you know, if I need help in the group conversion. Cheers!

[dbitouze]

@halirutan Are the icons (individually) available somewhere? (Related discussion.)

[halirutan]

Yep, nothing gets lost in the cloud. Help yourself

https://shared-assets.adobe.com/link/1455866d-4cd6-4a16-7e86-3f95a9ffce14

[dbitouze]

https://shared-assets.adobe.com/link/1455866d-4cd6-4a16-7e86-3f95a9ffce14

Many thanks! I wouldn't have been able to find them here! :)