From abb0c2e25f0edde72ab107025aec721f1453cb62 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Wed, 8 Jan 2020 22:06:39 +0100 Subject: [PATCH 01/45] refactor: add vue-router It was removed in https://github.com/LyonDataViz/occupapp/commit/e19055c838ba6117a22d2106decb8d4b955b5509 --- src/App.vue | 138 +----------------------- src/components/{Home.vue => Main.vue} | 2 +- src/main.ts | 2 + src/router/index.ts | 28 +++++ src/views/Home.vue | 148 ++++++++++++++++++++++++++ 5 files changed, 181 insertions(+), 137 deletions(-) rename src/components/{Home.vue => Main.vue} (98%) create mode 100644 src/router/index.ts create mode 100644 src/views/Home.vue diff --git a/src/App.vue b/src/App.vue index 97b3e5f..87e5665 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,149 +1,15 @@ diff --git a/src/components/Home.vue b/src/components/Main.vue similarity index 98% rename from src/components/Home.vue rename to src/components/Main.vue index e46dc73..3abc4fb 100644 --- a/src/components/Home.vue +++ b/src/components/Main.vue @@ -92,7 +92,7 @@ const points = getModule(Points) MainPanel } }) -export default class Home extends Vue { +export default class Main extends Vue { // annotate refs type $refs!: { container: HTMLElement, diff --git a/src/main.ts b/src/main.ts index dd710dd..4fb129d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,11 +1,13 @@ import Vue from 'vue' import App from './App.vue' +import router from './router' import store from './store' import vuetify from './plugins/vuetify' Vue.config.productionTip = false new Vue({ + router, store, vuetify, render: h => h(App) diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..673d0cf --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,28 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import Home from '../views/Home.vue' + +Vue.use(VueRouter) + +const routes = [ + { + path: '/', + name: 'home', + component: Home + } + // ,{ + // path: '/about', + // name: 'about', + // // route level code-splitting + // // this generates a separate chunk (about.[hash].js) for this route + // // which is lazy-loaded when the route is visited. + // component: () => + // import(/* webpackChunkName: "about" */ '../views/About.vue') + // } +] + +const router = new VueRouter({ + routes +}) + +export default router diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..0182de6 --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,148 @@ + + + + + From 70b2da24b870e704bb4f8da882293a00c5c030a0 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Thu, 9 Jan 2020 10:57:40 +0100 Subject: [PATCH 02/45] feat: use URL as source of truth for image src This means that the URL always contains the query argument "imageSrc". When the user selects another background image, the URL is changed, and the app adapts to the new URL. Done with vue-router and vuex-router-sync. --- package-lock.json | 5 +++++ package.json | 3 ++- src/components/Gallery.vue | 6 ++---- src/components/Main.vue | 6 ------ src/main.ts | 3 +++ src/store/current/composition.ts | 7 ------- src/views/Home.vue | 21 +++++++++++++++++++++ 7 files changed, 33 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 592ced3..4922681 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15607,6 +15607,11 @@ "resolved": "https://registry.npmjs.org/vuex-module-decorators/-/vuex-module-decorators-0.11.0.tgz", "integrity": "sha512-mQeH0F9C5eoDvhOxGLxc2eKAA+GT9MvCyauZZtQSvLjN3PX//oj9mlhpmMJH2/q9LOScZ8fBrX1qqd+aOKq/LA==" }, + "vuex-router-sync": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/vuex-router-sync/-/vuex-router-sync-5.0.0.tgz", + "integrity": "sha512-Mry2sO4kiAG64714X1CFpTA/shUH1DmkZ26DFDtwoM/yyx6OtMrc+MxrU+7vvbNLO9LSpgwkiJ8W+rlmRtsM+w==" + }, "w3c-hr-time": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz", diff --git a/package.json b/package.json index 75ce44e..ce8d147 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "vue-router": "^3.0.6", "vuetify": "^2.2.1", "vuex": "^3.1.2", - "vuex-module-decorators": "^0.11.0" + "vuex-module-decorators": "^0.11.0", + "vuex-router-sync": "^5.0.0" }, "devDependencies": { "@mdi/font": "^4.7.95", diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue index c270f1c..62c50b3 100644 --- a/src/components/Gallery.vue +++ b/src/components/Gallery.vue @@ -92,11 +92,9 @@ import { ImageSrc } from '@/utils/types.ts' import ImageUploaderButton from '@/components/ImageUploaderButton.vue' import BackgroundImage from '@/store/current/backgroundImage.ts' -import Composition from '@/store/current/composition.ts' import GalleryImages from '@/store/galleryImages.ts' const backgroundImage = getModule(BackgroundImage) -const composition = getModule(Composition) const galleryImages = getModule(GalleryImages) @Component({ @@ -118,8 +116,8 @@ export default class Gallery extends Vue { return this.srcsArray.indexOf(backgroundImage.src) } set selected (idx: number) { - composition.fromSrc(this.srcsArray[idx]) - this.$emit('selected') + this.$router.push({ query: { ...this.$store.state.route.query, imageSrc: this.srcsArray[idx] } }) + // this.$emit('selected') } addFiles (files: File[]) { galleryImages.appendFilesArray(files) diff --git a/src/components/Main.vue b/src/components/Main.vue index 3abc4fb..dc8c1db 100644 --- a/src/components/Main.vue +++ b/src/components/Main.vue @@ -99,12 +99,6 @@ export default class Main extends Vue { firstcol: HTMLElement } - // lifecycle hook - mounted () { - // Init the composition - composition.initWithSomething() - } - get buttonIcon (): string { return mdiPlus } diff --git a/src/main.ts b/src/main.ts index 4fb129d..fddc1ec 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,6 +4,9 @@ import router from './router' import store from './store' import vuetify from './plugins/vuetify' +import { sync } from 'vuex-router-sync' +sync(store, router) // done. Returns an unsync callback fn + Vue.config.productionTip = false new Vue({ diff --git a/src/store/current/composition.ts b/src/store/current/composition.ts index cd75432..0a4352e 100644 --- a/src/store/current/composition.ts +++ b/src/store/current/composition.ts @@ -9,7 +9,6 @@ import { ExportableComposition } from '@/utils/types.ts' import BackgroundImage from '@/store/current/backgroundImage.ts' import Categories from '@/store/current/categories.ts' import ExportableCompositions from '@/store/exportableCompositions.ts' -import GalleryImages from '@/store/galleryImages.ts' import Points from '@/store/current/points.ts' import PointsMetrics from '@/store/current/pointsMetrics.ts' import PointsSelection from '@/store/current/pointsSelection.ts' @@ -17,7 +16,6 @@ import PointsSelection from '@/store/current/pointsSelection.ts' const backgroundImage = getModule(BackgroundImage) const categories = getModule(Categories) const exportableCompositions = getModule(ExportableCompositions) -const galleryImages = getModule(GalleryImages) const points = getModule(Points) const pointsMetrics = getModule(PointsMetrics) const pointsSelection = getModule(PointsSelection) @@ -69,9 +67,4 @@ export default class Composition extends VuexModule { } } } - - @Action - async initWithSomething () { - this.fromSrc(galleryImages.defaultSrc) - } } diff --git a/src/views/Home.vue b/src/views/Home.vue index 0182de6..f3bd273 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -97,6 +97,13 @@ import ImagesPanel from '@/components/ImagesPanel.vue' import Infos from '@/components/Infos.vue' import Main from '@/components/Main.vue' +import { getModule } from 'vuex-module-decorators' + +import Composition from '@/store/current/composition.ts' +import GalleryImages from '@/store/galleryImages.ts' +const composition = getModule(Composition) +const galleryImages = getModule(GalleryImages) + export default Vue.extend({ name: 'Home', data: () => ({ @@ -109,6 +116,13 @@ export default Vue.extend({ mounted: function () { this.small = this.$vuetify.breakpoint.thresholds.md * 0.5 this.barWidth = this.small + + // Init the composition + if (this.$store.state.route.query.imageSrc === undefined) { + this.$router.push({ query: { ...this.$store.state.route.query, imageSrc: galleryImages.defaultSrc } }) + } else { + composition.fromSrc(this.$store.state.route.query.imageSrc) + } }, components: { PointsList, @@ -135,6 +149,13 @@ export default Vue.extend({ this.barWidth = this.small } } + }, + watch: { + '$store.state.route.query' (query) { + if ('imageSrc' in query) { + composition.fromSrc(query.imageSrc) + } + } } }) From d094fb03d9157082e608ba1b85c33de6b1f79e45 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Thu, 9 Jan 2020 11:31:40 +0100 Subject: [PATCH 03/45] fix: imageSrc query parameter is UUID for uploaded images For large uploaded images, putting the base64 representation (which is the 'src' argument of the image) as a query argument value generates an URL which length is not manageable by browsers. Instead, these locally uploaded images are assigned an UUID identifier. Obviously, sharing such an URL does not carry the image itself anymore, and another solution will be needed to store the image before sharing. See https://github.com/LyonDataViz/occupapp/issues/52. --- src/components/Gallery.vue | 8 +++++++- src/store/current/composition.ts | 9 ++++++++- src/store/galleryImages.ts | 12 +++++++++++- src/utils/types.ts | 1 + 4 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue index 62c50b3..cc01c29 100644 --- a/src/components/Gallery.vue +++ b/src/components/Gallery.vue @@ -116,7 +116,13 @@ export default class Gallery extends Vue { return this.srcsArray.indexOf(backgroundImage.src) } set selected (idx: number) { - this.$router.push({ query: { ...this.$store.state.route.query, imageSrc: this.srcsArray[idx] } }) + const src = this.srcsArray[idx] + const image = galleryImages.get(src) + const imageSrc = (image && 'localId' in image) + ? `local:${image.localId}` + : src + this.$router.push({ query: { ...this.$store.state.route.query, imageSrc } }) + // this.$emit('selected') } addFiles (files: File[]) { diff --git a/src/store/current/composition.ts b/src/store/current/composition.ts index 0a4352e..87d97ba 100644 --- a/src/store/current/composition.ts +++ b/src/store/current/composition.ts @@ -9,6 +9,7 @@ import { ExportableComposition } from '@/utils/types.ts' import BackgroundImage from '@/store/current/backgroundImage.ts' import Categories from '@/store/current/categories.ts' import ExportableCompositions from '@/store/exportableCompositions.ts' +import GalleryImages from '@/store/galleryImages.ts' import Points from '@/store/current/points.ts' import PointsMetrics from '@/store/current/pointsMetrics.ts' import PointsSelection from '@/store/current/pointsSelection.ts' @@ -16,6 +17,7 @@ import PointsSelection from '@/store/current/pointsSelection.ts' const backgroundImage = getModule(BackgroundImage) const categories = getModule(Categories) const exportableCompositions = getModule(ExportableCompositions) +const galleryImages = getModule(GalleryImages) const points = getModule(Points) const pointsMetrics = getModule(PointsMetrics) const pointsSelection = getModule(PointsSelection) @@ -55,7 +57,12 @@ export default class Composition extends VuexModule { } @Action - async fromSrc (src: string) { + async fromSrc (inputSrc: string) { + // manage the special case of locally uploaded images + const localPrefix = 'local:' + const localId = (inputSrc.indexOf(localPrefix) === 0) ? inputSrc.slice(localPrefix.length) : '' + const src = (galleryImages.asLocalIdMap.get(localId) || { src: inputSrc }).src + // Nothing to do if the same image has been selected if (backgroundImage.src !== src) { this.saveComposition() diff --git a/src/store/galleryImages.ts b/src/store/galleryImages.ts index 3b9de0e..748e775 100644 --- a/src/store/galleryImages.ts +++ b/src/store/galleryImages.ts @@ -1,4 +1,5 @@ // See https://championswimmer.in/vuex-module-decorators/ +import uuid from 'uuid' import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators' import store from '@/store' import { ImageSrc } from '@/utils/types.ts' @@ -32,6 +33,15 @@ export default class GalleryImages extends VuexModule { get defaultSrc (): string { return this.size ? this.asArray[0].src : '' } + get asLocalIdMap (): Map { + // Only contains the locally uploaded images, with the localId string as + // the key + return new Map( + this.asArray + .filter(i => 'localId' in i && i.localId !== undefined) + .map(i => [i.localId || 'shouldneverbeused', i]) + ) + } // USE? // get keys (): IterableIterator { // return this.asMap.keys() @@ -79,7 +89,7 @@ export default class GalleryImages extends VuexModule { for (const f of files) { const base64Str = await getImageUrl(f) if (base64Str !== '') { - list.push({ src: base64Str }) + list.push({ src: base64Str, localId: uuid.v4() }) } } this.appendArray(list) diff --git a/src/utils/types.ts b/src/utils/types.ts index 300cd4f..1273bcc 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -3,6 +3,7 @@ export interface ImageSrc { src: string; srcset?: string; thumbnailSrc?: string; + localId?: string; } // Points From 70041bd71b0d259ced8e848f97dec2ac878adac1 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Thu, 9 Jan 2020 16:20:34 +0100 Subject: [PATCH 04/45] feat: add image to gallery if not already present It allows to directly import a new image changing the imageSrc argument in the query string of the URL --- src/store/current/composition.ts | 6 ++++++ src/store/galleryImages.ts | 6 +++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/store/current/composition.ts b/src/store/current/composition.ts index 87d97ba..0e50637 100644 --- a/src/store/current/composition.ts +++ b/src/store/current/composition.ts @@ -65,6 +65,12 @@ export default class Composition extends VuexModule { // Nothing to do if the same image has been selected if (backgroundImage.src !== src) { + // if the src does not exist in the gallery, try to add it first + // it allows for example to add an image just by setting its src in the URL query string + if (!galleryImages.has(src)) { + galleryImages.set({ src }) + } + this.saveComposition() const c = exportableCompositions.get(src) if (c !== undefined) { diff --git a/src/store/galleryImages.ts b/src/store/galleryImages.ts index 748e775..cda6ab8 100644 --- a/src/store/galleryImages.ts +++ b/src/store/galleryImages.ts @@ -49,9 +49,9 @@ export default class GalleryImages extends VuexModule { // get values (): IterableIterator { // return this.asMap.values() // } - // get has (): (id:string) => boolean { - // return (id:string): boolean => this.asMap.has(id) - // } + get has (): (id:string) => boolean { + return (id:string): boolean => this.asMap.has(id) + } // Mutations (synchronous) @Mutation From d469e45cee0a89eda5cb4014c7002de1cb2ab9cd Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Thu, 9 Jan 2020 16:32:40 +0100 Subject: [PATCH 05/45] refactor: simplify the code --- src/views/Home.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index f3bd273..73bf08e 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -151,10 +151,8 @@ export default Vue.extend({ } }, watch: { - '$store.state.route.query' (query) { - if ('imageSrc' in query) { - composition.fromSrc(query.imageSrc) - } + '$store.state.route.query.imageSrc' (imageSrc) { + composition.fromSrc(imageSrc) } } }) From 06b938ed9b4f9988bce6ecbf5c524bbb4c04cf79 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Thu, 9 Jan 2020 17:58:14 +0100 Subject: [PATCH 06/45] feat: validate the imageStr query string --- src/store/current/composition.ts | 6 +++--- src/store/galleryImages.ts | 4 ++++ src/utils/img.ts | 4 ++++ src/views/Home.vue | 18 +++++++++++++++--- 4 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/store/current/composition.ts b/src/store/current/composition.ts index 0e50637..6bf7045 100644 --- a/src/store/current/composition.ts +++ b/src/store/current/composition.ts @@ -65,10 +65,10 @@ export default class Composition extends VuexModule { // Nothing to do if the same image has been selected if (backgroundImage.src !== src) { - // if the src does not exist in the gallery, try to add it first + // if the src does not exist in the gallery, add it first // it allows for example to add an image just by setting its src in the URL query string - if (!galleryImages.has(src)) { - galleryImages.set({ src }) + if (!galleryImages.asMap.has(src)) { + galleryImages.appendSrc(src) } this.saveComposition() diff --git a/src/store/galleryImages.ts b/src/store/galleryImages.ts index cda6ab8..6936707 100644 --- a/src/store/galleryImages.ts +++ b/src/store/galleryImages.ts @@ -78,6 +78,10 @@ export default class GalleryImages extends VuexModule { this.fromMap(arrayToMap(list)) } @Action + appendSrc (src: string) { + this.set({ src }) + } + @Action appendArray (list: ImageSrc[]) { for (const s of list) { this.set(s) diff --git a/src/utils/img.ts b/src/utils/img.ts index 61c09dd..83b6fef 100644 --- a/src/utils/img.ts +++ b/src/utils/img.ts @@ -17,6 +17,10 @@ export async function fetchImage ({ }) } +export async function validateImageSrc ({ src, srcset }: ImageSrc): Promise { + return fetchImage({ src, srcset }).then(() => true).catch(() => false) +} + /* * Create a Base64 Image URL, with rotation applied to compensate for EXIF orientation, if needed. * diff --git a/src/views/Home.vue b/src/views/Home.vue index 73bf08e..b706d56 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -99,8 +99,12 @@ import Main from '@/components/Main.vue' import { getModule } from 'vuex-module-decorators' +import { validateImageSrc } from '@/utils/img.ts' + +import BackgroundImage from '@/store/current/backgroundImage.ts' import Composition from '@/store/current/composition.ts' import GalleryImages from '@/store/galleryImages.ts' +const backgroundImage = getModule(BackgroundImage) const composition = getModule(Composition) const galleryImages = getModule(GalleryImages) @@ -121,7 +125,7 @@ export default Vue.extend({ if (this.$store.state.route.query.imageSrc === undefined) { this.$router.push({ query: { ...this.$store.state.route.query, imageSrc: galleryImages.defaultSrc } }) } else { - composition.fromSrc(this.$store.state.route.query.imageSrc) + this.setImageSrc(this.$store.state.route.query.imageSrc) } }, components: { @@ -148,11 +152,19 @@ export default Vue.extend({ } else { this.barWidth = this.small } + }, + setImageSrc: async function (src: string) { + if (await validateImageSrc({ src })) { + composition.fromSrc(src) + } else { + // force reload current image, or the default image if it doesn't exist + this.$router.push({ query: { ...this.$store.state.route.query, imageSrc: backgroundImage.image.src || galleryImages.defaultSrc } }) + } } }, watch: { - '$store.state.route.query.imageSrc' (imageSrc) { - composition.fromSrc(imageSrc) + '$store.state.route.query.imageSrc' (src) { + this.setImageSrc(src) } } }) From 0294f1e077e1606e1186d605d5d5e39a985f85a0 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Thu, 9 Jan 2020 18:11:09 +0100 Subject: [PATCH 07/45] refactor: rewrite two components as a class components It allows to get rid of two typescript errors in src/view/Home.vue, and to get aligned with the rest of the code. --- src/App.vue | 7 +-- src/views/Home.vue | 103 +++++++++++++++++++++++---------------------- 2 files changed, 57 insertions(+), 53 deletions(-) diff --git a/src/App.vue b/src/App.vue index 87e5665..37d073a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,10 +4,11 @@ From 637c67b0eda1e724f6f31d4739eb0b9ae4c9c755 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Wed, 15 Jan 2020 11:19:19 +0100 Subject: [PATCH 18/45] feat: add current composition spec to tables panel --- src/components/SpecJSON.vue | 22 ++++++++++++++++++++++ src/components/TablesPanel.vue | 27 +++++++++++++++++++++------ 2 files changed, 43 insertions(+), 6 deletions(-) create mode 100644 src/components/SpecJSON.vue diff --git a/src/components/SpecJSON.vue b/src/components/SpecJSON.vue new file mode 100644 index 0000000..a0a6355 --- /dev/null +++ b/src/components/SpecJSON.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/components/TablesPanel.vue b/src/components/TablesPanel.vue index d7c3e02..6217fbc 100644 --- a/src/components/TablesPanel.vue +++ b/src/components/TablesPanel.vue @@ -1,18 +1,31 @@ @@ -28,12 +41,14 @@ import Component from 'vue-class-component' import CategoriesTable from '@/components/CategoriesTable.vue' import PointsTable from '@/components/PointsTable.vue' import StoreJSON from '@/components/StoreJSON.vue' +import SpecJSON from '@/components/SpecJSON.vue' @Component({ components: { CategoriesTable, PointsTable, - StoreJSON + StoreJSON, + SpecJSON } }) export default class TablesPanel extends Vue { From f07469f10da16b4675d81582c72a8b96d8af9c00 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Wed, 15 Jan 2020 11:30:48 +0100 Subject: [PATCH 19/45] feat: add current composition JSON in tables view --- .../{StoreJSON.vue => JsonBlock.vue} | 6 +++- src/components/SpecJSON.vue | 22 ------------ src/components/TablesPanel.vue | 34 ++++++++++++++----- 3 files changed, 31 insertions(+), 31 deletions(-) rename src/components/{StoreJSON.vue => JsonBlock.vue} (72%) delete mode 100644 src/components/SpecJSON.vue diff --git a/src/components/StoreJSON.vue b/src/components/JsonBlock.vue similarity index 72% rename from src/components/StoreJSON.vue rename to src/components/JsonBlock.vue index 9195996..d59365b 100644 --- a/src/components/StoreJSON.vue +++ b/src/components/JsonBlock.vue @@ -5,6 +5,7 @@ diff --git a/src/components/TablesPanel.vue b/src/components/TablesPanel.vue index 6217fbc..fb29196 100644 --- a/src/components/TablesPanel.vue +++ b/src/components/TablesPanel.vue @@ -15,18 +15,23 @@

- Spec + Specification

- +

Full internal state

- State + Current composition

- + + +

+ All compositions +

+ @@ -37,21 +42,34 @@ From 101e872fab8a5f7c3c11951e7e62ec409931ae32 Mon Sep 17 00:00:00 2001 From: Sylvain Lesage Date: Wed, 15 Jan 2020 21:49:01 +0100 Subject: [PATCH 20/45] feat: add elements to activate collaboration --- src/components/CollaborationPanel.vue | 49 +++++++++++++++++++++++++++ src/store/settings.ts | 5 +++ src/views/Home.vue | 10 ++++++ 3 files changed, 64 insertions(+) create mode 100644 src/components/CollaborationPanel.vue diff --git a/src/components/CollaborationPanel.vue b/src/components/CollaborationPanel.vue new file mode 100644 index 0000000..00bddd1 --- /dev/null +++ b/src/components/CollaborationPanel.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/src/store/settings.ts b/src/store/settings.ts index 48dc590..d71ef9f 100644 --- a/src/store/settings.ts +++ b/src/store/settings.ts @@ -7,10 +7,15 @@ export default class Settings extends VuexModule { // State - state of truth - meant to be exported as a JSON - init definitions showImageColors: boolean = true + isCollaborationActive: boolean = false // Mutations (synchronous) @Mutation setShowImageColors (value: boolean) { this.showImageColors = value } + @Mutation + activateCollaboration (value: boolean) { + this.showImageColors = value + } } diff --git a/src/views/Home.vue b/src/views/Home.vue index 847e02f..07ca3a3 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -41,6 +41,13 @@ > mdi-image + + mdi-forum + +