[ADD] added new module Mail Attachment Popup

mail_attachment_popup/README.rst

@@ -0,0 +1,29 @@
+===================
+ Popup Attachments
+===================
+
+ The module opens attached mail images in popup.
+
+Credits
+=======
+
+Contributors
+------------
+* Dinar Gabbasov <gabbasov@it-projects.info>
+
+Sponsors
+--------
+* `IT-Projects LLC <https://it-projects.info>`_
+
+Further information
+===================
+
+Demo: http://runbot.it-projects.info/demo/mail-addons/8.0
+
+HTML Description: https://apps.odoo.com/apps/modules/8.0/mail_attachment_popup/
+
+Usage instructions: `<doc/index.rst>`_
+
+Changelog: `<doc/changelog.rst>`_
+
+Tested on Odoo 8.0 6682bde8a202794740b9756542b5b119db7606f3

mail_attachment_popup/__openerp__.py

@@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+{
+    "name": """Popup Attachments""",
+    "summary": """Open attached mail images in popup""",
+    "category": "Extra Tools",
+    "version": "1.0.0",
+    "images": ['images/popup_image.png'],
+
+    "author": "IT-Projects LLC, Dinar Gabbasov",
+    'website': "https://twitter.com/gabbasov_dinar",
+    "license": "GPL-3",
+    "price": "50.0",
+    "currency": "EUR",
+
+    "depends": [
+        "mail",
+    ],
+    "external_dependencies": {"python": [], "bin": []},
+    "data": [
+        "views/mail_attachment_popup_template.xml",
+    ],
+    "qweb": [
+        "static/src/xml/mail_attachment_popup.xml",
+    ],
+
+    "installable": True,
+    'auto_install': False,
+}

mail_attachment_popup/doc/changelog.rst

@@ -0,0 +1,9 @@
+.. _changelog:
+
+Updates
+=======
+
+`1.0.0`
+-------
+
+- Init version

mail_attachment_popup/doc/index.rst

@@ -0,0 +1,16 @@
+===================
+ Popup Attachments
+===================
+
+Installation
+============
+
+* `Install <https://odoo-development.readthedocs.io/en/latest/odoo/usage/install-module.html>`__ this module in a usual way
+
+Usage
+=====
+
+* Open 'Messaging' menu
+* Find any message with image in attachments
+* Click on the image
+* Browser opens image in popup instead of downloading it

mail_attachment_popup/static/description/index.html

@@ -0,0 +1,84 @@
+<section class="oe_container">
+    <div class="oe_row oe_spaced">
+        <div class="oe_span12">
+            <h2 class="oe_slogan">Popup Attachments</h2>
+            <h3 class="oe_slogan">Open attachments in popup</h3>
+        </div>
+    </div>
+</section>
+
+<section class="oe_container">
+  <div class="oe_row oe_spaced">
+    <div class="oe_span12">
+      <p class="oe_mt32">
+		The module allows to open attachments (images) in popup. It is convenient if you want to display them only without downloading.
+      </p>		
+    </div>
+  </div>
+</section>
+
+<section class="oe_container oe_dark">
+  <div class="oe_row oe_spaced">
+    <div class="oe_span12">
+      <h3 class="oe_slogan">How it works</h3>	
+    </div>
+  </div>
+</section>
+
+<section class="oe_container">
+  <div class="oe_row oe_spaced">
+    <div class="oe_span6">
+      <p class="oe_mt32">
+        Go to "Messaging" menu and open email that contains image(s) in attachment.
+      </p>
+    </div>
+    <div class="oe_span6">
+      <div class="oe_row_img oe_centered">
+        <img class="oe_demo oe_picture oe_screenshot" src="attach_image.png"/>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="oe_container oe_dark">
+  <div class="oe_row oe_spaced">
+    <div class="oe_span6">
+      <div class="oe_row_img oe_centered">
+        <img class="oe_demo oe_picture oe_screenshot" src="popup.png"/>
+      </div>
+    </div>
+	<div class="oe_span6">
+      <p class="oe_mt32">
+		Click on the image and see how popup is appear.
+      </p>
+    </div>
+  </div>
+</section>
+
+<section class="oe_container">
+  <div class="oe_row oe_spaced">
+	<div class="oe_span6">
+      <p class="oe_mt32">
+		Moreover, you can download it to your device by clicking on the "Download" button if needed.
+      </p>
+    </div>
+    <div class="oe_span6">
+      <div class="oe_row_img oe_centered">
+        <img class="oe_demo oe_picture oe_screenshot" src="download.png"/>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="oe_container">
+  <div class="oe_row oe_spaced">
+    <div class="oe_span12">
+      <h2>Need our service?</h2>
+      <p class="oe_mt32">Contact us by <a href="mailto:it@it-projects.info">email</a> or fill out <a href="https://www.it-projects.info/page/website.contactus " target="_blank">request form</a></p>
+      <ul>
+        <li><a href="mailto:it@it-projects.info">it@it-projects.info <i class="fa fa-envelope-o"></i></a></li>
+        <li><a href="https://www.it-projects.info/page/website.contactus " target="_blank">https://www.it-projects.info/page/website.contactus <i class="fa fa-list-alt"></i></a></li>
+      </ul>
+    </div>
+  </div>
+</section>

mail_attachment_popup/static/lib/js/jquery.arcticmodal.js

@@ -0,0 +1,429 @@
+/*
+
+ arcticModal — jQuery plugin
+ Version: 0.3
+ Author: Sergey Predvoditelev (sergey.predvoditelev@gmail.com)
+ Company: Arctic Laboratory (http://arcticlab.ru/)
+
+ Docs & Examples: http://arcticlab.ru/arcticmodal/
+
+ */
+(function($) {
+
+
+	var default_options = {
+
+		type: 'html', // ajax или html
+		content: '',
+		url: '',
+		ajax: {},
+		ajax_request: null,
+
+		closeOnEsc: true,
+		closeOnOverlayClick: true,
+
+		clone: false,
+
+		overlay: {
+			block: undefined,
+			tpl: '<div class="arcticmodal-overlay"></div>',
+			css: {
+				backgroundColor: '#000',
+				opacity: .6
+			}
+		},
+
+		container: {
+			block: undefined,
+			tpl: '<div class="arcticmodal-container"><table class="arcticmodal-container_i"><tr><td class="arcticmodal-container_i2"></td></tr></table></div>'
+		},
+
+		wrap: undefined,
+		body: undefined,
+
+		errors: {
+			tpl: '<div class="arcticmodal-error arcticmodal-close"></div>',
+			autoclose_delay: 2000,
+			ajax_unsuccessful_load: 'Error'
+		},
+
+		openEffect: {
+			type: 'fade',
+			speed: 400
+		},
+		closeEffect: {
+			type: 'fade',
+			speed: 400
+		},
+
+		beforeOpen: $.noop,
+		afterOpen: $.noop,
+		beforeClose: $.noop,
+		afterClose: $.noop,
+		afterLoading: $.noop,
+		afterLoadingOnShow: $.noop,
+		errorLoading: $.noop
+
+	};
+
+
+	var modalID = 0;
+	var modals = $([]);
+
+
+	var utils = {
+
+
+		// Определяет произошло ли событие e вне блока block
+		isEventOut: function(blocks, e) {
+			var r = true;
+			$(blocks).each(function() {
+				if ($(e.target).get(0)==$(this).get(0)) r = false;
+				if ($(e.target).closest('HTML', $(this).get(0)).length==0) r = false;
+			});
+			return r;
+		}
+
+
+	};
+
+
+	var modal = {
+
+
+		// Возвращает элемент, которым был вызван плагин
+		getParentEl: function(el) {
+			var r = $(el);
+			if (r.data('arcticmodal')) return r;
+			r = $(el).closest('.arcticmodal-container').data('arcticmodalParentEl');
+			if (r) return r;
+			return false;
+		},
+
+
+		// Переход
+		transition: function(el, action, options, callback) {
+			callback = callback==undefined ? $.noop : callback;
+			switch (options.type) {
+				case 'fade':
+					action=='show' ? el.fadeIn(options.speed, callback) : el.fadeOut(options.speed, callback);
+					break;
+				case 'none':
+					action=='show' ? el.show() : el.hide();
+					callback();
+					break;
+			}
+		},
+
+
+		// Подготвка содержимого окна
+		prepare_body: function(D, $this) {
+
+			// Обработчик закрытия
+			$('.arcticmodal-close', D.body).unbind('click.arcticmodal').bind('click.arcticmodal', function() {
+				$this.arcticmodal('close');
+				return false;
+			});
+
+		},
+
+
+		// Инициализация элемента
+		init_el: function($this, options) {
+			var D = $this.data('arcticmodal');
+			if (D) return;
+
+			D = options;
+			modalID++;
+			D.modalID = modalID;
+
+			// Overlay
+			D.overlay.block = $(D.overlay.tpl);
+			D.overlay.block.css(D.overlay.css);
+
+			// Container
+			D.container.block = $(D.container.tpl);
+
+			// BODY
+			D.body = $('.arcticmodal-container_i2', D.container.block);
+			if (options.clone) {
+				D.body.html($this.clone(true));
+			} else {
+				$this.before('<div id="arcticmodalReserve' + D.modalID + '" style="display: none" />');
+				D.body.html($this);
+			}
+
+			// Подготовка содержимого
+			modal.prepare_body(D, $this);
+
+			// Закрытие при клике на overlay
+			if (D.closeOnOverlayClick)
+				D.overlay.block.add(D.container.block).click(function(e) {
+					if (utils.isEventOut($('>*', D.body), e))
+						$this.arcticmodal('close');
+				});
+
+			// Запомним настройки
+			D.container.block.data('arcticmodalParentEl', $this);
+			$this.data('arcticmodal', D);
+			modals = $.merge(modals, $this);
+
+			// Показать
+			$.proxy(actions.show, $this)();
+			if (D.type=='html') return $this;
+
+			// Ajax-загрузка
+			if (D.ajax.beforeSend!=undefined) {
+				var fn_beforeSend = D.ajax.beforeSend;
+				delete D.ajax.beforeSend;
+			}
+			if (D.ajax.success!=undefined) {
+				var fn_success = D.ajax.success;
+				delete D.ajax.success;
+			}
+			if (D.ajax.error!=undefined) {
+				var fn_error = D.ajax.error;
+				delete D.ajax.error;
+			}
+			var o = $.extend(true, {
+				url: D.url,
+				beforeSend: function() {
+					if (fn_beforeSend==undefined) {
+						D.body.html('<div class="arcticmodal-loading" />');
+					} else {
+						fn_beforeSend(D, $this);
+					}
+				},
+				success: function(responce) {
+
+					// Событие после загрузки до показа содержимого
+					$this.trigger('afterLoading');
+					D.afterLoading(D, $this, responce);
+
+					if (fn_success==undefined) {
+						D.body.html(responce);
+					} else {
+						fn_success(D, $this, responce);
+					}
+					modal.prepare_body(D, $this);
+
+					// Событие после загрузки после отображения содержимого
+					$this.trigger('afterLoadingOnShow');
+					D.afterLoadingOnShow(D, $this, responce);
+
+				},
+				error: function() {
+
+					// Событие при ошибке загрузки
+					$this.trigger('errorLoading');
+					D.errorLoading(D, $this);
+
+					if (fn_error==undefined) {
+						D.body.html(D.errors.tpl);
+						$('.arcticmodal-error', D.body).html(D.errors.ajax_unsuccessful_load);
+						$('.arcticmodal-close', D.body).click(function() {
+							$this.arcticmodal('close');
+							return false;
+						});
+						if (D.errors.autoclose_delay)
+							setTimeout(function() {
+								$this.arcticmodal('close');
+							}, D.errors.autoclose_delay);
+					} else {
+						fn_error(D, $this);
+					}
+				}
+			}, D.ajax);
+			D.ajax_request = $.ajax(o);
+
+			// Запомнить настройки
+			$this.data('arcticmodal', D);
+
+		},
+
+
+		// Инициализация
+		init: function(options) {
+			options = $.extend(true, {}, default_options, options);
+			if ($.isFunction(this)) {
+				if (options==undefined) {
+					$.error('jquery.arcticmodal: Uncorrect parameters');
+					return;
+				}
+				if (options.type=='') {
+					$.error('jquery.arcticmodal: Don\'t set parameter "type"');
+					return;
+				}
+				switch (options.type) {
+					case 'html':
+						if (options.content=='') {
+							$.error('jquery.arcticmodal: Don\'t set parameter "content"');
+							return
+						}
+						var c = options.content;
+						options.content = '';
+
+						return modal.init_el($(c), options);
+						break;
+					case 'ajax':
+						if (options.url=='') {
+							$.error('jquery.arcticmodal: Don\'t set parameter "url"');
+							return;
+						}
+						return modal.init_el($('<div />'), options);
+						break;
+				}
+			} else {
+				return this.each(function() {
+					modal.init_el($(this), $.extend(true, {}, options));
+				});
+			}
+		}
+
+
+	};
+
+
+	var actions = {
+
+
+		// Показать
+		show: function() {
+			var $this = modal.getParentEl(this);
+			if ($this===false) {
+				$.error('jquery.arcticmodal: Uncorrect call');
+				return;
+			}
+			var D = $this.data('arcticmodal');
+
+			// Добавить overlay и container
+			D.overlay.block.hide();
+			D.container.block.hide();
+			$('BODY').append(D.overlay.block);
+			$('BODY').append(D.container.block);
+
+			// Событие
+			D.beforeOpen(D, $this);
+			$this.trigger('beforeOpen');
+
+			// Wrap
+			if (D.wrap.css('overflow')!='hidden') {
+				D.wrap.data('arcticmodalOverflow', D.wrap.css('overflow'));
+				var w1 = D.wrap.outerWidth(true);
+				D.wrap.css('overflow', 'hidden');
+				var w2 = D.wrap.outerWidth(true);
+				if (w2!=w1)
+					D.wrap.css('marginRight', (w2 - w1) + 'px');
+			}
+
+			// Скрыть предыдущие оверлеи
+			modals.not($this).each(function() {
+				var d = $(this).data('arcticmodal');
+				d.overlay.block.hide();
+			});
+
+			// Показать
+			modal.transition(D.overlay.block, 'show', modals.length>1 ? {type: 'none'} : D.openEffect);
+			modal.transition(D.container.block, 'show', modals.length>1 ? {type: 'none'} : D.openEffect, function() {
+				D.afterOpen(D, $this);
+				$this.trigger('afterOpen');
+			});
+
+			return $this;
+		},
+
+
+		// Закрыть
+		close: function() {
+			if ($.isFunction(this)) {
+				modals.each(function() {
+					$(this).arcticmodal('close');
+				});
+			} else {
+				return this.each(function() {
+					var $this = modal.getParentEl(this);
+					if ($this===false) {
+						$.error('jquery.arcticmodal: Uncorrect call');
+						return;
+					}
+					var D = $this.data('arcticmodal');
+
+					// Событие перед закрытием
+					if (D.beforeClose(D, $this)===false) return;
+					$this.trigger('beforeClose');
+
+					// Показать предыдущие оверлеи
+					modals.not($this).last().each(function() {
+						var d = $(this).data('arcticmodal');
+						d.overlay.block.show();
+					});
+
+					modal.transition(D.overlay.block, 'hide', modals.length>1 ? {type: 'none'} : D.closeEffect);
+					modal.transition(D.container.block, 'hide', modals.length>1 ? {type: 'none'} : D.closeEffect, function() {
+
+						// Событие после закрытия
+						D.afterClose(D, $this);
+						$this.trigger('afterClose');
+
+						// Если не клонировали - вернём на место
+						if (!D.clone)
+							$('#arcticmodalReserve' + D.modalID).replaceWith(D.body.find('>*'));
+
+						D.overlay.block.remove();
+						D.container.block.remove();
+						$this.data('arcticmodal', null);
+						if (!$('.arcticmodal-container').length) {
+							if (D.wrap.data('arcticmodalOverflow'))
+								D.wrap.css('overflow', D.wrap.data('arcticmodalOverflow'));
+							D.wrap.css('marginRight', 0);
+						}
+
+					});
+
+					if (D.type=='ajax')
+						D.ajax_request.abort();
+
+					modals = modals.not($this);
+				});
+			}
+		},
+
+
+		// Установить опции по-умолчанию
+		setDefault: function(options) {
+			$.extend(true, default_options, options);
+		}
+
+
+	};
+
+
+	$(function() {
+		default_options.wrap = $((document.all && !document.querySelector) ? 'html' : 'body');
+	});
+
+
+	// Закрытие при нажатии Escape
+	$(document).bind('keyup.arcticmodal', function(e) {
+		var m = modals.last();
+		if (!m.length) return;
+		var D = m.data('arcticmodal');
+		if (D.closeOnEsc && (e.keyCode===27))
+			m.arcticmodal('close');
+	});
+
+
+	$.arcticmodal = $.fn.arcticmodal = function(method) {
+
+		if (actions[method]) {
+			return actions[method].apply(this, Array.prototype.slice.call(arguments, 1));
+		} else if (typeof method==='object' || !method) {
+			return modal.init.apply(this, arguments);
+		} else {
+			$.error('jquery.arcticmodal: Method ' + method + ' does not exist');
+		}
+
+	};
+
+
+})(jQuery);

mail_attachment_popup/static/src/css/jquery.arcticmodal.css

@@ -0,0 +1,8 @@
+.arcticmodal-overlay,
+.arcticmodal-container { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1010; }
+.arcticmodal-container { overflow: auto; margin: 0; padding: 0; border: 0; border-collapse: collapse; }
+*:first-child+html .arcticmodal-container { height: 100% }
+.arcticmodal-container_i { height: 100%; margin: 0 auto; }
+.arcticmodal-container_i2 { padding: 24px; margin: 0; border: 0; vertical-align: middle; padding-top: 50px;}
+.arcticmodal-error { padding: 20px; border-radius: 10px; background: #000; color: #fff; }
+.arcticmodal-loading { width: 80px; height: 80px; border-radius: 10px; background: #000 url(/mail_attachment_popup/static/src/img/loading.gif) no-repeat 50% 50%; }

mail_attachment_popup/static/src/css/simple.css

@@ -0,0 +1,11 @@
+.box-modal {
+	position: relative;
+	padding: 16px;
+	background: #fff;
+	color: #3c3c3c;
+	font: 14px/18px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
+	box-shadow: 0 0 0 6px rgba(153, 153, 153, .3);
+	border-radius: 6px;
+}
+.box-modal_close { position: absolute; right: -25px; top: -25px; font-size: 30px; line-height: 15px; color: #ffffff; cursor: pointer; }
+.box-modal_close:hover { color: #B1B1B1; }

mail_attachment_popup/static/src/css/styles.css

@@ -0,0 +1,10 @@
+.g-hidden {
+    display: none;
+}
+.box-modal img {
+    max-width: 1100px;
+    width: 100%;
+}
+.oe_attachment.oe_preview {
+    cursor: pointer;
+}

mail_attachment_popup/static/src/xml/mail_attachment_popup.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<template>
+    <t t-extend="mail.thread.message.attachments">
+        <t t-jquery="t[t-if='attachment.file_type_icon === 'webimage''] a[t-att-href='attachment.url']" t-operation="replace">
+            <span class="m-dotted" t-attf-onclick="$('#ImageModal{{ attachment.id }}').arcticmodal()">
+                <img t-att-src="widget.attachments_resize_image(attachment.id, [100,80])"></img>
+                <div class='oe_name'><t t-raw='attachment.name' /></div>
+            </span>
+            <div class="g-hidden">
+                <div class="box-modal" t-attf-id="ImageModal{{ attachment.id }}">
+                    <div class="box-modal_close arcticmodal-close">X</div>
+                    <img t-att-src="widget.attachments_resize_image(attachment.id, [100,80])"></img>
+                    <div class='oe_name'><t t-raw='attachment.name' /></div>
+                    <div class='oe_download_original_img'><a t-att-href='attachment.url' target="_blank">Download</a></div>
+                </div>
+            </div>
+        </t>
+    </t>
+</template>

mail_attachment_popup/views/mail_attachment_popup_template.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+    <data>
+        <template id="assets_backend" name="account assets" inherit_id="web.assets_backend">
+            <xpath expr="." position="inside">
+                <link rel="stylesheet" href="/mail_attachment_popup/static/src/css/jquery.arcticmodal.css"/>
+                <link rel="stylesheet" href="/mail_attachment_popup/static/src/css/simple.css"/>
+                <link rel="stylesheet" href="/mail_attachment_popup/static/src/css/styles.css"/>
+                <script type="text/javascript" src="/mail_attachment_popup/static/lib/js/jquery.arcticmodal.js"></script>
+            </xpath>
+        </template>
+    </data>
+</openerp>