Viewer design alignment with semantic kompakkt

[Grizzly127]

Options in the viewer for the object page

in kompakkt this options are available:

• camera settings
• screenshot
• Select your language
• Enter fullscreen

in semantic kompakkt this options are available:

• Reset camera persepective
• Authenticated
• Screenshot
• Enter fullscreen

Which options are still relevant? Which ones should be used here?
@lozanaross @HeyItsBATMAN

[HeyItsBATMAN]

• "Camera settings" replaces "Reset camera perspective"

• "Authenticated" can be removed I think, because when a login is required to access the content, a login dialog will be displayed anyways, and the Viewer automatically requests authentication depending on the mode (like for upload and annotation mode).

• Fullscreen is necessary, as this is the easiest way to get the viewer to in fullscreen mode (as opposed to having to press hotkeys or similar?). The only alternative I could imagine for this would be to have a button to shrink the metadata sidebar on the detail page, and expand the viewer, similar to how on YouTube you can have the "expanded but not fullscreen" player, but since the viewer can also be used as a standalone viewer, I feel like this is not necessary.

• The language selection feature was added as a feature for the ARTEST project partners, so atleast for the Cologne side, it is necessary, but if not needed for SK, this could be moved into a plugin.

[Grizzly127]

Alright, then the features for kompakkt can stay the same. Except for eventually removing the language feature.
I'll write the adaptions for semantic kompakkt in Gitlab.

[lozanaross]

Thanks @HeyItsBATMAN and @Grizzly127, yes, language should be in a plugin for SK, since we don't yet have option to switch to German (which would be relevant to us), we should not include it for now.

[Grizzly127]

sidebar design

Kai and me worked on the sidebar and Kai already implemented it, so it is basically ready.
Do you have any feedback?

here is a snippet of how it looked before:

after:
maybe it's better to see in Figma, since it looks small here

light mode will follow

@lozanaross @HeyItsBATMAN

[lozanaross]

@Grizzly127 Sidebar design looks good, i just made some recommendations in Figma mostly connected to text changes.

[Grizzly127]

@Grizzly127 Sidebar design looks good, i just made some recommendations in Figma mostly connected to text changes.

I implemented the text changes:

The darkmode sidebar has slightly grey boxes to divide the parts better, instead of a line. It looked better than the line, I think.
That's why the light mode also has the boxes and that's where the boxes for the annotation window come from.
I can make another mock-up without the boxes.

This is the light mode so far:

@lozanaross

[lozanaross]

@Grizzly127 OK, I see - it was less noticeable in the dark mode and now I am not sure, we don't use these boxes within boxes anywhere else and it introduces a lot of extra padding - the sidebar is already narrow and within this sidebar we're adding another layer of padding that makes everything narrower. But mostly, if you look around the entire UI to date (in the Figma file) - we use grey input boxes within dialogs (eg see login or Register) and we sometimes use dividing lines, or something like lines, in places like the Upload wizard, but also in the display of metadata on the side of the viewer window, etc. So i think we should stick more to the existing UI, otherwise we'll have to revise a lot more sections to then use these rounded boxes. And in the case of the sidebar here, I don't think we even need dividing lines because you introduced the little section headings with the arrow symbol we also use in the metadata wizard. I would suggest you mock this up as a single block / sidebar without dividing lines and only using typography and padding to differentiate the sections.

[Grizzly127]

Here is the design without the boxes and without double background settings:

darkmode:

lightmode:

@lozanaross

[lozanaross]

Thanks @Grizzly127 I think this looks quite clear. Only small suggestion to keep things more consistent would be to make the input fields (x, y, z axis) in dark mode also a shade of grey different from the background (like they are in light mode).

[Grizzly127]

Thanks @Grizzly127 I think this looks quite clear. Only small suggestion to keep things more consistent would be to make the input fields (x, y, z axis) in dark mode also a shade of grey different from the background (like they are in light mode).

alright, added grey to the input fields

[Grizzly127]

Corrections viewer

Some small corrections or bugs that occurred to us.

• right now there are still grey boxes around the element, we agreed to remove them

• we should think about the numbers at the sliders again, they don't make much sense yet (why is Pointlight until 50 for example)
• The pointlight needs some adjustment in general because the user can't see where the light is coming from, but this will get an extra issue
• for Rotation and Pointlight it would be nice to have an additional arrow at the boxes to adjust the numbers easier

@HeyItsBATMAN