Improve UX of main toolbar

[halirutan]

Not a pressing matter, but we should at some point take care of this. At the moment, the current main toolbar looks like this on Ubuntu

Several things are noteworthy:

1. The horizontal lines under the icons don't match. Left and right from the search they have a different hight
2. The separators between icon-groups are not of the same size left and right from the search bar
3. When using the global search, the number of found hits is displayed. This label uses a different font and is not readable. See image here
4. On our way to migrating everything to JavaFX, the background colors should be made consistent.

I have hacked a fix to test some things by (1) removing the borderlines completely and make the whole toolbar having a border, (2) separating visually everything that is part of the global search, (3) fixing background color. This gives IMO a much clearer view:

I believe we should take care of this when we migrate the toolbar to FX. Additionally, I have seen that the "Material Icons" we use, provide a template that lets you create your own icons. I think we (I guess this would be my turn) should think about creating nice icons for the "Push to Application" button to make them fit into our overall design. I'm sure I can do this while making the icons still recognizable.

[tobiasdiez]

Good suggestion. In the progress, I would also like to condense it to say 5-10 useful actions (instead of > 20) and integrate the search bar prominently. Maybe even add some color. Something like this:

Since this rewrite might take a while, could you in the meantime create a PR with your "hack"? It looks so much better than the current interface.

[tobiasdiez]

The maintable-beta now has a restyled toolbar. We still need to decide on the color and which icons to display (see discussion starting at #3684 (comment)).

[halirutan]

@tobiasdiez Thanks for the ping. I looked at the current maintable-beta branch and in particular at the colors. Since this is currently a mess because in every css file different, explicitly specified colors are used, I started to separate everything into one JabRefColors.css and tried to unify everything.

Looking at the current state, one thing beside the inconsistency hit me instantly: We are starting to mixing a dark-scheme with a bright-scheme. What I mean by that is that I suggest we should stick with dark information onto bright background: Dark icons onto a brighter toolbar, dark menu text onto e.g. gray, dark tool-tip text onto bright bg, etc.

To make everything consistent, we should first decide the one main theme color. I believe this should stay the blue that we used for icons until recently. Maybe a slight variant. Based on this color, we calculate the highlight colors that we need and maybe 4 neutral gray-tones. I've done this several times and maybe the most prominent example where this increases usability are the Solarized colors. You want to ensure that all colors and grays love each other.

Then, the big fun begins because every FX component needs to be checked and restyled. For testing, I used very bright colors in a main color css file and replaced some of the component colors. Note, I don't suggest any of the colors used here; it was only my test-zone

I could make out several things:

• all toolbars (the main, the editor, the groupview) should use the same style. Especially, the icons should look the same although they may be of different size
• it is a good thing to make borders that are resizable slightly visible. It makes grabbing them so much easier (in the main-table columns this is currently a pain).
• Consistent highlighting colors for hovered or selected table rows, active input fields, selected tabs, error marks like the small thing in the editor

One final word on the things discussed in the PR: For me, there are also way too few icons in the toolbar and I don't like a prominent search bar. IMO this search bar hype is overrated and especially in JabRef, I use it not even close as often as I use "new Entry" or "Push to App". Searching is good, but it should not be centered using half of the toolbar. The social media icons are useless to me too, but I understand the intention of @koppor. Although I don't believe that this indeed has the desired effect.

[koppor]

"Search" is the most used feature by me. In OneNote I just use Ctrl+E, which is a very good full-text search on all my notes.

[tobiasdiez]

These are good points @halirutan. A few colors are collected at the beginning of main.css but some are defined/inlined also in the groupstree.css and entryeditor.css. Now that everything derives from the main.css class we should put all colors there (or extract them to a separate file).

Since I have absolutely no background in UI design, I took the design guidelines from Google and Microsoft as blueprints. They mostly suggest to use a strong color for the titlebar (this suggestion is especially for mobile apps and use a hamburger-styled menu for desktops...but this is not an option for JabRef) and to use a grayish color for secondary navigation (i.e. our groups side panel). For an example see below.
I would suggest @halirutan opens a PR with the unification of the colors and then everybody is invited to play around a bit and propose a theme. Maybe we could even ask our users for help and/or use 99desgins again (it shouldn't be too hard to load the css from an external resource to make it very easy for somebody to change the style without actually compiling JabRef from source).

[AEgit]

Following up on what @koppor already said, the "Search" feature is also the most important one to me. I have a database with over 14,000 entries - I wouldn't know what to do without the search feature, so I think (at least for my use case) it deserves its prominent position. I do agree with @halirutan, however, that the Social Media buttons appear less useful (again, this might only apply to me).

@tobiasdiez : I don't know whether this belongs here, so apologies, if it does not. When using the search feature in:

JabRef 4.2-dev--snapshot--2018-02-21--maintable-beta--58cfd7f48
Windows 10 10.0 amd64 
Java 1.8.0_161

the background colour is this darkish blue-purple colour. The text that is inserted by the user in the search bar, however, is black, which makes it very difficult to distinguish the text from the background colour. This should definitely be changed to a bright colour, e. g. white, if the dark background colour is kept.

[halirutan]

I have by far not touched everything but I tried to at least use consistent colors. I used the Canadian Color Scheme that I discovered recently through Hacker News. I used only one blue base-color and several grays. All other colors are only for highlighting like selected rows, warnings, tooltips etc.

The result is a very modern and friendly looking JabRef in a flat design.

This all needs to be cleaned up and unified further, but I cannot do this without help because some things (like the sidepanel) are created in code and other things seem to have no effect and I would like to understand what the intention behind it was.

Here are some things I tried to tackle:

• a hover effect for all flat buttons that do something
• get a consistent height between the header of the side panel and the main table to make it more pleasing
• use the base-color for most buttons, selected tabs and the header in the maintable
• get a good ratio between the gray-tones of the toolbars, the background, the content panes and the separators between the split-panes.
• For this test, I removed the sidepanel icons. They are far too much left and I guess their purpose is to remind the user how the icon in the toolbar looks :)

In any-case, with consistent styling, we can create a Girl Version of JabRef easily

[tobiasdiez]

@halirutan I like the light and fresh look. Where exactly do you need help?

[tobiasdiez]

Since the toolbar is now restyled and the color-theme is tracked as part of #3621, I'll close this issue now.