diff --git a/frappe/public/build.json b/frappe/public/build.json index fdb6da93c5..09603109e9 100755 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -233,7 +233,9 @@ "public/js/frappe/list/list_sidebar.html", "public/js/frappe/list/list_sidebar_stat.html", "public/js/frappe/list/list_item_main.html", + "public/js/frappe/list/list_item_main_1.html", "public/js/frappe/list/list_item_row.html", + "public/js/frappe/list/list_item_row_1.html", "public/js/frappe/list/list_item_main_head.html", "public/js/frappe/list/list_item_row_head.html", "public/js/frappe/list/list_item_subject.html", diff --git a/frappe/public/css/list.css b/frappe/public/css/list.css index c8866da49c..f8e02603c4 100644 --- a/frappe/public/css/list.css +++ b/frappe/public/css/list.css @@ -152,14 +152,6 @@ } .filterable { cursor: pointer; - display: inline-block; - text-overflow: ellipsis; -} -.col-sm-2:not(.list-row-right) .filterable, -.col-sm-3:not(.list-row-right) .filterable { - max-width: 145px; - overflow: hidden; - width: 100%; } .doclist-row .label { margin-right: 8px; @@ -392,3 +384,43 @@ .inbox-value { padding-top: 2px; } +.list-items { + width: 100%; + font-size: 12px; +} +.list-item-container { + border-bottom: 1px solid #d1d8dd; +} +.list-item-container:last-child { + border-bottom: none; +} +.list-item { + display: flex; + align-items: center; + height: 40px; + padding-left: 15px; +} +.list-item__head { + background-color: #F7FAFC; + border-bottom: 1px solid #d1d8dd; +} +.list-item input[type=checkbox] { + margin: 0; +} +.list-item .liked-by, +.list-item .liked-by-filter-button { + display: inline-block; + width: 20px; + margin-left: 5px; + margin-right: 10px; +} +.list-item--content { + flex: 1; + margin-right: 15px; +} +.list-item--content__flex-2 { + flex: 2; +} +.list-item--content:last-child { + margin-right: 5px; +} diff --git a/frappe/public/js/frappe/list/header_select_all_like_filter.html b/frappe/public/js/frappe/list/header_select_all_like_filter.html index 324f8cb71f..239a08c4fb 100644 --- a/frappe/public/js/frappe/list/header_select_all_like_filter.html +++ b/frappe/public/js/frappe/list/header_select_all_like_filter.html @@ -2,7 +2,7 @@ {% } %} - + \ No newline at end of file diff --git a/frappe/public/js/frappe/list/list_item_main_1.html b/frappe/public/js/frappe/list/list_item_main_1.html new file mode 100644 index 0000000000..8dcdb02e1d --- /dev/null +++ b/frappe/public/js/frappe/list/list_item_main_1.html @@ -0,0 +1,40 @@ +
+ {% if (col.type==="Subject") { %} + {%= subject %} + {% } else if (col.type==="Indicator") { %} + {%= indicator %} + {% } else if (col.render) { %} + {%= col.render(data) %} + {% } else if (col.fieldtype==="Image") { %} + {% if(data[col.df.options]) { %} + + {% } else { %} +
+ {% } %} + {% } else if(col.fieldtype==="Select") { %} + {%= __(value) %} + {% } else if(col.fieldtype==="Link") { %} + {%= value %} + {% } else { %} + + {% if(formatters && formatters[col.fieldname]) { %} + {{ formatters[col.fieldname](value, col.df, data) }} + {% } else { %} + {{ frappe.format(value, col.df, null, data) }} + {% } %} + + {% } %} +
\ No newline at end of file diff --git a/frappe/public/js/frappe/list/list_item_main_head.html b/frappe/public/js/frappe/list/list_item_main_head.html index d8fb694ca9..c2ae973eb7 100644 --- a/frappe/public/js/frappe/list/list_item_main_head.html +++ b/frappe/public/js/frappe/list/list_item_main_head.html @@ -1,29 +1,15 @@ -
- {% var total_cols=0; for (var i=0, l=columns.length; i < l; i++ ) { - var col = columns[i]; total_cols += parseInt(col.colspan); %} - {% if (total_cols <= 12) { %} -
+
- - {% if (col.type==="Subject") { %} - {%= frappe.render_template("header_select_all_like_filter", { _checkbox: _checkbox }) %} - {% } %} - {{ __(col.title) || __(col.label) || "" }} - + {% if (col.type==="Subject") { %} + {%= frappe.render_template("header_select_all_like_filter", { _checkbox: _checkbox }) %} + {% } %} + {{ __(col.title) || __(col.label) || "" }} -
- {% } %} - {% } %} -
+
\ No newline at end of file diff --git a/frappe/public/js/frappe/list/list_item_row_1.html b/frappe/public/js/frappe/list/list_item_row_1.html new file mode 100644 index 0000000000..c0806249d1 --- /dev/null +++ b/frappe/public/js/frappe/list/list_item_row_1.html @@ -0,0 +1,22 @@ +
+ {%= main %} + + + {% if (meta.title_field && !settings.hide_name_column) { + var is_different = data.name !== data[meta.title_field]; + %} +
+ {% if (is_different) { %} + + {%= data.name %} + {% } %} +
+ {% } %} + + +
+
{%= indicator_dot %}
+ + {%= frappe.render_template("item_assigned_to_comment_count", { data: data }) %} +
+
diff --git a/frappe/public/js/frappe/list/list_item_row_head.html b/frappe/public/js/frappe/list/list_item_row_head.html index 56de9b684a..0d59acb354 100644 --- a/frappe/public/js/frappe/list/list_item_row_head.html +++ b/frappe/public/js/frappe/list/list_item_row_head.html @@ -1,22 +1,11 @@ -
-
-
- - {%= main %} -
+
+ + {%= main %} - - {% if (list.meta.title_field && !list.settings.hide_name_column) { %} - - {% } %} - - - -
+ + {% if(!list.settings.hide_name_column) { %} +
+ {% } %} + +
diff --git a/frappe/public/js/frappe/list/list_renderer.js b/frappe/public/js/frappe/list/list_renderer.js index 0030c8a3b9..14719909c1 100644 --- a/frappe/public/js/frappe/list/list_renderer.js +++ b/frappe/public/js/frappe/list/list_renderer.js @@ -300,11 +300,18 @@ frappe.views.ListRenderer = Class.extend({ render_view: function (values) { var me = this; - values.map(function (value) { - var row = $('
') - .data("data", me.meta) - .appendTo(me.wrapper).get(0); - me.render_item(row, value); + var $list_items = $(` +
+
+ `); + me.wrapper.append($list_items); + + values.map(value => { + const $item = $(this.get_item_html(value)); + const $item_container = $('
').append($item); + + $list_items.append($item_container); + this.render_tags($item_container, value); }); this.setup_filterable(); @@ -325,16 +332,31 @@ frappe.views.ListRenderer = Class.extend({ // returns html for a data item, // usually based on a template get_item_html: function (data) { - var main = frappe.render_template('list_item_main', { - data: data, - columns: this.columns, - formatters: this.settings.formatters, - subject: this.get_subject_html(data, true), - indicator: this.get_indicator_html(data), - right_column: this.settings.right_column - }); - - return frappe.render_template('list_item_row', { + // var main = frappe.render_template('list_item_main_1', { + // data: data, + // columns: this.columns, + // formatters: this.settings.formatters, + // subject: this.get_subject_html(data, true), + // indicator: this.get_indicator_html(data), + // right_column: this.settings.right_column + // }); + + // Max 4 columns to be rendered (including subject) + const columns = this.columns.slice(0, 4); + + var main = columns.map(column => + frappe.render_template('list_item_main_1', { + data: data, + col: column, + value: data[column.fieldname], + formatters: this.settings.formatters, + subject: this.get_subject_html(data, true), + indicator: this.get_indicator_html(data), + right_column: this.settings.right_column + }) + ).join(""); + + return frappe.render_template('list_item_row_1', { data: data, main: main, settings: this.settings, @@ -345,12 +367,24 @@ frappe.views.ListRenderer = Class.extend({ }, get_header_html: function () { - var main = frappe.render_template('list_item_main_head', { - columns: this.columns, - right_column: this.settings.right_column, - _checkbox: ((frappe.model.can_delete(this.doctype) || this.settings.selectable) - && !this.no_delete) - }); + + const columns = this.columns.slice(0, 4); + + var main = columns.map(column => + frappe.render_template('list_item_main_head', { + col: column, + right_column: this.settings.right_column, + _checkbox: ((frappe.model.can_delete(this.doctype) || this.settings.selectable) + && !this.no_delete) + }) + ).join(""); + + // var main = frappe.render_template('list_item_main_head', { + // columns: this.columns, + // right_column: this.settings.right_column, + // _checkbox: ((frappe.model.can_delete(this.doctype) || this.settings.selectable) + // && !this.no_delete) + // }); return frappe.render_template('list_item_row_head', { main: main, list: this }); }, diff --git a/frappe/public/less/list.less b/frappe/public/less/list.less index 2131b718c9..4826b8c2bd 100644 --- a/frappe/public/less/list.less +++ b/frappe/public/less/list.less @@ -189,15 +189,15 @@ .filterable { cursor: pointer; - display: inline-block; - text-overflow: ellipsis; + // display: inline-block; + // text-overflow: ellipsis; } .col-sm-2:not(.list-row-right) .filterable, .col-sm-3:not(.list-row-right) .filterable { - max-width: 145px; - overflow: hidden; - width: 100%; + // max-width: 145px; + // overflow: hidden; + // width: 100%; } @@ -477,4 +477,57 @@ .inbox-value { padding-top: 2px; +} + +// new refactor + +.list-items { + width: 100%; + font-size: @text-medium; +} + +.list-item-container { + border-bottom: 1px solid @border-color; + + &:last-child { + border-bottom: none; + } +} + +.list-item { + display: flex; + align-items: center; + + height: 40px; + padding-left: 15px; + + + &__head { + background-color: @panel-bg; + border-bottom: 1px solid @border-color; + } + + input[type=checkbox] { + margin: 0; + } + + .liked-by, .liked-by-filter-button { + display: inline-block; + width: 20px; + margin-left: 5px; + margin-right: 10px; + } +} + +.list-item--content { + flex: 1; + margin-right: 15px; + + &__flex-2 { + flex: 2; + } + + &:last-child { + margin-right: 5px; + } } \ No newline at end of file