Roo/bootstrap/Button.js

[roojs1] / Roo / bootstrap / Button.js

diff --git a/Roo/bootstrap/Button.js b/Roo/bootstrap/Button.js
index 24026e4..8c3900f 100644 (file)
--- a/Roo/bootstrap/Button.js
+++ b/Roo/bootstrap/Button.js
@@ -10,7 +10,8 @@
  * @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 {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
@@ -36,7 +37,7 @@
 
 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", 
@@ -68,6 +69,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
     html: false,
     active: false,
     weight: '',
+    outline : false,
     size: '',
     tag: 'button',
     href: '',
@@ -87,7 +89,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
     name: false,
     target: false,
      
-    pressed : false,
+    pressed : null,
      
     
     getAutoCreate : function(){
@@ -302,16 +304,13 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
             return;
         }
         
-        
         Roo.log('button on click ');
         if(this.preventDefault){
             e.preventDefault();
         }
         
         if (this.pressed === true || this.pressed === false) {
-            this.pressed = !this.pressed;
-            this.el[this.pressed ? 'addClass' : 'removeClass']('active');
-            this.fireEvent('toggle', this, e, this.pressed);
+            this.toggleActive(e);
         }
         
         
@@ -347,12 +346,10 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
      /**
      * toggles the current active state 
      */
-    toggleActive : function()
+    toggleActive : function(e)
     {
-       var active = this.el.hasClass('active');
-       this.setActive(!active);
-       
-        
+        this.setActive(!this.pressed);
+        this.fireEvent('toggle', this, e, !this.pressed);
     },
      /**
      * get the current active state
@@ -376,19 +373,16 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
     {
         return this.el.select('.roo-button-text',true).first().dom.innerHTML;
     },
-    hide: function() {
-       
-     
-        this.el.hide();   
-    },
-    show: function() {
-       
-        this.el.show();   
-    },
+    
     setWeight : function(str)
     {
-       this.el.removeClass(this.weightClass);
-        this.el.addClass('btn-' + str);        
+       var outline = this.outline ? 'outline-' : '';
+        if (str == 'default') {
+            outline = 'outline-';
+            str = 'secondary';
+        }
+        this.el.removeClass(this.weightClass);
+        this.el.addClass('btn-' + outline + str);        
     }