Merge pull request #1788 from mbauskar/image-view

[minor] added small button on image hover for full-size image

frappe/public/css/list.css

@@ -213,10 +213,27 @@ table.field-info {
   padding-bottom: 0px !important;
 }
 
+.zoom-view {
+  top: 10px !important;
+  right: 10px !important;
+  width: 36px;
+  height: 36px;
+  opacity: 0;
+  font-size: 20px;
+  color: black;
+  position: absolute;
+  padding: 0px !important;
+  border-radius: 20px;
+}
+
 .image-field {
   position: relative;
 }
 
 .image-field:hover .field-info {
   opacity: 0.9;
+}
+
+.image-field:hover .zoom-view {
+  opacity: 1;
 }

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

@@ -7,21 +7,26 @@
 	<!-- 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 }}; {% } %} border: 0px;">
-				{% 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>
+			<a data-name="{{ data.name }}" title="{{ data.name }}" href="#Form/{{ data.doctype }}/{{ data.name }}">
+				<div class="pos-item-image image-field" data-name="{{ data.name }}" style="{% if (item_image) { %} background-image: {%= item_image %}; {% }
+				 	else { %} background-color: {{ color }}; {% } %} border: 0px;">
+					{% if (!item_image) { %}{%= frappe.get_abbr(data.name) %}{% } %}
+					<button class="btn btn-info zoom-view">
+						<i class="icon-zoom-in"></i>
+					</button>
+					<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>
+			</a>
 		</div>
 	</div>
 	<div class="row">

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

@@ -344,7 +344,8 @@ frappe.ui.Listing = Class.extend({
 				var gallery = frappe.render_template("blueimp-gallery", {});
 				$(gallery).appendTo(me.$w);
 
-				me.$w.find(".image-field").click(function(event){
+				me.$w.find(".zoom-view").click(function(event){
+					event.preventDefault();
 					opts = {
 						doctype: me.doctype,
 						docname: $(event.target).attr('data-name'),