@cmstops/pro-compo 0.3.24 → 0.3.25

package/es/resourceModal/style/FileTypeThumb.less

@@ -59,8 +59,9 @@
 
   .tag {
     position: absolute;
-    top: 8px;
-    left: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     padding: 2px 8px;
     color: white;
     font-size: 12px;

package/es/resourceModal/style/index.css

@@ -379,8 +379,9 @@
 }
 .file-type-thumb .tag {
   position: absolute;
-  top: 8px;
-  left: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 2px 8px;
   color: white;
   font-size: 12px;

package/lib/index.css

@@ -887,8 +887,9 @@
 }
 .file-type-thumb .tag {
   position: absolute;
-  top: 8px;
-  left: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 2px 8px;
   color: white;
   font-size: 12px;
@@ -3894,14 +3895,14 @@
   padding: 0 2px;
   border: none;
 }
-.file-type-thumb {
+.resource-grid-file-type-thumb {
   position: relative;
   width: 100%;
 }
-.file-type-thumb:hover .mask {
+.resource-grid-file-type-thumb:hover .mask {
   display: flex;
 }
-.file-type-thumb .mask {
+.resource-grid-file-type-thumb .mask {
   position: absolute;
   top: 0;
   display: none;
@@ -3913,56 +3914,57 @@
   font-size: 18px;
   background: rgba(0, 0, 0, 0.3);
 }
-.file-type-thumb .mask i {
+.resource-grid-file-type-thumb .mask i {
   display: inline-block;
   cursor: pointer;
 }
-.file-type-thumb .mask i:active {
+.resource-grid-file-type-thumb .mask i:active {
   opacity: 0.4;
 }
-.file-type-thumb .mask .half {
+.resource-grid-file-type-thumb .mask .half {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48%;
   height: 100%;
 }
-.file-type-thumb .mask .half:hover {
+.resource-grid-file-type-thumb .mask .half:hover {
   cursor: pointer;
   opacity: 0.7;
 }
-.file-type-thumb .mask .el-divider {
+.resource-grid-file-type-thumb .mask .el-divider {
   margin: 0;
   opacity: 0.4;
 }
-.file-type-thumb .transparent {
+.resource-grid-file-type-thumb .transparent {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
 }
-.file-type-thumb .transparent:hover {
+.resource-grid-file-type-thumb .transparent:hover {
   cursor: pointer;
 }
-.file-type-thumb .tag {
+.resource-grid-file-type-thumb .tag {
   position: absolute;
-  top: 8px;
-  left: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 2px 8px;
   color: white;
   font-size: 12px;
-  background-color: rgba(#000, #000, #000, 0.4);
+  background-color: rgba(0, 0, 0, 0.2);
   border-radius: 12px;
 }
-.file-type-thumb .rate-info-tag {
+.resource-grid-file-type-thumb .rate-info-tag {
   top: 8px;
   left: 5px;
 }
-.file-type-thumb .ai-tag {
+.resource-grid-file-type-thumb .ai-tag {
   top: 8px;
   right: 5px;
 }
-.file-type-thumb .pic {
+.resource-grid-file-type-thumb .pic {
   width: 100%;
   padding-top: 56.25%;
   background-color: #fff;
@@ -3972,83 +3974,83 @@
   background-position: top;
   background-size: cover;
 }
-.file-type-thumb .pic:hover {
+.resource-grid-file-type-thumb .pic:hover {
   transform: scale(1.02);
   transition: ease-out 0.4s;
 }
-.file-type-thumb .audio {
+.resource-grid-file-type-thumb .audio {
   background-image: url('../assets/images/music.png') !important;
 }
-.file-type-thumb .audio.doc {
+.resource-grid-file-type-thumb .audio.doc {
   background-image: url('../assets/images/draf.png') !important;
 }
-.file-type-thumb .project {
+.resource-grid-file-type-thumb .project {
   background-image: url('../assets/images/project1.png') !important;
 }
-.file-type-thumb .doc {
+.resource-grid-file-type-thumb .doc {
   background-image: url('../assets/images/draf.png');
 }
-.file-type-thumb .link {
+.resource-grid-file-type-thumb .link {
   background-image: url('../assets/images/link.png');
 }
-.file-type-thumb .sp_topic {
+.resource-grid-file-type-thumb .sp_topic {
   background-image: url('../assets/images/link.png');
 }
-.file-type-thumb .live {
+.resource-grid-file-type-thumb .live {
   background-image: url('../assets/images/live.png');
 }
-.file-type-thumb .pdf {
+.resource-grid-file-type-thumb .pdf {
   background-image: url('../assets/images/pdf.png') !important;
 }
-.file-type-thumb .officeexcel {
+.resource-grid-file-type-thumb .officeexcel {
   background-image: url('../assets/images/excel.png') !important;
 }
-.file-type-thumb .officeppt {
+.resource-grid-file-type-thumb .officeppt {
   background-image: url('../assets/images/ppt.png') !important;
 }
-.file-type-thumb .zip {
+.resource-grid-file-type-thumb .zip {
   background-image: url('../assets/images/zip.png') !important;
 }
-.file-type-thumb .rar {
+.resource-grid-file-type-thumb .rar {
   background-image: url('../assets/images/rar.png') !important;
 }
-.file-type-thumb .txt {
+.resource-grid-file-type-thumb .txt {
   background-image: url('../assets/images/txt.png') !important;
 }
-.file-type-thumb .exe {
+.resource-grid-file-type-thumb .exe {
   background-image: url('../assets/images/exe.png') !important;
 }
-.file-type-thumb .html {
+.resource-grid-file-type-thumb .html {
   background-image: url('../assets/images/html.png') !important;
 }
-.file-type-thumb .officedoc {
+.resource-grid-file-type-thumb .officedoc {
   background-image: url('../assets/images/word.png') !important;
 }
-.file-type-thumb .wechat {
+.resource-grid-file-type-thumb .wechat {
   background-image: url('../assets/images/wechat.png') !important;
 }
-.file-type-thumb .h5 {
+.resource-grid-file-type-thumb .h5 {
   background-image: url('../assets/images/h5.png') !important;
 }
-.file-type-thumb .ad {
+.resource-grid-file-type-thumb .ad {
   background-image: url('../assets/images/ad.png') !important;
 }
-.file-type-thumb .booklink {
+.resource-grid-file-type-thumb .booklink {
   background-image: url('../assets/images/booklink.png') !important;
 }
-.file-type-thumb .activity {
+.resource-grid-file-type-thumb .activity {
   background-image: url('../assets/images/activity.png') !important;
 }
-.file-type-thumb .svideo {
+.resource-grid-file-type-thumb .svideo {
   background-image: url('../assets/images/svideo.png') !important;
 }
-.file-type-thumb .cloud_lottery {
+.resource-grid-file-type-thumb .cloud_lottery {
   background-image: url('../assets/images/cloud_lottery.png') !important;
 }
-.file-type-thumb .cloud_form {
+.resource-grid-file-type-thumb .cloud_form {
   background-image: url('../assets/images/cloud_form.png') !important;
 }
-.file-type-thumb .illegal-media-warning {
+.resource-grid-file-type-thumb .illegal-media-warning {
   position: absolute;
   top: 0;
   width: 100%;
@@ -4228,6 +4230,11 @@
   line-height: 1em;
   opacity: 0.65;
 }
+.media-grid-list-scroll .file-wrap .file-list .item .shadow-wrap .menu-wrap {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
 .media-grid-list-scroll .file-wrap .file-list::after {
   height: 50px;
 }

package/lib/index.js

@@ -22,7 +22,7 @@ var index$h = require("./editMetaInfo/index.js");
 var index$i = require("./baseFilter/index.js");
 var index$j = require("./dataTags/index.js");
 var index$k = require("./colorPalette/index.js");
-var index$l = require("./mediaGridList/index.js");
+var index$l = require("./resourceGridList/index.js");
 var index$m = require("./mediaView/index.js");
 exports["default"] = components;
 exports.appCenter = index;
@@ -46,5 +46,5 @@ exports.editMetaInfo = index$h;
 exports.baseFilter = index$i;
 exports.dataTags = index$j;
 exports.colorPalette = index$k;
-exports.mediaGridList = index$l;
+exports.resourceGridList = index$l;
 exports.mediaView = index$m;

package/lib/index.less

@@ -20,5 +20,5 @@
 @import './baseFilter/style/index.less';
 @import './dataTags/style/index.less';
 @import './colorPalette/style/index.less';
-@import './mediaGridList/style/index.less';
+@import './resourceGridList/style/index.less';
 @import './mediaView/style/index.less';

package/lib/{mediaGridList → resourceGridList}/component.js

@@ -18,28 +18,30 @@ const _hoisted_7 = { class: "wrap" };
 const _hoisted_8 = { class: "thumb" };
 const _hoisted_9 = { class: "folder-more-wrap" };
 const _hoisted_10 = { class: "file-list clearfix" };
-const _hoisted_11 = { class: "thumb-wrap" };
-const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("div", { class: "transcoding-in-progress grid-mode" }, [
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = { class: "thumb-wrap" };
+const _hoisted_13 = { class: "menu-wrap" };
+const _hoisted_14 = /* @__PURE__ */ vue.createElementVNode("div", { class: "transcoding-in-progress grid-mode" }, [
   /* @__PURE__ */ vue.createElementVNode("div", { class: "transcoding-progress" }, "\u8F6C\u7801\u4E2D\u2026")
 ], -1);
-const _hoisted_13 = {
+const _hoisted_15 = {
   key: 1,
   class: "load_more_title"
 };
-const _hoisted_14 = {
+const _hoisted_16 = {
   key: 1,
   class: "nomore_tips"
 };
-const _hoisted_15 = {
+const _hoisted_17 = {
   key: 2,
   class: "null-file"
 };
-const _hoisted_16 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u6682\u65E0\u7D20\u6750", -1);
-const _hoisted_17 = [
-  _hoisted_16
+const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u6682\u65E0\u7D20\u6750", -1);
+const _hoisted_19 = [
+  _hoisted_18
 ];
 const _sfc_main = vue.defineComponent({
-  ...{ name: "mediaGridList" },
+  ...{ name: "resourceGridList" },
   __name: "component",
   props: {
     folderList: {},
@@ -47,11 +49,9 @@ const _sfc_main = vue.defineComponent({
     fileListCount: {},
     isOver: { type: Boolean },
     showFolder: { type: Boolean },
-    preview: { type: Boolean },
-    changeDirectory: { type: Function },
-    loadFileMore: { type: Function }
+    preview: { type: Boolean }
   },
-  emits: ["confirm"],
+  emits: ["confirm", "clickDir", "clickItem", "loadMore"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const isFold = vue.ref(true);
@@ -71,6 +71,15 @@ const _sfc_main = vue.defineComponent({
       emit("confirm", selectedData.value);
     };
     const selectedData = vue.ref([]);
+    const _changeDirectory = (item) => {
+      emit("clickDir", item);
+    };
+    const _clickFileItem = (item) => {
+      emit("clickItem", item);
+    };
+    const _loadFileMore = () => {
+      emit("loadMore");
+    };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(webVue.Scrollbar), { class: "media-grid-list-scroll" }, {
         default: vue.withCtx(() => {
@@ -84,7 +93,7 @@ const _sfc_main = vue.defineComponent({
                   return vue.openBlock(), vue.createElementBlock("div", {
                     key: index2,
                     class: "item folder-item",
-                    onClick: ($event) => _ctx.changeDirectory(item)
+                    onClick: ($event) => _changeDirectory(item)
                   }, [
                     vue.createElementVNode("div", _hoisted_4, [
                       vue.createVNode(vue.unref(webVue.Tooltip), {
@@ -109,7 +118,7 @@ const _sfc_main = vue.defineComponent({
                     return vue.openBlock(), vue.createElementBlock("div", {
                       key: index2,
                       class: "item folder-item",
-                      onClick: ($event) => _ctx.changeDirectory(item)
+                      onClick: ($event) => _changeDirectory(item)
                     }, [
                       vue.createElementVNode("div", _hoisted_7, [
                         vue.createVNode(vue.unref(webVue.Tooltip), {
@@ -151,9 +160,10 @@ const _sfc_main = vue.defineComponent({
                     class: "item"
                   }, [
                     vue.createElementVNode("div", {
-                      class: vue.normalizeClass([{ active: selectedData.value.includes(item) }, "shadow-wrap"])
+                      class: vue.normalizeClass([{ active: selectedData.value.includes(item) }, "shadow-wrap"]),
+                      onClick: ($event) => _clickFileItem(item)
                     }, [
-                      vue.createElementVNode("div", _hoisted_11, [
+                      vue.createElementVNode("div", _hoisted_12, [
                         vue.createVNode(index, {
                           "item-data": item,
                           preview: _ctx.preview,
@@ -180,6 +190,10 @@ const _sfc_main = vue.defineComponent({
                         }, 1032, ["content"])
                       ]),
                       vue.createElementVNode("p", null, vue.toDisplayString(vue.unref(filter.timeFormat)(item.updated_at)), 1),
+                      vue.createCommentVNode(" \u83DC\u5355\u63D2\u69FD "),
+                      vue.createElementVNode("div", _hoisted_13, [
+                        vue.renderSlot(_ctx.$slots, "menu", { item })
+                      ]),
                       vue.createCommentVNode(" \u89C6\u9891\u8F6C\u7801\u8FDB\u5EA6 "),
                       item.task ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Tooltip), {
                         key: 0,
@@ -189,33 +203,33 @@ const _sfc_main = vue.defineComponent({
                         placement: "bottom"
                       }, {
                         default: vue.withCtx(() => [
-                          _hoisted_12
+                          _hoisted_14
                         ]),
                         _: 1
                       })) : vue.createCommentVNode("v-if", true)
-                    ], 2)
+                    ], 10, _hoisted_11)
                   ]);
                 }), 128))
               ]),
-              _ctx.fileListCount ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
+              _ctx.fileListCount ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, [
                 !_ctx.isOver ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Button), {
                   key: 0,
                   class: "loadmore_tips",
                   size: "small",
                   type: "text",
-                  onClick: _ctx.loadFileMore
+                  onClick: _loadFileMore
                 }, {
                   default: vue.withCtx(() => [
                     vue.createTextVNode("\u52A0\u8F7D\u66F4\u591A\u2026 ")
                   ]),
                   _: 1
-                }, 8, ["onClick"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, "\u6CA1\u6709\u66F4\u591A\u4E86\u2026"))
+                })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, "\u6CA1\u6709\u66F4\u591A\u4E86\u2026"))
               ])) : vue.createCommentVNode("v-if", true),
-              !((_d = _ctx.fileList) == null ? void 0 : _d.length) && !((_e = _ctx.folderList) == null ? void 0 : _e.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, _hoisted_17)) : vue.createCommentVNode("v-if", true)
+              !((_d = _ctx.fileList) == null ? void 0 : _d.length) && !((_e = _ctx.folderList) == null ? void 0 : _e.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, _hoisted_19)) : vue.createCommentVNode("v-if", true)
             ])
           ];
         }),
-        _: 1
+        _: 3
       });
     };
   }

package/lib/{mediaGridList → resourceGridList}/components/FileTypeThumb/index.js

@@ -3,7 +3,7 @@ var vue = require("vue");
 var webVue = require("@arco-design/web-vue");
 var icon = require("@arco-design/web-vue/es/icon");
 var component = require("../../../mediaView/component.js");
-const _hoisted_1 = { class: "file-type-thumb" };
+const _hoisted_1 = { class: "resource-grid-file-type-thumb" };
 const _hoisted_2 = {
   key: 0,
   class: "rate-info-tag tag"

package/lib/{mediaGridList → resourceGridList}/index.js

@@ -1,8 +1,8 @@
 "use strict";
 var component = require("./component.js");
-const mediaGridList = Object.assign(component, {
+const resourceGridList = Object.assign(component, {
   install: (app) => {
     app.component(component.name, component);
   }
 });
-module.exports = mediaGridList;
+module.exports = resourceGridList;

package/lib/{mediaGridList → resourceGridList}/style/FileTypeThumb.less

@@ -1,4 +1,4 @@
-.file-type-thumb {
+.resource-grid-file-type-thumb {
   position: relative;
   width: 100%;
 
@@ -59,12 +59,13 @@
 
   .tag {
     position: absolute;
-    top: 8px;
-    left: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     padding: 2px 8px;
     color: white;
     font-size: 12px;
-    background-color: rgba(#000, #000, #000, 0.4);
+    background-color: rgba(0, 0, 0, 0.2);
     border-radius: 12px;
   }
 

package/lib/{mediaGridList → resourceGridList}/style/index.css

@@ -1,11 +1,11 @@
-.file-type-thumb {
+.resource-grid-file-type-thumb {
   position: relative;
   width: 100%;
 }
-.file-type-thumb:hover .mask {
+.resource-grid-file-type-thumb:hover .mask {
   display: flex;
 }
-.file-type-thumb .mask {
+.resource-grid-file-type-thumb .mask {
   position: absolute;
   top: 0;
   display: none;
@@ -17,56 +17,57 @@
   font-size: 18px;
   background: rgba(0, 0, 0, 0.3);
 }
-.file-type-thumb .mask i {
+.resource-grid-file-type-thumb .mask i {
   display: inline-block;
   cursor: pointer;
 }
-.file-type-thumb .mask i:active {
+.resource-grid-file-type-thumb .mask i:active {
   opacity: 0.4;
 }
-.file-type-thumb .mask .half {
+.resource-grid-file-type-thumb .mask .half {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48%;
   height: 100%;
 }
-.file-type-thumb .mask .half:hover {
+.resource-grid-file-type-thumb .mask .half:hover {
   cursor: pointer;
   opacity: 0.7;
 }
-.file-type-thumb .mask .el-divider {
+.resource-grid-file-type-thumb .mask .el-divider {
   margin: 0;
   opacity: 0.4;
 }
-.file-type-thumb .transparent {
+.resource-grid-file-type-thumb .transparent {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
 }
-.file-type-thumb .transparent:hover {
+.resource-grid-file-type-thumb .transparent:hover {
   cursor: pointer;
 }
-.file-type-thumb .tag {
+.resource-grid-file-type-thumb .tag {
   position: absolute;
-  top: 8px;
-  left: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 2px 8px;
   color: white;
   font-size: 12px;
-  background-color: rgba(#000, #000, #000, 0.4);
+  background-color: rgba(0, 0, 0, 0.2);
   border-radius: 12px;
 }
-.file-type-thumb .rate-info-tag {
+.resource-grid-file-type-thumb .rate-info-tag {
   top: 8px;
   left: 5px;
 }
-.file-type-thumb .ai-tag {
+.resource-grid-file-type-thumb .ai-tag {
   top: 8px;
   right: 5px;
 }
-.file-type-thumb .pic {
+.resource-grid-file-type-thumb .pic {
   width: 100%;
   padding-top: 56.25%;
   background-color: #fff;
@@ -76,83 +77,83 @@
   background-position: top;
   background-size: cover;
 }
-.file-type-thumb .pic:hover {
+.resource-grid-file-type-thumb .pic:hover {
   transform: scale(1.02);
   transition: ease-out 0.4s;
 }
-.file-type-thumb .audio {
+.resource-grid-file-type-thumb .audio {
   background-image: url('../assets/images/music.png') !important;
 }
-.file-type-thumb .audio.doc {
+.resource-grid-file-type-thumb .audio.doc {
   background-image: url('../assets/images/draf.png') !important;
 }
-.file-type-thumb .project {
+.resource-grid-file-type-thumb .project {
   background-image: url('../assets/images/project1.png') !important;
 }
-.file-type-thumb .doc {
+.resource-grid-file-type-thumb .doc {
   background-image: url('../assets/images/draf.png');
 }
-.file-type-thumb .link {
+.resource-grid-file-type-thumb .link {
   background-image: url('../assets/images/link.png');
 }
-.file-type-thumb .sp_topic {
+.resource-grid-file-type-thumb .sp_topic {
   background-image: url('../assets/images/link.png');
 }
-.file-type-thumb .live {
+.resource-grid-file-type-thumb .live {
   background-image: url('../assets/images/live.png');
 }
-.file-type-thumb .pdf {
+.resource-grid-file-type-thumb .pdf {
   background-image: url('../assets/images/pdf.png') !important;
 }
-.file-type-thumb .officeexcel {
+.resource-grid-file-type-thumb .officeexcel {
   background-image: url('../assets/images/excel.png') !important;
 }
-.file-type-thumb .officeppt {
+.resource-grid-file-type-thumb .officeppt {
   background-image: url('../assets/images/ppt.png') !important;
 }
-.file-type-thumb .zip {
+.resource-grid-file-type-thumb .zip {
   background-image: url('../assets/images/zip.png') !important;
 }
-.file-type-thumb .rar {
+.resource-grid-file-type-thumb .rar {
   background-image: url('../assets/images/rar.png') !important;
 }
-.file-type-thumb .txt {
+.resource-grid-file-type-thumb .txt {
   background-image: url('../assets/images/txt.png') !important;
 }
-.file-type-thumb .exe {
+.resource-grid-file-type-thumb .exe {
   background-image: url('../assets/images/exe.png') !important;
 }
-.file-type-thumb .html {
+.resource-grid-file-type-thumb .html {
   background-image: url('../assets/images/html.png') !important;
 }
-.file-type-thumb .officedoc {
+.resource-grid-file-type-thumb .officedoc {
   background-image: url('../assets/images/word.png') !important;
 }
-.file-type-thumb .wechat {
+.resource-grid-file-type-thumb .wechat {
   background-image: url('../assets/images/wechat.png') !important;
 }
-.file-type-thumb .h5 {
+.resource-grid-file-type-thumb .h5 {
   background-image: url('../assets/images/h5.png') !important;
 }
-.file-type-thumb .ad {
+.resource-grid-file-type-thumb .ad {
   background-image: url('../assets/images/ad.png') !important;
 }
-.file-type-thumb .booklink {
+.resource-grid-file-type-thumb .booklink {
   background-image: url('../assets/images/booklink.png') !important;
 }
-.file-type-thumb .activity {
+.resource-grid-file-type-thumb .activity {
   background-image: url('../assets/images/activity.png') !important;
 }
-.file-type-thumb .svideo {
+.resource-grid-file-type-thumb .svideo {
   background-image: url('../assets/images/svideo.png') !important;
 }
-.file-type-thumb .cloud_lottery {
+.resource-grid-file-type-thumb .cloud_lottery {
   background-image: url('../assets/images/cloud_lottery.png') !important;
 }
-.file-type-thumb .cloud_form {
+.resource-grid-file-type-thumb .cloud_form {
   background-image: url('../assets/images/cloud_form.png') !important;
 }
-.file-type-thumb .illegal-media-warning {
+.resource-grid-file-type-thumb .illegal-media-warning {
   position: absolute;
   top: 0;
   width: 100%;
@@ -332,6 +333,11 @@
   line-height: 1em;
   opacity: 0.65;
 }
+.media-grid-list-scroll .file-wrap .file-list .item .shadow-wrap .menu-wrap {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
 .media-grid-list-scroll .file-wrap .file-list::after {
   height: 50px;
 }