Merge pull request kodadot#9945 from Jarsen136/issue-9898

feat: Code Checker: Full Screen
hassnian · Apr 3, 2024 · ddfda76 · ddfda76
2 parents f9fca54 + 96863b2
commit ddfda76
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/components/codeChecker/PreviewCard.vue b/components/codeChecker/PreviewCard.vue
@@ -1,33 +1,48 @@
 <template>
   <div
     class="border bg-background-color shadow-primary p-5 pb-6 w-full lg:max-w-[490px] flex flex-col gap-5">
-    <div>
+    <div ref="fullscreenRef" class="overflow-y-scroll">
+      <NeoButton
+        v-if="isFullscreen"
+        class="fixed top-[3rem] left-[3rem] z-[1]"
+        icon-left="chevron-left"
+        @click="toggleFullscreen">
+        <div class="mr-2">{{ $t('massmint.goBack') }}</div>
+      </NeoButton>
+
       <CodeCheckerSandboxIFrame
         v-if="render"
         v-model:count="count"
+        :is-fullscreen="isFullscreen"
+        :custom-class="isFullscreen ? 'h-fit aspect-square' : ''"
         :hash="hash"
         :assets="assets" />
-
       <BaseMediaItem v-else preview is-detail class="border" />
     </div>
-    <div
-      class="flex pb-5 justify-between w-full gap-4 border-b border-neutral-5">
+    <div class="pb-5 flex w-full gap-3 border-b border-neutral-5">
       <NeoButton
         rounded
         no-shadow
-        class="w-full px-5 border-k-grey hover:!bg-transparent"
-        icon="arrow-rotate-left"
+        class="px-5 flex-1 border-k-grey hover:!bg-transparent"
+        icon-right="arrow-rotate-left"
         @click="newHash"
         >{{ $t('codeChecker.newHash') }}</NeoButton
       >
       <NeoButton
         rounded
         no-shadow
-        class="w-full px-5 border-k-grey hover:!bg-transparent"
+        class="flex-1 border-k-grey hover:!bg-transparent"
         :disabled="!selectedFile"
         @click="replay"
         >{{ $t('codeChecker.replayAnimation') }}</NeoButton
       >
+      <NeoButton
+        rounded
+        no-shadow
+        :disabled="!render"
+        class="border-k-grey px-4 hover:!bg-transparent"
+        icon="arrow-up-right-and-arrow-down-left-from-center"
+        @click="toggleFullscreen"></NeoButton>
     </div>
     <div>
       <span>{{ $t('codeChecker.currentHash') }}</span>
@@ -74,6 +89,8 @@ import {
   NeoDropdownItem,
   NeoInput,
 } from '@kodadot1/brick'
+import { useFullscreen } from '@vueuse/core'
+
 import { generateRandomHash } from './utils'
 import config from './codechecker.config'
 import { AssetMessage, Passed } from './types'
@@ -86,6 +103,10 @@ const props = defineProps<{
   kodaRendererUsed: Passed
 }>()
 
+const fullscreenRef = ref<HTMLElement | null>(null)
+
+const { toggle: toggleFullscreen, isFullscreen } = useFullscreen(fullscreenRef)
+
 const emit = defineEmits(['reload'])
 const variationOptions = config.varaitionsOptions
 

diff --git a/components/codeChecker/SandboxIFrame.vue b/components/codeChecker/SandboxIFrame.vue
@@ -3,7 +3,7 @@
     :id="config.iframeId"
     :key="count"
     title="render-preview"
-    class="sandbox-iframe w-full h-[440px] border"
+    :class="['sandbox-iframe w-full h-[440px] border', customClass]"
     sandbox="allow-scripts allow-same-origin"
     :src="iframeSrc"
     @load="onIframeLoad">
@@ -19,6 +19,7 @@ const props = defineProps<{
   hash: string
   assets: Array<AssetMessage>
   count: number
+  customClass?: string
 }>()
 
 const emit = defineEmits(['update:count'])