Highlight the current list when something list related is called

This commit is contained in:
kolaente 2020-05-08 21:07:33 +02:00
parent 5724b98358
commit 8ae03fa6e9
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
5 changed files with 30 additions and 5 deletions

View file

@ -141,7 +141,7 @@
<div class="more-container" :key="n.id + 'child'"> <div class="more-container" :key="n.id + 'child'">
<ul class="menu-list can-be-hidden" > <ul class="menu-list can-be-hidden" >
<li v-for="l in n.lists" :key="l.id"> <li v-for="l in n.lists" :key="l.id">
<router-link :to="{ name: 'list.index', params: { listId: l.id} }"> <router-link :to="{ name: 'list.index', params: { listId: l.id} }" :class="{'router-link-exact-active': currentList === l.id}">
<span class="name"> <span class="name">
<span class="color-bubble" v-if="l.hexColor !== ''" :style="{ backgroundColor: l.hexColor }"></span> <span class="color-bubble" v-if="l.hexColor !== ''" :style="{ backgroundColor: l.hexColor }"></span>
{{l.title}} {{l.title}}
@ -223,7 +223,7 @@
import swEvents from './ServiceWorker/events' import swEvents from './ServiceWorker/events'
import Notification from './components/global/notification' import Notification from './components/global/notification'
import Fancycheckbox from './components/global/fancycheckbox' import Fancycheckbox from './components/global/fancycheckbox'
import {IS_FULLPAGE, ONLINE} from './store/mutation-types' import {CURRENT_LIST, IS_FULLPAGE, ONLINE} from './store/mutation-types'
export default { export default {
name: 'app', name: 'app',
@ -302,6 +302,7 @@
namespaces(state) { namespaces(state) {
return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived) return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
}, },
currentList: CURRENT_LIST,
}), }),
methods: { methods: {
logout() { logout() {
@ -320,6 +321,21 @@
this.loadNamespacesIfNeeded(e) this.loadNamespacesIfNeeded(e)
this.mobileMenuActive = false this.mobileMenuActive = false
this.userMenuActive = false this.userMenuActive = false
// Reset the current list highlight in menu if the current list is not list related.
if (
this.$route.name === 'home' ||
this.$route.name === 'editNamespace' ||
this.$route.name === 'listTeams' ||
this.$route.name === 'editTeam' ||
this.$route.name === 'showTasksInRange' ||
this.$route.name === 'listLabels' ||
this.$route.name === 'migrateStart' ||
this.$route.name === 'migrate.wunderlist' ||
this.$route.name === 'userSettings'
) {
this.$store.commit(CURRENT_LIST, 0)
}
}, },
showRefreshUI(e) { showRefreshUI(e) {
console.log('recieved refresh event', e) console.log('recieved refresh event', e)

View file

@ -26,6 +26,7 @@
import ListModel from '../../models/list' import ListModel from '../../models/list'
import ListService from '../../services/list' import ListService from '../../services/list'
import {CURRENT_LIST} from "../../store/mutation-types";
export default { export default {
data() { data() {
@ -65,6 +66,8 @@
return return
} }
this.$store.commit(CURRENT_LIST, Number(this.$route.params.listId))
// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux. // We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
let list = new ListModel({id: this.$route.params.listId}) let list = new ListModel({id: this.$route.params.listId})
this.listService.get(list) this.listService.get(list)

View file

@ -5,7 +5,7 @@ Vue.use(Vuex)
import config from './modules/config' import config from './modules/config'
import auth from './modules/auth' import auth from './modules/auth'
import namespaces from './modules/namespaces' import namespaces from './modules/namespaces'
import {ERROR_MESSAGE, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types' import {CURRENT_LIST, ERROR_MESSAGE, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types'
export const store = new Vuex.Store({ export const store = new Vuex.Store({
modules: { modules: {
@ -18,6 +18,8 @@ export const store = new Vuex.Store({
errorMessage: '', errorMessage: '',
online: true, online: true,
isFullpage: false, isFullpage: false,
// This is used to highlight the current list in menu for all list related views
currentList: 0,
}, },
mutations: { mutations: {
[LOADING](state, loading) { [LOADING](state, loading) {
@ -31,6 +33,9 @@ export const store = new Vuex.Store({
}, },
[IS_FULLPAGE](state, fullpage) { [IS_FULLPAGE](state, fullpage) {
state.isFullpage = fullpage state.isFullpage = fullpage
} },
[CURRENT_LIST](state, currentList) {
state.currentList = currentList
},
}, },
}) })

View file

@ -2,6 +2,7 @@ export const LOADING = 'loading'
export const ERROR_MESSAGE = 'errorMessage' export const ERROR_MESSAGE = 'errorMessage'
export const ONLINE = 'online' export const ONLINE = 'online'
export const IS_FULLPAGE = 'isFullpage' export const IS_FULLPAGE = 'isFullpage'
export const CURRENT_LIST = 'currentList'
export const CONFIG = 'config' export const CONFIG = 'config'
export const AUTH = 'auth' export const AUTH = 'auth'

View file

@ -237,7 +237,7 @@
padding-right: 0.5em; padding-right: 0.5em;
} }
&.router-link-active { &.router-link-exact-active {
color: $primary; color: $primary;
border-left: $vikunja-nav-selected-width solid darken($primary, 5%); border-left: $vikunja-nav-selected-width solid darken($primary, 5%);
.icon { .icon {