From 3187d8d7fc0abe5aedd4da088d982837a6f83dc3 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Thu, 17 Sep 2020 13:52:35 +0800 Subject: [PATCH] Fix #6430 - messing arouds with cards BS4 --- Roo/bootstrap/Card.js | 235 ++++++++++++++++++++++++++++++ buildSDK/dependancy_bootstrap.txt | 1 + examples/bootstrap/dashboard1.bjs | 44 ++++-- examples/bootstrap/dashboard1.js | 50 ++++--- 4 files changed, 295 insertions(+), 35 deletions(-) create mode 100644 Roo/bootstrap/Card.js diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js new file mode 100644 index 0000000000..d5144a6a5e --- /dev/null +++ b/Roo/bootstrap/Card.js @@ -0,0 +1,235 @@ +/* + * - LGPL + * + * This is BS4's Card element.. - similar to our containers probably.. + * + */ +/** + * @class Roo.bootstrap.Card + * @extends Roo.bootstrap.Component + * Bootstrap Card class + * + * + * possible... may not be implemented.. + * @cfg {String} header_image src url of image. + * @cfg {String} header + * @cfg {Number} header_size (0|1|2|3|4|5) H1 or H2 etc.. 0 indicates default + * + * @cfg {String} title + * @cfg {String} subtitle + * @cfg {String} html -- html contents - or just use children.. + * @cfg {String} footer + + * @cfg {String} weight (primary|warning|info|danger|secondary|success|light|dark) + * + * @cfg {String} margin (0|1|2|3|4|5|auto) + * @cfg {String} margin_top (0|1|2|3|4|5|auto) + * @cfg {String} margin_bottom (0|1|2|3|4|5|auto) + * @cfg {String} margin_left (0|1|2|3|4|5|auto) + * @cfg {String} margin_right (0|1|2|3|4|5|auto) + * @cfg {String} margin_x (0|1|2|3|4|5|auto) + * @cfg {String} margin_y (0|1|2|3|4|5|auto) + * + * @cfg {String} padding (0|1|2|3|4|5) + * @cfg {String} padding_top (0|1|2|3|4|5) + * @cfg {String} padding_bottom (0|1|2|3|4|5) + * @cfg {String} padding_left (0|1|2|3|4|5) + * @cfg {String} padding_right (0|1|2|3|4|5) + * @cfg {String} padding_x (0|1|2|3|4|5) + * @cfg {String} padding_y (0|1|2|3|4|5) + * + * @cfg {String} display (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_xs (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_sm (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + * @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex) + + * @constructor + * Create a new Container + * @param {Object} config The config object + */ + +Roo.bootstrap.Card = function(config){ + Roo.bootstrap.Card.superclass.constructor.call(this, config); + + this.addEvents({ + + }); +}; + + +Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component, { + + + weight : '', + + margin: '', /// may be better in component? + margin_top: '', + margin_bottom: '', + margin_left: '', + margin_right: '', + margin_x: '', + margin_y: '', + + padding : '', + padding_top: '', + padding_bottom: '', + padding_left: '', + padding_right: '', + padding_x: '', + padding_y: '', + + display: '', + display_xs: '', + display_sm: '', + display_lg: '', + display_xl: '', + + header_image : '', + header : '', + header_size : 0, + title : '', + subtitle : '', + html : '', + + + childContainer : false, + + layoutCls : function() + { + var cls = ''; + var t = this; + + ['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) { + // in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet + + if (t['margin' + (v.length ? '_' : '') + v].length) { + cls += ' m' + (v.length ? v[0] : '') + '-' + t['margin' + (v.length ? '_' : '') + v]; + } + if (t['padding' + (v.length ? '_' : '') + v].length) { + cls += ' p' + (v.length ? v[0] : '') + '-' + t['padding' + (v.length ? '_' : '') + v]; + } + }); + + ['', 'xs', 'sm', 'lg', 'xl', ].forEach(function(v) { + if (t['display' + (v.length ? '_' : '') + v].length) { + cls += ' d' + (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v].length + } + }); + + // more generic support? + if (this.hidden) { + cls += ' d-none'; + } + + return cls; + }, + + // Roo.log("Call onRender: " + this.xtype); + /* We are looking at something like this. +
+ ... +
+
Card title
+
Card subtitle
+ + >> this bit is really the body... +
<< we will ad dthis in hopefully it will not break shit. + + ** card text does not actually have any styling... + +

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

+ +
<< + Card link + +
+
+ Last updated 3 mins ago +
+
+ */ + getAutoCreate : function(){ + + var cfg = { + tag : 'div', + cls : 'card', + cn : [ ] + }; + + if (this.weight.length && this.weight != 'light') { + cfg.cls += ' text-white' + } + if (this.weight.length) { + cfg.cls += ' bg-' + this.weight; + } + + cfg.cls += this.layoutCls(); + + if (this.header.length) { + cfg.cn.push({ + tag : this.header_size > 0 ? 'h' + this.header_size : 'div', + cls : 'card-header', + html : this.header // escape? + }); + } + if (this.header_image.length) { + cfg.cn.push({ + tag : 'img', + cls : 'card-img-top', + src: this.header_image // escape? + }); + } + + var body = { + tag : 'div', + cls : 'card-body', + cn : [] + }; + cfg.push(body); + + if (this.title.length) { + body.cn.push({ + tag : 'div', + cls : 'card-title', + src: this.title // escape? + }); + } + + if (this.subtitle.length) { + body.cn.push({ + tag : 'div', + cls : 'card-title', + src: this.subtitle // escape? + }); + } + + body.cn.push({ + tag : 'div', + cls : 'roo-card-body-ctr' + }); + + // fixme ? handle objects? + if (this.footer.length) { + body.cn.push({ + tag : 'div', + cls : 'card-footer', + html: this.footer // escape? + }); + } + // footer... + + return cfg; + }, + + + getChildContainer : function() + { + + if(!this.el){ + return false; + } + return this.el.select('.roo-card-body-ctr',true).first(); + } + +} \ No newline at end of file diff --git a/buildSDK/dependancy_bootstrap.txt b/buildSDK/dependancy_bootstrap.txt index c553bca6a1..02247132b8 100644 --- a/buildSDK/dependancy_bootstrap.txt +++ b/buildSDK/dependancy_bootstrap.txt @@ -8,6 +8,7 @@ Roo.bootstrap.ButtonGroup Roo.bootstrap.Button Roo.bootstrap.Column Roo.bootstrap.Container +Roo.bootstrap.Card Roo.bootstrap.Img Roo.bootstrap.Link diff --git a/examples/bootstrap/dashboard1.bjs b/examples/bootstrap/dashboard1.bjs index a0c6fa88cd..c41cbea651 100644 --- a/examples/bootstrap/dashboard1.bjs +++ b/examples/bootstrap/dashboard1.bjs @@ -19,6 +19,7 @@ "643a860f992333b8600ea264aca7c4fc" : "Email Address", "69165cb5e53db90fd85e2b0a98f1d77b" : "size sm", "a1e27e67ca3c6c3198c36a32e416a65f" : "General Form Elements Preview ", + "7c230330ef184cac6b35f3c20e40dedd" : "Checkbox weight=primary", "c3d8baf1b9da3d6922aea0057717a0b7" : "Enter email", "c81c5cb4cbfa1fe7cc3ae45112da3bf8" : "ComboBox disabled", "b85c1bc6f73a44489045c76aafbab96c" : "With checkbox and radio", @@ -35,26 +36,37 @@ "8d71e1fffea14ff1d8b7acbe0ded4305" : "With buttons", "eccbc87e4b5ce2fe28308fd9f2a7baf3" : "3", "5f7a612768f22e04c0a0c4bb0c24ce91" : "size md", + "de8a19fe7b105f264a9a83909b880af3" : "Checkbox 1", "08583f18f5ab76dcb709f7b34eb59104" : "Different Height", "7099e6d377281665976e57e80ba5fe0d" : "before $, after: .00", "82a3bed694a221ef4bb4f18514b05843" : "Input with Warning", + "770e06d40b8b4d64e89c24098d25fdc2" : "Radio 1", + "b52b5a382a07e93eb72c79ae431f3159" : "Radio Disabled", "088eb66998a403897b60aa8ee9115c91" : "cls = has-success", "dc647eb65e6711e155375218212b3964" : "Password", "343f7d4e4b503d9b9cb282205a4d5858" : "after: .00", + "9a64581b8c734327d597d13177b4203e" : "Checkbox Disabled", "221fd7bbd5b513f2c2db2939fcefec96" : "after - a button", "76946ef61117810371fa41415c86a2ed" : "size lg", "b5d4d25fe3fa9f8263b5f279a372b709" : "Textarea", "3b545ecbbdf3673f195c5a692fefa928" : "disabled=true", "71f30e09efd6fac81e65a32a32a1c6ac" : "With Icons", "f536bd90041a983b324d7a81de4e8089" : "Input with Success", + "2638b51cce6f3ce99752fa859b9c71a8" : "Radio (weight=danger)", "f8eae6750519389e078e1eb1bcb3d708" : "https://", "1c8d3efd26af385c51153c5bc082a279" : "before : - an object... ", "2f24bf395be7b31a10b6d501801d4099" : "Input Addon", "6f0e2583dbfc8eab280b4709a8c87b4b" : "Different Width", "1dcae4807c06e16567efb6eff4f1296c" : "Multiple selection", + "9fced129522f128b2445a41fb0b6ef9f" : "checkbox", "d1457b72c3fb323a2671125aef3eab5d" : "?", - "4c3d0e43b52db64c94f842da7fc7224c" : "Enter ...", - "a4d3b161ce1309df1c4e25df28694b7b" : "Submit" + "a4d3b161ce1309df1c4e25df28694b7b" : "Submit", + "4c3d0e43b52db64c94f842da7fc7224c" : "Enter ..." + }, + "named_strings" : { + "radio_boxLabel" : "b52b5a382a07e93eb72c79ae431f3159", + "radio_value" : "eccbc87e4b5ce2fe28308fd9f2a7baf3", + "combotest_fieldLabel" : "1dcae4807c06e16567efb6eff4f1296c" }, "items" : [ { @@ -64,8 +76,8 @@ "items" : [ { "String cls" : "header", - "tag" : "header", "xtype" : "Container", + "tag" : "header", "* xinclude" : "Dashboard.Header1", "$ xns" : "Roo.bootstrap" }, @@ -133,14 +145,6 @@ "$ xns" : "Roo.bootstrap", "Number level" : 3, "String html" : "Quick Example" - }, - { - "xtype" : "Input", - "string placeholder" : "Enter password", - "String inputType" : "password", - "String fieldLabel" : "Password", - "$ xns" : "Roo.bootstrap", - "string tooltip" : "Hello world" } ] }, @@ -154,6 +158,14 @@ "xtype" : "Container", "$ xns" : "Roo.bootstrap", "items" : [ + { + "xtype" : "Input", + "string placeholder" : "Enter password", + "String inputType" : "password", + "String fieldLabel" : "Password", + "$ xns" : "Roo.bootstrap", + "string tooltip" : "Hello world" + }, { "xtype" : "Input", "string placeholder" : "Enter email", @@ -354,8 +366,8 @@ }, { "xtype" : "Header", - "Number level" : 4, "$ xns" : "Roo.bootstrap", + "Number level" : 4, "String html" : "With Icons" }, { @@ -382,8 +394,8 @@ }, { "xtype" : "Header", - "$ xns" : "Roo.bootstrap", "Number level" : 4, + "$ xns" : "Roo.bootstrap", "String html" : "With checkbox and radio" }, { @@ -409,8 +421,8 @@ }, { "xtype" : "Header", - "Number level" : 4, "$ xns" : "Roo.bootstrap", + "Number level" : 4, "String html" : "With buttons" }, { @@ -529,8 +541,8 @@ }, { "xtype" : "TextArea", - "String fieldLabel" : "Textarea", - "$ xns" : "Roo.bootstrap" + "$ xns" : "Roo.bootstrap", + "String fieldLabel" : "Textarea" }, { "xtype" : "TextArea", diff --git a/examples/bootstrap/dashboard1.js b/examples/bootstrap/dashboard1.js index a62fa30249..92815f36a4 100644 --- a/examples/bootstrap/dashboard1.js +++ b/examples/bootstrap/dashboard1.js @@ -18,6 +18,7 @@ dashboard1 = new Roo.XComponent({ '643a860f992333b8600ea264aca7c4fc' :"Email Address", '69165cb5e53db90fd85e2b0a98f1d77b' :"size sm", 'a1e27e67ca3c6c3198c36a32e416a65f' :"General Form Elements Preview ", + '7c230330ef184cac6b35f3c20e40dedd' :"Checkbox weight=primary", 'c3d8baf1b9da3d6922aea0057717a0b7' :"Enter email", 'c81c5cb4cbfa1fe7cc3ae45112da3bf8' :"ComboBox disabled", 'b85c1bc6f73a44489045c76aafbab96c' :"With checkbox and radio", @@ -34,26 +35,37 @@ dashboard1 = new Roo.XComponent({ '8d71e1fffea14ff1d8b7acbe0ded4305' :"With buttons", 'eccbc87e4b5ce2fe28308fd9f2a7baf3' :"3", '5f7a612768f22e04c0a0c4bb0c24ce91' :"size md", + 'de8a19fe7b105f264a9a83909b880af3' :"Checkbox 1", '08583f18f5ab76dcb709f7b34eb59104' :"Different Height", '7099e6d377281665976e57e80ba5fe0d' :"before $, after: .00", '82a3bed694a221ef4bb4f18514b05843' :"Input with Warning", + '770e06d40b8b4d64e89c24098d25fdc2' :"Radio 1", + 'b52b5a382a07e93eb72c79ae431f3159' :"Radio Disabled", '088eb66998a403897b60aa8ee9115c91' :"cls = has-success", 'dc647eb65e6711e155375218212b3964' :"Password", '343f7d4e4b503d9b9cb282205a4d5858' :"after: .00", + '9a64581b8c734327d597d13177b4203e' :"Checkbox Disabled", '221fd7bbd5b513f2c2db2939fcefec96' :"after - a button", '76946ef61117810371fa41415c86a2ed' :"size lg", 'b5d4d25fe3fa9f8263b5f279a372b709' :"Textarea", '3b545ecbbdf3673f195c5a692fefa928' :"disabled=true", '71f30e09efd6fac81e65a32a32a1c6ac' :"With Icons", 'f536bd90041a983b324d7a81de4e8089' :"Input with Success", + '2638b51cce6f3ce99752fa859b9c71a8' :"Radio (weight=danger)", 'f8eae6750519389e078e1eb1bcb3d708' :"https://", '1c8d3efd26af385c51153c5bc082a279' :"before : - an object... ", '2f24bf395be7b31a10b6d501801d4099' :"Input Addon", '6f0e2583dbfc8eab280b4709a8c87b4b' :"Different Width", '1dcae4807c06e16567efb6eff4f1296c' :"Multiple selection", + '9fced129522f128b2445a41fb0b6ef9f' :"checkbox", 'd1457b72c3fb323a2671125aef3eab5d' :"?", - '4c3d0e43b52db64c94f842da7fc7224c' :"Enter ...", - 'a4d3b161ce1309df1c4e25df28694b7b' :"Submit" + 'a4d3b161ce1309df1c4e25df28694b7b' :"Submit", + '4c3d0e43b52db64c94f842da7fc7224c' :"Enter ..." + }, + _named_strings : { + 'radio_boxLabel' : 'b52b5a382a07e93eb72c79ae431f3159' /* Radio Disabled */ , + 'radio_value' : 'eccbc87e4b5ce2fe28308fd9f2a7baf3' /* 3 */ , + 'combotest_fieldLabel' : '1dcae4807c06e16567efb6eff4f1296c' /* Multiple selection */ }, part : ["bootstrap", "dashboard1" ], @@ -63,7 +75,7 @@ dashboard1 = new Roo.XComponent({ name : "unnamed module", disabled : false, permname : '', - _tree : function() + _tree : function(_data) { var _this = this; var MODULE = this; @@ -154,15 +166,6 @@ dashboard1 = new Roo.XComponent({ level : 3, xns : Roo.bootstrap, '|xns' : 'Roo.bootstrap' - }, - { - xtype : 'Input', - fieldLabel : _this._strings['dc647eb65e6711e155375218212b3964'] /* Password */, - inputType : 'password', - placeholder : _this._strings['483bc24d842fe8f3ec3a6f92fbd31922'] /* Enter password */, - tooltip : 'Hello world', - xns : Roo.bootstrap, - '|xns' : 'Roo.bootstrap' } ] }, @@ -178,6 +181,15 @@ dashboard1 = new Roo.XComponent({ xns : Roo.bootstrap, '|xns' : 'Roo.bootstrap', items : [ + { + xtype : 'Input', + fieldLabel : _this._strings['dc647eb65e6711e155375218212b3964'] /* Password */, + inputType : 'password', + placeholder : _this._strings['483bc24d842fe8f3ec3a6f92fbd31922'] /* Enter password */, + tooltip : 'Hello world', + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap' + }, { xtype : 'Input', fieldLabel : _this._strings['643a860f992333b8600ea264aca7c4fc'] /* Email Address */, @@ -196,7 +208,7 @@ dashboard1 = new Roo.XComponent({ }, { xtype : 'CheckBox', - boxLabel : 'checkbox', + boxLabel : _this._strings['9fced129522f128b2445a41fb0b6ef9f'] /* checkbox */, xns : Roo.bootstrap, '|xns' : 'Roo.bootstrap' }, @@ -644,13 +656,13 @@ dashboard1 = new Roo.XComponent({ }, { xtype : 'CheckBox', - boxLabel : 'Checkbox 1', + boxLabel : _this._strings['de8a19fe7b105f264a9a83909b880af3'] /* Checkbox 1 */, xns : Roo.bootstrap, '|xns' : 'Roo.bootstrap' }, { xtype : 'CheckBox', - boxLabel : 'Checkbox weight=primary', + boxLabel : _this._strings['7c230330ef184cac6b35f3c20e40dedd'] /* Checkbox weight=primary */, checked : true, weight : 'primary', xns : Roo.bootstrap, @@ -658,14 +670,14 @@ dashboard1 = new Roo.XComponent({ }, { xtype : 'CheckBox', - boxLabel : 'Checkbox Disabled', + boxLabel : _this._strings['9a64581b8c734327d597d13177b4203e'] /* Checkbox Disabled */, disabled : true, xns : Roo.bootstrap, '|xns' : 'Roo.bootstrap' }, { xtype : 'Radio', - boxLabel : 'Radio 1', + boxLabel : _this._strings['770e06d40b8b4d64e89c24098d25fdc2'] /* Radio 1 */, name : 'radio', value : 1, xns : Roo.bootstrap, @@ -673,7 +685,7 @@ dashboard1 = new Roo.XComponent({ }, { xtype : 'Radio', - boxLabel : 'Radio (weight=danger)', + boxLabel : _this._strings['2638b51cce6f3ce99752fa859b9c71a8'] /* Radio (weight=danger) */, name : 'radio', value : 2, weight : 'danger', @@ -682,7 +694,7 @@ dashboard1 = new Roo.XComponent({ }, { xtype : 'Radio', - boxLabel : 'Radio Disabled', + boxLabel : _this._strings['b52b5a382a07e93eb72c79ae431f3159'] /* Radio Disabled */, disabled : true, name : 'radio', value : 3, -- 2.39.2