Clarify tech pairs in the UI

[historic_bruno]

Currently tech pairs look like this, with the pairs on top/bottom rows and the single techs on the top row:

Which is confusing because you might mistake the separate rows as simple a wrapped continuation (like other parts of the UI), so here are some ideas for a different design:

• Separate rows with outline - the outline shows they are connected. Simple to implement

• Split rows - the middle row is single techs, the ones above and below are pairs. This is probably more difficult to implement

• Split rows with outline

• Split icons - presumably this would open a separate panel to select between different icons

Other suggestions are welcome :)

[Kieran P]

What about a single line at the bottom of the panel with an outline surrounding the pairs (no line between them)? I'll attach an example.

[Kieran P]

Example of tech pairs lined up horizontally

[leper]

Replying to k776:

What about a single line at the bottom of the panel with an outline surrounding the pairs (no line between them)? I'll attach an example.

Mythos_Ruler wanted the tech pairs to be changed to the top/bottom style they are now.

I like the 'Split rows with outline' mockup most.

Aligning the icons in that way would not be that hard to do. You would make 3 rows (in session.xml) and modify LayoutButtonRow (or set up a new function that copies most of the behaviour) to only adjust the top and bottom offset by half the icon size. So a normal tech would go in row 1, while a tech pair would go to row 0 and row 2.

Split icons look good but opening a panel if we have enough place in the gui seems strange.

[leper]

In 11669:

Clarify tech pairs. Refs #1356.

[leper]

In 11670:

Add a red overlay to the paired tech on hover. Fixes #1356.

[leper]

The current behaviour is the result of yesterday's irc discussion.

[Erik Johansson]

Worked nicely in-game. Links tells you they've got something to do with each other, and the overlay gives you easy and quick feedback that they're exclusive.