List view columns based on flexbox

- Used BEM naming for flat css classes

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",

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;
+}

frappe/public/js/frappe/list/header_select_all_like_filter.html

@@ -2,7 +2,7 @@
 <input class="list-select-all" type="checkbox"
 	title="{%= __("Select All") %}">
 {% } %}
-<span style="display: inline-block; width: 34px; vertical-align: middle;">
+<span class="liked-by-filter-button">
 	<i class="fa-fw octicon octicon-heart text-extra-muted not-liked like-action list-liked-by-me"
 		title="{%= __("Likes") %}"></i>
 </span>

frappe/public/js/frappe/list/list_item_main_1.html

@@ -0,0 +1,40 @@
+<div class="list-item--content ellipsis
+    {% if(col.type==="Subject") { %}
+        list-item--content__flex-2
+    {% } else { %}
+        hidden-xs
+    {% } %}
+    {% if(col.df && ["Int", "Float", "Currency", "Percent"].indexOf(col.df.fieldtype)!==-1) { %}text-right{% } %}"
+    {% if(col.type!=="Indicator" && col.title) { %}
+        title="{%= col.title + ": " + value %}"
+    {% } %}
+>
+    {% 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]) { %}
+        <img src="{%= data[col.df.options] %}" style="max-height: 30px; max-width: 100%;">
+        {% } else { %}
+        <div class="missing-image small"><span class="octicon octicon-circle-slash"></span></div>
+        {% } %}
+    {% } else if(col.fieldtype==="Select") { %}
+        <span class="filterable indicator {%= frappe.utils.guess_colour(value) %} ellipsis"
+            data-filter="{%= col.fieldname %},=,{%= value %}">{%= __(value) %}</span>
+    {% } else if(col.fieldtype==="Link") { %}
+        <a class="filterable text-muted grey ellipsis"
+            data-filter="{%= col.fieldname %},=,{%= value %}">{%= value %}</a>
+    {% } else { %}
+        <a class="filterable text-muted ellipsis"
+            data-filter="{%= col.fieldname %},=,{%= value %}">
+        {% if(formatters && formatters[col.fieldname]) { %}
+            {{ formatters[col.fieldname](value, col.df, data) }}
+        {% } else { %}
+            {{ frappe.format(value, col.df, null, data) }}
+        {% } %}
+        </a>
+    {% } %}
+</div>

frappe/public/js/frappe/list/list_item_main_head.html

@@ -1,29 +1,15 @@
-<div class="row">
-    {% 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) { %}
-        <div class="col-sm-{%= col.colspan %} list-col ellipsis h6 text-muted
-            {% if(col.type==="Subject") {
-				if (right_column) { %}
-					col-xs-9
-				{% } else { %}
-					col-xs-12
-				{% } %}
-			{% } else if(right_column && col.fieldname===right_column) { %}
-				col-xs-3
-			{% } else { %}
-				hidden-xs
-			{% } %}
-			{% if(col.df && ["Int", "Float", "Currency", "Percent"].indexOf(col.df.fieldtype)!==-1) { %}text-right{% } %}">
+<div class="list-item--content ellipsis h6 text-muted
+	{% if(col.type==="Subject") { %}
+		list-item--content__flex-2
+	{% } else { %}
+		hidden-xs
+	{% } %}
+	{% if(col.df && ["Int", "Float", "Currency", "Percent"].indexOf(col.df.fieldtype)!==-1) { %}text-right{% } %}"
+>
 
-			<span class="list-value">
-			{% if (col.type==="Subject") { %}
-				{%= frappe.render_template("header_select_all_like_filter", { _checkbox: _checkbox }) %}
-			{% } %}
-				<span class="list-col-title">{{ __(col.title) || __(col.label) || "" }}</span>
-			</span>
+	{% if (col.type==="Subject") { %}
+		{%= frappe.render_template("header_select_all_like_filter", { _checkbox: _checkbox }) %}
+	{% } %}
+	<span class="list-col-title">{{ __(col.title) || __(col.label) || "" }}</span>
 
-        </div>
-        {% } %}
-    {% } %}
-</div>
+</div>

frappe/public/js/frappe/list/list_item_row_1.html

@@ -0,0 +1,22 @@
+<div class="list-item">
+    {%= main %}
+
+    <!-- id -->
+    {% if (meta.title_field && !settings.hide_name_column) {
+        var is_different = data.name !== data[meta.title_field];
+    %}
+    <div class="list-item--content text-right list-row-id">
+        {% if (is_different) { %}
+        <a class="text-muted" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">
+            {%= data.name %}</a>
+        {% } %}
+    </div>
+    {% } %}
+
+    <!-- comment -->
+    <div class="list-item--content text-right list-row-right" style="padding-left:0px">
+        <div class="visible-xs list-row-indicator">{%= indicator_dot %}</div>
+        <!-- comments count and assigned to section -->
+        {%= frappe.render_template("item_assigned_to_comment_count", { data: data }) %}
+    </div>
+</div>

frappe/public/js/frappe/list/list_item_row_head.html

@@ -1,22 +1,11 @@
-<div class="list-row list-row-head" data-list-renderer="{{list.name}}">
-    <div class="row doclist-row">
-        <div class="col-xs-10
-			{% if (list.meta.title_field && !list.settings.hide_name_column) { %}
-                col-sm-8
-            {% } else { %}
-                col-sm-10
-            {% } %} list-row-left">
-            <!-- title + columns -->
-            {%= main %}
-        </div>
+<div class="list-item list-item__head" data-list-renderer="{{list.name}}">
+    <!-- title + columns -->
+    {%= main %}
 
-        <!-- id -->
-        {% if (list.meta.title_field && !list.settings.hide_name_column) { %}
-        <div class="list-col col-sm-2 hidden-xs text-right">
-        </div>
-        {% } %}
-
-        <!-- comment -->
-        <div class="list-col col-sm-2 hidden-xs text-right list-row-right"></div>
-    </div>
+    <!-- id -->
+    {% if(!list.settings.hide_name_column) { %}
+    <div class="list-item--content"></div>
+    {% } %}
+    <!-- comment -->
+    <div class="list-item--content hidden-xs text-right list-row-right"></div>
 </div>

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 = $('<div class="list-row">')
-				.data("data", me.meta)
-				.appendTo(me.wrapper).get(0);
-			me.render_item(row, value);
+		var $list_items = $(`
+			<div class="list-items">
+			</div>
+		`);
+		me.wrapper.append($list_items);
+
+		values.map(value => {
+			const $item = $(this.get_item_html(value));
+			const $item_container = $('<div class="list-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 });
 	},

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;
+	}
 }