ListView Fixes (#4691)

* List Row click fix

* Fix Date Editing

* Firefox checkbox fix

* Checkbox fix

* Add standard fields in doctype, show all valid fields in Child Doctype

* codacy

* FIx List View column layout

* Validate column name

* [FileView] Add Created On column, Toggle Grid View
This commit is contained in:
Faris Ansari 2017-12-28 11:48:13 +05:30 committed by GitHub
parent 833259cf77
commit eea0943c4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 156 additions and 20 deletions

View file

@ -981,6 +981,12 @@ li.user-progress .progress-bar {
.note-editor.note-frame .note-editing-area .note-editable {
color: #36414C;
}
.checkbox input[type=checkbox] {
margin-left: 0;
}
.input-area input[type=checkbox] {
margin-left: -20px;
}
input[type="checkbox"] {
position: relative;
left: -999999px;
@ -1024,11 +1030,19 @@ input[type="checkbox"]:focus {
@-moz-document url-prefix() {
input[type="checkbox"] {
visibility: visible;
left: 0;
}
}
@supports (-moz-appearance: none) {
input[type="checkbox"] {
visibility: visible;
left: 0;
}
}
@supports (-ms-ime-align:auto) {
input[type="checkbox"] {
visibility: visible;
left: 0;
}
}
.color-picker {

View file

@ -109,6 +109,7 @@
}
.list-row .level-left {
flex: 3;
width: 75%;
}
.list-row .level-right {
flex: 1;
@ -499,3 +500,19 @@ input.list-row-checkbox {
.frappe-timestamp {
white-space: nowrap;
}
.file-grid {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.file-grid a {
height: 100%;
}
.file-wrapper {
width: 120px;
flex-direction: column;
align-items: center;
}
.file-title {
margin-top: 5px;
}

View file

@ -534,8 +534,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
${ liked_by.length > 99 ? __("99") + '+' : __(liked_by.length || '')}
</span>
</span>
<span class="level-item ${seen} ellipsis" title="${subject}">
<a class="ellipsis" href="${this.get_form_link(doc)}" title="${subject}">
<span class="level-item ${seen} ellipsis" title="${encodeURI(subject)}">
<a class="ellipsis" href="${this.get_form_link(doc)}" title="${encodeURI(subject)}">
${subject}
</a>
</span>
@ -604,7 +604,8 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
}
// open form
const link = $(this).find('.list-subject a').get(0);
const $row = $(e.currentTarget);
const link = $row.find('.list-subject a').get(0);
if (link) {
window.location.href = link.href;
return false;

View file

@ -543,6 +543,7 @@ frappe.utils = {
},
is_image_file: function(filename) {
if (!filename) return false;
// url can have query params
filename = filename.split('?')[0];
return (/\.(gif|jpg|jpeg|tiff|png|svg)$/i).test(filename);

View file

@ -75,6 +75,13 @@ frappe.views.FileView = class FileView extends frappe.views.ListView {
}, __('Enter folder name'), __('Create'));
}
},
{
label: __('Toggle Grid View'),
action: () => {
frappe.views.FileView.grid_view = !frappe.views.FileView.grid_view;
this.refresh();
}
},
{
label: __('Import Zip'),
action: () => {
@ -109,7 +116,7 @@ frappe.views.FileView = class FileView extends frappe.views.ListView {
this._fields = this.meta.fields
.filter(df => frappe.model.is_value_type(df.fieldtype) && !df.hidden)
.map(df => df.fieldname)
.concat(['name', 'modified']);
.concat(['name', 'modified', 'creation']);
}
update_data(data) {
@ -127,8 +134,10 @@ frappe.views.FileView = class FileView extends frappe.views.ListView {
let title = d.file_name || d.file_url;
title = title.slice(0, 60);
d._title = title;
d.icon_class = icon_class;
d._title = `
d.subject_html = `
<i class="${icon_class} text-muted" style="width: 16px;"></i>
<span>${title}</span>
${d.is_private ? '<i class="fa fa-lock fa-fw text-warning"></i>' : ''}
@ -153,41 +162,88 @@ frappe.views.FileView = class FileView extends frappe.views.ListView {
before_render() {
super.before_render();
frappe.model.user_settings.save('File', 'grid_view', frappe.views.FileView.grid_view);
this.save_view_user_settings({
last_folder: this.current_folder
last_folder: this.current_folder,
});
}
render() {
this.$result.removeClass('file-grid');
if (frappe.views.FileView.grid_view) {
this.render_grid_view();
} else {
super.render();
}
}
render_grid_view() {
let html = '';
html = this.data.map(d => {
return `
<a href="${this.get_route_url(d)}">
<div class="file-wrapper padding flex small">
<div class="file-icon text-muted">
<span class="${d.icon_class} mega-octicon"></span>
</div>
<div class="file-title ellipsis">${d._title}</div>
</div>
</a>
`;
}).join('');
this.$result.addClass('file-grid');
this.$result.html(html);
}
get_header_html() {
let subject_html = `
<div class="list-row-col list-subject level">
<input class="level-item list-check-all hidden-xs" type="checkbox" title="${__("Select All")}">
<span class="level-item">${__('File Name')}</span>
</div>
<div class="list-row-col ellipsis hidden-xs text-right">
<div class="list-row-col ellipsis hidden-xs">
<span>${__('File Size')}</span>
</div>
<div class="list-row-col ellipsis hidden-xs">
<span>${__('Created On')}</span>
</div>
`;
return this.get_header_html_skeleton(subject_html, '<span class="list-count"></span>');
}
get_route_url(file) {
return file.is_folder ? '#List/File/' + file.name : this.get_form_link(file);
}
get_left_html(file) {
const file_size = frappe.form.formatters.FileSize(file.file_size);
const route_url = file.is_folder ? '#List/File/' + file.name : this.get_form_link(file);
const route_url = this.get_route_url(file);
let created_on;
const [date] = file.creation.split(' ');
if (date === frappe.datetime.now_date()) {
created_on = comment_when(file.creation);
} else {
created_on = frappe.datetime.str_to_user(date);
}
return `
<div class="list-row-col ellipsis list-subject level">
<input class="level-item list-row-checkbox hidden-xs" type="checkbox" data-name="${file.name}">
<span class="level-item ellipsis" title="${file.file_name}">
<a class="ellipsis" href="${route_url}" title="${file.file_name}">
${file._title}
${file.subject_html}
</a>
</span>
</div>
<div class="list-row-col ellipsis hidden-xs text-muted text-right">
<div class="list-row-col ellipsis hidden-xs text-muted">
<span>${file_size}</span>
</div>
<div class="list-row-col ellipsis hidden-xs text-muted">
<span>${created_on}</span>
</div>
`;
}
@ -263,4 +319,6 @@ frappe.views.FileView = class FileView extends frappe.views.ListView {
$cut_btn.addClass('hide');
}
}
};
};
frappe.views.FileView.grid_view = frappe.get_user_settings('File').grid_view || false;

View file

@ -162,12 +162,18 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
}
],
primary_action: ({ column, insert_before }) => {
if (!columns_in_picker.map(col => col.value).includes(column)) {
frappe.show_alert(__('Invalid column'));
d.hide();
return;
}
let doctype = this.doctype;
if (column.includes(',')) {
[column, doctype] = column.split(',');
}
let index = datatabe_col.colIndex;
if (insert_before) {
index = index - 1;
@ -189,9 +195,10 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
const control = this.render_editing_input(colIndex, value, parent);
if (!control) return false;
control.df.change = () => control.set_focus();
return {
initValue: (value) => {
control.set_focus();
return control.set_value(value);
},
setValue: (value) => {
@ -353,17 +360,19 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
get_columns_for_picker() {
let out = {};
let doctype_fields = frappe.meta.get_docfields(this.doctype).filter(df =>
const standard_fields_filter = df =>
!in_list(frappe.model.no_value_type, df.fieldtype) &&
!df.report_hide && df.fieldname !== 'naming_series' &&
!df.hidden
);
!df.hidden;
let doctype_fields = frappe.meta.get_docfields(this.doctype).filter(standard_fields_filter);
doctype_fields = [{
label: __('ID'),
fieldname: 'name',
fieldtype: 'Data'
}].concat(doctype_fields);
}].concat(doctype_fields, frappe.model.std_fields);
out[this.doctype] = doctype_fields;
@ -372,9 +381,7 @@ frappe.views.ReportView = class ReportView extends frappe.views.ListView {
table_fields.forEach(df => {
const cdt = df.options;
const child_table_fields =
frappe.meta.get_docfields(cdt)
.filter(df => df.in_list_view);
const child_table_fields = frappe.meta.get_docfields(cdt).filter(standard_fields_filter);
out[cdt] = child_table_fields;
});

File diff suppressed because one or more lines are too long

View file

@ -893,6 +893,14 @@ li.user-progress {
color: @text-color;
}
.checkbox input[type=checkbox] {
margin-left: 0;
}
.input-area input[type=checkbox] {
margin-left: -20px;
}
// custom font awesome checkbox
input[type="checkbox"] {
position: relative;
@ -944,6 +952,14 @@ input[type="checkbox"] {
@-moz-document url-prefix() {
input[type="checkbox"] {
visibility: visible;
left: 0;
}
}
@supports (-moz-appearance: none) {
input[type="checkbox"] {
visibility: visible;
left: 0;
}
}
@ -952,6 +968,7 @@ input[type="checkbox"] {
@supports (-ms-ime-align:auto) {
input[type="checkbox"] {
visibility: visible;
left: 0;
}
}

View file

@ -134,6 +134,7 @@
.level-left {
flex: 3;
width: 75%;
}
.level-right {
flex: 1;
@ -605,3 +606,23 @@ input.list-check-all, input.list-row-checkbox {
.frappe-timestamp {
white-space: nowrap;
}
.file-grid {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
a {
height: 100%;
}
}
.file-wrapper {
width: 120px;
flex-direction: column;
align-items: center;
}
.file-title {
margin-top: 5px;
}