Add configuration to show top bar with organisation logo and user info #1
Conversation
|
A thought: The background and text color in the top bar are sometimes adjusted to fit with the org logo. We may want to allow configuration of that as well. |
|
Implementing the top bar through a React component as opposed to injecting it directly into the frontend fixes two minor issues: (1) the arrow at the bottom of the home page (see below) is cut off because the page content is pushed down by the top bar and (2) the scrolling issue (when scrolling down from the top of the page, there is a small jump).
|
|
The previous approach, while working around the awkwardness of patching things that should have been configurable into the upstream code before building, caused a third layout issue where the bar would obscure widgets with absolute or fixed positioning at the very top of the page, such as the back-to-top button in the navbar of OT Platform profile pages and the button to reset the expanded view of a molecular 3d structure. |
|
I vaguely remember that as well. |
|
Maybe we can already implement it as a shared component between OTP and OTG, I think that would be ideal. |
I already assumed that that would be the next action after merging this one, if not the next commit before doing so 😄 I imagine that releases of OTP and OTG usually use different snapshots of the ot-ui-apps code so we don't deploy the same commit (this PR still points to the one that was used in the previous release of the platform), but maintaining different sets of patches between the two apps sounds needlessly complicated. |
|
So far, (rebased on 0.2.5/docker for platform 22.09) I've still found two issues of the same scale as the ones it is supposed to fix: the back-to-top button in the profile page navbar is still obscured by the top bar and the 3d structure view (in the ProtVista section on target profile pages) now moves in front of the top bar even when just scrolling by it (rather than expanding to fill the window): I'll start looking whether I can fix them. |
fedde-s
force-pushed
the
configurable-company-bar
branch
from
24dbba4
to
7b252f6
Compare
|
I've addressed the issues I found. @romanhaa, would you have time to review the four added commits at some point? |
|
The last commit is a refactoring of the one before; to avoid rebase conflicts in the future, we should squash at least those two. |
|
Very nice, thanks for polishing this and taking care of all the (discovered) bugs. The last thing that comes to my mind is that it would be great if the top bar could also be enabled for OTG. When I started this PR, OTG wasn't using this repo for the frontend yet but now we could really make use of shared components. |
Keeping the Back to top button from being obscured.
The ProtVista protein structure viewer on the target profile page rendered over the logo bar when scrolling past it, seemingly because the logo bar existed in the DOM inside the local stacking context of another app bar with a z-index value lower than 40001. This still leaves the issue that the bar also overlays the 3d structure viewer when it's expanded to fill the viewport, blocking some of the buttons of the viewer.
romanhaa
force-pushed
the
configurable-company-bar
branch
from
5259ade
to
65d04b4
Compare
|
I rebased the commits on the |
|
As discussed, I added logic to call |
|
Still working on the final test in OTG before squash-merging this in preparation for platform 23.02 |
Co-authored-by: Fedde Schaeffer <[email protected]>
Co-authored-by: Fedde Schaeffer <[email protected]>
Co-authored-by: Fedde Schaeffer <[email protected]>
Co-authored-by: Fedde Schaeffer <[email protected]>
Co-authored-by: Fedde Schaeffer <[email protected]>
Co-authored-by: Fedde Schaeffer <[email protected]> Co-authored-by: Alessia Peviani <[email protected]>
Co-authored-by: Fedde Schaeffer <[email protected]> Co-authored-by: Alessia Peviani <[email protected]>
Co-authored-by: Fedde Schaeffer <[email protected]> Co-authored-by: Alessia Peviani <[email protected]>
Co-authored-by: Fedde Schaeffer <[email protected]>
This PR allows showing a top bar with an organisation logo and optionally information about the currently logged in user. Merging this into our fork means we no longer have to commit this into project repositories.