feat: fullscreen Gcode Preview (#999)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

src/components/layout/AppNavDrawer.vue

@@ -45,6 +45,13 @@
             {{ $t('app.general.title.console') }}
           </app-nav-item>
 
+          <app-nav-item
+            icon="$cubeScan"
+            to="/preview"
+          >
+            {{ $t('app.general.title.gcode_preview') }}
+          </app-nav-item>
+
           <app-nav-item
             icon="$files"
             to="/jobs"

src/components/widgets/gcode-preview/GcodePreviewCard.vue

@@ -2,8 +2,9 @@
   <collapsable-card
     :title="$tc('app.general.title.gcode_preview')"
     icon="$cubeScan"
+    :draggable="!fullScreen"
+    :collapsable="!fullScreen"
     layout-path="dashboard.gcode-preview-card"
-    :draggable="true"
   >
     <template #menu>
       <app-btn-collapse-group :collapsed="menuCollapsed">
@@ -15,6 +16,18 @@
         >
           {{ $t('app.gcode.btn.load_current_file') }}
         </app-btn>
+
+        <app-btn
+          v-if="!fullScreen"
+          color=""
+          fab
+          x-small
+          text
+          class="ml-1"
+          @click="$filters.routeTo($router, '/preview')"
+        >
+          <v-icon>$fullScreen</v-icon>
+        </app-btn>
       </app-btn-collapse-group>
     </template>
 
@@ -137,6 +150,9 @@ export default class GcodePreviewCard extends Mixins(StateMixin, FilesMixin) {
   @Prop({ type: Boolean, default: false })
   readonly menuCollapsed!: boolean
 
+  @Prop({ type: Boolean, default: false })
+  readonly fullScreen!: boolean
+
   @Ref('preview')
   readonly preview!: GcodePreview
 

src/router/index.ts

@@ -4,6 +4,7 @@ import VueRouter, { NavigationGuardNext, Route, RouteConfig } from 'vue-router'
 // Views
 import Dashboard from '@/views/Dashboard.vue'
 import Console from '@/views/Console.vue'
+import GcodePreview from '@/views/GcodePreview.vue'
 import Jobs from '@/views/Jobs.vue'
 import Tune from '@/views/Tune.vue'
 import Diagnostics from '@/views/Diagnostics.vue'
@@ -125,6 +126,11 @@ const routes: Array<RouteConfig> = [
     name: 'Camera',
     component: FullscreenCamera
   },
+  {
+    path: '/preview',
+    name: 'Gcode Preview',
+    component: GcodePreview
+  },
   {
     path: '/icons',
     name: 'Icons',

src/views/GcodePreview.vue

@@ -0,0 +1,16 @@
+<template>
+  <GcodePreviewCard full-screen />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import GcodePreviewCard from '@/components/widgets/gcode-preview/GcodePreviewCard.vue'
+
+@Component({
+  components: {
+    GcodePreviewCard
+  }
+})
+export default class GcodePreview extends Vue {
+}
+</script>

src/views/Tune.vue

@@ -8,7 +8,7 @@
       cols="12"
       md="8"
     >
-      <bed-mesh-card :full-screen="true" />
+      <bed-mesh-card full-screen />
     </v-col>
     <v-col
       cols="12"