X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=Roo%2Fbootstrap%2FButton.js;h=3636c15633f81a2062a1aa6a8cf80568f2875a6a;hp=96964a37721708c42ffd980087b7cb89e9f15e28;hb=9b0f74a5b20b5ab11c6d58a49a48d3dd1216fb9b;hpb=b0a8d349fa2ef1541f4ab44af1beccc075dd609b diff --git a/Roo/bootstrap/Button.js b/Roo/bootstrap/Button.js index 96964a3772..3636c15633 100644 --- a/Roo/bootstrap/Button.js +++ b/Roo/bootstrap/Button.js @@ -10,24 +10,26 @@ * @extends Roo.bootstrap.Component * Bootstrap Button class * @cfg {String} html The button content - * @cfg {String} weight (default | primary | secondary | success | info | warning | danger | link ) default + * @cfg {String} weight (default|primary|secondary|success|info|warning|danger|link|light|dark) default + * @cfg {String} badge_weight (default|primary|secondary|success|info|warning|danger|link|light|dark) 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} size (lg|sm|xs) + * @cfg {String} tag (a|input|submit) * @cfg {String} href empty or href * @cfg {Boolean} disabled default false; * @cfg {Boolean} isClose default false; - * @cfg {String} glyphicon (| adjust | align-center | align-justify | align-left | align-right | arrow-down | arrow-left | arrow-right | arrow-up | asterisk | backward | ban-circle | barcode | bell | bold | book | bookmark | briefcase | bullhorn | calendar | camera | certificate | check | chevron-down | chevron-left | chevron-right | chevron-up | circle-arrow-down | circle-arrow-left | circle-arrow-right | circle-arrow-up | cloud | cloud-download | cloud-upload | cog | collapse-down | collapse-up | comment | compressed | copyright-mark | credit-card | cutlery | dashboard | download | download-alt | earphone | edit | eject | envelope | euro | exclamation-sign | expand | export | eye-close | eye-open | facetime-video | fast-backward | fast-forward | file | film | filter | fire | flag | flash | floppy-disk | floppy-open | floppy-remove | floppy-save | floppy-saved | folder-close | folder-open | font | forward | fullscreen | gbp | gift | glass | globe | hand-down | hand-left | hand-right | hand-up | hd-video | hdd | header | headphones | heart | heart-empty | home | import | inbox | indent-left | indent-right | info-sign | italic | leaf | link | list | list-alt | lock | log-in | log-out | magnet | map-marker | minus | minus-sign | move | music | new-window | off | ok | ok-circle | ok-sign | open | paperclip | pause | pencil | phone | phone-alt | picture | plane | play | play-circle | plus | plus-sign | print | pushpin | qrcode | question-sign | random | record | refresh | registration-mark | remove | remove-circle | remove-sign | repeat | resize-full | resize-horizontal | resize-small | resize-vertical | retweet | road | save | saved | screenshot | sd-video | search | send | share | share-alt | shopping-cart | signal | sort | sort-by-alphabet | sort-by-alphabet-alt | sort-by-attributes | sort-by-attributes-alt | sort-by-order | sort-by-order-alt | sound-5-1 | sound-6-1 | sound-7-1 | sound-dolby | sound-stereo | star | star-empty | stats | step-backward | step-forward | stop | subtitles | tag | tags | tasks | text-height | text-width | th | th-large | th-list | thumbs-down | thumbs-up | time | tint | tower | transfer | trash | tree-conifer | tree-deciduous | unchecked | upload | usd | user | volume-down | volume-off | volume-up | warning-sign | wrench | zoom-in | zoom-out) + * @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 * @cfg {Boolean} toggle is it a slidy toggle button - * @cfg {Boolean} pressed　(true|false) default null - if the button ahs active state + * @cfg {Boolean} pressed　 default null - if the button ahs active state * @cfg {String} ontext text for on slidy toggle state * @cfg {String} offtext text for off slidy toggle state * @cfg {Boolean} preventDefault default true (stop click event triggering the URL if it's a link.) * @cfg {Boolean} removeClass remove the standard class.. - * @cfg {String} target target for a href. (_self|_blank|_parent|_top| other) + * @cfg {String} target (_self|_blank|_parent|_top|other) target for a href. * * @constructor * Create a new button @@ -37,14 +39,7 @@ Roo.bootstrap.Button = function(config){ Roo.bootstrap.Button.superclass.constructor.call(this, config); - this.weightClass = ["btn-default btn-outline-secondary", - "btn-primary", - "btn-success", - "btn-info", - "btn-warning", - "btn-danger", - "btn-link" - ], + this.addEvents({ // raw events /** @@ -69,6 +64,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { html: false, active: false, weight: '', + badge_weight: '', outline : false, size: '', tag: 'button', @@ -76,6 +72,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { disabled: false, isClose: false, glyphicon: '', + fa: '', badge: '', theme: 'default', inverse: false, @@ -122,9 +119,9 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { } ] }; - - if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { - cfg.cls += ' '+this.weight; + // why are we validating the weights? + if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) { + cfg.cls += ' ' + this.weight; } return cfg; @@ -139,24 +136,30 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { return cfg; } + - if (this.theme==='default') { cfg.cls = 'btn roo-button'; //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 (Roo.bootstrap.Button.weights.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') { cfg.tag = 'a'; cfg.cls = 'btn-glow roo-button'; - if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { + if (Roo.bootstrap.Button.weights.indexOf(this.weight) > -1) { cfg.cls += ' ' + this.weight; } @@ -180,6 +183,10 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { Roo.log('changing to ul' ); cfg.tag = 'ul'; this.glyphicon = 'caret'; + if (Roo.bootstrap.version == 4) { + this.fa = 'caret-down'; + } + } cfg.cls += this.size.length ? (' btn-' + this.size) : ''; @@ -218,6 +225,16 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { } ]; } + if (this.fa) { + cfg.html = ' ' + cfg.html; + + cfg.cn = [ + { + tag: 'i', + cls: 'fa fas fa-' + this.fa + } + ]; + } if (this.badge) { cfg.html += ' '; @@ -232,18 +249,28 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { if(this.glyphicon){ value = { - tag: 'span', - cls: 'glyphicon glyphicon-' + this.glyphicon, - html: this.html - }; - + tag: 'span', + cls: 'glyphicon glyphicon-' + this.glyphicon, + html: this.html + }; } + if(this.fa){ + value = { + tag: 'i', + cls: 'fa fas fa-' + this.fa, + html: this.html + }; + } + + 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 } ]; @@ -376,17 +403,31 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { setWeight : function(str) { - this.weight = str; + this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-' + w; } ) ); + this.el.removeClass(Roo.bootstrap.Button.weights.map(function(w) { return 'btn-outline-' + w; } ) ); + this.weight = str; var outline = this.outline ? 'outline-' : ''; if (str == 'default') { - outline = 'outline-'; - str = 'secondary'; + this.el.addClass('btn-default btn-outline-secondary'); + return; } - this.el.removeClass(this.weightClass); this.el.addClass('btn-' + outline + str); } }); +// fixme - this is probably generic bootstrap - should go in some kind of enum file.. - like sizes. - \ No newline at end of file +Roo.bootstrap.Button.weights = [ + 'default', + 'secondary' , + 'primary', + 'success', + 'info', + 'warning', + 'danger', + 'link', + 'light', + 'dark', + +]; \ No newline at end of file