changeset a49d85f225ed in sao:default
details: https://hg.tryton.org/sao?cmd=changeset;node=a49d85f225ed
description:
Improve the layout of CSV import and export
issue8096
review46751002
diffstat:
CHANGELOG | 1 +
src/sao.less | 5 +-
src/window.js | 181 +++++++++++++++++++++++++++++++--------------------------
3 files changed, 101 insertions(+), 86 deletions(-)
diffs (338 lines):
diff -r 89c2b0b3a357 -r a49d85f225ed CHANGELOG
--- a/CHANGELOG Wed Feb 13 10:59:48 2019 +0100
+++ b/CHANGELOG Wed Feb 13 11:04:09 2019 +0100
@@ -1,3 +1,4 @@
+* Improve layout of CSV import/export
* Add support for height and width on notebook
* Use tab key for tab navigation
* Use record and field properties of widget instead of method arguments
diff -r 89c2b0b3a357 -r a49d85f225ed src/sao.less
--- a/src/sao.less Wed Feb 13 10:59:48 2019 +0100
+++ b/src/sao.less Wed Feb 13 11:04:09 2019 +0100
@@ -463,8 +463,9 @@
.csv {
.modal-dialog {
.column-fields {
- height: 35vh;
- overflow-y: scroll;
+ max-height: 400px;
+ overflow: auto;
+ white-space: nowrap;
}
}
}
diff -r 89c2b0b3a357 -r a49d85f225ed src/window.js
--- a/src/window.js Wed Feb 13 10:59:48 2019 +0100
+++ b/src/window.js Wed Feb 13 11:04:09 2019 +0100
@@ -893,7 +893,7 @@
"x-cp1255", "x-cp1256", "x-cp1257", "x-cp1258", "x-euc-jp",
"x-gbk",
"x-mac-cyrillic", "x-mac-roman", "x-mac-ukrainian", "x-sjis",
"x-user-defined", "x-x-big5"];
- this.dialog = new Sao.Dialog(title, 'csv', 'md');
+ this.dialog = new Sao.Dialog(title, 'csv', 'lg');
this.el = this.dialog.modal;
this.fields = {};
@@ -917,18 +917,21 @@
'class': 'row'
}).appendTo(this.dialog.body);
- jQuery('<hr/>').appendTo(this.dialog.body);
-
var column_fields_all = jQuery('<div/>', {
- 'class': 'col-md-4 column-fields'
- }).append(jQuery('<label/>', {
+ 'class': 'col-md-5',
+ }).append(jQuery('<div/>', {
+ 'class': 'panel panel-default',
+ }).append(jQuery('<div/>', {
+ 'class': 'panel-heading',
+ }).append(jQuery('<h3/>', {
+ 'class': 'panel-title',
'text': Sao.i18n.gettext('All Fields')
- })).appendTo(row_fields);
+ })))).appendTo(row_fields);
this.fields_all = jQuery('<ul/>', {
- 'class': 'list-unstyled'
+ 'class': 'list-unstyled column-fields panel-body'
}).css('cursor', 'pointer')
- .appendTo(column_fields_all);
+ .appendTo(column_fields_all.find('.panel'));
var prm = this.get_fields(this.screen.model_name)
.then(function(fields){
@@ -937,8 +940,8 @@
}.bind(this));
this.column_buttons = jQuery('<div/>', {
- 'class': 'col-md-4'
- }).append('<label/>').appendTo(row_fields);
+ 'class': 'col-md-2'
+ }).appendTo(row_fields);
var button_add = jQuery('<button/>', {
'class': 'btn btn-default btn-block',
@@ -973,18 +976,24 @@
jQuery('<hr>').appendTo(this.column_buttons);
var column_fields_selected = jQuery('<div/>', {
- 'class': 'col-md-4 column-fields'
- }).append(jQuery('<label/>', {
+ 'class': 'col-md-5',
+ }).append(jQuery('<div/>', {
+ 'class': 'panel panel-default',
+ }).append(jQuery('<div/>', {
+ 'class': 'panel-heading',
+ }).append(jQuery('<h3/>', {
+ 'class': 'panel-title',
'text': Sao.i18n.gettext('Fields Selected')
- })).appendTo(row_fields);
+ })))).appendTo(row_fields);
// TODO: Make them draggable to re-order
this.fields_selected = jQuery('<ul/>', {
- 'class': 'list-unstyled'
- }).css('cursor', 'pointer').appendTo(column_fields_selected);
+ 'class': 'list-unstyled column-fields panel-body',
+ }).css('cursor', 'pointer')
+ .appendTo(column_fields_selected.find('.panel'));
this.chooser_form = jQuery('<div/>', {
- 'class': 'form-inline'
+ 'class': 'row form-inline'
}).appendTo(this.dialog.body);
var row_csv_param = jQuery('<div/>', {
@@ -1008,12 +1017,12 @@
this.expander_csv = jQuery('<div/>', {
'id': 'expander_csv',
- 'class': 'collapse'
+ 'class': 'collapse col-md-12 form-inline'
}).appendTo(row_csv_param);
var delimiter_label = jQuery('<label/>', {
'text': Sao.i18n.gettext('Delimiter:'),
- 'class': 'col-sm-2 control-label',
+ 'class': 'control-label',
'for': 'input-delimiter'
});
@@ -1033,13 +1042,14 @@
jQuery('<div/>', {
'class': 'form-group'
- }).append(delimiter_label).append(jQuery('<div/>', {
- 'class': 'col-sm-4'
- }).append(this.el_csv_delimiter)).appendTo(this.expander_csv);
+ }).append(delimiter_label)
+ .append(this.el_csv_delimiter)
+ .appendTo(this.expander_csv);
+ this.expander_csv.append(' ');
var quotechar_label = jQuery('<label/>', {
'text': Sao.i18n.gettext('Quote Char:'),
- 'class': 'col-sm-2 control-label',
+ 'class': 'control-label',
'for': 'input-quotechar'
});
@@ -1054,14 +1064,14 @@
jQuery('<div/>', {
'class': 'form-group'
- }).append(quotechar_label).append(jQuery('<div/>', {
- 'class': 'col-sm-4'
- }).append(this.el_csv_quotechar))
- .appendTo(this.expander_csv);
+ }).append(quotechar_label)
+ .append(this.el_csv_quotechar)
+ .appendTo(this.expander_csv);
+ this.expander_csv.append(' ');
var encoding_label = jQuery('<label/>', {
'text': Sao.i18n.gettext('Encoding:'),
- 'class': 'col-sm-2 control-label',
+ 'class': 'control-label',
'for': 'input-encoding'
});
@@ -1086,10 +1096,10 @@
jQuery('<div/>', {
'class': 'form-group'
- }).append(encoding_label).append(jQuery('<div/>', {
- 'class': 'col-sm-4'
- }).append(this.el_csv_encoding))
- .appendTo(this.expander_csv);
+ }).append(encoding_label)
+ .append(this.el_csv_encoding)
+ .appendTo(this.expander_csv);
+ this.expander_csv.append(' ');
this.el.modal('show');
this.el.on('hidden.bs.modal', function() {
@@ -1151,11 +1161,9 @@
}).append(this.file_input))
.appendTo(this.chooser_form);
- jQuery('<hr>').insertAfter(this.chooser_form);
-
var skip_label = jQuery('<label/>', {
'text': Sao.i18n.gettext('Lines to Skip:'),
- 'class': 'col-sm-2 control-label',
+ 'class': 'control-label',
'for': 'input-skip'
});
@@ -1168,10 +1176,10 @@
jQuery('<div/>', {
'class': 'form-group'
- }).append(skip_label).append(jQuery('<div/>', {
- 'class': 'col-sm-4'
- }).append(this.el_csv_skip))
- .appendTo(this.expander_csv);
+ }).append(skip_label)
+ .append(this.el_csv_skip)
+ .appendTo(this.expander_csv);
+ this.expander_csv.append(' ');
},
sig_sel_add: function(el_field) {
el_field = jQuery(el_field);
@@ -1211,29 +1219,29 @@
}
}.bind(this)).appendTo(parent_view);
parent_node[field].view = node;
-
- if (parent_node[field].relation) {
- node.prepend(' ');
- var expander_icon = Sao.common.ICONFACTORY
- .get_icon_img('tryton-arrow-right')
- .data('expanded', false)
- .click(function(e) {
- e.stopPropagation();
- var icon;
- var expanded = expander_icon.data('expanded');
- expander_icon.data('expanded', !expanded);
- if (expanded) {
- icon = 'tryton-arrow-right';
- node.next('ul').remove();
- } else {
- icon = 'tryton-arrow-down';
- this.on_row_expanded(parent_node[field]);
- }
-
Sao.common.ICONFACTORY.get_icon_url(icon).then(function(url) {
+ var expander_icon = Sao.common.ICONFACTORY
+ .get_icon_img('tryton-arrow-right')
+ .data('expanded', false)
+ .click(function(e) {
+ e.stopPropagation();
+ var icon;
+ var expanded = expander_icon.data('expanded');
+ expander_icon.data('expanded', !expanded);
+ if (expanded) {
+ icon = 'tryton-arrow-right';
+ node.next('ul').remove();
+ } else {
+ icon = 'tryton-arrow-down';
+ this.on_row_expanded(parent_node[field]);
+ }
+ Sao.common.ICONFACTORY.get_icon_url(icon)
+ .then(function(url) {
expander_icon.attr('src', url);
});
- }.bind(this)).prependTo(node);
- }
+ }.bind(this)).prependTo(node);
+ expander_icon.css(
+ 'visibility',
+ parent_node[field].relation ? 'visible' : 'hidden');
}.bind(this));
},
model_populate: function (fields, parent_node, prefix_field,
@@ -1458,13 +1466,16 @@
.appendTo(this.column_buttons);
var predefined_exports_column = jQuery('<div/>', {
- 'class': 'col-md-12'
- }).append(jQuery('<label/>', {
+ 'class': 'panel panel-default',
+ }).append(jQuery('<div/>', {
+ 'class': 'panel-heading',
+ }).append(jQuery('<h3/>', {
+ 'class': 'panel-title',
'text': Sao.i18n.gettext('Predefined Exports')
- })).appendTo(this.column_buttons);
+ }))).appendTo(this.column_buttons);
this.predef_exports_list = jQuery('<ul/>', {
- 'class': 'list-unstyled predef-exports'
+ 'class': 'list-unstyled predef-exports panel-body'
}).css('cursor', 'pointer')
.appendTo(predefined_exports_column);
@@ -1476,10 +1487,11 @@
jQuery('<div/>', {
'class': 'form-group'
}).append(jQuery('<div/>', {
- 'class': 'col-md-6'
+ 'class': 'checkbox',
}).append(jQuery('<label/>', {
'text': ' '+Sao.i18n.gettext('Add Field Names')
}).prepend(this.el_add_field_names))).appendTo(this.expander_csv);
+ this.expander_csv.append(' ');
},
view_populate: function(parent_node, parent_view) {
var names = Object.keys(parent_node).sort(function(a, b) {
@@ -1506,28 +1518,29 @@
}.bind(this)).appendTo(parent_view);
parent_node[name].view = node;
- if (parent_node[name].children) {
- node.prepend(' ');
- var expander_icon = Sao.common.ICONFACTORY
- .get_icon_img('tryton-arrow-right')
- .data('expanded', false)
- .click(function(e) {
- e.stopPropagation();
- var icon;
- var expanded = expander_icon.data('expanded');
- expander_icon.data('expanded', !expanded);
- if (expanded) {
- icon = 'tryton-arrow-right';
- node.next('ul').remove();
- } else {
- icon = 'tryton-arrow-down';
- this.on_row_expanded(parent_node[name]);
- }
-
Sao.common.ICONFACTORY.get_icon_url(icon).then(function(url) {
+ var expander_icon = Sao.common.ICONFACTORY
+ .get_icon_img('tryton-arrow-right')
+ .data('expanded', false)
+ .click(function(e) {
+ e.stopPropagation();
+ var icon;
+ var expanded = expander_icon.data('expanded');
+ expander_icon.data('expanded', !expanded);
+ if (expanded) {
+ icon = 'tryton-arrow-right';
+ node.next('ul').remove();
+ } else {
+ icon = 'tryton-arrow-down';
+ this.on_row_expanded(parent_node[name]);
+ }
+ Sao.common.ICONFACTORY.get_icon_url(icon)
+ .then(function(url) {
expander_icon.attr('src', url);
});
- }.bind(this)).prependTo(node);
- }
+ }.bind(this)).prependTo(node);
+ expander_icon.css(
+ 'visibility',
+ parent_node[name].children ? 'visible' : 'hidden');
}.bind(this));
},
model_populate: function(fields, parent_node, prefix_field,
