Implement basic support for “one-line” labels, with support for the four different positions:
This is does not cover the following:
Label for scene
Expanding/collapsing the labels.
I’ve just added a commit to use position: absolute which makes only the selection border appear around the border.
I’ve also reduced the font-size to 0.9em on static scene so that it looks the same on single line as it does in the UX prototype. On three-sixty this value is set to 1.8em.
Finally, I’ve set the left and right align to have a min-width of 6em and max-width of 9em. Meaning that smaller labels don’t look too large. Top and bottom align always have 9em.
Looks much better now!
Here are my comments:
Since creating a new NavigationButtonLabel there should move the css that is related to it as well
I get these errors when in the process of creating one. Should probably be a check if label is defined before getting label.labelText
For the positioning of the button labels you should use:
We try to avoid using “magic numbers” because it is more difficult to understand and it is a problem if the button width is changed now.
I see there is still some commented out functions in NavigationButtonLabel that can be removed if
Great work Simon! I only find one issue now and that is for the top and bottom aligned labels is not positioned correctly as shown below.
I’ve just fixed the height and also changed the text-align to prevent it jumping around on open/close.
Can you remind me the proposed functionality of label top? Is it meant to expand upwards or downwards by default? I know this will also need to be implemented eventually for when we add the side detection.