FIX: Allow mobile-nav to work without loading transitions (#12184)

Previously, the `{{mobile-nav}}` component required a `currentRouteName` property, passed from the router service. It would observe changes in this property, and update the UI accordingly.

If we change between routes which have the same `currentRouteName` (e.g. two different group message inboxes), then the `currentRouteName` does not change and does not trigger the observer. Currently in core, we are relying on the fact that currentRouteName temporarily enters a `.loading` substate during a transition. This will change when we remove the loading substate in the near future.

This commit refactors `{{mobile-nav}}` to inject the router directly, and use the `routeDidChange` event instead of an observer. The change is backwards compatible, but plugins passing the old `currentPath` property will be shown a deprecation notice.
This commit is contained in:
David Taylor
2021-02-23 11:16:40 +00:00
committed by GitHub
parent 0f807ba85b
commit 1844bde57c
20 changed files with 35 additions and 40 deletions

View File

@ -3,7 +3,7 @@
{{/styleguide-example}}
{{#styleguide-example title=".user-main .nav-pills"}}
{{#mobile-nav class="main-nav" desktopClass="nav nav-pills user-nav" currentPath=currentPath}}
{{#mobile-nav class="main-nav" desktopClass="nav nav-pills user-nav"}}
{{#each dummy.navItems as |ni|}}
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
{{/each}}

View File

@ -1,5 +1,5 @@
{{#styleguide-example title=".nav-stacked" class="half-size"}}
{{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked" currentPath=application.currentPath}}
{{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked"}}
{{#each dummy.navItems as |ni|}}
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
{{/each}}
@ -8,7 +8,7 @@
{{#styleguide-example title=".user-navigation .nav-stacked" class="half-size"}}
{{#d-section class="user-navigation"}}
{{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked" currentPath=application.currentPath}}
{{#mobile-nav class="preferences-nav" desktopClass="preferences-list action-list nav-stacked"}}
{{#each dummy.navItems as |ni|}}
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
{{/each}}