List view fixes (#5260)

* Listview fixes

- fix search icon in standard filter frappe/erpnext#12555
- show skeleton while loading list rows

* Optimize remove_script_and_style
This commit is contained in:
Faris Ansari 2018-03-24 12:06:38 +05:30 committed by Rushabh Mehta
parent 42d737c030
commit ed8a8dabd3
3 changed files with 42 additions and 25 deletions

View file

@ -33,12 +33,19 @@ frappe.dom = {
document.getElementsByTagName('head')[0].appendChild(el);
},
remove_script_and_style: function(txt) {
const evil_tags = ["script", "style", "noscript", "title", "meta", "base", "head"];
const regex = new RegExp(evil_tags.map(tag => `<${tag}>.*<\\/${tag}>`).join('|'));
if (!regex.test(txt)) {
// no evil tags found, skip the DOM method entirely!
return txt;
}
var div = document.createElement('div');
div.innerHTML = txt;
var found = false;
["script", "style", "noscript", "title", "meta", "base", "head"].forEach(function(e, i) {
evil_tags.forEach(function(e) {
var elements = div.getElementsByTagName(e);
var i = elements.length;
i = elements.length;
while (i--) {
found = true;
elements[i].parentNode.removeChild(elements[i]);

View file

@ -225,7 +225,7 @@ frappe.views.BaseList = class BaseList {
}
setup_result_area() {
this.$result = $(`<div class="result">`).hide();
this.$result = $(`<div class="result">`);
this.$frappe_list.append(this.$result);
}
@ -531,19 +531,6 @@ class FilterArea {
}
make_standard_filters() {
$(
`<div class="flex justify-center align-center">
<span class="octicon octicon-search text-muted small"></span>
</div>`
)
.css({
height: '30px',
width: '20px',
marginRight: '-2px',
marginLeft: '10px'
})
.prependTo(this.standard_filters_wrapper);
let fields = [
{
fieldtype: 'Data',
@ -602,6 +589,21 @@ class FilterArea {
}
fields.map(df => this.list_view.page.add_field(df));
// search icon in name filter
$('<span class="octicon octicon-search text-muted small"></span>')
.appendTo(this.list_view.page.fields_dict.name.$wrapper)
.css({
'position': 'absolute',
'z-index': '1',
'right': '7px',
'top': '9px',
'font-size': '90%'
});
this.list_view.page.fields_dict.name.$wrapper
.find('.form-control')
.css('padding-right', '2em');
}
get_standard_filters() {

View file

@ -145,6 +145,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
setup_view() {
this.setup_columns();
this.render_header();
this.render_skeleton();
this.setup_events();
this.settings.onload && this.settings.onload(this);
}
@ -233,10 +235,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
</div>`;
}
freeze(show) {
this.$result.find('.list-header-meta').html(__('Refreshing') + '...');
this.$result.find('.checkbox-actions').toggle(show);
this.$result.find('.list-header-subject').toggle(!show);
freeze() {
this.$result.find('.list-count').html(`<span>${__('Refreshing')}...</span>`);
}
get_args() {
@ -264,6 +264,18 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
}
}
render_header() {
if (this.$result.find('.list-row-head').length === 0) {
// append header once
this.$result.prepend(this.get_header_html());
}
}
render_skeleton() {
const $row = this.get_list_row_html_skeleton('<div><input type="checkbox" /></div>');
this.$result.append($row.repeat(3));
}
before_render() {
this.settings.before_render && this.settings.before_render();
frappe.model.user_settings.save(this.doctype, 'last_view', this.view_name);
@ -274,12 +286,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
}
render() {
this.$result.find('.list-row-container').remove();
if (this.data.length > 0) {
this.$result.find('.list-row-container').remove();
if (this.$result.find('.list-row-head').length === 0) {
// append header once
this.$result.prepend(this.get_header_html());
}
// append rows
this.$result.append(
this.data.map(doc => this.get_list_row_html(doc)).join('')