Roo/bootstrap/CardUploader.js

[roojs1] / Roo / bootstrap / CardUploader.js

diff --git a/Roo/bootstrap/CardUploader.js b/Roo/bootstrap/CardUploader.js
index a663d26..f55b5d8 100644 (file)
--- a/Roo/bootstrap/CardUploader.js
+++ b/Roo/bootstrap/CardUploader.js
@@ -40,14 +40,14 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
     getAutoCreate : function()
     {
         var btn = Roo.bootstrap.Button.prototype.getAutoCreate.call(this);
-        
+        btn.cls += ' w-100 mb-2';
         var cfg = {
             cls : 'roo-card-uploader-wrap',
             cn : [
                 btn,
                 {
                     tag : 'input',
-                    cls : 'd=none roo-card-upload-selector',
+                    cls : 'd-none roo-card-upload-selector',
                     type : 'file',
                     multiple : 'multiple'
                 },
@@ -70,6 +70,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
     
     initEvents : function()
     {
+        Roo.bootstrap.Button.prototype.initEvents.call(this);
         this.urlAPI = (window.createObjectURL && window) || 
                                 (window.URL && URL.revokeObjectURL && URL) || 
                                 (window.webkitURL && webkitURL);
@@ -79,8 +80,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
          
         this.selectorEl = this.el.select('.roo-card-upload-selector', true).first();
         
-        this.el.on('click', this.beforeSelectFile, this);
-        this.selectorEl.on('change', this.onFileSelected, this);
+         this.selectorEl.on('change', this.onFileSelected, this);
         if (this.images) {
             var t = this;
             this.images.forEach(function(img) {
@@ -94,7 +94,7 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
     },
     
    
-    beforeSelectFile : function(e)
+    onClick : function(e)
     {
         e.preventDefault();
          
@@ -157,42 +157,65 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Button,  {
         //then we need to use something other that and header_image
         
         //   remove.....
-        
-        var cn = this.addxtype(
+        var footer = [
             {
-                 
                 xns : Roo.bootstrap,
-                xtype : 'Card',
-                closeable : true,
-                header_image : data.src,
-                data : data,
-                
-                listeners : {
-                    click : function() {
-                        // view..
-                    }
-                },
-                cn : [
+                xtype : 'CardFooter',
+                items: [
                     {
                         xns : Roo.bootstrap,
-                        xtype : 'CardFooter',
-                        cn: [
+                        xtype : 'Element',
+                        cls : 'd-flex',
+                        items : [
+                            
                             {
                                 xns : Roo.bootstrap,
-                                xtype : 'Element',
-                                html : data.title
+                                xtype : 'Button',
+                                html : String.format("<small>{0}</small>", data.title),
+                                cls : 'col-11 text-left',
+                                size: 'sm',
+                                weight: 'link',
+                                fa : 'download',
+                                listeners : {
+                                    click : function() {
+                                        // download
+                                    }
+                                }
                             },
+                          
                             {
                                 xns : Roo.bootstrap,
                                 xtype : 'Button',
-                                html : 'Delete',
-                                fa : 'cross'
+                                
+                                size : 'sm',
+                                weight: 'danger',
+                                cls : 'col-1',
+                                fa : 'times'
                             }
-                            
-                        ],
+                        ]
                     }
                     
-                ]
+                ],
+            }
+            
+        ];
+
+        var cn = this.addxtype(
+            {
+                 
+                xns : Roo.bootstrap,
+                xtype : 'Card',
+                closeable : true,
+                header : !data.mimetype.match('/image/') ? "Document": false,
+                header_image : data.mimetype.match('/image/') ? data.src  : false,
+                data : data,
+                html : false,
+                listeners : {
+                    click : function() {
+                        // view..
+                    }
+                },
+                items : footer
                   
                 
             }