aboutsummaryrefslogtreecommitdiff
path: root/viewer/src
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src')
-rw-r--r--viewer/src/main.ts4
-rw-r--r--viewer/src/plugins/fontawesome.ts (renamed from viewer/src/plugins/fontawesome.js)0
-rw-r--r--viewer/src/plugins/vuex.ts23
-rw-r--r--viewer/src/store/uiStore.ts15
-rw-r--r--viewer/src/views/LdGallery.vue16
5 files changed, 48 insertions, 10 deletions
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index 352b565..3a3593c 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -2,6 +2,7 @@ import Vue from "vue";
2import "@/assets/scss/global.scss"; 2import "@/assets/scss/global.scss";
3import "@/plugins/fontawesome"; 3import "@/plugins/fontawesome";
4import "@/plugins/buefy"; 4import "@/plugins/buefy";
5import store from '@/plugins/vuex'
5import i18n from "@/plugins/i18n"; 6import i18n from "@/plugins/i18n";
6import router from "@/router"; 7import router from "@/router";
7import LdGallery from "@/views/LdGallery.vue"; 8import LdGallery from "@/views/LdGallery.vue";
@@ -11,5 +12,6 @@ Vue.config.productionTip = false;
11new Vue({ 12new Vue({
12 router, 13 router,
13 i18n, 14 i18n,
14 render: h => h(LdGallery), 15 store,
16 render: h => h(LdGallery)
15}).$mount("#ldgallery"); 17}).$mount("#ldgallery");
diff --git a/viewer/src/plugins/fontawesome.js b/viewer/src/plugins/fontawesome.ts
index 9bf4dba..9bf4dba 100644
--- a/viewer/src/plugins/fontawesome.js
+++ b/viewer/src/plugins/fontawesome.ts
diff --git a/viewer/src/plugins/vuex.ts b/viewer/src/plugins/vuex.ts
new file mode 100644
index 0000000..9b2fa46
--- /dev/null
+++ b/viewer/src/plugins/vuex.ts
@@ -0,0 +1,23 @@
1import Vue from 'vue'
2import Vuex from 'vuex'
3import { extractVuexModule } from "vuex-class-component";
4import { createProxy } from "vuex-class-component";
5import UIStore from '@/store/uiStore';
6
7Vue.use(Vuex)
8
9const store = new Vuex.Store({
10 modules: {
11 ...extractVuexModule(UIStore)
12 }
13});
14
15Vue.use((vue) => vue.prototype.$uiStore = createProxy(store, UIStore));
16
17declare module 'vue/types/vue' {
18 interface Vue {
19 $uiStore: UIStore
20 }
21}
22
23export default store;
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
new file mode 100644
index 0000000..c4143a1
--- /dev/null
+++ b/viewer/src/store/uiStore.ts
@@ -0,0 +1,15 @@
1import { createModule, mutation, action } from "vuex-class-component";
2
3const VuexModule = createModule({
4 namespaced: "uiStore",
5 strict: true
6})
7
8export default class UIStore extends VuexModule {
9
10 fullscreen: boolean = false;
11
12 @mutation toggleFullscreen() {
13 this.fullscreen = !this.fullscreen;
14 }
15}
diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index 98f083f..d22bfa6 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -1,9 +1,13 @@
1<template> 1<template>
2 <div :class="{fullscreen}"> 2 <div :class="{fullscreen: $uiStore.fullscreen}">
3 <div class="layout top">header</div> 3 <div class="layout top">header</div>
4 <div class="layout left">panel</div> 4 <div class="layout left">panel</div>
5 <router-view class="layout content" /> 5 <router-view class="layout content" />
6 <fa-icon icon="expand-arrows-alt" class="layout button-fullscreen" @click="toggleFullscreen" /> 6 <fa-icon
7 icon="expand-arrows-alt"
8 class="layout button-fullscreen"
9 @click="$uiStore.toggleFullscreen()"
10 />
7 </div> 11 </div>
8</template> 12</template>
9 13
@@ -11,13 +15,7 @@
11import { Component, Vue } from "vue-property-decorator"; 15import { Component, Vue } from "vue-property-decorator";
12 16
13@Component 17@Component
14export default class LdGallery extends Vue { 18export default class LdGallery extends Vue {}
15 fullscreen: boolean = false;
16
17 toggleFullscreen() {
18 this.fullscreen = !this.fullscreen;
19 }
20}
21</script> 19</script>
22 20
23<style lang="scss"> 21<style lang="scss">