From a0b9acee417ef776dba3d40eae10e8c2d4f2c7f8 Mon Sep 17 00:00:00 2001 From: konrad Date: Tue, 7 Jul 2020 20:07:13 +0000 Subject: [PATCH] Add Page Titles Everywhere (#177) Add page titles everywhere Add global mixin to set page title Co-authored-by: kolaente Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/177 --- src/App.vue | 2 ++ src/helpers/setTitle.js | 9 +++++++++ src/main.js | 4 +++- src/store/index.js | 4 ++++ src/views/404.vue | 5 ++++- src/views/labels/ListLabels.vue | 3 +++ src/views/list/EditList.vue | 1 + src/views/list/NewList.vue | 3 +++ src/views/list/ShowList.vue | 3 ++- src/views/migrator/Migrate.vue | 3 +++ src/views/migrator/MigrateService.vue | 3 +++ src/views/namespaces/EditNamespace.vue | 1 + src/views/namespaces/ListNamespaces.vue | 9 ++++++--- src/views/namespaces/NewNamespace.vue | 3 +++ src/views/sharing/LinkSharingAuth.vue | 3 +++ src/views/tasks/ShowTasks.vue | 6 ++++++ src/views/tasks/TaskDetailView.vue | 1 + src/views/teams/EditTeam.vue | 1 + src/views/teams/ListTeams.vue | 5 ++++- src/views/teams/NewTeam.vue | 3 +++ src/views/user/Login.vue | 3 +++ src/views/user/PasswordReset.vue | 3 +++ src/views/user/Register.vue | 3 +++ src/views/user/RequestPasswordReset.vue | 3 +++ src/views/user/Settings.vue | 3 +++ 25 files changed, 80 insertions(+), 7 deletions(-) create mode 100644 src/helpers/setTitle.js diff --git a/src/App.vue b/src/App.vue index 741e56359..229ccaa5b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -419,6 +419,8 @@ } }, doStuffAfterRoute(e) { + // this.setTitle('') // Reset the title if the page component does not set one itself + if (this.$store.state[IS_FULLPAGE]) { this.$store.commit(IS_FULLPAGE, false) } diff --git a/src/helpers/setTitle.js b/src/helpers/setTitle.js new file mode 100644 index 000000000..aec5a9feb --- /dev/null +++ b/src/helpers/setTitle.js @@ -0,0 +1,9 @@ + +export const setTitle = title => { + if (typeof title === 'undefined' || title === '') { + document.title = 'Vikunja' + return + } + + document.title = `${title} | Vikunja` +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index 6cd7f967d..e66785624 100644 --- a/src/main.js +++ b/src/main.js @@ -143,6 +143,7 @@ Vue.directive('focus', { import message from './message' import {format, formatDistance} from 'date-fns' import {colorIsDark} from './helpers/colorIsDark' +import {setTitle} from './helpers/setTitle' Vue.mixin({ methods: { formatDateSince: date => { @@ -161,7 +162,8 @@ Vue.mixin({ formatDate: date => format(date, 'PPPPpppp'), error: (e, context, actions = []) => message.error(e, context, actions), success: (s, context, actions = []) => message.success(s, context, actions), - colorIsDark: colorIsDark + colorIsDark: colorIsDark, + setTitle: setTitle, } }) diff --git a/src/store/index.js b/src/store/index.js index f20709ad7..3e0e664f9 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -11,6 +11,7 @@ import kanban from './modules/kanban' import tasks from './modules/tasks' import lists from './modules/lists' import ListService from '../services/list' +import {setTitle} from '../helpers/setTitle' export const store = new Vuex.Store({ modules: { @@ -45,6 +46,9 @@ export const store = new Vuex.Store({ state.isFullpage = fullpage }, [CURRENT_LIST](state, currentList) { + + setTitle(currentList.title) + // Not sure if this is the right way to do it but hey, it works if ( // List changed diff --git a/src/views/404.vue b/src/views/404.vue index a2151d6a8..6ae0dc319 100644 --- a/src/views/404.vue +++ b/src/views/404.vue @@ -7,6 +7,9 @@ diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue index c75b0ebfe..6c78ebaad 100644 --- a/src/views/labels/ListLabels.vue +++ b/src/views/labels/ListLabels.vue @@ -117,6 +117,9 @@ this.labelEditLabel = new LabelModel() this.loadLabels() }, + mounted() { + this.setTitle('Labels') + }, computed: mapState({ userInfo: state => state.auth.info }), diff --git a/src/views/list/EditList.vue b/src/views/list/EditList.vue index 3cb12c8fa..c41f47393 100644 --- a/src/views/list/EditList.vue +++ b/src/views/list/EditList.vue @@ -218,6 +218,7 @@ // This will trigger the dynamic loading of components once we actually have all the data to pass to them this.manageTeamsComponent = 'manageSharing' this.manageUsersComponent = 'manageSharing' + this.setTitle(`Edit ${this.list.title}`) }) .catch(e => { this.error(e, this) diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue index 6935dacbf..c7430bd14 100644 --- a/src/views/list/NewList.vue +++ b/src/views/list/NewList.vue @@ -51,6 +51,9 @@ this.listService = new ListService() this.$store.commit(IS_FULLPAGE, true) }, + mounted() { + this.setTitle('Create a new list') + }, methods: { newList() { if (this.list.title === '') { diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue index 565882d41..5dd600f55 100644 --- a/src/views/list/ShowList.vue +++ b/src/views/list/ShowList.vue @@ -70,11 +70,12 @@ return this.$store.state.background }, currentList() { - return typeof this.$store.state.currentList === 'undefined' ? {id: 0} : this.$store.state.currentList + return typeof this.$store.state.currentList === 'undefined' ? {id: 0, title: ''} : this.$store.state.currentList }, }, methods: { loadList() { + this.setTitle(this.currentList.title) // This invalidates the loaded list at the kanban board which lets it reload its content when // switched to it. This ensures updates done to tasks in the gantt or list views are consistently diff --git a/src/views/migrator/Migrate.vue b/src/views/migrator/Migrate.vue index bdf1f5335..1868b8f8c 100644 --- a/src/views/migrator/Migrate.vue +++ b/src/views/migrator/Migrate.vue @@ -14,6 +14,9 @@