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.

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

Move maintenance banner to top of the screen #7421

Merged
merged 10 commits into from
Nov 2, 2023

Conversation

hotzenklotz
Copy link
Member

@hotzenklotz hotzenklotz commented Nov 1, 2023

This PR moves the maintenance banner to the very top of the screen as part of the navbar so it does not interfere with other menus / buttons / tabs etc.

The CSS remains mostly untouched. The trick was to use real CSS variables for the navbar height instead of just a LESS variable. These CSS variables can be modified in (JS) code and then the rest of the styles just adapt.
Additionally the current navbar height is also saved in the stored and can be referenced in different downstream methods that used a constant instead.

I also refactored the maintenance banner component a little bit to more clearly separate the data/state from the rendering of the component.

image image image

URL of deployed dev instance (used for testing):

  • https://___.webknossos.xyz

Steps to test:

  • Create new scheduled maintenances
    • e.g. Edit "maintenances" table
INSERT INTO "webknossos"."maintenances"("_id", "_user", "starttime", "endtime", "message", "created", "isdeleted") VALUES('653baadfef0100310a01ec94', '6538f9e0ef0100ef0101ec6d', '2023-11-02 13:03:15.125+01', '2023-11-02 13:50:00.452+01', 'Test Maintenance Banner Foobar Test Maintenance Banner Foobar Test Maintenance Banner Foobar Test Maintenance Banner Foobar Test Maintenance Banner Foobar Test Maintenance Banner Foobar Test Maintenance Banner Foobar ', '2023-10-27 14:19:43.343+02', FALSE) RETURNING "_id", "_user", "starttime", "endtime", "message", "created", "isdeleted";
  • Try with a currently active maintenance and a maintenance scheduled in the future

Issues:


(Please delete unneeded items, merge only when none are left open)

@hotzenklotz hotzenklotz self-assigned this Nov 1, 2023
Copy link
Member

@philippotto philippotto left a comment

Choose a reason for hiding this comment

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

Great stuff 🎉 I like the CSS solution and also the refactoring of the component.
Besides my few comments, I noticed that the ArbitraryView didn't get a listener (like the PlaneView did) even though it uses getGroundTruthLayoutRect. Probably needs to be added?

frontend/javascripts/maintenance_banner.tsx Outdated Show resolved Hide resolved
frontend/javascripts/maintenance_banner.tsx Outdated Show resolved Hide resolved
frontend/javascripts/oxalis/view/plane_view.ts Outdated Show resolved Hide resolved
hotzenklotz and others added 3 commits November 2, 2023 10:48
Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>
Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>
Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>
@hotzenklotz
Copy link
Member Author

I noticed that the ArbitraryView didn't get a listener (like the PlaneView did) even though it uses getGroundTruthLayoutRect. Probably needs to be added?

Good call. Thanks I overlooked this one and will add it.

Copy link
Member

@philippotto philippotto left a comment

Choose a reason for hiding this comment

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

Works very well 👍 Thank you for investing time in this 🥇

@hotzenklotz hotzenklotz merged commit aa6b815 into master Nov 2, 2023
2 checks passed
@hotzenklotz hotzenklotz deleted the dynamic_maintenance_banner_height branch November 2, 2023 12:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants