aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
authorZero~Informatique2019-12-21 03:32:20 +0100
committerZero~Informatique2019-12-21 03:32:20 +0100
commit6e7ee4d38fb3630a13d31592f0f6ae9bbe8e1bd6 (patch)
tree88ebce4634d26daa80718ab1526c728f55a983f0 /viewer
parent62005141132da1e9761598fa3e4b35b4dab38a89 (diff)
downloadldgallery-6e7ee4d38fb3630a13d31592f0f6ae9bbe8e1bd6.tar.gz
Implemented global components registration
Moved the fullscreen button as a global component (as demonstration) Improved the layout CSS
Diffstat (limited to 'viewer')
-rw-r--r--viewer/src/components/LdButtonFullscreen.vue25
-rw-r--r--viewer/src/components/index.ts22
-rw-r--r--viewer/src/main.ts1
-rw-r--r--viewer/src/views/LdGallery.vue66
4 files changed, 78 insertions, 36 deletions
diff --git a/viewer/src/components/LdButtonFullscreen.vue b/viewer/src/components/LdButtonFullscreen.vue
new file mode 100644
index 0000000..2302a27
--- /dev/null
+++ b/viewer/src/components/LdButtonFullscreen.vue
@@ -0,0 +1,25 @@
1<template>
2 <fa-icon icon="expand-arrows-alt" class="button-fullscreen" @click="$uiStore.toggleFullscreen()" />
3</template>
4
5<script lang="ts">
6import { Component, Vue } from "vue-property-decorator";
7
8@Component
9export default class LdButtonFullscreen extends Vue {}
10</script>
11
12<style lang="scss">
13.button-fullscreen {
14 position: fixed;
15 top: 0;
16 right: 0;
17 margin: 3px 10px;
18 opacity: 50%;
19 font-size: 1.5em;
20 color: white;
21 mix-blend-mode: difference;
22 cursor: pointer;
23 z-index: 4;
24}
25</style>
diff --git a/viewer/src/components/index.ts b/viewer/src/components/index.ts
new file mode 100644
index 0000000..1406b34
--- /dev/null
+++ b/viewer/src/components/index.ts
@@ -0,0 +1,22 @@
1import Vue from 'vue'
2
3const requireComponent = require.context(
4 '@/components',
5 false, // Whether or not to look in subfolders
6 // The regular expression used to match base component filenames
7 /Ld[A-Z]\w+\.vue$/
8)
9
10requireComponent.keys().forEach(fileName => {
11 const componentConfig = requireComponent(fileName)
12 const componentName = fileName.split('/').pop()!.replace(/\.vue$/, '');
13
14 // Register component globally
15 Vue.component(
16 componentName,
17 // Look for the component options on `.default`, which will
18 // exist if the component was exported with `export default`,
19 // otherwise fall back to module's root.
20 componentConfig.default || componentConfig
21 )
22}) \ No newline at end of file
diff --git a/viewer/src/main.ts b/viewer/src/main.ts
index 3a3593c..ca439bc 100644
--- a/viewer/src/main.ts
+++ b/viewer/src/main.ts
@@ -1,5 +1,6 @@
1import Vue from "vue"; 1import Vue from "vue";
2import "@/assets/scss/global.scss"; 2import "@/assets/scss/global.scss";
3import "@/components"
3import "@/plugins/fontawesome"; 4import "@/plugins/fontawesome";
4import "@/plugins/buefy"; 5import "@/plugins/buefy";
5import store from '@/plugins/vuex' 6import store from '@/plugins/vuex'
diff --git a/viewer/src/views/LdGallery.vue b/viewer/src/views/LdGallery.vue
index d22bfa6..ecdfa1b 100644
--- a/viewer/src/views/LdGallery.vue
+++ b/viewer/src/views/LdGallery.vue
@@ -1,13 +1,9 @@
1<template> 1<template>
2 <div :class="{fullscreen: $uiStore.fullscreen}"> 2 <div :class="{fullscreen: $uiStore.fullscreen}">
3 <div class="layout top">header</div> 3 <div class="layout layout-top">header</div>
4 <div class="layout left">panel</div> 4 <div class="layout layout-left">panel</div>
5 <router-view class="layout content" /> 5 <router-view class="layout layout-content" />
6 <fa-icon 6 <ld-button-fullscreen />
7 icon="expand-arrows-alt"
8 class="layout button-fullscreen"
9 @click="$uiStore.toggleFullscreen()"
10 />
11 </div> 7 </div>
12</template> 8</template>
13 9
@@ -19,61 +15,59 @@ export default class LdGallery extends Vue {}
19</script> 15</script>
20 16
21<style lang="scss"> 17<style lang="scss">
18$layout-top: 30px;
19$layout-left: 250px;
20
22body, 21body,
23html { 22html {
24 height: 100%; 23 height: 100%;
25 overflow: hidden; 24 overflow: hidden;
26 --layout-left: 250px; 25 --layout-top: #{$layout-top};
27 --layout-top: 30px; 26 --layout-left: #{$layout-left};
28} 27}
29.layout { 28.layout {
30 position: fixed; 29 position: fixed;
31 transition: all 0.1s linear; 30 transition: all 0.1s linear;
32 &.top { 31 top: 0;
33 top: 0; 32 bottom: 0;
34 left: 0; 33 left: 0;
35 right: 0; 34 right: 0;
36 height: var(--layout-top); 35 &.layout-top {
36 height: $layout-top;
37 z-index: 1;
37 } 38 }
38 &.left { 39 &.layout-left {
39 top: var(--layout-top); 40 top: $layout-top;
40 bottom: 0; 41 width: $layout-left;
41 left: 0; 42 z-index: 2;
42 width: var(--layout-left);
43 } 43 }
44 &.content { 44 &.layout-content {
45 top: var(--layout-top); 45 top: var(--layout-top);
46 left: var(--layout-left); 46 left: var(--layout-left);
47 right: 0; 47 z-index: 3;
48 bottom: 0;
49 }
50 &.button-fullscreen {
51 top: 0;
52 right: 0;
53 margin: 3px 10px;
54 opacity: 50%;
55 font-size: 1.5em;
56 color: white;
57 mix-blend-mode: difference;
58 cursor: pointer;
59 } 48 }
60} 49}
61.fullscreen { 50.fullscreen {
62 --layout-left: 0px; 51 --layout-left: 0px;
63 --layout-top: 0px; 52 --layout-top: 0px;
53 .layout {
54 &.layout-left {
55 transform: translate(-$layout-left, 0);
56 }
57 }
64} 58}
65 59
66// temp colors 60// temp colors
67.layout { 61.layout {
68 &.top { 62 &.layout-top {
69 background-color: darkslategray; 63 background-color: darkslategray;
70 color: white; 64 color: white;
71 } 65 }
72 &.left { 66 &.layout-left {
73 background-color: darkblue; 67 background-color: darkblue;
74 color: white; 68 color: white;
75 } 69 }
76 &.content { 70 &.layout-content {
77 background-color: lightcyan; 71 background-color: lightcyan;
78 } 72 }
79} 73}