From: Alan Knowles Date: Fri, 20 Nov 2020 06:16:42 +0000 (+0800) Subject: sync X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=aacc44f02a19b93ca6bbfef02358d4b20ad803e2 sync --- diff --git a/Roo/bootstrap/Input.js b/Roo/bootstrap/Input.js index 35b3316102..665b5be46d 100644 --- a/Roo/bootstrap/Input.js +++ b/Roo/bootstrap/Input.js @@ -33,6 +33,7 @@ * @cfg {String} indicatorpos (left|right) default left * @cfg {String} capture (user|camera) use for file input only. (default empty) * @cfg {String} accept (image|video|audio) use for file input only. (default empty) + * @cfg {Boolean} preventMark Do not show tick or cross if error/success * @cfg {String} align (left|center|right) Default left * @cfg {Boolean} forceFeedback (true|false) Default false @@ -924,6 +925,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { return; } + //code + } if(this.allowBlank && !this.getRawValue().length){ return; } diff --git a/Roo/bootstrap/TriggerField.js b/Roo/bootstrap/TriggerField.js index b018d22ebb..0fe4989cff 100644 --- a/Roo/bootstrap/TriggerField.js +++ b/Roo/bootstrap/TriggerField.js @@ -108,7 +108,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { cls: 'glyphicon form-control-feedback' }; - if(this.removable && !this.editable && !this.tickable){ + if(this.removable && !this.editable ){ inputblock = { cls : 'has-feedback', cn : [ @@ -132,7 +132,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { } } else { - if(this.removable && !this.editable && !this.tickable){ + if(this.removable && !this.editable ){ inputblock = { cls : 'roo-removable', cn : [ diff --git a/docs/json/roodata.json b/docs/json/roodata.json index 4186e71830..31102c9b76 100644 --- a/docs/json/roodata.json +++ b/docs/json/roodata.json @@ -19465,8 +19465,8 @@ }, { "name" : "html", - "type" : "String", - "desc" : "-- html contents - or just use children..", + "type" : "String|Boolean", + "desc" : "-- html contents - or just use children.. use false to hide it..", "memberOf" : "" }, { @@ -19819,6 +19819,13 @@ "sig" : "function (_self)\n{\n\n}", "memberOf" : "Roo.Component" }, + { + "name" : "rotate", + "type" : "function", + "desc" : "When a element a card is rotate", + "sig" : "function (_self, n, rotate)\n{\n\n}", + "memberOf" : "" + }, { "name" : "show", "type" : "function", @@ -23448,7 +23455,7 @@ { "name" : "tpl", "type" : "String/Roo.Template", - "desc" : "The template to use to render the output", + "desc" : "The template to use to render the output default is '{' + this.displayField + '}'", "memberOf" : "" }, { @@ -37614,6 +37621,12 @@ "desc" : "CSS class added to the component when it is disabled (defaults to \"x-item-disabled\").", "memberOf" : "Roo.Component" }, + { + "name" : "editableTitle", + "type" : "Boolean", + "desc" : "can the title be edited", + "memberOf" : "" + }, { "name" : "fitwindow", "type" : "Boolean", @@ -37814,6 +37827,13 @@ "desc" : "Fires after the component is shown.", "sig" : "function (_self)\n{\n\n}", "memberOf" : "Roo.Component" + }, + { + "name" : "titlechanged", + "type" : "function", + "desc" : "Fire when the editable title has been changed", + "sig" : "function (_self, value)\n{\n\n}", + "memberOf" : "" } ], "methods" : [ @@ -38800,7 +38820,7 @@ { "name" : "tpl", "type" : "String/Roo.Template", - "desc" : "The template to use to render the output", + "desc" : "The template to use to render the output default is '{' + this.displayField + '}'", "memberOf" : "Roo.bootstrap.ComboBox" }, { diff --git a/docs/src/Roo_bootstrap_Card.js.html b/docs/src/Roo_bootstrap_Card.js.html index 7e1cce45a8..beff5458df 100644 --- a/docs/src/Roo_bootstrap_Card.js.html +++ b/docs/src/Roo_bootstrap_Card.js.html @@ -17,7 +17,7 @@ * * @cfg {String} title * @cfg {String} subtitle - * @cfg {String} html -- html contents - or just use children.. + * @cfg {String|Boolean} html -- html contents - or just use children.. use false to hide it.. * @cfg {String} footer * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark) @@ -51,6 +51,9 @@ * * @config {Boolean} collapsable can the body be collapsed. * @config {Boolean} collapsed is the body collapsed when rendered... + * @config {Boolean} rotateable can the body be rotated by clicking on it.. + * @config {Boolean} rotated is the body rotated when rendered... + * * @constructor * Create a new Container * @param {Object} config The config object @@ -70,7 +73,15 @@ * @param {Roo.EventObject} e * @param {Roo.EventObject} data the data passed via getDragData */ - 'drop' : true + 'drop' : true, + /** + * @event rotate + * When a element a card is rotate + * @param {Roo.bootstrap.Element} this + * @param {Roo.Element} n the node being dropped? + * @param {Boolean} rotate status + */ + 'rotate' : true }); }; @@ -113,6 +124,8 @@ collapsable : false, collapsed : false, + rotateable : false, + rotated : false, dragable : false, drag_group : false, @@ -225,13 +238,13 @@ }; hdr.cn.push(hdr_ctr); } - if (this.header.length) { - hdr_ctr.cn.push( { - tag: 'span', - cls: 'roo-card-header-ctr', - html : this.header - }) - } + + hdr_ctr.cn.push( { + tag: 'span', + cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'), + html : this.header + }) + if (this.header_image.length) { cfg.cn.push({ @@ -248,15 +261,15 @@ var body = { tag : 'div', - cls : 'card-body', + cls : 'card-body' + (this.html === false ? ' d-none' : ''), cn : [] }; var obody = body; - if (this.collapsable) { + if (this.collapsable || this.rotateable) { obody = { - tag: 'div', - cls : 'roo-collapsable collapse ' + (this.collapsed ? '' : 'show'), - cn : [ body ] + tag: 'div', + cls : 'roo-collapsable collapse ' + (this.collapsed || this.rotated ? '' : 'show'), + cn : [ body ] }; } @@ -294,7 +307,7 @@ if (this.footer.length) { cfg.cn.push({ - cls : 'card-footer', + cls : 'card-footer ' + (this.rotated ? 'd-none' : ''), html : this.footer }); @@ -329,9 +342,9 @@ getCardImageTop : function() { var ret = this.el.select('.card-img-top',true).first(); - if (ret.hasClass('d-none')) { - ret.removeClass('d-none'); - } + if (ret.hasClass('d-none')) { + ret.removeClass('d-none'); + } return ret; }, @@ -348,8 +361,8 @@ initEvents: function() { - this.bodyEl = this.getChildContainer(); - if(this.dragable){ + this.bodyEl = this.getChildContainer(); + if(this.dragable){ this.dragZone = new Roo.dd.DragZone(this.getEl(), { containerScroll: true, ddGroup: this.drag_group || 'default_card_drag_group' @@ -357,20 +370,34 @@ this.dragZone.getDragData = this.getDragData.createDelegate(this); } if (this.dropable) { - this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , { - containerScroll: true, - ddGroup: this.drop_group || 'default_card_drag_group' - }); - this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this); - this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this); - this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this); - this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this); - this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this); - } + this.dropZone = new Roo.dd.DropZone(this.el.select('.card-body',true).first() , { + containerScroll: true, + ddGroup: this.drop_group || 'default_card_drag_group' + }); + this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this); + this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this); + this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this); + this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this); + this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this); + } if (this.collapsable) { - this.el.select('.card-header',true).on('click', this.onToggleCollapse, this); - } + this.el.select('.card-header',true).on('click', this.onToggleCollapse, this); + } + if (this.rotateable) { + this.el.select('.card-header',true).on('click', this.onToggleRotate, this); + } + this.collapsableEl = this.el.select('.roo-collapsable').first(); + + this.footerEl = this.el.select('.card-footer').first(); + this.collapsableToggleEl = this.el.select('.roo-collapse-toggle'); + this.headerEl = this.el.select('.roo-card-header-ctr').first(); + + if (this.rotated) { + this.el.addClass('roo-card-rotated'); + this.fireEvent('rotate', this, true); + } + }, getDragData : function(e) { @@ -502,16 +529,22 @@ onNodeDrop : function(n, dd, e, data) { - // call drop - return false if - if (this.fireEvent("drop", this, n, dd, e, data) === false) { - return false; - } + // call drop - return false if + + // this could actually fail - if the Network drops.. + // we will ignore this at present..- client should probably reload + // the whole set of cards if stuff like that fails. + var info = this.getTargetFromEvent(e,data.source.el); if (info === false) { return false; } + if (this.fireEvent("drop", this, n, dd, e, data) === false) { + return false; + } + this.dropPlaceHolder('hide'); // do the dom manipulation first.. @@ -550,11 +583,11 @@ var nitems = []; Roo.log([info.items_n, info.position, this.items.length]) for (var i =0; i < this.items.length; i++) { - if (i == info.items_n && info.position == 'before') { + if (i == info.items_n && info.position == 'above') { nitems.push(data.source); } nitems.push(this.items[i]); - if (i == info.items_n && info.position == 'after') { + if (i == info.items_n && info.position == 'below') { nitems.push(data.source); } } @@ -564,7 +597,7 @@ this.items.push(data.source); } - + data.source.parentId = this.id; return true; }, @@ -591,16 +624,39 @@ { if (this.collapsed) { this.el.select('.roo-collapse-toggle').removeClass('collapsed'); - this.el.select('.roo-collapsable').addClass('show'); + this.collapsableEl.addClass('show'); this.collapsed = false; return; } this.el.select('.roo-collapse-toggle').addClass('collapsed'); - this.el.select('.roo-collapsable').removeClass('show'); + this.collapsableEl.removeClass('show'); this.collapsed = true; }, + + onToggleRotate : function(e) + { + this.collapsableEl.removeClass('show'); + this.footerEl.removeClass('d-none'); + this.el.removeClass('roo-card-rotated'); + this.el.removeClass('d-none'); + if (this.rotated) { + + this.collapsableEl.addClass('show'); + this.rotated = false; + this.fireEvent('rotate', this, this.rotated); + return; + } + this.el.addClass('roo-card-rotated'); + this.footerEl.addClass('d-none'); + this.el.select('.roo-collapsable').removeClass('show'); + + this.rotated = true; + this.fireEvent('rotate', this, this.rotated); + + }, + dropPlaceHolder: function (action, info, data) { if (this.dropEl === false) { @@ -640,6 +696,10 @@ + }, + setHeaderText: function(html) + { + this.headerEl.dom.innerHTML = html; } diff --git a/docs/src/Roo_bootstrap_ComboBox.js.html b/docs/src/Roo_bootstrap_ComboBox.js.html index 1fa84d6694..e744757e19 100644 --- a/docs/src/Roo_bootstrap_ComboBox.js.html +++ b/docs/src/Roo_bootstrap_ComboBox.js.html @@ -143,7 +143,7 @@ */ /** - * @cfg {String/Roo.Template} tpl The template to use to render the output + * @cfg {String/Roo.Template} tpl The template to use to render the output default is '<a class="dropdown-item" href="#">{' + this.displayField + '}</a>' */ /** @@ -493,6 +493,8 @@ combobox.cn.push(feedback); } + + var indicator = { tag : 'i', cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star', diff --git a/docs/src/Roo_bootstrap_Modal.js.html b/docs/src/Roo_bootstrap_Modal.js.html index 2f36942b40..655fd04e89 100644 --- a/docs/src/Roo_bootstrap_Modal.js.html +++ b/docs/src/Roo_bootstrap_Modal.js.html @@ -20,6 +20,8 @@ * @cfg {Number} height fixed height - usefull for chrome extension only really. * @cfg {String} size (sm|lg) default empty * @cfg {Number} max_width set the max width of modal + * @cfg {Boolean} editableTitle can the title be edited + * * * @constructor @@ -43,8 +45,16 @@ * @param {Roo.bootstrap.Modal} this * @param {Roo.EventObject} e */ - "resize" : true - }); + "resize" : true, + /** + * @event titlechanged + * Fire when the editable title has been changed + * @param {Roo.bootstrap.Modal} this + * @param {Roo.EventObject} value + */ + "titlechanged" : true, + + }); this.buttons = this.buttons || []; if (this.tmpl) { @@ -89,6 +99,7 @@ max_height: 0, fit_content: false, + editableTitle : false, onRender : function(ct, position) { @@ -180,9 +191,8 @@ html : this.title }; - if(this.specificTitle){ + if(this.specificTitle){ // WTF is this? title = this.title; - } var header = []; @@ -196,6 +206,14 @@ header.push(title); + if (this.editableTitle) { + header.push({ + cls: 'form-control roo-editable-title d-none', + tag: 'input', + type: 'text' + }); + } + if (this.allow_close && Roo.bootstrap.version == 4) { header.push({ tag: 'button', @@ -278,7 +296,18 @@ this.closeEl.on('click', this.hide, this); } Roo.EventManager.onWindowResize(this.resize, this, true); - + if (this.editableTitle) { + this.headerEditEl = this.headerEl.select('.form-control',true).first(); + this.headerEl.on('click', function() { this.toggleHeaderInput(true) } , this); + this.headerEditEl.on('keyup', function(e) { + if(e.isNavKeyPress()){ + this.toggleHeaderInput(false) + } + }, this); + this.headerEditEl.on('blur', function(e) { + this.toggleHeaderInput(false) + },this); + } }, @@ -485,6 +514,7 @@ */ setTitle: function(str) { this.titleEl.dom.innerHTML = str; + this.title = str; }, /** * Set the body of the Dialog @@ -512,7 +542,7 @@ !child_nodes || child_nodes.length == 0 ) { - return; + return 0; } var child_height = 0; @@ -565,6 +595,33 @@ } return child_height; + }, + toggleHeaderInput : function(is_edit) + { + + if (is_edit && this.is_header_editing) { + return; // already editing.. + } + if (is_edit) { + + this.headerEditEl.dom.value = this.title; + this.headerEditEl.removeClass('d-none'); + this.headerEditEl.dom.focus(); + this.titleEl.addClass('d-none'); + + this.is_header_editing = true; + return + } + // flip back to not editing. + this.title = this.headerEditEl.dom.value; + this.headerEditEl.addClass('d-none'); + this.titleEl.removeClass('d-none'); + this.titleEl.dom.innerHTML = String.format('{0}', this.title); + this.is_header_editing = false; + this.fireEvent('titlechanged', this, this.title); + + + } }); @@ -633,4 +690,5 @@ zIndex : 10001 }); + \ No newline at end of file diff --git a/docs/symbols/Roo.bootstrap.Card.json b/docs/symbols/Roo.bootstrap.Card.json index 4fa79a1bc3..c23a688299 100644 --- a/docs/symbols/Roo.bootstrap.Card.json +++ b/docs/symbols/Roo.bootstrap.Card.json @@ -438,8 +438,8 @@ }, { "name" : "html", - "type" : "String", - "desc" : "-- html contents - or just use children..", + "type" : "String|Boolean", + "desc" : "-- html contents - or just use children.. use false to hide it..", "memberOf" : "Roo.bootstrap.Card", "optvals" : [] }, @@ -1127,6 +1127,36 @@ } ], "events" : [ + { + "name" : "rotate", + "desc" : "When a element a card is rotate", + "memberOf" : "Roo.bootstrap.Card", + "example" : "", + "deprecated" : "", + "since" : "", + "see" : "", + "params" : [ + { + "name" : "this", + "type" : "Roo.bootstrap.Element", + "desc" : "", + "isOptional" : false + }, + { + "name" : "n", + "type" : "Roo.Element", + "desc" : "the node being dropped?", + "isOptional" : false + }, + { + "name" : "rotate", + "type" : "Boolean", + "desc" : "status", + "isOptional" : false + } + ], + "returns" : [] + }, { "name" : "drop", "desc" : "When a element a card is dropped", diff --git a/docs/symbols/Roo.bootstrap.ComboBox.json b/docs/symbols/Roo.bootstrap.ComboBox.json index 7e98b9a082..52d7f13e82 100644 --- a/docs/symbols/Roo.bootstrap.ComboBox.json +++ b/docs/symbols/Roo.bootstrap.ComboBox.json @@ -230,7 +230,7 @@ { "name" : "tpl", "type" : "String/Roo.Template", - "desc" : "The template to use to render the output", + "desc" : "The template to use to render the output default is '{' + this.displayField + '}'", "memberOf" : "Roo.bootstrap.ComboBox", "optvals" : [] }, diff --git a/docs/symbols/Roo.bootstrap.Modal.json b/docs/symbols/Roo.bootstrap.Modal.json index 09cf0a6309..386b90889e 100644 --- a/docs/symbols/Roo.bootstrap.Modal.json +++ b/docs/symbols/Roo.bootstrap.Modal.json @@ -24,6 +24,13 @@ ], "returns" : [], "config" : [ + { + "name" : "editableTitle", + "type" : "Boolean", + "desc" : "can the title be edited", + "memberOf" : "Roo.bootstrap.Modal", + "optvals" : [] + }, { "name" : "listeners", "type" : "Object", @@ -900,6 +907,30 @@ } ], "events" : [ + { + "name" : "titlechanged", + "desc" : "Fire when the editable title has been changed", + "memberOf" : "Roo.bootstrap.Modal", + "example" : "", + "deprecated" : "", + "since" : "", + "see" : "", + "params" : [ + { + "name" : "this", + "type" : "Roo.bootstrap.Modal", + "desc" : "", + "isOptional" : false + }, + { + "name" : "value", + "type" : "Roo.EventObject", + "desc" : "", + "isOptional" : false + } + ], + "returns" : [] + }, { "name" : "btnclick", "desc" : "The raw btnclick event for the button", diff --git a/docs/symbols/Roo.bootstrap.MoneyField.json b/docs/symbols/Roo.bootstrap.MoneyField.json index f19ffb91e1..fba815ffb6 100644 --- a/docs/symbols/Roo.bootstrap.MoneyField.json +++ b/docs/symbols/Roo.bootstrap.MoneyField.json @@ -276,7 +276,7 @@ { "name" : "tpl", "type" : "String/Roo.Template", - "desc" : "The template to use to render the output", + "desc" : "The template to use to render the output default is '{' + this.displayField + '}'", "memberOf" : "Roo.bootstrap.ComboBox", "optvals" : [] }, diff --git a/examples/bootstrap/dashboard4.bjs b/examples/bootstrap/dashboard4.bjs index 2a09b44990..3eb939150f 100644 --- a/examples/bootstrap/dashboard4.bjs +++ b/examples/bootstrap/dashboard4.bjs @@ -6,6 +6,7 @@ "permname" : "", "modOrder" : "001", "strings" : { + "098f6bcd4621d373cade4e832627b4f6" : "test", "e93b3fa481be3932aa08bd68c3deee70" : "example 1", "60ee66eb2cd31823032664c2e9a79fd5" : "body goes here", "9cf863d802aca813531ca28b319ead90" : "Add Issue", @@ -93,6 +94,42 @@ "String html" : "Add Issue" } ] + }, + { + "xtype" : "Card", + "$ xns" : "Roo.bootstrap", + "String title" : "test", + "items" : [ + { + "xtype" : "UploadCropbox", + "$ xns" : "Roo.bootstrap" + } + ] + }, + { + "xtype" : "Card", + "$ xns" : "Roo.bootstrap", + "String title" : "test", + "items" : [ + { + "xtype" : "DocumentManager", + "$ xns" : "Roo.bootstrap" + } + ] + }, + { + "xtype" : "Column", + "Number xs" : 3, + "$ xns" : "Roo.bootstrap", + "items" : [ + { + "String footer" : "test", + "xtype" : "Card", + "String header_image" : "https://www.roojs.com/Roojscom/templates/images/roojsolutions-tr-100.png", + "$ xns" : "Roo.bootstrap", + "String title" : "test" + } + ] } ] } diff --git a/examples/bootstrap/dashboard4.js b/examples/bootstrap/dashboard4.js index cef1987314..bb56744509 100644 --- a/examples/bootstrap/dashboard4.js +++ b/examples/bootstrap/dashboard4.js @@ -5,6 +5,7 @@ dashboard4 = new Roo.XComponent({ _strings : { + '098f6bcd4621d373cade4e832627b4f6' :"test", 'e93b3fa481be3932aa08bd68c3deee70' :"example 1", '60ee66eb2cd31823032664c2e9a79fd5' :"body goes here", '9cf863d802aca813531ca28b319ead90' :"Add Issue", @@ -113,6 +114,48 @@ dashboard4 = new Roo.XComponent({ '|xns' : 'Roo.bootstrap' } ] + }, + { + xtype : 'Card', + title : _this._strings['098f6bcd4621d373cade4e832627b4f6'] /* test */, + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap', + items : [ + { + xtype : 'UploadCropbox', + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap' + } + ] + }, + { + xtype : 'Card', + title : _this._strings['098f6bcd4621d373cade4e832627b4f6'] /* test */, + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap', + items : [ + { + xtype : 'DocumentManager', + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap' + } + ] + }, + { + xtype : 'Column', + xs : 3, + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap', + items : [ + { + xtype : 'Card', + footer : 'test', + header_image : 'https://www.roojs.com/Roojscom/templates/images/roojsolutions-tr-100.png', + title : _this._strings['098f6bcd4621d373cade4e832627b4f6'] /* test */, + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap' + } + ] } ] } diff --git a/examples/bootstrap4/dashboard4.html b/examples/bootstrap4/dashboard4.html index 090719046b..1892be572a 100644 --- a/examples/bootstrap4/dashboard4.html +++ b/examples/bootstrap4/dashboard4.html @@ -16,6 +16,7 @@ + diff --git a/scss/roojs-bootstrap/card.scss b/scss/roojs-bootstrap/card.scss index 8dd8d994c6..bdefa75e56 100644 --- a/scss/roojs-bootstrap/card.scss +++ b/scss/roojs-bootstrap/card.scss @@ -8,7 +8,7 @@ transform: rotate(90deg); } .roo-card-dropzone { - border : 1px dashed $gray-500; + border: 1px dashed $gray-500; width: 100%; margin-bottom: 10px; border-radius :$card-border-radius;