Implemented global components registration

Moved the fullscreen button as a global component (as demonstration)
Improved the layout CSS

2 files changed, 47 insertions, 0 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 @@
+<template>
+  <fa-icon icon="expand-arrows-alt" class="button-fullscreen" @click="$uiStore.toggleFullscreen()" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class LdButtonFullscreen extends Vue {}
+</script>
+
+<style lang="scss">
+.button-fullscreen {
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin: 3px 10px;
+  opacity: 50%;
+  font-size: 1.5em;
+  color: white;
+  mix-blend-mode: difference;
+  cursor: pointer;
+  z-index: 4;
+}
+</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 @@
+import Vue from 'vue'
+
+const requireComponent = require.context(
+    '@/components',
+    false, // Whether or not to look in subfolders
+    // The regular expression used to match base component filenames
+    /Ld[A-Z]\w+\.vue$/
+)
+
+requireComponent.keys().forEach(fileName => {
+    const componentConfig = requireComponent(fileName)
+    const componentName = fileName.split('/').pop()!.replace(/\.vue$/, '');
+
+    // Register component globally
+    Vue.component(
+        componentName,
+        // Look for the component options on `.default`, which will
+        // exist if the component was exported with `export default`,
+        // otherwise fall back to module's root.
+        componentConfig.default || componentConfig
+    )
+})
\ No newline at end of file