Add grid for texture detail page

app/Http/Controllers/SkinlibController.php

@@ -37,10 +37,6 @@ class SkinlibController extends Controller
     /**
      * Get skin library data filtered.
      * Available Query String: filter, uploader, page, sort, keyword, items_per_page.
-     *
-     * @param Request $request [description]
-     *
-     * @return JsonResponse
      */
     public function getSkinlibFiltered(Request $request)
     {
@@ -155,9 +151,30 @@ class SkinlibController extends Controller
             ]
         );
 
+        $grid = [
+            'layout' => [
+                ['md-8', 'md-4'],
+                ['md-12'],
+            ],
+            'widgets' => [
+                [
+                    ['shared.previewer'],
+                    [
+                        'skinlib.widgets.show.info',
+                        'skinlib.widgets.show.operations',
+                    ],
+                ],
+                [
+                    ['skinlib.widgets.show.comment'],
+                ],
+            ],
+        ];
+        $grid = $filter->apply('grid:skinlib.show', $grid);
+
         return view('skinlib.show')
             ->with('texture', $texture)
             ->with('comment_script', $commentScript)
+            ->with('grid', $grid)
             ->with('extra', [
                 'download' => option('allow_downloading_texture'),
                 'currentUid' => $user ? $user->uid : 0,

resources/assets/src/scripts/route.ts

@@ -1,4 +1,4 @@
-const offline = document.createElement('div')
+const virtual = document.createElement('div')
 
 export default [
   {
@@ -16,12 +16,12 @@ export default [
   {
     path: 'user/closet',
     component: () => import('../views/user/Closet.vue'),
-    el: offline,
+    el: virtual,
   },
   {
     path: 'user/player',
     component: () => import('../views/user/Players.vue'),
-    el: offline,
+    el: virtual,
   },
   {
     path: 'user/player/bind',
@@ -119,7 +119,7 @@ export default [
   {
     path: 'skinlib/show/(\\d+)',
     component: () => import('../views/skinlib/Show.vue'),
-    el: '.content > .container-fluid > .row:nth-child(1)',
+    el: virtual,
   },
   {
     path: 'skinlib/upload',

resources/assets/src/views/skinlib/Show.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="row">
-    <div class="col-md-8">
+  <div>
+    <portal selector="#previewer" :disabled="disablePortal">
       <previewer
         :skin="type !== 'cape' && textureUrl"
         :cape="type === 'cape' ? textureUrl : ''"
@@ -78,9 +78,9 @@
           </div>
         </template>
       </previewer>
-    </div>
+    </portal>
 
-    <div class="col-md-4">
+    <portal selector="#texture-info" :disabled="disablePortal">
       <div class="card card-primary">
         <div class="card-header">
           <h3 v-t="'skinlib.show.detail'" class="card-title" />
@@ -148,7 +148,9 @@
           </table>
         </div>
       </div>
+    </portal>
 
+    <portal selector="#operations" :disabled="disablePortal">
       <div v-if="hasEditPermission" class="card card-warning">
         <div class="card-header">
           <h3 v-t="'admin.operationsTitle'" class="card-title" />
@@ -168,54 +170,57 @@
           </div>
         </div>
       </div>
-    </div>
+    </portal>
 
-    <apply-to-player-dialog
-      ref="useAs"
-      :allow-add="false"
-      :skin="type !== 'cape' ? tid : 0"
-      :cape="type === 'cape' ? tid : 0"
-    />
+    <portal selector="#modals" :disabled="disablePortal">
+      <apply-to-player-dialog
+        ref="useAs"
+        :allow-add="false"
+        :skin="type !== 'cape' ? tid : 0"
+        :cape="type === 'cape' ? tid : 0"
+      />
 
-    <modal
-      id="modal-type"
-      :title="$t(this.$t('skinlib.setNewTextureModel'))"
-      center
-      @confirm="changeModel"
-    >
-      <label class="mr-3">
-        <input
-          v-model="editingType"
-          type="radio"
-          name="type"
-          value="steve"
-        >
-        Steve
-      </label>
-      <label class="mr-3">
-        <input
-          v-model="editingType"
-          type="radio"
-          name="type"
-          value="alex"
-        >
-        Alex
-      </label>
-      <label>
-        <input
-          v-model="editingType"
-          type="radio"
-          name="type"
-          value="cape"
-        >
-        {{ $t('general.cape') }}
-      </label>
-    </modal>
+      <modal
+        id="modal-type"
+        :title="$t(this.$t('skinlib.setNewTextureModel'))"
+        center
+        @confirm="changeModel"
+      >
+        <label class="mr-3">
+          <input
+            v-model="editingType"
+            type="radio"
+            name="type"
+            value="steve"
+          >
+          Steve
+        </label>
+        <label class="mr-3">
+          <input
+            v-model="editingType"
+            type="radio"
+            name="type"
+            value="alex"
+          >
+          Alex
+        </label>
+        <label>
+          <input
+            v-model="editingType"
+            type="radio"
+            name="type"
+            value="cape"
+          >
+          {{ $t('general.cape') }}
+        </label>
+      </modal>
+    </portal>
   </div>
 </template>
 
 <script>
 import Modal from '../../components/Modal.vue'
+import Portal from '../../components/Portal'
 import setAsAvatar from '../../components/mixins/setAsAvatar'
 import addClosetItem from '../../components/mixins/addClosetItem'
 import removeClosetItem from '../../components/mixins/removeClosetItem'
@@ -230,6 +235,7 @@ export default {
   components: {
     ApplyToPlayerDialog,
     Modal,
+    Portal,
     Previewer: () => import('../../components/Previewer.vue'),
   },
   mixins: [
@@ -264,6 +270,7 @@ export default {
       uploaderNickName: blessing.extra.nickname,
       reportScore: blessing.extra.report,
       badges: blessing.extra.badges,
+      disablePortal: process.env.NODE_ENV === 'test',
     }
   },
   computed: {

resources/views/skinlib/show.twig

@@ -20,24 +20,13 @@
 
       <section class="content">
         <div class="container-fluid">
-          <div class="row"></div>
-
-          {% if comment_script %}
-            <div class="container-fluid p-0">
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">{{ trans('skinlib.show.comment') }}</h3>
-                </div>
-                <div class="card-body">
-                  {{ comment_script|raw }}
-                </div>
-              </div>
-            </div>
-          {% endif %}
+          {{ include('shared.grid') }}
         </div>
       </section>
     </div>
   </div>
+
+  <div id="modals"></div>
 {% endblock %}
 
 {% block before_foot %}

resources/views/skinlib/widgets/show/comment.twig

@@ -0,0 +1,12 @@
+{% if comment_script %}
+  <div class="container-fluid p-0">
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">{{ trans('skinlib.show.comment') }}</h3>
+      </div>
+      <div class="card-body">
+        {{ comment_script|raw }}
+      </div>
+    </div>
+  </div>
+{% endif %}

resources/views/skinlib/widgets/show/info.twig

@@ -0,0 +1 @@
+<div id="texture-info"></div>

resources/views/skinlib/widgets/show/operations.twig

@@ -0,0 +1 @@
+<div id="operations"></div>