[Image View] added flag on Customize Form to switch from List to Image view

frappe/core/doctype/doctype/doctype.json

@@ -3,6 +3,7 @@
  "allow_import": 0, 
  "allow_rename": 1, 
  "autoname": "Prompt", 
+ "beta": 0, 
  "creation": "2013-02-18 13:36:19", 
  "custom": 0, 
  "description": "DocType is a Table / Form in the application.", 
@@ -239,6 +240,32 @@
    "set_only_once": 0, 
    "unique": 0
   }, 
+  {
+   "allow_on_submit": 0, 
+   "bold": 0, 
+   "collapsible": 0, 
+   "depends_on": "eval: doc.image_field", 
+   "fieldname": "image_view", 
+   "fieldtype": "Check", 
+   "hidden": 0, 
+   "ignore_user_permissions": 0, 
+   "ignore_xss_filter": 0, 
+   "in_filter": 0, 
+   "in_list_view": 0, 
+   "label": "Image View", 
+   "length": 0, 
+   "no_copy": 0, 
+   "permlevel": 0, 
+   "precision": "", 
+   "print_hide": 0, 
+   "print_hide_if_no_value": 0, 
+   "read_only": 0, 
+   "report_hide": 0, 
+   "reqd": 0, 
+   "search_index": 0, 
+   "set_only_once": 0, 
+   "unique": 0
+  }, 
   {
    "allow_on_submit": 0, 
    "bold": 0, 
@@ -1097,7 +1124,7 @@
  "issingle": 0, 
  "istable": 0, 
  "max_attachments": 0, 
- "modified": "2016-05-02 18:02:03.227684", 
+ "modified": "2016-06-01 12:28:01.048158", 
  "modified_by": "Administrator", 
  "module": "Core", 
  "name": "DocType", 

frappe/custom/doctype/customize_form/customize_form.json

@@ -3,6 +3,7 @@
  "allow_import": 0, 
  "allow_rename": 0, 
  "autoname": "DL.####", 
+ "beta": 0, 
  "creation": "2013-01-29 17:55:08", 
  "custom": 0, 
  "docstatus": 0, 
@@ -159,6 +160,32 @@
    "set_only_once": 0, 
    "unique": 0
   }, 
+  {
+   "allow_on_submit": 0, 
+   "bold": 0, 
+   "collapsible": 0, 
+   "depends_on": "eval: doc.image_field", 
+   "fieldname": "image_view", 
+   "fieldtype": "Check", 
+   "hidden": 0, 
+   "ignore_user_permissions": 0, 
+   "ignore_xss_filter": 0, 
+   "in_filter": 0, 
+   "in_list_view": 0, 
+   "label": "Image View", 
+   "length": 0, 
+   "no_copy": 0, 
+   "permlevel": 0, 
+   "precision": "", 
+   "print_hide": 0, 
+   "print_hide_if_no_value": 0, 
+   "read_only": 0, 
+   "report_hide": 0, 
+   "reqd": 0, 
+   "search_index": 0, 
+   "set_only_once": 0, 
+   "unique": 0
+  }, 
   {
    "allow_on_submit": 0, 
    "bold": 0, 
@@ -414,13 +441,14 @@
  "hide_toolbar": 1, 
  "icon": "icon-glass", 
  "idx": 1, 
+ "image_view": 0, 
  "in_create": 0, 
  "in_dialog": 0, 
  "is_submittable": 0, 
  "issingle": 1, 
  "istable": 0, 
  "max_attachments": 0, 
- "modified": "2016-04-14 13:18:35.095815", 
+ "modified": "2016-06-01 12:29:28.272410", 
  "modified_by": "Administrator", 
  "module": "Custom", 
  "name": "Customize Form", 

frappe/custom/doctype/customize_form/customize_form.py

@@ -23,7 +23,8 @@ doctype_properties = {
 	'read_only_onload': 'Check',
 	'allow_copy': 'Check',
 	'quick_entry': 'Check',
-	'max_attachments': 'Int'
+	'max_attachments': 'Int',
+	'image_view': 'Check'
 }
 
 docfield_properties = {

frappe/public/build.json

@@ -218,7 +218,9 @@
 		"public/js/frappe/list/listview.js",
 		"public/js/frappe/views/calendar_base.js",
 		"public/js/frappe/views/calendar.js",
-		"public/js/frappe/views/ganttview.js"
+		"public/js/frappe/views/ganttview.js",
+		"public/js/frappe/list/image_view_item_row.html",
+		"public/js/frappe/list/image_view_item_main_head.html"
 	],
 	"css/report.min.css": [
 		"public/css/report.css",
@@ -248,4 +250,4 @@
 		"public/js/legacy/print_table.js",
 		"public/js/legacy/print_format.js"
 	]
-}
+}

frappe/public/css/list.css

@@ -189,3 +189,34 @@
   width: 37px;
   text-align: left;
 }
+
+.image-view {
+  float: left;
+}
+
+.image-view-subject {
+  padding: inherit;
+}
+
+.image-view-col {
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+
+table.field-info {
+  opacity: 0;
+  bottom: -20px;
+  font-size: 8pt;
+  color: white;
+  background-color: #000000;
+  position: absolute;
+  padding-bottom: 0px !important;
+}
+
+.image-field {
+  position: relative;
+}
+
+.image-field:hover .field-info {
+  opacity: 0.9;
+}

frappe/public/js/frappe/list/doclistview.js

@@ -133,7 +133,8 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 	},
 
 	init_headers: function() {
-		var main = frappe.render_template("list_item_main_head", {
+		this.header = this.meta.image_view == 0? "list_item_main_head": "image_view_item_main_head";
+		var main = frappe.render_template(this.header, {
 			columns: this.listview.columns,
 			right_column: this.listview.settings.right_column,
 			_checkbox: ((frappe.model.can_delete(this.doctype) || this.listview.settings.selectable)
@@ -445,6 +446,12 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 		data.doctype = this.doctype;
 		this.listview.render(row, data, this);
 	},
+	render_image_view_row: function(row, data) {
+		for (var i = 0; i < data.length; i++) {
+			data[i].doctype = this.doctype;
+			this.listview.render(row, data[i], this)
+		}
+	},
 	get_args: function() {
 		var args = {
 			doctype: this.doctype,
@@ -707,8 +714,14 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 	},
 
 	get_checked_items: function() {
+		var me = this;
 		return $.map(this.$page.find('.list-delete:checked'), function(e) {
-			return $(e).parents(".list-row:first").data('data');
+			if(me.meta.image_view == 0){
+				return $(e).parents(".list-row:first").data('data');
+			}
+			else{
+				return $(e).parents(".image-view:first").data('data');
+			}
 		});
 	},
 

frappe/public/js/frappe/list/image_view_item_main_head.html

@@ -0,0 +1,11 @@
+<div class="row">
+	<div class="col-xs-12">
+		{% if (_checkbox) { %}
+		<input class="list-select-all" type="checkbox" style="margin-right: 7px; margin-top: 2px;"
+			title="{%= __("Select All") %}">
+		{% } %}
+
+		<i class="icon-fixed-width octicon octicon-heart text-extra-muted not-liked like-action list-liked-by-me"
+			title="{%= __("Likes") %}"></i>		
+	</div>
+</div>

frappe/public/js/frappe/list/image_view_item_row.html

@@ -0,0 +1,54 @@
+<div class="col-xs-12 col-sm-3 doclist-row has-checkbox image-view text-ellipsis">
+	<div class="row">
+		<div class="col-xs-12 image-view-col">
+			{%= subject %}
+		</div>
+	</div>
+	<!-- Image -->
+	<div class="row">
+		<div class="col-xs-12 image-view-col" align="center">
+			<div class="pos-item-image image-field" data-name="{{ data.name }}" style="{% if (item_image) { %} background-image: {%= item_image %} {% }
+			 	else { %} background-color: {{ color }} {% } %}">
+				{% if (!item_image) { %}{%= frappe.get_abbr(data.name) %}{% } %}
+				<table class="table table-condensed field-info">
+					{% for (var i=0, l=columns.length; i < l; i++ ) {
+					var col = columns[i], value=data[col.fieldname]; %}
+					{% if(in_list(allowed_type, col.fieldtype)) { %}
+					<tr>
+						<td align="right" width="40%">{%= col.title %}</td>
+						<td align="left" width="60%">{%= value %}</td>
+					</tr>
+					{% } %}
+					{% } %}
+				</table>
+			</div>
+		</div>
+	</div>
+	<div class="row">
+		<!-- comment -->
+		<div class="col-xs-12 image-view-col">
+			<div class="row">
+				<div class="col-xs-4">{%= list.get_indicator(data) %}</div>
+				<div class="col-xs-8 text-right">
+					<div class="hidden-xs">
+			    		<span class="list-row-modified text-muted">
+			                {%= comment_when(data.modified, true) %}
+			    		</span>
+				        {% if (data._assign_list.length) { %}
+				    		<span class="filterable"
+				                data-filter="_assign,like,%{%= data._assign_list[data._assign_list.length - 1] %}%">
+				    			{%= frappe.avatar(data._assign_list[data._assign_list.length - 1]) %}</span>
+				        {% } else { %}
+				            <span class="avatar avatar-small avatar-empty"></span>
+				        {% } %}
+				    	<span class="list-comment-count small
+							{% if(!data._comment_count) { %} text-extra-muted {% } else { %} text-muted {% } %}">
+				    		<i class="octicon octicon-comment-discussion"></i>
+				                {%= (data._comment_count > 99 ? "99+" : data._comment_count) || 0 %}
+				        </span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

frappe/public/js/frappe/list/listview.js

@@ -124,7 +124,6 @@ frappe.views.ListView = Class.extend({
 			this.total_colspans += this.columns[1].colspan;
 		}
 
-
 		// overridden
 		var overridden = $.map(this.settings.add_columns || [], function(d) {
 			return d.content;
@@ -203,21 +202,41 @@ frappe.views.ListView = Class.extend({
 			this.id_list.push(data.name);
 		}
 
-
-		var main = frappe.render_template("list_item_main", {
-			data: data,
-			columns: this.columns,
-			subject: this.get_avatar_and_id(data, true),
-			list: this,
-			right_column: this.settings.right_column
-		});
-
-		$(frappe.render_template("list_item_row", {
-			data: data,
-			main: main,
-			list: this,
-			right_column: this.settings.right_column
-		})).appendTo(row);
+		if(this.meta.image_view == 0){
+			var main = frappe.render_template("list_item_main", {
+				data: data,
+				columns: this.columns,
+				subject: this.get_avatar_and_id(data, true),
+				list: this,
+				right_column: this.settings.right_column
+			});
+	
+			$(frappe.render_template("list_item_row", {
+				data: data,
+				main: main,
+				list: this,
+				right_column: this.settings.right_column
+			})).appendTo(row);
+		}
+		else{
+			this.allowed_type = [
+				"Check", "Currency", "Data", "Date",
+				"Datetime", "Float", "Int", "Link",
+				"Percent", "Select", "Read Only", "Time"
+			];
+			img_col = $(frappe.render_template("image_view_item_row", {
+				data: data,
+				list: this,
+				columns: this.columns,
+				allowed_type: this.allowed_type,
+				item_image: data.image ? "url('" + data.image + "')" : null,
+				color: frappe.get_palette(data.item_name),
+				subject: this.get_avatar_and_id(data, true),
+				right_column: this.settings.right_column
+			}))
+			.data("data", data)
+			.appendTo($(row).find(".image-view-marker"));
+		}
 
 		if(this.settings.post_render_item) {
 			this.settings.post_render_item(this, row, data);
@@ -226,7 +245,6 @@ frappe.views.ListView = Class.extend({
 		this.render_tags(row, data);
 
 	},
-
 	render_tags: function(row, data) {
 		var me = this;
 		var row2 = $('<div class="tag-row">\
@@ -366,4 +384,4 @@ frappe.views.ListView = Class.extend({
 		var icon_html = "<i class='%(icon_class)s' title='%(label)s'></i>";
 		$(parent).append(repl(icon_html, {icon_class: icon_class, label: __(label) || ''}));
 	}
-});
+});

frappe/public/js/frappe/ui/listing.js

@@ -309,8 +309,17 @@ frappe.ui.Listing = Class.extend({
 		}
 
 		// render the rows
-		for(var i=0; i < m; i++) {
-			this.render_row(this.add_row(values[i]), values[i], this, i);
+		if(this.meta.image_view == 0){
+			for(var i=0; i < m; i++) {
+				this.render_row(this.add_row(values[i]), values[i], this, i);
+			}
+		}
+		else{
+			while (values.length) {
+				row = this.add_row(values[0]);
+				$("<div class='row image-view-marker'></div>").appendTo(row)
+				this.render_image_view_row(row, values.splice(0, 4), this, i);
+			}
 		}
 	},
 	update_paging: function(values) {
@@ -321,7 +330,7 @@ frappe.ui.Listing = Class.extend({
 	},
 	add_row: function(row) {
 		return $('<div class="list-row">')
-			.data("data", row)
+			.data("data", this.meta.image_view == 0?row:null)
 			.appendTo(this.$w.find('.result-list'))
 			.get(0);
 	},