Vertically align Groups and Web search panel

[ThiloteE]

Problem:

Groups, the Add group button, Web search and the search button for Web search are centrally aligned and it looks odd, because the button "Toggle intersection" and the multiple buttons "Move panel up", "Move panel down" and "Hide panel" skew two of the four more towards the left.

Desired Solution:

Align the text for the four along a common line.

Example:

The text could start somewhere along the red line:

I would refrain from aligning it completely to the left border as there should be a contrast to groups and search fields.

[mlep]

@dimitrisdimos00 : since you have already touch some of this, maybe you would like to pursue?

[ThiloteE]

Would something like this get the label UI or rather the label groups/search?

[mlep]

Both? 😉

[ThiloteE]

ok xD

Btw. another alternative could be to align the buttons Add group and Search at the right side. There would still be contrast (the buttons would stand out more) and at the same time, the awkward looking centrally aligned indention vanishes.

I imagine both to be fine looking :)

[mlep]

I believe we are used to have the text of a button centered.
I suggest to wait for the merge of #8392 first, and then look at what can be improved further.

[dimitrisdimos00]

Hello. Yeah, I can look into it. So, shall we wait for the merge and then take a look at it?

[ThiloteE]

Yeah we can wait for the merger. This is not urgent as 5.4 stable was just released :)

[ilippert]

I would imagine that it would also look well if the names "Groups" and "Web search" are aligned left.

[dimitrisdimos00]

The first suggestion is to move the "Add group" button and the "Search button" to the left in order to be right below "Groups" and "Web search" accordingly. The second one is to move the "Groups" and "Web search" labels completely to the left and leave the buttons where they are. Did I get it right?

[mlep]

That is my understanding.
I guess we should consider all three panels together: Groups, OpenOffice/LibreOffice and Web search.

About the titles of the panel: they are a bit off-centered at the moment. Groups looks a bit displaced to the left at the moment when the panel is wide)

About their buttons:

• "Add group" is centered.
• "Search" is centered.
• the OpenOffice/Libreoffice buttons (there are 10 of them) are grouped to the left.

[dimitrisdimos00]

Yeah we definitely should look at all three of them. And we should decide which of the two we will implement. I don't have something in mind for the OpenOffice/LibreOffice buttons though.

[mlep]

A glitch that could be corrected in the meantime: while the Add group button extend to the whole panel width, the Search button of the web search panel does not. With the light theme, you need to put the pointer onto the button to see it, but in the dark theme it shows right away:

My suggestion is to make the Search button extend to the whole panel width.

[dimitrisdimos00]

Yeah, I noticed that too... I can look into it

[dimitrisdimos00]

Hey, check this out!

[dimitrisdimos00]

So shall I try moving the titles to the left? I think it is more plausible

[ThiloteE]

Yes, maybe you also can give us screenshots of the few options we have. We could vote, after all, there is more than one option how to deal with this :)

[dimitrisdimos00]

Here is how it looks when the titles are directed towards the left:

[ThiloteE]

How would this one look?

[dimitrisdimos00]

I don't think I can align all the items completely because the buttons up, down, delete (x) and union (in the case of groups) push the titles (blue text) a little bit more to the left. All the items are centered already...

[ThiloteE]

because the buttons up, down, delete (x) and union (in the case of groups) push the titles (blue text) a little bit more to the left.

Yes, this is the main reason, why i created this thread.

[Siedlerchr]

Do not spend that much time on the alignment. It should be just easily distinguishable for the user from the rest of.

[ThiloteE]

Oh well. Then let's give it #8397 (comment) a try.

[dimitrisdimos00]

Ok I will open a pr then

[mlep]

@dimitrisdimos00 Thanks! Now, titles really look like titles (and buttons look like buttons).

Note: the titles are not vertically centered. They are slightly moved upward.

[dimitrisdimos00]

Your welcome! Yeah about the vertical alignment, I don't know why that happens, I didn't notice it.

[ThiloteE]

Yeah, looking good :)
I especially like how the titles look in dark mode.

[Siedlerchr]

@dimitrisdimos00 The central css stylesheet: https://github.com/JabRef/jabref/blob/main/src/main/java/org/jabref/gui/Base.css
Group css https://github.com/JabRef/jabref/blob/main/src/main/java/org/jabref/gui/groups/GroupTree.css

Scenic view might be helpful https://github.com/JonathanGiles/scenic-view for debuggin style issues