Add cross axis mapping panel

[ollimeier]

Fixes #1657

I guess this is good enough for a first draft PR to get feedback.

Note:

• you can open/close all cards with altKey + click the arrow.
• by default all cards are open (this differs from the sources panel, but is based on: https://github.com/googlefonts/fontra/issues/1466#issuecomment-2405928546)

There are some known issue:

• Reordering a card shows a wrong height of the card if closed (maybe a good follow up, because I am not sure if this should be fixed within setupSortableList)
• when editing a cross-axis mapping, the UI gets reloaded. This is not a big deal, BUT if one or more cards are closed, it's irritating, because these closed cards will be open afterwards.

[ollimeier]

Here a screenshot of how it looks currently:

And this is not a mockup anymore ;)

[justvanrossum]

Here a screenshot of how it looks currently

Great!

Some visual feedback:

• Please reduce the space between the slider and its checkbox (could be similar to the space between the numeric field and the slider). This should make it clearer that the checkbox belongs to the slider to its left
• Let's leave out the "incl." label (if could get a tooltip, like I suggested earlier)
• Please increase the space between the "Input/output location" label and the sliders
• The axis label should be axis.name, not axis.tag (see the Axes panel, but also the designspace-navigation panel)

Behavior:

• When the slider gets moved back to the default, this should not imply unchecking the checkbox. The checkbox is needed because there is not a 1-on-1 relationship between "axis is at default" and "axis participates".

Question:

• Undo doesn't seem to work?

when editing a cross-axis mapping, the UI gets reloaded. This is not a big deal, BUT if one or more cards are closed, it's irritating, because these closed cards will be open afterwards.

That actually does make it a big deal. Why is it necessary to reload the UI on every change?

[justvanrossum]

Layout structure:

I'm not confortable with reusing designspace-location this way, and the changes to the designspace-location web-component. The labels and checkboxes now have their own grid, and it will be hard to keep this perfectly in sync with the sliders grid. It should be a single grid:

+-----------+----------------+----------+-----------------+----------+
|           | Input location            | Output location            |
+-----------+----------------+----------+-----------------+----------+
| axis name | range-slider   | checkbox | range-slider    | checkbox |
+-----------+----------------+----------+-----------------+----------+
| axis name | range-slider   | checkbox | range-slider    | checkbox |
+-----------+----------------+----------+-----------------+----------+
| etc.      |                |          |                 |          |

[ollimeier]

+-----------+----------------+----------+-----------------+----------+
| | Input location | Output location |
+-----------+----------------+----------+-----------------+----------+
| axis name | range-slider | checkbox | range-slider | checkbox |
+-----------+----------------+----------+-----------------+----------+
| axis name | range-slider | checkbox | range-slider | checkbox |
+-----------+----------------+----------+-----------------+----------+
| etc. | | | | |

mmmhhh, I am not sure if I understand this correctly.
Currently it looks like this:

+------+-----------+-----------------+----------+-----------------+----------+------+
| Icon |           | Description     |          | Group Descript. |          | Icon |
+------+-----------+-----------------+----------+-----------------+----------+------+
|      |           | Input location  |          | Output location |          |      |
+------+-----------+-----------------+----------+-----------------+----------+------+
|      | axis name | number | slider | checkbox | number | slider | checkbox |      |
+------+-----------+-----------------+----------+-----------------+----------+------+
|      | axis name | number | slider | checkbox | number | slider | checkbox |      |
+------+-----------+-----------------+----------+-----------------+----------+------+
| etc. |           |                 |          |                 |          |      |

I don't fully understand how it should look like. When we want to keep the same look and feeling. Sorry.

[ollimeier]

In todays Meeting we discussed to refactor the two areas 'Applications settings' and 'Font Info' to reuse same code parts. This is a follow up. Prio has not been discussed, yet.

[ollimeier]

We also discussed an idea to have one or two preview glyphs for each card to get a visual representation of what we specify with input and output location. Should be a follow up.

[ollimeier]

Hi @justvanrossum, I will set this PR to 'Ready for review' in a bit.

I was able to address all feedback:

• reduce the space between the slider and its checkbox -> done.
• leave out the "incl." -> done.
• increase the space between the "Input/output location" label and the sliders -> done.
• axis label should be axis.name, not axis.tag -> done.
• moving slider back to default, should not imply unchecking the checkbox -> done.
• Undo doesn't seem to work? -> works now. done.
• any editing caused a reload of the UI -> not anymore. done.
• don't use designspace-location -> done.
• folded card without input/output headlines -> done.
• wrong draggable card height if a card is folded -> works now.
• remove 'Unnamed' string for new added mapping -> done.
• fix tooltip for checkboxes -> done.

[justvanrossum]

Great, thank you!

[justvanrossum]

I think found a bug: if you move a slider that is not yet participating once, then

1. the default value (or 0?) is written to the file instead of the slider value
2. undo seems to contain an empty step? you have to undo twice before the undo takes place

(FWIW, this is not related to the designspace backend: if I edit a .fontra project, the same thing happens)

[justvanrossum]

Request: please swap the Group description with the Description, so the Group description comes first.

[ollimeier]

Request: please swap the Group description with the Description, so the Group description comes first.

Agree. I changed it.

[ollimeier]

I think found a bug: if you move a slider that is not yet participating once, then

1. the default value (or 0?) is written to the file instead of the slider value
2. undo seems to contain an empty step? you have to undo twice before the undo takes place

(FWIW, this is not related to the designspace backend: if I edit a .fontra project, the same thing happens)

Thanks a lot for finding this. I can reproduce it. I'll have a look.

[ollimeier]

I think found a bug: if you move a slider that is not yet participating once, then

1. the default value (or 0?) is written to the file instead of the slider value
2. undo seems to contain an empty step? you have to undo twice before the undo takes place

(FWIW, this is not related to the designspace backend: if I edit a .fontra project, the same thing happens)

Thanks once again for finding these issues. They were related to each other. The last commit fixes both.

[ollimeier]

@justvanrossum I noticed, that the value written to the file has quite a lot of digits after the decimal point:

Should we limit this to two?

[justvanrossum]

Should we limit this to two?

I don't think it's a problem, let's keep the digits.

[justvanrossum]

It seems the width of the slider column seems to depend on the with of the description label:

It would be better if the sliders had the same widths.

[ollimeier]

It seems the width of the slider column seems to depend on the with of the description label:

It would be better if the sliders had the same widths.

Once you see it, you cannot unsee it – right?! Thanks for finding this. I simply have not seen it till now. I made it minmax(200px, 300px).

[ollimeier]

While editing the width of the column, I was wondering if it would make sense to use 'Group' instead of 'Group description' for the label, because 'Group description' is quite long. Any thoughts about that?

[justvanrossum]

use 'Group' instead of 'Group description'

Hm, not sure. Let me think about it. The whole thing is a bit weird in the .designspace format.

What helps a little bit is to change the grid-template-columns to min-content auto in .fontra-ui-font-info-cross-axis-mapping-panel-column: that keeps the space for the label to a minimum.

At the same time, the text entry box should be allowed to go over the checkbox columns, so I think each description label+input could be two columns wide.

[justvanrossum]

With a narrow viewport, the left text input bleeds into the next column instead of shrinking:

Perhaps the label should also be allowed to shrink.

[justvanrossum]

The label + input baseline should be aligned:

[justvanrossum]

This phrasing is awkward, but I'm also not sure what this tooltip is helping at all. Maybe remove it? But if you want to keep it, it would be slightly better as "Specify axes and their values for the input location". (Same for output.)

Suggest: "When checked, this axis participates in the mapping"

[ollimeier]

This phrasing is awkward, but I'm also not sure what this tooltip is helping at all. Maybe remove it? But if you want to keep it, it would be slightly better as "Specify axes and their values for the input location". (Same for output.) Suggest: "When checked, this axis participates in the mapping"

Thanks. I removed and change it.

[ollimeier]

The label + input baseline should be aligned:

Thanks. That's weird because I use labeledTextInput I wouldn't expect to have to touch it.

[ollimeier]

The label + input baseline should be aligned:

Thanks. That's weird because I use labeledTextInput I wouldn't expect to have to touch it.

display: grid; changes the visual position of the baseline :(

[ollimeier]

I think this is now good to go. Let's merge! 🎉

Sadly not. There is still a visual bug:

[ollimeier]

I think this is now good to go. Let's merge! 🎉

Sadly not. There is still a visual bug:

I fixed it. I will merge it now :)