updates & fixs

- add a solution for mix not picking up the env var in webpack.mix
- updated select prev item to now work with blk_slct_all
- add some animation to the **no_files** & **file_loader** instead of
the dull defaults
- update command
- update rdme

Author: ctf0

README.md

@@ -165,6 +165,7 @@ npm install vue dropzone keycode vue-tippy vue2-filters vue-lightbox vuemit
 > - duplicate `assets/vendor/MediaManager/js/components/bulma` and rename it to the framework you want ex.`bootstrap`
 > - duplicate `assets/vendor/MediaManager/sass/bulma` and rename it to the framework you want ex.`bootstrap`
 > - set `MIX_MM_FRAMEWORK` to the framework name ex.`MIX_MM_FRAMEWORK=bootstrap`
+> - open `webpack.mix.js` and change `fw` to the framework name ex.`const fw ='bootstrap'`
 > - start editing the new files.
 > - run `npm run watch` to compile your `js/css` files.
 >

src/Commands/MMAppend.php

@@ -50,7 +50,7 @@ public function handle()
         $mix_file = base_path('webpack.mix.js');
         $search   = 'MediaManager';
         if (File::exists($mix_file) && !str_contains(File::get($mix_file), $search)) {
-            $data = "\n// Media-Manager\nmix.sass('resources/assets/vendor/MediaManager/sass/' + process.env.MIX_MM_FRAMEWORK + '/media.scss', 'public/assets/vendor/MediaManager/style.css')\n\t.version();";
+            $data = "\n// Media-Manager\nconst fw = 'bulma'\nmix.sass('resources/assets/vendor/MediaManager/sass/' + fw + '/media.scss', 'public/assets/vendor/MediaManager/style.css')\n\t.version();";
 
             File::append($mix_file, $data);
             $this->comment("['mix.sass(..).version()'] added to [webpack.mix.js]");

src/resources/assets/js/components/bulma/media.vue

@@ -61,6 +61,7 @@ export default {
                 createImageThumbnails: false,
                 parallelUploads: 10,
                 uploadMultiple: true,
+                forceFallback: false,
                 previewsContainer: '#uploadPreview',
                 processingmultiple() {
                     $('#uploadProgress').fadeIn()
@@ -634,15 +635,12 @@ export default {
             } else {
                 this.bulkList.splice(this.bulkList.indexOf(file), 1)
 
-                // normal single selction behavior
-                if (!$('#blk_slct_all').hasClass('is-warning')) {
-                    // select prev item
-                    if (this.bulkItemsCount) {
-                        this.selectedFile = this.bulkList[this.bulkItemsCount - 1]
-                    } else {
-                        // clear slection
-                        this.clearSelected()
-                    }
+                // select prev item
+                if (this.bulkItemsCount) {
+                    this.selectedFile = this.bulkList[this.bulkItemsCount - 1]
+                } else {
+                    // clear slection
+                    this.clearSelected()
                 }
             }
         },

src/resources/assets/sass/shared-styles.scss

@@ -139,7 +139,6 @@ $blue_2: #276cda;
 #left,
 #right {
     min-height: 400px;
-    max-height: 584px;
     overflow: scroll;
     position: relative;
 }
@@ -224,30 +223,39 @@ $blue_2: #276cda;
 #file_loader{
     position: absolute;
     top: 0;
-    height: 100%;
     bottom: 0;
-    right: 0;
     left: 0;
-    z-index: 9;
+    right: 0;
     background: white;
-    p {
-        width: 100%;
-        position: absolute;
-        top: 50%;
-        font-size: 12px;
-        font-weight: 400;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    h3 {
+        margin-left: 10px;
         text-align: center;
-        .icon {
-            vertical-align: middle;
-        }
     }
 }
 #no_files {
     display: none;
-    h3 {
-        margin-top: 55px;
-        text-align: center;
-        color: $gray_6;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    > div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        h3 {
+            margin-left: 10px;
+        }
+        iframe {
+            width: 5vw;
+        }
     }
 }
 #right {

src/resources/views/bulma/media.blade.php

@@ -283,18 +283,18 @@ class="button"
 
                                         {{-- loading data from server --}}
                                         <div id="file_loader">
-                                            <p>
-                                                <span class="control is-loading icon is-medium"></span>
-                                                {{ trans('MediaManager::messages.loading') }}
-                                            </p>
+                                            <div>
+                                                <iframe src="https://lottiefiles.com/iframe/61-octopus" frameborder="0" allowfullscreen></iframe>
+                                                <h3>{{ trans('MediaManager::messages.loading') }}</h3>
+                                            </div>
                                         </div>
 
                                         {{-- no files --}}
                                         <div id="no_files">
-                                            <h3>
-                                                <span class="icon"><i class="fa fa-meh-o"></i></span>
-                                                <span>{{ trans('MediaManager::messages.no_files_in_folder') }}</span>
-                                            </h3>
+                                            <div>
+                                                <iframe src="https://lottiefiles.com/iframe/335-test" frameborder="0" allowfullscreen></iframe>
+                                                <h3>{{ trans('MediaManager::messages.no_files_in_folder') }}</h3>
+                                            </div>
                                         </div>
                                     </div>