* @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
disabled: false,
isClose: false,
glyphicon: '',
+ fa: '',
badge: '',
theme: 'default',
inverse: false,
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) : '';
}
];
}
+ if (this.fa) {
+ cfg.html = ' ' + cfg.html;
+
+ cfg.cn = [
+ {
+ tag: 'i',
+ cls: 'fa fas fa-' + this.fa
+ }
+ ];
+ }
if (this.badge) {
cfg.html += ' ';
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;
if(this.isContainer){
return {
tag: 'li',
- cls: 'dropdown-menu-item dropdown-item'
+ cls: 'dropdown-menu-item '
};
}
var ctag = {
var anc = {
tag : 'a',
+ cls : 'dropdown-item',
href : '#',
cn : [ ]
};
var cfg= {
tag: 'li',
- cls: 'dropdown-menu-item dropdown-item',
+ cls: 'dropdown-menu-item',
cn: [ anc ]
};
if (this.parent().type == 'treeview') {
* @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method adn
* @cfg {Boolean} specificTitle default false
* @cfg {Array} buttons Array of buttons or standard button set..
- * @cfg {String} buttonPosition (left|right|center) default right
+ * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left
* @cfg {Boolean} animate default true
* @cfg {Boolean} allow_close default true
* @cfg {Boolean} fitwindow default false
var btn = Roo.factory(b);
- btn.render(this.el.select('.modal-footer div').first());
+ btn.render(this.getButtonContainer());
},this);
}
if(this.size.length){
size = 'modal-' + this.size;
}
+
+ var footer = Roo.bootstrap.version == 3 ?
+ {
+ cls : 'modal-footer',
+ cn : [
+ {
+ tag: 'div',
+ cls: 'btn-' + this.buttonPosition
+ }
+ ]
+ } :
+ { // BS4 uses mr-auto on left buttons....
+ cls : 'modal-footer'
+ };
+
+
+
+
+
var modal = {
cls: "modal",
cn : [
cn : header
},
bdy,
- {
- cls : 'modal-footer',
- cn : [
- {
- tag: 'div',
- cls: 'btn-' + this.buttonPosition
- }
- ]
-
- }
-
-
+ footer
]
}
},
getButtonContainer : function() {
- return this.el.select('.modal-footer div',true).first();
+
+ return Roo.bootstrap.version == 4 ?
+ this.el.select('.modal-footer',true).first()
+ : this.el.select('.modal-footer div',true).first();
},
initEvents : function()
var btn = Roo.factory(b);
- btn.render(this.el.select('.modal-footer div').first());
+ btn.render(this.getButtonContainer());
return btn;
//Roo.log(this.el.select('.navbar-toggle',true));
this.el.select('.navbar-toggle',true).on('click', function() {
if(this.fireEvent('beforetoggle', this) !== false){
- this.el.select('.navbar-collapse',true).toggleClass('in');
+ var ce = this.el.select('.navbar-collapse',true).first();
+ ce.toggleClass('in'); // old...
+ if (ce.hasClass('collapse')) {
+ // show it...
+ ce.removeClass('collapse');
+ ce.addClass('show');
+ var h = ce.getHeight();
+ Roo.log(h);
+ ce.removeClass('show');
+ // at this point we should be able to see it..
+ ce.addClass('collapsing');
+
+ ce.setHeight(0); // resize it ...
+ ce.on('transitionend', function() {
+ Roo.log('done transition');
+ ce.removeClass('collapsing');
+ ce.addClass('show');
+ ce.removeClass('collapse');
+
+ ce.dom.style.height = '';
+ }, this, { single: true} );
+ ce.setHeight(h);
+
+ } else {
+ ce.setHeight(ce.getHeight());
+ ce.removeClass('show');
+ ce.addClass('collapsing');
+
+ ce.on('transitionend', function() {
+ ce.dom.style.height = '';
+ ce.removeClass('collapsing');
+ ce.addClass('collapse');
+ }, this, { single: true} );
+ ce.setHeight(0);
+ }
}
}, this);
}
cfg.cls += ' bg-' + this.weight;
-
+ if (this.inverse) {
+ cfg.cls += ' navbar-inverse';
+
+ }
+
+ // i'm not actually sure these are really used - normally we add a navGroup to a navbar
+
+ if (Roo.bootstrap.version == 4) {
+ return cfg;
+ }
cfg.cn = [
{
cfg.cn[0].cls += ' navbar-right';
}
- if (this.inverse) {
- cfg.cls += ' navbar-inverse';
-
- }
+
return cfg;
}
if(this.srButton){
- cn.push({
- tag: 'div',
- cls: 'navbar-header',
+ var btn = {
+ tag: 'button',
+ type: 'button',
+ cls: 'navbar-toggle navbar-toggler',
+ 'data-toggle': 'collapse',
cn: [
{
- tag: 'button',
- type: 'button',
- cls: 'navbar-toggle navbar-toggler',
- 'data-toggle': 'collapse',
- cn: [
- {
- tag: 'span',
- cls: 'sr-only',
- html: 'Toggle navigation'
- },
- {
- tag: 'span',
- cls: 'icon-bar navbar-toggler-icon'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- },
- {
- tag: 'span',
- cls: 'icon-bar'
- }
- ]
+ tag: 'span',
+ cls: 'sr-only',
+ html: 'Toggle navigation'
+ },
+ {
+ tag: 'span',
+ cls: 'icon-bar navbar-toggler-icon'
+ },
+ {
+ tag: 'span',
+ cls: 'icon-bar'
+ },
+ {
+ tag: 'span',
+ cls: 'icon-bar'
}
]
+ };
+
+ cn.push( Roo.bootstrap.version == 4 ? btn : {
+ tag: 'div',
+ cls: 'navbar-header',
+ cn: [
+ btn
+ ]
});
}
}
if (this.brand !== '') {
- cn[0].cn.push({
+ var cp = Roo.bootstrap.version == 4 ? cn : cn[0].cn;
+ cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
tag: 'a',
href: this.brand_href ? this.brand_href : '#',
cls: 'navbar-brand',
* @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
- * @cfg {String} glyphicon name of glyphicon
- * @cfg {String} icon name of font awesome icon
+ * @cfg {String} glyphicon DEPRICATED - use fa
+ * @cfg {String} icon DEPRICATED - use fa
+ * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x)
* @cfg {Boolean} active Is item active
* @cfg {Boolean} disabled Is item disabled
html: '',
badge: '',
icon: false,
+ fa : false,
glyphicon: false,
active: false,
preventDefault : false,
cfg.cls += ' disabled';
}
- if (this.href || this.html || this.glyphicon || this.icon) {
+ if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
cfg.cn = [
{
tag: this.tagtype,
if (this.icon) {
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>'
+ }
if(this.glyphicon) {
cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
}
}
if (align ==='left' && this.fieldLabel.length) {
- cfg.cls += ' roo-form-group-label-left row';
+ cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
cfg.cn = [
indicator,
if (align ==='left' && this.fieldLabel.length) {
- cfg.cls += ' roo-form-group-label-left row';
+ cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
cfg.cn = [
indicator,
createList : function()
{
this.list = Roo.get(document.body).createChild({
- tag: 'ul',
+ tag: Roo.bootstrap.version == 4 ? 'div' : 'ul',
cls: 'typeahead typeahead-long dropdown-menu',
style: 'display:none'
});
var box = {
tag: 'div',
+ style : 'display: contents',
cn: [
{
tag: 'input',
}
if (align ==='left' && this.fieldLabel.length) {
- cfg.cls += ' roo-form-group-label-left row';
+ cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
cfg.cn = [
indicator,
*/
if(!this.tpl){
- this.tpl = '<li><a class="dropddown-item" href="#">{' + this.displayField + '}</a></li>';
+ this.tpl = Roo.bootstrap.version == 4 ?
+ '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' : // 4 does not need <li> and it get's really confisued.
+ '<li><a class="dropdown-item" href="#">{' + this.displayField + '}</a></li>';
}
this.view = new Roo.View(this.list, this.tpl, {
size : 'sm',
xtype: 'Button',
xns: Roo.bootstrap,
- glyphicon : id,
+ //glyphicon : id,
+ fa: id,
cmd : id || cmd,
enableToggle:toggle !== false,
html : html || '',
xtype: 'Button',
size : 'sm',
xns: Roo.bootstrap,
- glyphicon : 'font',
+ fa : 'font',
//html : 'submit'
menu : {
xtype: 'Menu',
this.progressDialog = new Roo.bootstrap.Modal({
cls : 'roo-document-manager-progress-dialog',
allow_close : false,
+ animate : false,
title : '',
buttons : [
{
}
this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+ this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
if(Roo.isIE){
Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
* Adds an existing {@link Roo.TabPanelItem}.
* @param {Roo.TabPanelItem} item The TabPanelItem to add
*/
- addTabItem : function(item){
+ addTabItem : function(item)
+ {
this.items[item.id] = item;
this.items.push(item);
+ this.autoSizeTabs();
// if(this.resizeTabs){
// item.setWidth(this.currentTabWidth || this.preferredTabWidth);
// this.autoSizeTabs();
* @param {String/Number} id The id or index of the TabPanelItem to activate.
* @return {Roo.TabPanelItem} The TabPanelItem.
*/
- activate : function(id){
+ activate : function(id)
+ {
var tab = this.items[id];
if(!tab){
return null;
/**
* Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
*/
- autoSizeTabs : function(){
+ autoSizeTabs : function()
+ {
var count = this.items.length;
var vcount = count - this.hiddenCount;
+
+ if (vcount < 2) {
+ this.stripEl.hide();
+ } else {
+ this.stripEl.show();
+ }
+
if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
return;
}
+
+
var w = Math.max(this.el.getWidth() - this.cpad, 10);
var availWidth = Math.floor(w / vcount);
var b = this.stripBody;
createStrip : function(container)
{
var strip = document.createElement("nav");
- strip.className = "navbar navbar-default"; //"x-tabs-wrap";
+ strip.className = Roo.bootstrap.version == 4 ?
+ "navbar-light bg-light" :
+ "navbar navbar-default"; //"x-tabs-wrap";
container.appendChild(strip);
return strip;
},
createStripElements : function(stripEl, text, closable, tpl)
{
var td = document.createElement("li"); // was td..
-
+ td.className = 'nav-item';
//stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
var template = tpl || this.tabTpl || false;
if(!template){
-
- template = new Roo.Template(
- '<a href="#">' +
- '<span unselectable="on"' +
- (this.disableTooltips ? '' : ' title="{text}"') +
- ' >{text}</span></a>'
+ template = new Roo.Template(
+ Roo.bootstrap.version == 4 ?
+ (
+ '<a class="nav-link" href="#" unselectable="on"' +
+ (this.disableTooltips ? '' : ' title="{text}"') +
+ ' >{text}</a>'
+ ) : (
+ '<a class="nav-link" href="#">' +
+ '<span unselectable="on"' +
+ (this.disableTooltips ? '' : ' title="{text}"') +
+ ' >{text}</span></a>'
+ )
);
}
/** @private */
this.el = Roo.get(els.el);
this.inner = Roo.get(els.inner, true);
- this.textEl = Roo.get(this.el.dom.firstChild, true);
- this.pnode = Roo.get(els.el.parentNode, true);
+ this.textEl = Roo.bootstrap.version == 4 ?
+ this.el : Roo.get(this.el.dom.firstChild, true);
+
+ this.linode = Roo.get(els.el.parentNode, true);
+ this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode;
+
+
// this.el.on("mousedown", this.onTabMouseDown, this);
this.el.on("click", this.onTabClick, this);
/** @private */
* Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
*/
show : function(){
- this.pnode.addClass("active");
+ this.status_node.addClass("active");
this.showAction();
if(Roo.isOpera){
this.tabPanel.stripWrap.repaint();
* Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
*/
hide : function(){
- this.pnode.removeClass("active");
+ this.status_node.removeClass("active");
this.hideAction();
this.fireEvent("deactivate", this.tabPanel, this);
},
},
setWidth : function(width){
- var iwidth = width - this.pnode.getPadding("lr");
+ var iwidth = width - this.linode.getPadding("lr");
this.inner.setWidth(iwidth);
this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
- this.pnode.setWidth(width);
+ this.linode.setWidth(width);
},
*/
/**
*/
setHidden : function(hidden){
this.hidden = hidden;
- this.pnode.setStyle("display", hidden ? "none" : "");
+ this.linode.setStyle("display", hidden ? "none" : "");
},
/**
* #2804 [new] Tabs in Roojs
* increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
*/
- //this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
+ //this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2);
//this.el.endMeasure();
//},
disable : function(){
if(this.tabPanel.active != this){
this.disabled = true;
- this.pnode.addClass("disabled");
+ this.status_node.addClass("disabled");
}
},
*/
enable : function(){
this.disabled = false;
- this.pnode.removeClass("disabled");
+ this.status_node.removeClass("disabled");
},
/**