Implemented global components registration

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

1 files changed, 25 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>