From decf1611f1ac8b5a7048bbc8055d74272f395de4 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sun, 1 Jan 2023 18:55:48 +0000
Subject: [PATCH] feat: fullscreen Gcode Preview (#999)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/layout/AppNavDrawer.vue         |  7 +++++++
 .../widgets/gcode-preview/GcodePreviewCard.vue | 18 +++++++++++++++++-
 src/router/index.ts                            |  6 ++++++
 src/views/GcodePreview.vue                     | 16 ++++++++++++++++
 src/views/Tune.vue                             |  2 +-
 5 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/views/GcodePreview.vue

diff --git a/src/components/layout/AppNavDrawer.vue b/src/components/layout/AppNavDrawer.vue
index 8fb928c2c1..29173ab64a 100644
--- a/src/components/layout/AppNavDrawer.vue
+++ b/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"
diff --git a/src/components/widgets/gcode-preview/GcodePreviewCard.vue b/src/components/widgets/gcode-preview/GcodePreviewCard.vue
index 6f3a159194..e6b8bf67e8 100644
--- a/src/components/widgets/gcode-preview/GcodePreviewCard.vue
+++ b/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
 
diff --git a/src/router/index.ts b/src/router/index.ts
index a8bea48b6d..53a942f962 100644
--- a/src/router/index.ts
+++ b/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',
diff --git a/src/views/GcodePreview.vue b/src/views/GcodePreview.vue
new file mode 100644
index 0000000000..741d3f23a2
--- /dev/null
+++ b/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>
diff --git a/src/views/Tune.vue b/src/views/Tune.vue
index 70d21d9d1f..7e03d02b9b 100644
--- a/src/views/Tune.vue
+++ b/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"