}
return cfg;
+ },
+ /**
+ * Add a button to the group (similar to NavItem API.)
+ */
+ addItem : function(cfg)
+ {
+ var cn = new Roo.bootstrap.Button(cfg);
+ //this.register(cn);
+ cn.parentId = this.id;
+ cn.onRender(this.el, null);
+ return cn;
}
});
* @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
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",
html: false,
active: false,
weight: '',
+ badge_weight: '',
+ outline : false,
size: '',
tag: 'button',
href: '',
]
};
- 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;
}
//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') {
};
}
+ 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
}
];
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);
}
if (this.registerMenu && this.type != 'treeview') {
Roo.bootstrap.MenuMgr.register(this);
}
+
+
this.addEvents({
/**
* @event beforeshow
if (this.triggerEl.hasClass('nav-item')) {
// dropdown toggle on the 'a' in BS4?
- this.triggerEl.addClass('dropdown-toggle').select('.nav-link',true).first().addClass('nav-item');
+ this.triggerEl.select('.nav-link',true).first().addClass('dropdown-toggle');
} else {
this.triggerEl.addClass('dropdown-toggle');
}
this.hideMenuItems();
this.hidden = false;
this.triggerEl.addClass('open');
+ this.el.addClass('show');
// reassign x when hitting right
if(this.el.getWidth() + xy[0] >= Roo.lib.Dom.getViewWidth()){
this.activeItem = null;
}
this.triggerEl.removeClass('open');;
+ this.el.removeClass('show');
this.hidden = true;
this.fireEvent("hide", this);
}
};
var header = [];
- if (this.allow_close) {
+ if (this.allow_close && Roo.bootstrap.version == 3) {
header.push({
tag: 'button',
cls : 'close',
header.push(title);
+ if (this.allow_close && Roo.bootstrap.version == 4) {
+ header.push({
+ tag: 'button',
+ cls : 'close',
+ html : '×'
+ });
+ }
+
var size = '';
if(this.size.length){
}
//this.el.setStyle('display', 'block');
- this.el.removeClass('hideing');
- this.el.addClass('show');
+ 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');
}
this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
this.maskEl.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
+ this.maskEl.dom.style.display = 'block';
this.maskEl.addClass('show');
+
this.resize();
this.fireEvent('show', this);
hide : function()
{
if(this.fireEvent("beforehide", this) !== false){
+
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');
+
+ this.el.dom.style.display='';
+
+ Roo.get(document.body).removeClass('modal-open');
this.el.removeClass('hideing');
}).defer(150,this);
}else{
- this.el.removeClass('show');
+ this.el.removeClass('show');
+ this.el.dom.style.display='';
+ Roo.get(document.body).removeClass('modal-open');
+
}
this.fireEvent('hide', this);
}
*
* @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
arrangement: '',
align : false,
-
+ weight : 'light',
main : false,
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 = [
if (this.type!=='nav') {
Roo.log('nav type must be nav/tabs/pills')
}
- cfg.cls += ' navbar-nav mr-auto'
+ cfg.cls += ' navbar-nav'
}
if (this.parent() && this.parent().sidebar) {
};
if (this.align === 'right') {
- cfg.cls += ' navbar-right';
+ cfg.cls += ' navbar-right ml-md-auto';
} else {
cfg.cls += ' navbar-left';
}
}
if (this.align === 'right') {
- cfg.cls += ' navbar-right';
- }
+ cfg.cls += ' navbar-right ml-md-auto';
+ } else {
+ cfg.cls += ' mr-auto';
+ }
if (this.inverse) {
cfg.cls += ' navbar-inverse';
if (this.badge !== '') {
- cfg.cn[0].html += ' <span class="badge">' + this.badge + '</span>';
+ cfg.cn[0].html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
}
}
cls : ''
};
if (this.parent().xtype.match(/^Nav/)) {
- cfg.cls = 'navbar-form navbar-' + this.align;
+ cfg.cls = 'navbar-form form-inline navbar-' + this.align;
}
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
}
]
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();
}
});
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']
};
/*
this.bind(this.ds);
}
- this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
+ if (Roo.bootstrap.version == 4) {
+ this.navgroup = new Roo.bootstrap.ButtonGroup({ cls: 'pagination' });
+ } else {
+ this.navgroup = new Roo.bootstrap.NavGroup({ cls: 'pagination' });
+ }
};
this.first = this.navgroup.addItem({
tooltip: this.firstText,
- cls: "prev",
- icon : 'fa fa-step-backward',
+ cls: "prev btn-outline-secondary",
+ html : ' <i class="fa fa-step-backward"></i>',
disabled: true,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["first"]) }
this.prev = this.navgroup.addItem({
tooltip: this.prevText,
- cls: "prev",
- icon : 'fa fa-backward',
+ cls: "prev btn-outline-secondary",
+ html : ' <i class="fa fa-backward"></i>',
disabled: true,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["prev"]) }
var field = this.navgroup.addItem( {
tagtype : 'span',
- cls : 'x-paging-position',
-
+ cls : 'x-paging-position btn-outline-secondary',
+ disabled: true,
html : this.beforePageText +
'<input type="text" size="3" value="1" class="x-grid-page-number">' +
'<span class="x-paging-after">' + String.format(this.afterPageText, 1) + '</span>'
//this.addSeparator();
this.next = this.navgroup.addItem({
tooltip: this.nextText,
- cls: "next",
- html : ' <i class="fa fa-forward">',
+ cls: "next btn-outline-secondary",
+ html : ' <i class="fa fa-forward"></i>',
disabled: true,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["next"]) }
});
this.last = this.navgroup.addItem({
tooltip: this.lastText,
- icon : 'fa fa-step-forward',
- cls: "next",
+ html : ' <i class="fa fa-step-forward"></i>',
+ cls: "next btn-outline-secondary",
disabled: true,
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["last"]) }
//this.addSeparator();
this.loading = this.navgroup.addItem({
tooltip: this.refreshText,
- icon: 'fa fa-refresh',
+ cls: "btn-outline-secondary",
+ html : ' <i class="fa fa-refresh"></i>',
preventDefault: true,
listeners : { click : this.onClick.createDelegate(this, ["refresh"]) }
});
projects / roojs1 / blobdiff