[form layouts] [new] added new responsive form layout

public/build.json

@@ -157,6 +157,7 @@
 			"lib/public/js/legacy/wn/widgets/form/sidebar.js",
 			"lib/public/js/legacy/wn/widgets/form/comments.js",
 			"lib/public/js/wn/form/toolbar.js",
+			"lib/public/js/wn/form/layout.js",
 			"lib/public/js/wn/form/editors.js",
 			"lib/public/js/wn/form/attachments.js",
 			"lib/public/js/wn/form/linked_with.js",

public/js/legacy/widgets/form/fields.js

@@ -42,10 +42,7 @@ Field.prototype.make_body = function() {
 	var ischk = (this.df.fieldtype=='Check' ? 1 : 0);
 	
 	// parent element
-	if(this.parent)
-		this.wrapper = $a(this.parent, (this.with_label || this.df.fieldtype=="HTML" ? 'div' : 'span'));
-	else
-		this.wrapper = document.createElement((this.with_label || this.df.fieldtype=="HTML" ? 'div' : 'span'));
+	this.wrapper = this.parent;
 
 	$(this.wrapper).addClass("field-wrapper");
 	
@@ -117,15 +114,7 @@ Field.prototype.set_label = function(label) {
 }
 
 Field.prototype.set_description = function(txt) {
-	if(this.df.description || txt) {
-		// parent
-		if(!this.desc_area) {
-			var p = in_list(['Text Editor', 'Code', 'Check'], this.df.fieldtype) 
-				? this.label_area : this.wrapper;
-			this.desc_area = $a(p, 'div', 'help small');
-		}
-		$(this.desc_area).html(wn._(this.df.description || txt));
-	}
+	$(this.wrapper).attr("title", txt).tooltip();
 }
 
 Field.prototype.get_status = function(explain) {
@@ -1334,8 +1323,6 @@ function make_field(docfield, doctype, parent, frm, in_grid, hide_label) { // Fa
 		case 'code':var f = new _f.CodeField(); break;
 		case 'text editor':var f = new _f.CodeField(); break;
 		case 'table':var f = new _f.TableField(); break;
-		case 'section break':var f= new _f.SectionBreak(); break;
-		case 'column break':var f= new _f.ColumnBreak(); break;
 		case 'image':var f= new _f.ImageField(); break;
 	}
 

public/js/legacy/widgets/form/form.js

@@ -182,8 +182,11 @@ _f.Frm.prototype.setup_std_layout = function() {
 	this.meta.section_style='Simple'; // always simple!
 	
 	// layout
-	this.layout = new Layout(this.body, '100%');
-	
+	this.layout = new wn.ui.form.Layout({
+		parent: this.body,
+		doctype: this.doctype,
+		frm: this,
+	})	
 	
 	// state
 	this.states = new wn.ui.form.States({
@@ -192,10 +195,6 @@ _f.Frm.prototype.setup_std_layout = function() {
 		
 	// footer
 	this.setup_footer();
-					
-	// create fields
-	this.setup_fields_std();
-	
 }
 
 _f.Frm.prototype.setup_header = function() {
@@ -316,53 +315,6 @@ _f.Frm.prototype.set_footnote = function(txt) {
 }
 
 
-_f.Frm.prototype.setup_fields_std = function() {
-	var fl = wn.meta.docfield_list[this.doctype]; 
-
-	fl.sort(function(a,b) { return a.idx - b.idx});
-
-	if(fl[0]&&fl[0].fieldtype!="Section Break" || get_url_arg('embed')) {
-		this.layout.addrow(); // default section break
-		if(fl[0].fieldtype!="Column Break") {// without column too
-			var c = this.layout.addcell();
-			$y(c.wrapper, {padding: '8px'});
-		}
-	}
-
-	var sec;
-	for(var i=0;i<fl.length;i++) {
-		var f=fl[i];
-				
-		// if section break and next item 
-		// is a section break then ignore
-		if(f.fieldtype=='Section Break' && fl[i+1] && fl[i+1].fieldtype=='Section Break') 
-			continue;
-		
-		var fn = f.fieldname?f.fieldname:f.label;
-				
-		var fld = make_field(f, this.doctype, this.layout.cur_cell, this);
-
-		this.fields[this.fields.length] = fld;
-		this.fields_dict[fn] = fld;
-
-		if(sec && ['Section Break', 'Column Break'].indexOf(f.fieldtype)==-1) {
-			fld.parent_section = sec;
-			sec.fields.push(fld);	
-		}
-		
-		if(f.fieldtype=='Section Break') {
-			sec = fld;
-			this.sections.push(fld);
-		}
-		
-		// default col-break after sec-break
-		if((f.fieldtype=='Section Break')&&(fl[i+1])&&(fl[i+1].fieldtype!='Column Break')) {
-			var c = this.layout.addcell();
-			$y(c.wrapper, {padding: '8px'});
-		}
-	}
-}
-
 _f.Frm.prototype.add_custom_button = function(label, fn, icon) {
 	this.toolbar.make_actions_menu();
 	this.appframe.add_dropdown_button("Actions", label, fn, icon);
@@ -546,9 +498,6 @@ _f.Frm.prototype.refresh = function(docname) {
 			// footer
 			this.refresh_footer();
 			
-			// layout
-			if(this.layout) this.layout.show();
-
 			// call onload post render for callbacks to be fired
 			if(this.cscript.is_onload) {
 				this.runclientscript('onload_post_render', this.doctype, this.docname);

public/js/legacy/widgets/form/form_fields.js

@@ -20,99 +20,6 @@
 // OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 // 
 
-//
-// Form Input
-// ======================================================================================
-
-_f.ColumnBreak = function() {
-	this.set_input = function() { };
-}
-
-_f.ColumnBreak.prototype.make_body = function() {
-	this.cell = this.frm.layout.addcell(this.df.width);
-	$y(this.cell.wrapper, {padding: '8px'});
-	_f.cur_col_break_width = this.df.width;
-
-	var fn = this.df.fieldname || this.df.label;
-	// header
-	if(this.df&&this.df.label){
-		this.label = $a(this.cell.wrapper, 'h4', '', '', wn._(this.df.label));
-		if(this.df.description)
-			$('<div class="help small" style="margin-top: 4px; margin-bottom: 8px;">'
-				+wn._(this.df.description)+'</div>')
-				.appendTo(this.cell.wrapper)
-		
-	}
-}
-
-_f.ColumnBreak.prototype.refresh = function(layout) {
-	//if(!this.cell)return; // no perm
-	
-	var hidden = 0;
-	// we generate column breaks, but hide it based on perms/hidden value
-	if((!this.perm[this.df.permlevel]) || (!this.perm[this.df.permlevel][READ]) || 
-		this.df.hidden) {
-		// do not display, as no permission
-		hidden = 1;
-	}
-	
-	// hidden
-	if(this.set_hidden!=hidden) {
-		if(hidden)
-			this.cell.hide();
-		else
-			this.cell.show();
-		this.set_hidden = hidden;
-	}
-}
-
-// ======================================================================================
-
-_f.SectionBreak = function() {
-	this.fields = [];
-	this.set_input = function() { };
-	this.make_row = function() {
-		this.row = this.df.label ? this.frm.layout.addrow() : this.frm.layout.addsubrow();		
-	}
-}
-
-_f.SectionBreak.prototype.make_body = function() {
-	var me = this;
-	this.make_row();
-
-	if(this.df.label) {
-		if(!this.df.description) 
-			this.df.description = '';
-		
-		this.df._label = wn._(this.df.label);
-		this.df._description = wn._(this.df.description);
-		
-		$(this.row.main_head).html(repl('<div class="form-section-head">\
-				<h3 class="head">%(_label)s</h3>\
-				<div class="help small" \
-					style="margin-top: 4px; margin-bottom: 8px;">%(_description)s</div>\
-			</div>', this.df));
-	} else {
-		// simple
-		$(this.wrapper).html('<div class="form-section-head"></div>');
-	}
-}
-
-_f.SectionBreak.prototype.refresh = function(from_form) {
-	var hidden = 0;
-	// we generate section breaks, but hide it based on perms/hidden value
-	if((!this.perm[this.df.permlevel]) || (!this.perm[this.df.permlevel][READ]) || this.df.hidden) {
-		// no display
-		hidden = 1;
-	}
-
-	if(hidden) {
-		if(this.row)this.row.hide();
-	} else {
-		if(this.row)this.row.show();
-	}
-}
-
 // Image field definition
 // ======================================================================================
 
@@ -148,8 +55,7 @@ _f.TableField.prototype.make_body = function() {
 		
 		// description
 		if(this.df.description) {
-			this.desc_area = $a(this.wrapper, 'div', 'help small', 
-				{marginBottom:'9px', marginTop:'0px'}, this.df.description)
+			$('<p class="muted small">' + this.df.description + '</p>');
 		}
 	}
 }

public/js/wn/form/layout.js

@@ -0,0 +1,69 @@
+wn.ui.form.Layout = Class.extend({
+	init: function(opts) {
+		this.ignore_types = ["Section Break", "Column Break"];
+		$.extend(this, opts);
+		this.make();
+	},
+	make: function() {
+		this.wrapper = $('<div class="form-layout">').appendTo(this.parent);
+		this.fields = wn.meta.docfield_list[this.doctype];
+		this.fields.sort(function(a,b) { return a.idx - b.idx});
+		this.render();
+	},
+	render: function() {
+		var me = this;
+		this.section = null;
+		if(this.fields[0] && this.fields[0].fieldtype!="Section Break") {
+			this.make_section();
+		}
+		$.each(this.fields, function(i, df) {
+			switch(df.fieldtype) {
+				case "Section Break":
+					me.make_section(df);
+					break;
+				case "Column Break":
+					break;
+				case "Table":
+				case "Text Editor":
+				case "Code":
+					var fieldwrapper = $('<div class="span12">').appendTo(me.section);
+					me.make_field(df, fieldwrapper);
+					break;
+				case "Text":
+					var fieldwrapper = $('<div class="span8">').appendTo(me.section);
+					me.make_field(df, fieldwrapper);
+					break;
+				default:
+					var fieldwrapper = $('<div class="span4" \
+						style="height: 60px; overflow: hidden;">')
+						.appendTo(me.section);
+					me.make_field(df, fieldwrapper);
+			}
+		});
+	},
+	make_field: function(df, parent) {
+		var fieldobj = make_field(df, this.doctype, parent.get(0), this.frm);
+		this.frm.fields.push(fieldobj);
+		this.frm.fields_dict[df.fieldname] = fieldobj;
+	},
+	make_section: function(df) {
+		if(this.section) {
+			$("<hr>").appendTo(this.wrapper);
+		}
+		this.section = $('<div class="row">').appendTo(this.wrapper);
+		this.frm.sections.push(this.section);
+		if(df) {
+			if(df.label) {
+				$('<div class="span12"><h4>' + df.label + "</h4></div>").appendTo(this.section);
+			}
+			if(df.description) {
+				$('<div class="span12 small muted">' + df.description + '</div>').appendTo(this.section);
+			}
+			this.frm.fields_dict[df.fieldname] = this.section;
+		}
+		return this.section;
+	},
+	refresh: function() {
+
+	}
+})