Implemented global components registration

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

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 @@
+<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
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 @@
 import Vue from "vue";
 import "@/assets/scss/global.scss";
+import "@/components"
 import "@/plugins/fontawesome";
 import "@/plugins/buefy";
 import 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 @@
 <template>
   <div :class="{fullscreen: $uiStore.fullscreen}">
-    <div class="layout top">header</div>
-    <div class="layout left">panel</div>
-    <router-view class="layout content" />
-    <fa-icon
-      icon="expand-arrows-alt"
-      class="layout button-fullscreen"
-      @click="$uiStore.toggleFullscreen()"
-    />
+    <div class="layout layout-top">header</div>
+    <div class="layout layout-left">panel</div>
+    <router-view class="layout layout-content" />
+    <ld-button-fullscreen />
   </div>
 </template>
 
@@ -19,61 +15,59 @@ export default class LdGallery extends Vue {}
 </script>
 
 <style lang="scss">
+$layout-top: 30px;
+$layout-left: 250px;
+
 body,
 html {
   height: 100%;
   overflow: hidden;
-  --layout-left: 250px;
-  --layout-top: 30px;
+  --layout-top: #{$layout-top};
+  --layout-left: #{$layout-left};
 }
 .layout {
   position: fixed;
   transition: all 0.1s linear;
-  &.top {
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--layout-top);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  &.layout-top {
+    height: $layout-top;
+    z-index: 1;
   }
-  &.left {
-    top: var(--layout-top);
-    bottom: 0;
-    left: 0;
-    width: var(--layout-left);
+  &.layout-left {
+    top: $layout-top;
+    width: $layout-left;
+    z-index: 2;
   }
-  &.content {
+  &.layout-content {
     top: var(--layout-top);
     left: var(--layout-left);
-    right: 0;
-    bottom: 0;
-  }
-  &.button-fullscreen {
-    top: 0;
-    right: 0;
-    margin: 3px 10px;
-    opacity: 50%;
-    font-size: 1.5em;
-    color: white;
-    mix-blend-mode: difference;
-    cursor: pointer;
+    z-index: 3;
   }
 }
 .fullscreen {
   --layout-left: 0px;
   --layout-top: 0px;
+  .layout {
+    &.layout-left {
+      transform: translate(-$layout-left, 0);
+    }
+  }
 }
 
 // temp colors
 .layout {
-  &.top {
+  &.layout-top {
     background-color: darkslategray;
     color: white;
   }
-  &.left {
+  &.layout-left {
     background-color: darkblue;
     color: white;
   }
-  &.content {
+  &.layout-content {
     background-color: lightcyan;
   }
 }