From 7c5483afc0af5189f2c63fd914ddd45bacd3035e Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Sat, 1 Apr 2017 18:41:22 +0530 Subject: [PATCH 1/3] List view columns based on flexbox - Used BEM naming for flat css classes --- frappe/public/build.json | 2 + frappe/public/css/list.css | 48 ++++++++++-- .../list/header_select_all_like_filter.html | 2 +- .../js/frappe/list/list_item_main_1.html | 40 ++++++++++ .../js/frappe/list/list_item_main_head.html | 40 ++++------ .../js/frappe/list/list_item_row_1.html | 22 ++++++ .../js/frappe/list/list_item_row_head.html | 29 +++---- frappe/public/js/frappe/list/list_renderer.js | 76 ++++++++++++++----- frappe/public/less/list.less | 63 +++++++++++++-- 9 files changed, 240 insertions(+), 82 deletions(-) create mode 100644 frappe/public/js/frappe/list/list_item_main_1.html create mode 100644 frappe/public/js/frappe/list/list_item_row_1.html 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 From a84a40cfca976fe8ea04abddcaeb2f13c43e2a29 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Sun, 2 Apr 2017 17:59:07 +0530 Subject: [PATCH 2/3] Cleanup html, add css for mobile, fixed class names in code --- frappe/public/build.json | 2 - frappe/public/css/list.css | 35 ++++++-- .../list/header_select_all_like_filter.html | 2 +- .../list/item_assigned_to_comment_count.html | 32 ++++--- .../public/js/frappe/list/list_item_main.html | 85 +++++++++---------- .../js/frappe/list/list_item_main_1.html | 40 --------- .../js/frappe/list/list_item_main_head.html | 6 +- .../public/js/frappe/list/list_item_row.html | 35 +++----- .../js/frappe/list/list_item_row_1.html | 22 ----- .../js/frappe/list/list_item_row_head.html | 6 +- .../js/frappe/list/list_item_subject.html | 2 +- frappe/public/js/frappe/list/list_view.js | 4 +- .../js/frappe/views/gantt/gantt_view.js | 2 +- .../js/frappe/views/kanban/kanban_board.js | 6 +- frappe/public/less/list.less | 39 +++++++-- 15 files changed, 146 insertions(+), 172 deletions(-) delete mode 100644 frappe/public/js/frappe/list/list_item_main_1.html delete mode 100644 frappe/public/js/frappe/list/list_item_row_1.html diff --git a/frappe/public/build.json b/frappe/public/build.json index 09603109e9..fdb6da93c5 100755 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -233,9 +233,7 @@ "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 f8e02603c4..ff3f0a7092 100644 --- a/frappe/public/css/list.css +++ b/frappe/public/css/list.css @@ -386,7 +386,6 @@ } .list-items { width: 100%; - font-size: 12px; } .list-item-container { border-bottom: 1px solid #d1d8dd; @@ -399,8 +398,17 @@ align-items: center; height: 40px; padding-left: 15px; + font-size: 12px; } -.list-item__head { +@media (max-width: 767px) { + .list-item { + height: 50px; + padding-left: 10px; + font-size: 14px; + font-weight: normal; + } +} +.list-item--head { background-color: #F7FAFC; border-bottom: 1px solid #d1d8dd; } @@ -414,13 +422,30 @@ margin-left: 5px; margin-right: 10px; } -.list-item--content { +.list-item__content { flex: 1; margin-right: 15px; + display: flex; + align-items: center; } -.list-item--content__flex-2 { +.list-item__content--flex-2 { flex: 2; } -.list-item--content:last-child { +.list-item__content--activity { + justify-content: flex-end; margin-right: 5px; } +.list-item__content--activity .list-row-modified, +.list-item__content--activity .avatar-small { + margin-right: 10px; +} +.list-item__content--indicator span::before { + height: 12px; + width: 12px; +} +.list-item__content--id { + justify-content: flex-end; +} +.frappe-timestamp { + white-space: nowrap; +} 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 239a08c4fb..1cb81c9dc9 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 @@ -1,5 +1,5 @@ {% if (_checkbox) { %} - {% } %} diff --git a/frappe/public/js/frappe/list/item_assigned_to_comment_count.html b/frappe/public/js/frappe/list/item_assigned_to_comment_count.html index 676fab1457..91df275ac9 100644 --- a/frappe/public/js/frappe/list/item_assigned_to_comment_count.html +++ b/frappe/public/js/frappe/list/item_assigned_to_comment_count.html @@ -1,17 +1,15 @@ - + + {%= comment_when(data.modified, true) %} + +{% if (data._assign_list.length) { %} + + {%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %} +{% } else { %} + +{% } %} + + + {%= (data._comment_count > 99 ? "99+" : data._comment_count) || 0 %} + diff --git a/frappe/public/js/frappe/list/list_item_main.html b/frappe/public/js/frappe/list/list_item_main.html index 42f00765ea..928943abcd 100644 --- a/frappe/public/js/frappe/list/list_item_main.html +++ b/frappe/public/js/frappe/list/list_item_main.html @@ -1,49 +1,40 @@ -
- {% var total_cols=0; for (var i=0, l=columns.length; i < l; i++ ) { - var col = columns[i], value=data[col.fieldname]; total_cols += parseInt(col.colspan); %} - {% if (total_cols <= 12) { %} -
- {% if(col.type!=="Indicator") { %}{% } %} - {% 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) }} - {% } %} - {% } %} - {% if(col.type!=="Indicator") { %}{% } %} -
+
+ {% 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_1.html b/frappe/public/js/frappe/list/list_item_main_1.html deleted file mode 100644 index 8dcdb02e1d..0000000000 --- a/frappe/public/js/frappe/list/list_item_main_1.html +++ /dev/null @@ -1,40 +0,0 @@ -
- {% 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 c2ae973eb7..9dc8f16b58 100644 --- a/frappe/public/js/frappe/list/list_item_main_head.html +++ b/frappe/public/js/frappe/list/list_item_main_head.html @@ -1,6 +1,6 @@ -
{{ __(col.title) || __(col.label) || "" }} + {{ __(col.title) || __(col.label) || "" }}
\ No newline at end of file diff --git a/frappe/public/js/frappe/list/list_item_row.html b/frappe/public/js/frappe/list/list_item_row.html index 0db51d0a25..d67feabf3b 100644 --- a/frappe/public/js/frappe/list/list_item_row.html +++ b/frappe/public/js/frappe/list/list_item_row.html @@ -1,31 +1,24 @@ -
-
- - {%= main %} -
+
+ {%= main %} {% if (meta.title_field && !settings.hide_name_column) { - var is_different = data.name !== data[meta.title_field]; - %} -