Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make Studio and Editor look alike #1035

Merged
merged 4 commits into from
Apr 20, 2023
Merged

Make Studio and Editor look alike #1035

merged 4 commits into from
Apr 20, 2023

Conversation

lkiesow
Copy link
Member

@lkiesow lkiesow commented Apr 14, 2023

Opencast Studio and the Opencast Editor are some of the most prominent new tools of Opencast. It would be nice if the look and feel of both would be more similar so that it feels like they belong to the same service.

This patch is a first step. It introduces a header and logo similar to Studio.

In the future, we can also use this to give users easy access to language options and other settings like with Studio. But that is something for future patches.

Screenshot from 2023-04-14 12-47-15

@lkiesow
Make Studio and Editor look alike
78adbda 
Opencast Studio and the Opencast Editor are some of the most prominent
new tools of Opencast. It would be nice if the look and feel of both
would be more similar so that it feels like they belong to the same
service.

This patch is a first step. It introduces a header and logo similar to
Studio.

In the future, we can also use this to give users easy access to
language options and other settings like with Studio. But that is
something for future patches.
@github-actions
Copy link

This pull request is deployed at test.editor.opencast.org/1035/2023-04-14_10-50-57/ .
It might take a few minutes for it to become available.

@Arnei Arnei added the type:visual-clarity A part of the UI is not visually readable label Apr 14, 2023
Arnei
Arnei requested changes Apr 14, 2023
View reviewed changes
Copy link
Member

@Arnei Arnei left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This introduces a permanent vertical scrollbar into the application. Could you get rid of that?

@Arnei
Copy link
Member

Arnei commented Apr 14, 2023

Also we probably want a new class for the Header, rather than put everything into App.tsx. But that will probably happen organically when the Header is developed further, so whatever.

Also maybe the header should look different in high contrast mode, but I don't know about that. @naweidner , what do you think?

Looks good otherwise. Finally, a header!

@lkiesow
Adjust body height for header
76c27c9 
This patch adjust the content height to address the problem of the
overall height being too much, which would always cause scroll bars to
appear.

This also moves the Header code to a separate file in anticipation of
more code being added there later.
@github-actions
Copy link

This pull request is deployed at test.editor.opencast.org/1035/2023-04-15_21-44-42/ .
It might take a few minutes for it to become available.

@lkiesow
Header high-contrast mode
3727853 
With this patch, if in high contrast mode, the header gets a pure back
background instead of the gray one.
@lkiesow
Copy link
Member Author

lkiesow commented Apr 15, 2023

  • Moved header code to its own file
  • Adjusted the page height to avoid scroll bars
  • Now avoiding gray in high contrast mode

@lkiesow lkiesow requested a review from Arnei April 15, 2023 21:55
@github-actions
Copy link

This pull request is deployed at test.editor.opencast.org/1035/2023-04-15_21-53-26/ .
It might take a few minutes for it to become available.

@narickmann
Copy link
Contributor

Also maybe the header should look different in high contrast mode, but I don't know about that. @naweidner , what do you think?

Yes, I agree. It has been implemented now and think it also looks better in black than grey.

In the future, we can also use this to give users easy access to language options and other settings like with Studio

Could a border at the bottom of the header make sense (only in high contrast mode)?
I'm already thinking further when there are more elements in the header, such as language selection and other options, as mentioned above. So that there is a visible separation between header and content.

@lkiesow
Border in High Contrast Mode
2b21801 
This patch adds an additional border to the bottom of the header when
the editor is in high contrast mode.
@lkiesow
Copy link
Member Author

lkiesow commented Apr 17, 2023

Could a border at the bottom of the header make sense (only in high contrast mode)?

Done:

Screenshot from 2023-04-17 20-12-15

@github-actions
Copy link

This pull request is deployed at test.editor.opencast.org/1035/2023-04-17_18-15-35/ .
It might take a few minutes for it to become available.

@Arnei Arnei merged commit ca997e8 into opencast:main Apr 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@narickmann narickmann narickmann approved these changes

@Arnei Arnei Arnei approved these changes

Assignees
No one assigned
Labels
type:visual-clarity A part of the UI is not visually readable
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@lkiesow @Arnei @narickmann