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:
parent
833259cf77
commit
eea0943c4c
9 changed files with 156 additions and 20 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue