New design available for testing

I am pleased to annonce that I almost finished working on a new version of the UI for Photo Sphere Viewer. This new design does not revolutionize the UX but adds a bit of modern touch.

How to test this version

The new design is published as version 5.15.0-beta.1 or just beta on npmjs.org.

The documentation is not published but you can access it in the repository, especially the new navbar configuration.

Then you are welcome to share your toughs in this thread, as well as big breaking changes you might encounter (beside those listed bellow).

What changed

Most of the work has been on the navbar that is now splitted if multiple floating groups. The color scheme changed a bit with the addition of a blur effect on all transparent elements. Every plugin has been touched up to improve the look and feel.

Some CSS variables have been added to easily change the main colors across all components without recompiling the SCSS or doing a lot of overrides.

Breaking changes:

• of course of a lot of CSS changes
• removed the zoom slider
• removed the "loadingTxt" and "loadingImg" options

Other changes:

• the panel has a "title" option
• the loader can display an undefined state
• tooltips can be attached to DOM elements
• map/plan button is now in the navbar

[haldo98]

https://www.tadini.it/temp/panorama_piazzotti.html

Great work!!!

I just had to add the 'plan' button in the navbar config.

But if I open and then close the map, marker or click on any other button and then move the panorama with the arrows, the button previously selected remain selected (with a blue circle).

Perhaps since there is no longer a full bar, the caption group could be right-aligned (with an option), so that the groups are displayed symmetrically.
Just a thought.

[mistic100]

But if I open and then close the map, marker or click on any other button and then move the panorama with the arrows, the button previously selected remain selected (with a blue circle).

I am not sure this is new : the blue outline is used on focused elements, for keyboard navigation, I didn't change this behaviour. However could you do a screen recording ?

Perhaps since there is no longer a full bar, the caption group could be right-aligned (with an option), so that the groups are displayed symmetrically.

Good idea, I'll try to make it automatic depending on the navbar content

[haldo98]

But if I open and then close the map, marker or click on any other button and then move the panorama with the arrows, the button previously selected remain selected (with a blue circle).

I am not sure this is new : the blue outline is used on focused elements, for keyboard navigation, I didn't change this behaviour. However could you do a screen recording ?

You're right. I checked the current version and the behaviour is the same. and I hadn't noticed it before.
Anyway I have attached the screen rec.
I move the pano with the left/right arrows on the keyboard.

Psv.mp4

[neuhaus]

I like the changes. How do you feel about reducing the opacity of the buttons a bit more, in particular in fullscreen mode?

[mistic100]

good idea, I set a 0.7 opacity when in fullscreen

[filipedcon]

why loadingImg option is gonna be removed?

[mistic100]

the loader has been fully reimplemented with a percent progression text

further customization will be doable only with custom CSS