feat: add fullscreen size for gcodefiles, gcodeviewer and webcam

src/App.vue

@@ -4,7 +4,7 @@
             <the-sidebar />
             <the-topbar />
             <v-main id="content" :style="mainStyle">
-                <v-container id="page-container" fluid class="container px-3 px-sm-6 py-sm-6 mx-auto">
+                <v-container id="page-container" fluid :class="containerClasses">
                     <router-view />
                 </v-container>
             </v-main>
@@ -44,6 +44,7 @@ import TheBedScrewsDialog from '@/components/dialogs/TheBedScrewsDialog.vue'
 import TheScrewsTiltAdjustDialog from '@/components/dialogs/TheScrewsTiltAdjustDialog.vue'
 import { setAndLoadLocale } from './plugins/i18n'
 import TheMacroPrompt from '@/components/dialogs/TheMacroPrompt.vue'
+import { AppRoute } from '@/routes'
 
 Component.registerHooks(['metaInfo'])
 
@@ -172,6 +173,20 @@ export default class App extends Mixins(BaseMixin, ThemeMixin) {
         return Math.floor(this.$store.getters['printer/getPrintPercent'] * 100)
     }
 
+    get containerClasses() {
+        const currentRouteOptions = this.$router.options.routes?.find(
+            (route) => route.name === this.$route.name
+        ) as AppRoute
+
+        return {
+            'px-3': true,
+            'px-sm-6': true,
+            'py-sm-6': true,
+            'mx-auto': true,
+            fullscreen: currentRouteOptions?.fullscreen ?? false,
+        }
+    }
+
     @Watch('language')
     async languageChanged(newVal: string): Promise<void> {
         await setAndLoadLocale(newVal)

src/assets/styles/page.css

@@ -11,6 +11,10 @@ body {
     max-width: 1800px;
 }
 
+#page-container.fullscreen {
+    max-width: none;
+}
+
 .overflowingContentWidgets {
     visibility: hidden;
 }

src/routes/index.ts

@@ -22,6 +22,7 @@ import {
 
 const routes: AppRoute[] = [
     {
+        name: 'dashboard',
         title: 'Dashboard',
         path: '/',
         icon: mdiMonitorDashboard,
@@ -31,22 +32,26 @@ const routes: AppRoute[] = [
         position: 10,
     },
     {
+        name: 'farm',
         title: 'Printers',
         path: '/allPrinters',
         component: Farm,
         alwaysShow: false,
         showInNavi: false,
     },
     {
+        name: 'webcam',
         title: 'Webcam',
         path: '/cam',
         icon: mdiWebcam,
         component: Webcam,
         alwaysShow: true,
         showInNavi: true,
         position: 20,
+        fullscreen: true,
     },
     {
+        name: 'console',
         title: 'Console',
         path: '/console',
         icon: mdiConsoleLine,
@@ -57,6 +62,7 @@ const routes: AppRoute[] = [
         position: 30,
     },
     {
+        name: 'heightmap',
         title: 'Heightmap',
         path: '/heightmap',
         icon: mdiGrid,
@@ -67,6 +73,7 @@ const routes: AppRoute[] = [
         position: 40,
     },
     {
+        name: 'gcodefiles',
         title: 'G-Code Files',
         path: '/files',
         icon: mdiFileDocumentMultipleOutline,
@@ -75,17 +82,21 @@ const routes: AppRoute[] = [
         showInNavi: true,
         registeredDirectory: 'gcodes',
         position: 50,
+        fullscreen: true,
     },
     {
+        name: 'gcodeviewer',
         title: 'G-Code Viewer',
         path: '/viewer',
         icon: mdiVideo3d,
         component: () => import('../pages/Viewer.vue'),
         alwaysShow: true,
         showInNavi: true,
         position: 60,
+        fullscreen: true,
     },
     {
+        name: 'history',
         title: 'History',
         path: '/history',
         icon: mdiHistory,
@@ -96,6 +107,7 @@ const routes: AppRoute[] = [
         position: 70,
     },
     {
+        name: 'timelapse',
         title: 'Timelapse',
         path: '/timelapse',
         icon: mdiTimelapse,
@@ -106,6 +118,7 @@ const routes: AppRoute[] = [
         position: 80,
     },
     {
+        name: 'machine',
         title: 'Machine',
         path: '/config',
         icon: mdiWrench,
@@ -127,6 +140,7 @@ const routes: AppRoute[] = [
 export default routes
 
 export interface AppRoute {
+    name?: string
     title: string | null
     path: string
     redirect?: string
@@ -140,4 +154,5 @@ export interface AppRoute {
     klipperIsConnected?: boolean
     children?: AppRoute[]
     position?: number
+    fullscreen?: boolean
 }