vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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

Browse source
This commit is contained in:
mbauskar 2016-06-08 19:05:25 +05:30
parent dea30f830a
commit 652bbf5353
3 changed files with 39 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frappe/public/css/list.css
View file

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

35
frappe/public/js/frappe/list/image_view_item_row.html
View file

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

3
frappe/public/js/frappe/ui/listing.js
View file

@ -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'),