Virtual Tour: Render one line labels on view


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.

  • Overlapping labels.

Acceptance Criteria



Simon Date
December 8, 2020, 1:39 PM

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.

Hanna Eide Solstad
December 10, 2020, 9:43 AM

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

Hanna Eide Solstad
December 15, 2020, 12:47 PM

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.

Simon Date
December 15, 2020, 4:50 PM

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.

Hanna Eide Solstad
December 15, 2020, 7:00 PM

Looks great now!

As shown here the label top is supposed to expand upwards if it doesn’t overflow, but that will be handled in this issue



Simon Date


Pål Jørgensen





Code reviewer

Hanna Eide Solstad



Time tracking


Time remaining