Uncommited changes synced

[roojs1] / roojs-bootstrap-debug.js

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index af5fe74..3f07ceb 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -581,7 +581,9 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
  * @extends Roo.bootstrap.Component
  * Bootstrap Button class
  * @cfg {String} html The button content
- * @cfg {String} weight (default | primary | success | info | warning | danger | link ) default 
+ * @cfg {String} weight (default | primary | secondary | success | info | warning | danger | link ) default
+ * @cfg {String} badge_weight (default | primary | secondary | success | info | warning | danger | link ) default (same as button)
+ * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline)
  * @cfg {String} size ( lg | sm | xs)
  * @cfg {String} tag ( a | input | submit)
  * @cfg {String} href empty or href
@@ -607,7 +609,7 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
 
 Roo.bootstrap.Button = function(config){
     Roo.bootstrap.Button.superclass.constructor.call(this, config);
-    this.weightClass = ["btn-default", 
+    this.weightClass = ["btn-default btn-outline-secondary", 
                        "btn-primary", 
                        "btn-success", 
                        "btn-info", 
@@ -639,6 +641,8 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
     html: false,
     active: false,
     weight: '',
+    badge_weight: '',
+    outline : false,
     size: '',
     tag: 'button',
     href: '',
@@ -692,7 +696,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
                 ]
             };
             
-            if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
+            if (['default', 'secondary' , 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
                 cfg.cls += ' '+this.weight;
             }
             
@@ -716,9 +720,15 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
             //if (this.parentType != 'Navbar') {
             this.weight = this.weight.length ?  this.weight : 'default';
             //}
-            if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
+            if (['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
                 
-                cfg.cls += ' btn-' + this.weight;
+                var outline = this.outline || this.weight == 'default' ? 'outline-' : '';
+                var weight = this.weight == 'default' ? 'secondary' : this.weight;
+                cfg.cls += ' btn-' + outline + weight;
+                if (this.weight == 'default') {
+                    // BC
+                    cfg.cls += ' btn-' + this.weight;
+                }
             }
         } else if (this.theme==='glow') {
             
@@ -807,12 +817,15 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
                         };
                 
             }
+            var bw = this.badge_weight.length ? this.badge_weight :
+                (this.weight.length ? this.weight : 'secondary');
+            bw = bw == 'default' ? 'secondary' : bw;
             
             cfg.cn = [
                 value,
                 {
                     tag: 'span',
-                    cls: 'badge',
+                    cls: 'badge badge-' + bw,
                     html: this.badge
                 }
             ];
@@ -946,7 +959,13 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
     setWeight : function(str)
     {
        this.el.removeClass(this.weightClass);
-        this.el.addClass('btn-' + str);        
+        this.weight = str;
+        var outline = this.outline ? 'outline-' : '';
+        if (str == 'default') {
+            this.el.addClass('btn-default btn-outline-secondary');        
+            return;
+        }
+        this.el.addClass('btn-' + outline + str);        
     }
     
     
@@ -2920,16 +2939,19 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         }
 
         //this.el.setStyle('display', 'block');
-        this.el.removeClass('hideing');        
-        this.el.addClass('show d-block');
+        this.el.removeClass('hideing');
+        this.el.dom.style.display='block';
+        
         Roo.get(document.body).addClass('modal-open');
  
         if(this.animate){  // element has 'fade'  - so stuff happens after .3s ?- not sure why the delay?
             var _this = this;
             (function(){
+                this.el.addClass('show');
                 this.el.addClass('in');
             }).defer(50, this);
         }else{
+            this.el.addClass('show');
             this.el.addClass('in');
         }
 
@@ -2942,7 +2964,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         
         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),   Roo.lib.Dom.getViewHeight(true));
         this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
-        this.maskEl.addClass('show d-block');
+        this.maskEl.dom.style.display = 'block';
+        this.maskEl.addClass('show');
+        
         
         this.resize();
         
@@ -2962,25 +2986,31 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     hide : function()
     {
         if(this.fireEvent("beforehide", this) !== false){
-            this.maskEl.removeClass('show d-block');
+            
+            this.maskEl.removeClass('show');
+            
+            this.maskEl.dom.style.display = '';
             Roo.get(document.body).removeClass("x-body-masked");
             this.el.removeClass('in');
             this.el.select('.modal-dialog', true).first().setStyle('transform','');
 
             if(this.animate){ // why
                 this.el.addClass('hideing');
+                this.el.removeClass('show');
                 (function(){
                     if (!this.el.hasClass('hideing')) {
                         return; // it's been shown again...
                     }
-                    this.el.removeClass('show d-block');
+                    
+                    this.el.dom.style.display='';
 
                     Roo.get(document.body).removeClass('modal-open');
                     this.el.removeClass('hideing');
                 }).defer(150,this);
                 
             }else{
-                this.el.removeClass('show d-block');
+                this.el.removeClass('show');
+                this.el.dom.style.display='';
                 Roo.get(document.body).removeClass('modal-open');
 
             }
@@ -3883,7 +3913,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
  * 
  * @cfg {String} tag (header|footer|nav|div) default is nav 
 
- * 
+ * @cfg {String} weight (light|primary|secondary|success|danger|warning|info|dark|white) default is light.
  * 
  * 
  * @constructor
@@ -3904,7 +3934,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar,  {
     arrangement: '',
     align : false,
     
-    
+    weight : 'light',
     
     main : false,
     
@@ -3917,8 +3947,13 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar,  {
         
         var cfg = {
             tag : this.tag || 'div',
-            cls : 'navbar'
+            cls : 'navbar navbar-expand-lg'
         };
+       if (['light','white'].indexOf(this.weight) > -1) {
+           cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
+       }
+       cfg.cls += ' bg-' + this.weight;
+       
          
        
         cfg.cn = [
@@ -7971,7 +8006,7 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
             cls : ''
         };
         if (this.parent().xtype.match(/^Nav/)) {
-            cfg.cls = 'navbar-form navbar-' + this.align;
+            cfg.cls = 'navbar-form form-inline navbar-' + this.align;
 
         }
 
@@ -17634,11 +17669,11 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
                     cn : [
                         {
                             tag: 'h3',
-                            cls: 'popover-title',
+                            cls: 'popover-title popover-header',
                             html : this.title
                         },
                         {
-                            cls : 'popover-content',
+                            cls : 'popover-content popover-body',
                             html : this.html
                         }
                     ]
@@ -17763,7 +17798,10 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
         if (this.html !== false) {
             this.el.select('.popover-content',true).first().dom.innerHtml = this.html;
         }
-        this.el.removeClass(['fade','top','bottom', 'left', 'right','in']);
+        this.el.removeClass([
+            'fade','top','bottom', 'left', 'right','in',
+            'bs-popover-top','bs-popover-bottom', 'bs-popover-left', 'bs-popover-right'
+        ]);
         if (!this.title.length) {
             this.el.select('.popover-title',true).hide();
         }
@@ -17824,10 +17862,10 @@ Roo.extend(Roo.bootstrap.Popover, Roo.bootstrap.Component,  {
 });
 
 Roo.bootstrap.Popover.alignment = {
-    'left' : ['r-l', [-10,0], 'right'],
-    'right' : ['l-r', [10,0], 'left'],
-    'bottom' : ['t-b', [0,10], 'top'],
-    'top' : [ 'b-t', [0,-10], 'bottom']
+    'left' : ['r-l', [-10,0], 'right bs-popover-right'],
+    'right' : ['l-r', [10,0], 'left bs-popover-left'],
+    'bottom' : ['t-b', [0,10], 'top bs-popover-top'],
+    'top' : [ 'b-t', [0,-10], 'bottom bs-popover-bottom']
 };
 
  /*