Ad/persistent menu mouseover #35566
Ad/persistent menu mouseover #35566
Conversation
dimagimon
added
the
Risk: Medium
Robert-Costello
requested review from
a team,
MartinRiese,
AddisonDunn and
minhaminha
and removed request for
a team
Robert-Costello
requested review from
orangejenny,
biyeun,
stephherbers,
Jtang-1 and
nospame
as code owners
| @@ -121,6 +121,7 @@ hqDefine("cloudcare/js/formplayer/apps/views", [ | |||
|
|
|||
| initialize: function (options) { | |||
| this.shouldShowIncompleteForms = options.shouldShowIncompleteForms; | |||
| sessionStorage.removeItem('handledDefaultClosed'); | |||
There was a problem hiding this comment.
Does this mean if you reload the page the setting will be lost?
There was a problem hiding this comment.
If you lock the nav menu open, you can reload the page and the menu will stay open. The nav menu will stay expanded until you unlock it or navigate out of the app to the home menu.
| persistentMenuContainer.addClass('position-relative'); | ||
| sessionStorage.showPersistentMenu = true; | ||
| }, | ||
| deLockMenu: function () { |
There was a problem hiding this comment.
agreed
af38e12
| fetchPersistantMenuRegionWidth: function () { | ||
| let persistantMenuRegionWidth = sessionStorage.getItem('persistantMenuRegionWidth'); | ||
| if (!persistantMenuRegionWidth) { | ||
| persistantMenuRegionWidth = this.setPersistantMenuRegionWidth(); |
There was a problem hiding this comment.
to me sessionStorage.setItem('persistantMenuRegionWidth', regionWidth); belongs in the if block here.
There was a problem hiding this comment.
In that case setPersistantMenuRegionWidth would just do the calculation and I'd rename it to something like calcPersistantMenuRegionWidth and maybe rename the fetchPersistantMenuRegionWidth to setPersistantMenuRegionWidth. That sounds good if that's what you're thinking.
There was a problem hiding this comment.
went with calcPersistantMenuRegionWidth and getPersistantMenuRegionWidth 705e266
I agree with this. I'm not sure about how hard it would be either, but I'll give it a go. ...turns out it was incredibly easy 5c682d3 |
Robert-Costello
force-pushed
the
ad/persistent-menu-mouseover
branch
from
af38e12 to
705e266
Compare
Product Description
This makes it so that the persistent nav sidebar pops open as an overlay when the user hovers over the collapsed menu.
The menu can be locked open which will do two things.
1: it will fit the nav menu inline with the other elements on the page (no longer an overlay).
2: the nav menu will continue to be expanded as the user navigates between menus.
Technical Summary
Jira ticket for mouseover
In order to have have a transition for the expanding and collapsing you need to know the width the menu will be when expanded. To accomplish this
setPersistantMenuRegionWidthsets up invisible clones of the elements that make up the nav menu and stores that value insessionStorageso that it only needs to be calculated once per session. The value,persistantMenuRegionWidth, is reset when the page is initialized.I looked at the possibility of using a css calc to determine the width, but I don't think that will work. The width will depend on the text content of the menu and the elements need to be appended to the DOM in order to get the correct width.
I'm pretty happy with the current approach, but open to other suggestions.
Jira ticket for defaulting nav menu to closed when split screen case search is on.
Feature Flag
persistent_menu_setting
Safety Assurance
Safety story
tested locally and on staging
changes are limited to this feature flag and the only risk I can see is undesirable ui on the persistent men nav bar.
Automated test coverage
QA Plan
no QA planned
Rollback instructions
Labels & Review