diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index 70a4c59..f69b893 100755 --- a/bricks/css/bricks.css +++ b/bricks/css/bricks.css @@ -180,32 +180,12 @@ body { } .inputbox { - background-color: #cccccc; - border: 1px solid #bbbbbb; + background-color: #ddd; + border: 1px solid #ccc; padding: 10px; margin: 0 0 1em 0; } -button[tooltip]:hover::after { - content: attr(tooltip); - display: block; - position: absolute; - transform: translateX(-50%); -} - -div[tooltip]:hover::after { - content: attr(tooltip); - display: block; - position: absolute; - transform: translateX(-50%); -} - -input[tooltip], -div[tooltip] { - width: max-content; - margin: auto; -} - .datagrid { display:flex; flex-direction:column; @@ -264,15 +244,18 @@ div[tooltip] { .accordion-item { border: 1px solid #ccc; margin-bottom: 5px; + width: auto; } .accordion-item-header { padding: 10px; background-color: #eeeeee; + width: auto; } .accordion-item-info { padding: 10px; background-color: #f0f0f0; cursor: pointer; + width: auto; } .accordion-item-content { padding: 10px; diff --git a/bricks/datagrid.js b/bricks/datagrid.js index 957aa66..477a230 100644 --- a/bricks/datagrid.js +++ b/bricks/datagrid.js @@ -159,7 +159,7 @@ bricks.DataGrid = class extends bricks.VBox { this.admin_bar.add_widget(this.miniform); } if (this.opts.toolbar) { - this.admin_bar.add_widget(new bricks.HFiller({})); + this.admin_bar.add_widget(new bricks.Filler({})); self.toolbar = new bricks.Toolbar(this.opts.toolbar); self.toolbar.bind('command', this.command_handle.bind(this)); this.admin_bar.add_widget(this.toolbar); diff --git a/bricks/dynamicaccordion.js b/bricks/dynamicaccordion.js index 5c88186..20ebe96 100644 --- a/bricks/dynamicaccordion.js +++ b/bricks/dynamicaccordion.js @@ -1,18 +1,12 @@ var bricks = window.bricks || {}; -bricks.PageContent = class extends bricks.Layout { - constructor(opts){ - super(opts); - } -} - -bricks.AccordionItem = class extends bricks.Layout { +bricks.AccordionItem = class extends bricks.FHBox { constructor(opts){ super(opts); this.set_css('accordion-item'); } } -bricks.AccordionInfo = class extends bricks.Layout { +bricks.AccordionInfo = class extends bricks.FHBox { constructor(opts){ super(opts); this.set_css('accordion-item-info'); @@ -40,6 +34,7 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel { constructor(opts){ super(opts); this.element = this.dom_element; + // this.set_style('overflow', 'auto'); this.loader = new bricks.PageDataLoader({ url:this.opts.data_url, params:this.opts.data_params, @@ -169,11 +164,16 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel { "submit_url":this.editable.new_data_url, "fields":fields }); - f.bind('cancel', this.add_record_finish.bind(this, info)); + f.bind('cancel', this.add_record_abort.bind(this, info)); content.add_widget(f, 0); content.show(); f.bind('submited', this.add_record_finish.bind(this, info)); } + async add_record_abort(info, event){ + var content = info.parent.children[1]; + content.hide(); + content.clear_widgets(); + } async add_record_finish(info, event){ var resp = event.params; var desc = await resp.json(); diff --git a/bricks/form.js b/bricks/form.js index 673f358..26dbb1b 100644 --- a/bricks/form.js +++ b/bricks/form.js @@ -135,9 +135,9 @@ bricks.Form = class extends bricks.VBox { }; var tbw = new bricks.Toolbar(tb_desc); tbw.bind('command', this.command_handle.bind(this)); - box.add_widget(new bricks.HFiller()); + box.add_widget(new bricks.Filler()); box.add_widget(tbw); - box.add_widget(new bricks.HFiller()); + box.add_widget(new bricks.Filler()); } command_handle(event){ var params = event.params; diff --git a/bricks/layout.js b/bricks/layout.js index 38d4f1b..baa7cd4 100755 --- a/bricks/layout.js +++ b/bricks/layout.js @@ -71,14 +71,6 @@ bricks.Filler = class extends bricks.Layout { } } -bricks.VFiller = class extends bricks.Layout { - constructor(options){ - super(options); - - this.set_css('vfiller'); - } -} - bricks.HBox = class extends bricks.Layout { constructor(options){ super(options); @@ -86,15 +78,22 @@ bricks.HBox = class extends bricks.Layout { } } -bricks.HFiller = class extends bricks.Layout { +bricks.FHBox = class extends bricks.HBox { constructor(options){ super(options); - this.set_css('hfiller'); + this.set_style('flexWrap', 'nowrap'); + } +} +bricks.FVBox = class extends bricks.VBox { + constructor(options){ + super(options); + this.set_style('flexWrap', 'nowrap'); } } - bricks.Factory.register('HBox', bricks.HBox); +bricks.Factory.register('FHBox', bricks.FHBox); bricks.Factory.register('VBox', bricks.VBox); +bricks.Factory.register('FVBox', bricks.FVBox); bricks.Factory.register('Filler', bricks.Filler); bricks.Factory.register('HFiller', bricks.Filler); bricks.Factory.register('VFiller', bricks.Filler); diff --git a/bricks/tab.js b/bricks/tab.js index 7f42e6f..078ec27 100755 --- a/bricks/tab.js +++ b/bricks/tab.js @@ -30,7 +30,7 @@ bricks.TabPanel = class extends bricks.Layout { super(options); this.content_buffer = {}; this.cur_tab_name = ''; - this.content_container = new bricks.VFiller({}); + this.content_container = new bricks.Filler({}); if (this.opts.tab_pos == 'top' || this.opts.tab_pos == 'bottom'){ this.set_css('vbox'); this.tab_container = new bricks.VBox({ diff --git a/bricks/widget.js b/bricks/widget.js index 7dcf908..2930bbd 100755 --- a/bricks/widget.js +++ b/bricks/widget.js @@ -61,6 +61,7 @@ bricks.JsWidget = class { "color" ]; var mapping_keys = { + "flex-shrink":"flexShrink", "z-index":"zIndex", "overflow-x":"overflowX", "opveflow-y":"overflowY", @@ -258,6 +259,7 @@ bricks.TextBase = class extends bricks.JsWidget { this.i18n = this.opts.i18n; } this._i18n = new bricks.I18n(); + this.set_style('flexShrink', '0'); if (this.i18n && this.otext) { this.text = this._i18n._(this.otext); }