);
if (this.fitwindow) {
+
+ var view_height = Roo.lib.Dom.getViewportHeight(true);
+
+ Roo.log("dialog height: "+this.height);
+ Roo.log("view height:" + view_height);
+
this.setSize(
this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
- this.height || Roo.lib.Dom.getViewportHeight(true) - 60
+ this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
);
return;
}
{
//this.el.select('.modal-footer').()
},
- diff : false,
resizeTo: function(w,h)
{
- // skip.. ?? why??
-
this.dialogEl.setWidth(w);
- if (this.diff === false) {
- this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight();
- }
-
- this.bodyEl.setHeight(h - this.diff);
+
+ var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 30; // dialog margin-bottom: 30
+ this.bodyEl.setHeight(h - diff);
+
this.fireEvent('resize', this);
-
},
+
setContentSize : function(w, h)
{
};
if (Roo.bootstrap.version == 4) {
if (['tabs','pills'].indexOf(this.type) != -1) {
- cfg.cls = ' nav-' + this.type;
+ cfg.cls += ' nav-' + this.type;
} else {
cfg.cls += ' navbar-nav';
}
* @extends Roo.bootstrap.Component
* Bootstrap Navbar.NavItem class
* @cfg {String} href link to
+ * @cfg {String} button_weight (default | primary | secondary | success | info | warning | danger | link ) default none
+
* @cfg {String} html content of button
* @cfg {String} badge text inside badge
* @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
disabled : false,
animateRef : false,
was_active : false,
+ button_weight : '',
+ button_outline : false,
+
+ navLink: false,
getAutoCreate : function(){
var cfg = {
tag: this.tag,
cls: 'nav-item'
-
};
if (this.active) {
if (this.disabled) {
cfg.cls += ' disabled';
}
+
+ // BS4 only?
+ if (this.button_weight.length) {
+ cfg.tag = this.href ? 'a' : 'button';
+ cfg.html = this.html || '';
+ cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight;
+ if (this.href) {
+ cfg.href = this.href;
+ }
+ if (this.fa) {
+ cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + this.html + '</span>';
+ }
+
+ // menu .. should add dropdown-menu class - so no need for carat..
+
+ if (this.badge !== '') {
+
+ cfg.html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
+ }
+ return cfg;
+ }
if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
cfg.cn = [
cfg.cn[0].cls = 'nav-link';
}
if (this.icon) {
- cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>'
+ cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>';
}
if (this.fa) {
- cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>'
+ cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>';
}
if(this.glyphicon) {
cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
this.tag = 'div';
}
- return Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
+ var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
+ this.navLink = this.el.select('.nav-link',true).first();
+ return ret;
},
if (!state ) {
this.el.removeClass('active');
+ this.navLink ? this.navLink.removeClass('active') : false;
} else if (!this.el.hasClass('active')) {
+
this.el.addClass('active');
+ if (Roo.bootstrap.version == 4 && this.navLink ) {
+ this.navLink.addClass('active');
+ }
+
}
if (fire) {
this.fireEvent('changed', this, state);
{
if(this.transition || typeof(pan) == 'undefined'){
Roo.log("waiting for the transitionend");
- return;
+ return false;
}
if (typeof(pan) == 'number') {
if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
+ //class="carousel-item carousel-item-next carousel-item-left"
+
this.transition = true;
var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev';
var lr = dir == 'next' ? 'left' : 'right';
pan.el.addClass(dir); // or prev
+ pan.el.addClass('carousel-item-' + dir); // or prev
pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
cur.el.addClass(lr); // or right
pan.el.addClass(lr);
+ cur.el.addClass('carousel-item-' +lr); // or right
+ pan.el.addClass('carousel-item-' +lr);
+
var _this = this;
cur.el.on('transitionend', function() {
Roo.log("trans end?");
- pan.el.removeClass([lr,dir]);
+ pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]);
pan.setActive(true);
- cur.el.removeClass([lr]);
+ cur.el.removeClass([lr, 'carousel-item-' + lr]);
cur.setActive(false);
_this.transition = false;
href : '',
getAutoCreate : function(){
- var cfg = {
+
+
+ var cfg = {
tag: 'div',
// item is needed for carousel - not sure if it has any effect otherwise
- cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
+ cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
html: this.html || ''
};
cfg.tabId = this.tabId;
}
+
return cfg;
},
case 'Content': // ContentPanel (el, cfg)
case 'Scroll': // ContentPanel (el, cfg)
case 'View':
- cfg.autoCreate = true;
+ cfg.autoCreate = cfg.autoCreate || true;
ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
//} else {
// var el = this.el.createChild();