Media UI Improvements

Author: darryldecode

src/Darryldecode/Backend/Base/Registrar/Registrar.php

@@ -13,7 +13,7 @@ class Registrar {
     /**
      * the laravel backend version
      */
-    const VERSION = '1.0.12';
+    const VERSION = '1.0.13';
     const VERSION_NAME = 'Alpha';
 
     /**

src/Darryldecode/Backend/Components/MediaManager/Views/mediaManager.blade.php

@@ -58,6 +58,7 @@
                     </div>
                     <div data-ng-repeat="f in files.files" class="col-lg-2 col-md-2 col-sm-4">
                         <div class="file-thumb">
+                            <label class="label label-info pull-left label-file-size">Size: @{{::getSizeName(f)}}</label>
                             <file-preview file-source="@{{f}}"></file-preview>
                             <div class="text-wrap meta-data-holder trim-info-xs">
                                 <a href="" data-toggle="tooltip" data-placement="bottom" title="@{{f}}" class="file-name">@{{::getLastSegment(f)}}</a>

src/Darryldecode/Backend/Public/backend/cb/app/contents/modals/controller.gallery.js

@@ -71,6 +71,17 @@ angular.module('cb.content').controller('GalleryModalController', ['$scope','$ti
         return path.split('/').pop();
     };
 
+    // get size name. Eg. ( name_large.jpg -> large )
+    $scope.getSizeName = function(path) {
+        var sizeName = 'Original';
+        var fileName = $scope.getLastSegment(path);
+        var f = fileName.split('_');
+        if(f.length >= 2) {
+            sizeName = f[1].split('.')[0];
+        }
+        return sizeName;
+    };
+
     // uploads the files
     function upload (files, path) {
         if (files && files.length) {

src/Darryldecode/Backend/Public/backend/cb/app/contents/modals/gallery.html

@@ -48,6 +48,7 @@ <h3>
                     </div>
                     <div data-ng-repeat="f in files.files" class="col-lg-3 col-md-3 col-sm-4">
                         <div class="file-thumb">
+                            <label class="label label-info pull-left label-file-size">Size: {{::getSizeName(f)}}</label>
                             <div class="gallery-select-control">
                                 <input data-ng-model="selectedFiles[f]" type="checkbox">
                             </div>

src/Darryldecode/Backend/Public/backend/cb/app/media-manager/controller.manage.js

@@ -153,6 +153,17 @@ angular.module('cb.mediaManager').controller('MediaManagerController', ['$scope'
         return path.split('/').pop();
     };
 
+    // get size name. Eg. ( name_large.jpg -> large )
+    $scope.getSizeName = function(path) {
+        var sizeName = 'Original';
+        var fileName = $scope.getLastSegment(path);
+        var f = fileName.split('_');
+        if(f.length >= 2) {
+            sizeName = f[1].split('.')[0];
+        }
+        return sizeName;
+    };
+
     // upload
     function upload (files, path) {
         if (files && files.length) {

src/Darryldecode/Backend/Public/backend/cb/css/backend.css

@@ -380,6 +380,13 @@ ul.ul-clear li {
     font-size: 12px;
     margin: 0 5px;
 }
+.file-thumb .label-file-size {
+    left: 15px;
+    top: 0;
+    position: absolute;
+    font-weight: normal;
+    font-size: 80%;
+}
 
 /* CONTENTS */
 .editor-wrap {