Skip to content

Commit

Permalink
Fix reactivity in mobile shares nav
Browse files Browse the repository at this point in the history 
Update snapshot test
  • Loading branch information
@kulmann @pascalwengerter
kulmann authored and pascalwengerter committed Mar 11, 2022
1 parent d05d5aa commit 4587dd0
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 10 deletions.
17 changes: 13 additions & 4 deletions packages/web-app-files/src/components/AppBar/SharesNavigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ import {
locationSharesWithMe,
locationSharesWithOthers
} from '../../router/shares'
import { useActiveLocation } from '../../composables'
import { computed, getCurrentInstance, unref } from '@vue/composition-api'
import { useRouter } from 'web-pkg/src/composables'
import { useActiveLocation } from '../../composables'
export default {
setup() {
Expand All @@ -61,24 +61,33 @@ export default {
routes[route.name] = router.getRoutes().find((r) => r.name === route.name)
return routes
}, {})
const sharesWithMeActive = useActiveLocation(isLocationSharesActive, locationSharesWithMe.name)
const sharesWithOthersActive = useActiveLocation(
isLocationSharesActive,
locationSharesWithOthers.name
)
const sharesViaLinkActive = useActiveLocation(
isLocationSharesActive,
locationSharesViaLink.name
)
const navItems = computed(() => [
{
icon: 'share-forward',
to: sharesRoutes[locationSharesWithMe.name].path,
text: $gettext('Shared with me'),
active: unref(useActiveLocation(isLocationSharesActive, locationSharesWithMe.name))
active: unref(sharesWithMeActive)
},
{
icon: 'reply',
to: sharesRoutes[locationSharesWithOthers.name].path,
text: $gettext('Shared with others'),
active: unref(useActiveLocation(isLocationSharesActive, locationSharesWithOthers.name))
active: unref(sharesWithOthersActive)
},
{
icon: 'link',
to: sharesRoutes[locationSharesViaLink.name].path,
text: $gettext('Shared via link'),
active: unref(useActiveLocation(isLocationSharesActive, locationSharesViaLink.name))
active: unref(sharesViaLinkActive)
}
])
return {
Expand Down
12 changes: 6 additions & 6 deletions ...es/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
<nav id="shares-navigation" aria-label="Shares pages navigation" class="oc-py-s">
<ul class="oc-list oc-my-rm oc-mx-rm oc-flex oc-visible@s">
<li>
<oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mx-s oc-p-s shares-nav-desktop">
<oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-m oc-py-s shares-nav-desktop">
<oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span>Shared with me</span>
</oc-button-stub>
</li>
<li>
<oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mx-s oc-p-s shares-nav-desktop">
<oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-m oc-py-s shares-nav-desktop">
<oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span>Shared with others</span>
</oc-button-stub>
</li>
<li>
<oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mx-s oc-p-s shares-nav-desktop">
<oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-m oc-py-s shares-nav-desktop">
<oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span>Shared via link</span>
</oc-button-stub>
</li>
Expand All @@ -25,13 +25,13 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
<div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
<ul class="oc-list oc-my-rm oc-mx-rm">
<li>
<oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-my-xs"><span class="icon-box"><oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Shared with me</span></oc-button-stub>
<oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-my-xs shares-nav-mobile"><span class="icon-box"><oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Shared with me</span></oc-button-stub>
</li>
<li>
<oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-my-xs"><span class="icon-box"><oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Shared with others</span></oc-button-stub>
<oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-my-xs shares-nav-mobile"><span class="icon-box"><oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Shared with others</span></oc-button-stub>
</li>
<li>
<oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-my-xs"><span class="icon-box"><oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Shared via link</span></oc-button-stub>
<oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-my-xs shares-nav-mobile"><span class="icon-box"><oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Shared via link</span></oc-button-stub>
</li>
</ul>
</div>
Expand Down

0 comments on commit 4587dd0

Please sign in to comment.