bugfix

bricks/css/bricks.css

@@ -180,32 +180,12 @@ body {
 }
 
 .inputbox {
-	background-color: #cccccc;
+	background-color: #ddd;
-	border: 1px solid #bbbbbb;
+	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;

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);

bricks/dynamicaccordion.js

@@ -1,18 +1,12 @@
 var bricks = window.bricks || {};
-bricks.PageContent = class extends bricks.Layout {
+bricks.AccordionItem = class extends bricks.FHBox {
-	constructor(opts){
-		super(opts);
-	}
-}
-
-bricks.AccordionItem = class extends bricks.Layout {
 	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();

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;

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);

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({

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);
 		}