Fixes upload and view in cp, and adds spinner to upload. Fixes #20, f…

…ixes #10
KeyteqLabs · Jun 3, 2015 · 4776007 · 4776007
1 parent 24d9059
commit 4776007
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 37 deletions.
diff --git a/resources/mediaflow-ng.js b/resources/mediaflow-ng.js
@@ -54,23 +54,6 @@ mediaflow.controller('MediaFlowCtrl', function ($scope, $http, $upload) {
             });
         });
     };
-
-    $scope.onFileSelect = function($files) {
-        $scope.spin = true;
-        for (var i = 0; i < $files.length; i++) {
-            var $file = $files[i];
-            $scope.upload = $upload.upload({
-                url: '/admin/mediaflow/upload',
-                file: $file
-            }).then(function(args) {
-                $scope.media.unshift(args.data);
-                $scope.spin = false;
-            }, function(args) {
-                console.log('err', args);
-                $scope.spin = false;
-            });
-        }
-    }
 });
 
 
@@ -123,6 +106,23 @@ mediaflow.controller('MediaFlowFieldCtrl', function ($scope, $http, $upload) {
         if (!$el) { return; }
         $el.click();
     };
+
+    $scope.onFileSelect = function($files) {
+        $scope.spin = true;
+        for (var i = 0; i < $files.length; i++) {
+            var $file = $files[i];
+            $scope.upload = $upload.upload({
+                url: '/admin/mediaflow/upload',
+                file: $file
+            }).then(function(args) {
+                $scope.media.unshift(args.data);
+                $scope.spin = false;
+            }, function(args) {
+                console.log('err', args);
+                $scope.spin = false;
+            });
+        }
+    }
 });
 
 mediaflow.controller('MediaFlowBrowseCtrl', function ($scope, $http, $upload) {
@@ -148,4 +148,21 @@ mediaflow.controller('MediaFlowBrowseCtrl', function ($scope, $http, $upload) {
             timeout = setTimeout(updateMedia, 250, searchText);
         }
     });
+
+    $scope.onFileSelect = function($files) {
+        $scope.spin = true;
+        for (var i = 0; i < $files.length; i++) {
+            var $file = $files[i];
+            $scope.upload = $upload.upload({
+                url: '/admin/mediaflow/upload',
+                file: $file
+            }).then(function(args) {
+                $scope.media.unshift(args.data);
+                $scope.spin = false;
+            }, function(args) {
+                console.log('err', args);
+                $scope.spin = false;
+            });
+        }
+    }
 });
diff --git a/resources/style.css b/resources/style.css
@@ -85,6 +85,14 @@
     border-width: 10px;
     margin-left: -10px; }
 
+.mediaflow-upload-cell {
+  width: 150px; }
+  .mediaflow-upload-cell .buttons .mediaflow-upload-button.btn {
+    margin-top: 3px; }
+
+.mediaflow-spinner {
+  left: 128px; }
+
 .cropper-menu {
   margin: 0 0 10px 0;
   clear: both; }

diff --git a/resources/style.scss b/resources/style.scss
@@ -105,6 +105,15 @@
         margin-left: -10px;
     }
 }
+.mediaflow-upload-cell {
+  width: 150px;
+  .buttons .mediaflow-upload-button.btn {
+    margin-top: 3px;
+  }
+}
+.mediaflow-spinner {
+  left:128px;
+}
 
 .cropper-menu {
     margin: 0 0 10px 0;

diff --git a/templates/index.html b/templates/index.html
@@ -4,25 +4,6 @@
 {% set hasSidebar = true %}
 
 {% set sidebar %}
-<div class="buttons first">
-    <input type="file"
-        multiple="multiple"
-        name="assets-upload"
-        style="display: none;">
-    <div class="btn submit assets-upload-button"
-        data-icon="↑"
-        style="position: relative; overflow: hidden;"
-        role="button"
-    >
-        <label for="mediaflow_file_upload">Upload files</label>
-        <input style="display:none"
-            id="mediaflow_file_upload"
-            type="file"
-            ng-file-select="onFileSelect($files)"
-            multiple
-        >
-    </div>
-</div>
 <nav>
     <ul>
         <li>
@@ -43,6 +24,28 @@
                 <table class="inputs fullwidth">
                     <tbody>
                     <tr>
+                        <td class="mediaflow-upload-cell">
+                            <div class="buttons first">
+                                <input type="file"
+                                       multiple="multiple"
+                                       name="assets-upload"
+                                       style="display: none;">
+
+                                <div class="btn submit assets-upload-button mediaflow-upload-button"
+                                     data-icon="↑"
+                                     style="position: relative; overflow: hidden;"
+                                     role="button"
+                                        >
+                                    <label for="mediaflow_file_upload">Upload files</label>
+                                    <input style="display:none"
+                                           id="mediaflow_file_upload"
+                                           type="file"
+                                           ng-file-select="onFileSelect($files)"
+                                           multiple
+                                            >
+                                </div>
+                            </div>
+                        </td>
                         <td>
                             <div class="texticon search icon">
                                 <input class="text nicetext fullwidth" type="search" autocomplete="off" ng-model="searchText"
@@ -60,7 +63,7 @@
                     </tr>
                     </tbody>
                 </table>
-                <div class="spinner hidden" ng-class="{hidden: !spin}"></div>
+                <div class="spinner hidden mediaflow-spinner" ng-class="{hidden: !spin}"></div>
             </div>
 
             <div class="elements" ng-show="view==='list'">
@@ -107,6 +110,8 @@
 {% endraw %}
 
 {% includeJsResource "mediaflow/angularjs-file-upload.js" %}
+{% includeJsResource "mediaflow/jcrop.js" %}
+{% includeJsResource "mediaflow/ng-image-crop.js" %}
 {% includeJsResource "mediaflow/mediaflow-ng.js" %}
 {% includeCssResource "mediaflow/style.css" %}
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>