Roo/bootstrap/Modal.js

[roojs1] / roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index 5b2c675..57832ac 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -589,7 +589,8 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
  * @cfg {String} href empty or href
  * @cfg {Boolean} disabled default false;
  * @cfg {Boolean} isClose default false;
- * @cfg {String} glyphicon depricated - use fs
+ * @cfg {String} glyphicon depricated - use fa
+ * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc..
  * @cfg {String} badge text for badge
  * @cfg {String} theme (default|glow)  
  * @cfg {Boolean} inverse dark themed version
@@ -2513,7 +2514,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
         if(this.isContainer){
             return {
                 tag: 'li',
-                cls: 'dropdown-menu-item dropdown-item'
+                cls: 'dropdown-menu-item '
             };
         }
         var ctag = {
@@ -2523,6 +2524,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
         
         var anc = {
             tag : 'a',
+            cls : 'dropdown-item',
             href : '#',
             cn : [  ]
         };
@@ -2539,7 +2541,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
         
         var cfg= {
             tag: 'li',
-            cls: 'dropdown-menu-item dropdown-item',
+            cls: 'dropdown-menu-item',
             cn: [ anc ]
         };
         if (this.parent().type == 'treeview') {
@@ -2640,7 +2642,7 @@ Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component,  {
  * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method  adn
  * @cfg {Boolean} specificTitle default false
  * @cfg {Array} buttons Array of buttons or standard button set..
- * @cfg {String} buttonPosition (left|right|center) default right
+ * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
  * @cfg {Boolean} animate default true
  * @cfg {Boolean} allow_close default true
  * @cfg {Boolean} fitwindow default false
@@ -2834,7 +2836,26 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         if(this.size.length){
             size = 'modal-' + this.size;
         }
+        
+        var footer = Roo.bootstrap.version == 3 ?
+            {
+                cls : 'modal-footer',
+                cn : [
+                    {
+                        tag: 'div',
+                        cls: 'btn-' + this.buttonPosition
+                    }
+                ]
+
+            } :
+            {  // BS4 uses mr-auto on left buttons....
+                cls : 'modal-footer'
+            };
 
+            
+
+        
+        
         var modal = {
             cls: "modal",
              cn : [
@@ -2849,18 +2870,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
                                     cn : header
                                 },
                                 bdy,
-                                {
-                                    cls : 'modal-footer',
-                                    cn : [
-                                        {
-                                            tag: 'div',
-                                            cls: 'btn-' + this.buttonPosition
-                                        }
-                                    ]
-
-                                }
-
-
+                                footer
                             ]
 
                         }
@@ -2883,7 +2893,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
     },
     getButtonContainer : function() {
-         return this.el.select('.modal-footer div',true).first();
+        
+         return Roo.bootstrap.version == 4 ?
+            this.el.select('.modal-footer',true).first()
+            : this.el.select('.modal-footer div',true).first();
 
     },
     initEvents : function()
@@ -3865,25 +3878,36 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
                 ce.toggleClass('in'); // old...
                 if (ce.hasClass('collapse')) {
                     // show it...
-                    ce.removeClass('collapse show');
-                    (function() {
-                        ce.setHeight(ce.getHeight()); // resize it ...
-                        ce.removeClass('collapsing');
-                        ce.addClass('collapsing');
-                    }).defer(50);
-                    
-                    // now flag it as moving..
+                    ce.removeClass('collapse');
+                    ce.addClass('show');
+                    var h = ce.getHeight();
+                    Roo.log(h);
+                    ce.removeClass('show');
+                    // at this point we should be able to see it..
+                    ce.addClass('collapsing');
                     
+                    ce.setHeight(0); // resize it ...
+                    ce.on('transitionend', function() {
+                        Roo.log('done transition');
+                        ce.removeClass('collapsing');
+                        ce.addClass('show');
+                        ce.removeClass('collapse');
+
+                        ce.dom.style.height = '';
+                    }, this, { single: true} );
+                    ce.setHeight(h);
                     
-                    (function() { ce.removeClass('collapsing'); }).defer(100);
                 } else {
-                    ce.addClass('collapsing');
+                    ce.setHeight(ce.getHeight());
                     ce.removeClass('show');
-                    (function() {
+                    ce.addClass('collapsing');
+                    
+                    ce.on('transitionend', function() {
+                        ce.dom.style.height = '';
                         ce.removeClass('collapsing');
                         ce.addClass('collapse');
-                    }).defer(200);
-                    
+                    }, this, { single: true} );
+                    ce.setHeight(0);
                 }
             }
             
@@ -9221,7 +9245,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         }
         if (align ==='left' && this.fieldLabel.length) {
             
-            cfg.cls += ' roo-form-group-label-left row';
+            cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
             
             cfg.cn = [
                 indicator,
@@ -10520,7 +10544,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
         
         if (align ==='left' && this.fieldLabel.length) {
             
-            cfg.cls += ' roo-form-group-label-left row';
+            cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
 
             cfg.cn = [
                 indicator,
@@ -13361,6 +13385,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
         var box = {
             tag: 'div',
+            style : 'display: contents',
             cn: [
                 {
                     tag: 'input',
@@ -13419,7 +13444,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         }
         if (align ==='left' && this.fieldLabel.length) {
             
-            cfg.cls += ' roo-form-group-label-left row';
+            cfg.cls += ' roo-form-group-label-left'  + (Roo.bootstrap.version == 4 ? ' row' : '');
             
             cfg.cn = [
                 indicator,
@@ -23956,7 +23981,8 @@ Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar,
                 size : 'sm',
                 xtype: 'Button',
                 xns: Roo.bootstrap,
-                glyphicon : id,
+                //glyphicon : id,
+                fa: id,
                 cmd : id || cmd,
                 enableToggle:toggle !== false,
                 html : html || '',
@@ -23976,7 +24002,7 @@ Roo.extend(Roo.bootstrap.htmleditor.ToolbarStandard, Roo.bootstrap.NavSimplebar,
                 xtype: 'Button',
                 size : 'sm',
                 xns: Roo.bootstrap,
-                glyphicon : 'font',
+                fa : 'font',
                 //html : 'submit'
                 menu : {
                     xtype: 'Menu',
@@ -29161,6 +29187,7 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
         this.progressDialog = new Roo.bootstrap.Modal({
             cls : 'roo-document-manager-progress-dialog',
             allow_close : false,
+            animate : false,
             title : '',
             buttons : [
                 {