From 1e21f4508c549ca5c4a706fed15fe5df00286a7d Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Mon, 16 Dec 2019 11:02:39 +0800
Subject: [PATCH] Add grid for upload page

---
 app/Http/Controllers/SkinlibController.php    |  16 +-
 resources/assets/src/scripts/route.ts         |   2 +-
 resources/assets/src/views/skinlib/Upload.vue | 224 +++++++++---------
 resources/views/skinlib/upload.twig           |   4 +-
 .../views/skinlib/widgets/upload/input.twig   |   1 +
 5 files changed, 133 insertions(+), 114 deletions(-)
 create mode 100644 resources/views/skinlib/widgets/upload/input.twig

diff --git a/app/Http/Controllers/SkinlibController.php b/app/Http/Controllers/SkinlibController.php
index 5ba45553..9dab05e8 100644
--- a/app/Http/Controllers/SkinlibController.php
+++ b/app/Http/Controllers/SkinlibController.php
@@ -195,9 +195,23 @@ class SkinlibController extends Controller
         }
     }
 
-    public function upload()
+    public function upload(Filter $filter)
     {
+        $grid = [
+            'layout' => [
+                ['md-6', 'md-6'],
+            ],
+            'widgets' => [
+                [
+                    ['skinlib.widgets.upload.input'],
+                    ['shared.previewer'],
+                ],
+            ],
+        ];
+        $grid = $filter->apply('grid:skinlib.upload', $grid);
+
         return view('skinlib.upload')
+            ->with('grid', $grid)
             ->with('extra', [
                 'rule' => ($regexp = option('texture_name_regexp'))
                     ? trans('skinlib.upload.name-rule-regexp', compact('regexp'))
diff --git a/resources/assets/src/scripts/route.ts b/resources/assets/src/scripts/route.ts
index 7b77136c..4001b7ba 100644
--- a/resources/assets/src/scripts/route.ts
+++ b/resources/assets/src/scripts/route.ts
@@ -124,6 +124,6 @@ export default [
   {
     path: 'skinlib/upload',
     component: () => import('../views/skinlib/Upload.vue'),
-    el: '.content > .container-fluid',
+    el: virtual,
   },
 ]
diff --git a/resources/assets/src/views/skinlib/Upload.vue b/resources/assets/src/views/skinlib/Upload.vue
index 594d5590..e289fffb 100644
--- a/resources/assets/src/views/skinlib/Upload.vue
+++ b/resources/assets/src/views/skinlib/Upload.vue
@@ -1,135 +1,136 @@
 <template>
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-md-6">
-        <div class="card card-primary">
-          <div class="card-body">
-            <div class="form-group">
-              <label v-t="'skinlib.upload.texture-name'" for="name" />
-              <input
-                v-model="name"
-                type="text"
-                :placeholder="textureNameRule"
-                class="form-control"
-              >
-            </div>
-
-            <div class="form-group">
-              <label v-t="'skinlib.upload.texture-type'" />
-              <br>
-              <label class="mr-2">
-                <input
-                  v-model="type"
-                  type="radio"
-                  name="type"
-                  value="steve"
-                >
-                Steve
-              </label>
-              <label class="mr-2">
-                <input
-                  v-model="type"
-                  type="radio"
-                  name="type"
-                  value="alex"
-                >
-                Alex
-              </label>
-              <label class="mr-2">
-                <input
-                  v-model="type"
-                  type="radio"
-                  name="type"
-                  value="cape"
-                >
-                {{ $t('general.cape') }}
-              </label>
-            </div>
-
-            <div class="form-group">
-              <label v-t="'skinlib.upload.select-file'" for="file" />
-              <div class="file-dnd">
-                <img v-if="hasFile" :src="texture" :width="width2d">
-                <h3 v-else v-t="'skinlib.upload.dropZone'" />
-              </div>
-              <file-upload
-                ref="upload"
-                v-model="files"
-                extensions="png"
-                accept="image/png,image/x-png"
-                drop=".file-dnd"
-                @input-file="inputFile"
-              >
-                <button class="btn btn-primary">
-                  {{ $t('skinlib.upload.select-file') }}
-                </button>
-              </file-upload>
-              <button
-                v-show="hasFile"
-                class="btn btn-danger float-right"
-                data-test="remove"
-                @click="remove"
-              >
-                <i class="fas fa-trash-alt" />
-                {{ $t('skinlib.upload.remove') }}
-              </button>
-            </div>
-
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-if="contentPolicy" class="callout callout-warning" v-html="contentPolicy" />
+  <div>
+    <portal selector="#file-input" :disabled="disablePortal">
+      <div class="card card-primary">
+        <div class="card-body">
+          <div class="form-group">
+            <label v-t="'skinlib.upload.texture-name'" for="name" />
+            <input
+              v-model="name"
+              type="text"
+              :placeholder="textureNameRule"
+              class="form-control"
+            >
           </div>
 
-          <div class="card-footer">
-            <div class="container pl-0 pr-0 d-flex justify-content-between">
-              <label
-                class="mt-2"
-                :title="$t('skinlib.upload.privacy-notice')"
-                data-toggle="tooltip"
+          <div class="form-group">
+            <label v-t="'skinlib.upload.texture-type'" />
+            <br>
+            <label class="mr-2">
+              <input
+                v-model="type"
+                type="radio"
+                name="type"
+                value="steve"
               >
-                <input v-model="isPrivate" type="checkbox">
-                {{ $t('skinlib.upload.set-as-private') }}
-              </label>
-              <button v-if="uploading" class="btn btn-success" disabled>
-                <i class="fa fa-spinner fa-spin" /> {{ $t('skinlib.uploading') }}
+              Steve
+            </label>
+            <label class="mr-2">
+              <input
+                v-model="type"
+                type="radio"
+                name="type"
+                value="alex"
+              >
+              Alex
+            </label>
+            <label class="mr-2">
+              <input
+                v-model="type"
+                type="radio"
+                name="type"
+                value="cape"
+              >
+              {{ $t('general.cape') }}
+            </label>
+          </div>
+
+          <div class="form-group">
+            <label v-t="'skinlib.upload.select-file'" for="file" />
+            <div class="file-dnd">
+              <img v-if="hasFile" :src="texture" :width="width2d">
+              <h3 v-else v-t="'skinlib.upload.dropZone'" />
+            </div>
+            <file-upload
+              ref="upload"
+              v-model="files"
+              extensions="png"
+              accept="image/png,image/x-png"
+              drop=".file-dnd"
+              @input-file="inputFile"
+            >
+              <button class="btn btn-primary">
+                {{ $t('skinlib.upload.select-file') }}
               </button>
-              <button v-else class="btn btn-success" @click="upload">
-                {{ $t('skinlib.upload.button') }}
-              </button>
-            </div>
-            <div v-if="hasFile" class="callout callout-info bottom-notice">
-              <p>{{ $t('skinlib.upload.cost', { score: scoreCost }) }}</p>
-            </div>
-            <div v-if="isPrivate" class="callout callout-info bottom-notice">
-              <p>{{ privacyNotice }}</p>
-            </div>
-            <div v-if="!isPrivate && award" class="callout callout-success bottom-notice">
-              <p>{{ $t('skinlib.upload.award', { score: award }) }}</p>
-            </div>
+            </file-upload>
+            <button
+              v-show="hasFile"
+              class="btn btn-danger float-right"
+              data-test="remove"
+              @click="remove"
+            >
+              <i class="fas fa-trash-alt" />
+              {{ $t('skinlib.upload.remove') }}
+            </button>
+          </div>
+
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-if="contentPolicy" class="callout callout-warning" v-html="contentPolicy" />
+        </div>
+
+        <div class="card-footer">
+          <div class="container pl-0 pr-0 d-flex justify-content-between">
+            <label
+              class="mt-2"
+              :title="$t('skinlib.upload.privacy-notice')"
+              data-toggle="tooltip"
+            >
+              <input v-model="isPrivate" type="checkbox">
+              {{ $t('skinlib.upload.set-as-private') }}
+            </label>
+            <button v-if="uploading" class="btn btn-success" disabled>
+              <i class="fa fa-spinner fa-spin" /> {{ $t('skinlib.uploading') }}
+            </button>
+            <button v-else class="btn btn-success" @click="upload">
+              {{ $t('skinlib.upload.button') }}
+            </button>
+          </div>
+          <div v-if="hasFile" class="callout callout-info bottom-notice">
+            <p>{{ $t('skinlib.upload.cost', { score: scoreCost }) }}</p>
+          </div>
+          <div v-if="isPrivate" class="callout callout-info bottom-notice">
+            <p>{{ privacyNotice }}</p>
+          </div>
+          <div v-if="!isPrivate && award" class="callout callout-success bottom-notice">
+            <p>{{ $t('skinlib.upload.award', { score: award }) }}</p>
           </div>
         </div>
       </div>
-      <div class="col-md-6">
-        <previewer
-          :skin="type !== 'cape' ? texture : ''"
-          :cape="type === 'cape' ? texture : ''"
-          :model="type"
-        />
-      </div>
-    </div>
+    </portal>
+
+    <portal selector="#previewer" :disabled="disablePortal">
+      <previewer
+        :skin="type !== 'cape' ? texture : ''"
+        :cape="type === 'cape' ? texture : ''"
+        :model="type"
+      />
+    </portal>
   </div>
 </template>
 
 <script>
 import FileUpload from 'vue-upload-component'
 import { isSlimSkin } from 'skinview3d'
+import Portal from '../../components/Portal'
 import emitMounted from '../../components/mixins/emitMounted'
 import { toast } from '../../scripts/notify'
 
 export default {
   name: 'Upload',
   components: {
-    Previewer: () => import('../../components/Previewer.vue'),
     FileUpload,
+    Portal,
+    Previewer: () => import('../../components/Previewer.vue'),
   },
   mixins: [
     emitMounted,
@@ -149,6 +150,7 @@ export default {
       award: blessing.extra.award,
       contentPolicy: blessing.extra.contentPolicy,
       width2d: 64,
+      disablePortal: process.env.NODE_ENV === 'test',
     }
   },
   computed: {
diff --git a/resources/views/skinlib/upload.twig b/resources/views/skinlib/upload.twig
index 7debf3ad..9a8fd9b6 100644
--- a/resources/views/skinlib/upload.twig
+++ b/resources/views/skinlib/upload.twig
@@ -18,7 +18,9 @@
         </div>
       </div>
       <section class="content">
-        <div class="container-fluid"></div>
+        <div class="container-fluid">
+          {{ include('shared.grid') }}
+        </div>
       </section>
     </div>
   </div>
diff --git a/resources/views/skinlib/widgets/upload/input.twig b/resources/views/skinlib/widgets/upload/input.twig
new file mode 100644
index 00000000..817852fe
--- /dev/null
+++ b/resources/views/skinlib/widgets/upload/input.twig
@@ -0,0 +1 @@
+<div id="file-input"></div>