Fdans has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/398854 )
Change subject: Add link path to router-link
......................................................................
Add link path to router-link
Router-links do not show the path they will navigate to when clicked.
However, for navigation clarity, and also to be able to open links in
another tab, the link path is useful. This change adds it.
Test plan:
- Hover over router-links and check the browser shows the full path.
- Click on router-links and check the browser does only xhr.
- Ctrl+click / Command+click on router-links and check links are
opened in new tabs regularly.
Bug: T183149
Change-Id: Id2f6b81603b730c6ff01312eed592ca6fc326490
---
M src/components/RouterLink.vue
M src/components/TopNav.vue
2 files changed, 20 insertions(+), 4 deletions(-)
Approvals:
jenkins-bot: Verified
Fdans: Verified; Looks good to me, approved
diff --git a/src/components/RouterLink.vue b/src/components/RouterLink.vue
index f581ec3..5db600f 100644
--- a/src/components/RouterLink.vue
+++ b/src/components/RouterLink.vue
@@ -1,5 +1,5 @@
<template>
-<a href="#" @click.prevent="commitState()" :class="highlightClass()">
+<a :href="linkPath()" @click="commitState($event)" :class="highlightClass()">
<slot></slot>
</a>
</template>
@@ -13,9 +13,22 @@
to: { type: Object, default: '' },
},
methods: {
- commitState () {
- if (!this.isCurrent()) {
- this.$store.commit('resetNavigationState', this.to);
+ linkPath () {
+ // Note that href="linkPath()" is not used by the browser for
regular clicks.
+ // The browser will only use it when opening links in a new tab,
and also as
+ // a visual reference for the user when they hover the cursor over
a link.
+ let root = window.location.pathname;
+ let redirectedState = router.getRedirectedState(this.to, routes)
|| this.to;
+ return router.getPathFromState(root, redirectedState, routes);
+ },
+ commitState (event) {
+ // If the user tries to open a link in a new tab, let the browser
handle that.
+ // Otherwise, prevent the default request and navigate by directly
changing the state.
+ if (!event.ctrlKey && !event.metaKey) {
+ event.preventDefault();
+ if (!this.isCurrent()) {
+ this.$store.commit('resetNavigationState', this.to);
+ }
}
},
highlightClass () {
diff --git a/src/components/TopNav.vue b/src/components/TopNav.vue
index 406e1c0..3296661 100644
--- a/src/components/TopNav.vue
+++ b/src/components/TopNav.vue
@@ -60,4 +60,7 @@
.router-link-current {
cursor: default;
}
+.router-link-not-current {
+ color: #3366cc;
+}
</style>
--
To view, visit https://gerrit.wikimedia.org/r/398854
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id2f6b81603b730c6ff01312eed592ca6fc326490
Gerrit-PatchSet: 5
Gerrit-Project: analytics/wikistats2
Gerrit-Branch: master
Gerrit-Owner: Mforns <[email protected]>
Gerrit-Reviewer: Fdans <[email protected]>
Gerrit-Reviewer: Mforns <[email protected]>
Gerrit-Reviewer: Milimetric <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
