Implemented global components registration

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

1 files changed, 22 insertions, 0 deletions

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