[form layouts] [new] added new responsive form layout
This commit is contained in:
Rushabh Mehta
parent
739d9db90d
commit
54791f7628
5 changed files with 78 additions and 166 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
69
public/js/wn/form/layout.js
Normal file
69
public/js/wn/form/layout.js
Normal file
|
|
@ -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() {
|
||||
|
||||
}
|
||||
})
|
||||
Loading…
Add table
Reference in a new issue