publish muk_web_utils - 12.0

muk_web_utils/static/src/js/core/dropzone.js

@@ -26,6 +26,13 @@ var _t = core._t;
 var QWeb = core.qweb;
 
 var DropzoneMixin = {
+	dropzoneClasses: 'mk_dropzone',
+	dropzoneEvents: {
+		'dragenter .o_form_sheet': '_dragenterDropzone',
+		'dragover .o_form_sheet': '_dragoverDropzone',
+		'dragleave .o_form_sheet': '_dragleaveDropzone',
+		'drop .o_form_sheet': '_dropDropzone',
+    },
 	_checkDropzoneEvent: function(event) {
 		return true;
 	},
@@ -38,7 +45,7 @@ var DropzoneMixin = {
 
 	},
 	_toggleDropzone: function(state) {
-		this.$dropzone.toggleClass('mk_dropzone', state);
+		this.$dropzone.toggleClass(this.dropzoneClasses, state);
 	},
 	_hoverDropzoneEnter: function(event) {
 		if(this._checkDropzoneEvent(event)) {
@@ -65,7 +72,7 @@ var DropzoneMixin = {
     _dragoverDropzone: function(event) {
     	if(this._checkDropzoneEvent(event)) {
         	event.preventDefault();
-    		this._handleDrag();
+    		this._handleDrag(event);
     	}
     },
     _dragleaveDropzone: function(event) {
@@ -77,19 +84,20 @@ var DropzoneMixin = {
     	if(this._checkDropzoneEvent(event)) {
         	event.preventDefault();
     		event.stopPropagation();
-    		this._handleDrop();
+    		this._handleDrop(event);
     	}
     }
 };
 
-var FileDropzoneMixin = {
+var FileDropzoneMixin = _.extend({}, DropzoneMixin, {
+	dropzoneClasses: DropzoneMixin.dropzoneClasses + ' mk_dropzone_file',
 	_checkDropzoneEvent: function(event) {
 		return window.File && window.FileReader && window.FileList && window.Blob;
 	},
 	_handleDrag: function(event) {
 		event.originalEvent.dataTransfer.dropEffect = 'copy';
 	},
-};
+});
 
 return {
 	DropzoneMixin: DropzoneMixin,

muk_web_utils/static/src/js/fields/share.js

@@ -32,6 +32,12 @@ var _t = core._t;
 var QWeb = core.qweb;
 
 var ShareMixin = {
+	shareEvents: {
+    	'click .mk_share_dropdown_message': '_onShareMessageClick',
+        'click .mk_share_dropdown_note': '_onShareNoteClick',
+        'click .mk_share_dropdown_mail': '_onShareMailClick',
+        'click .mk_share_dropdown_send': '_onShareSendClick',
+    },
     getShareMessageValues: function(message) {
     	var values = {
     		name: session.partner_display_name,
@@ -100,12 +106,7 @@ var CharShare = fields.CharCopyClipboard.extend(ShareMixin, {
 	fieldDependencies: _.extend({}, fields.CharCopyClipboard.fieldDependencies, {
 		display_name: {type: 'char'},
     }),
-    events: _.extend({}, fields.CharCopyClipboard.events, {
-    	'click .mk_share_dropdown_message': '_onShareMessageClick',
-        'click .mk_share_dropdown_note': '_onShareNoteClick',
-        'click .mk_share_dropdown_mail': '_onShareMailClick',
-        'click .mk_share_dropdown_send': '_onShareSendClick',
-    }),
+    events: _.extend({}, fields.CharCopyClipboard.events, ShareMixin.shareEvents),
 	init: function(parent, name, record) {
         this._super.apply(this, arguments);
         this.navigator = window.navigator.share;
@@ -134,12 +135,7 @@ var TextShare = fields.TextCopyClipboard.extend(ShareMixin, {
 	fieldDependencies: _.extend({}, fields.TextCopyClipboard.fieldDependencies, {
 		display_name: {type: 'char'},
     }),
-    events: _.extend({}, fields.TextCopyClipboard.events, {
-    	'click .mk_share_dropdown_message': '_onShareMessageClick',
-        'click .mk_share_dropdown_note': '_onShareNoteClick',
-        'click .mk_share_dropdown_mail': '_onShareMailClick',
-        'click .mk_share_dropdown_send': '_onShareSendClick',
-    }),
+    events: _.extend({}, fields.TextCopyClipboard.events, ShareMixin.shareEvents),
 	init: function(parent, name, record) {
         this._super.apply(this, arguments);
         this.navigator = window.navigator.share;
@@ -168,12 +164,7 @@ var BinaryFileShare = copy.BinaryFileCopy.extend(ShareMixin, {
 	fieldDependencies: _.extend({}, fields.FieldBinaryFile.fieldDependencies, {
 		display_name: {type: 'char'},
     }),
-    events: _.extend({}, fields.FieldBinaryFile.events, {
-    	'click .mk_share_dropdown_message': '_onShareMessageClick',
-        'click .mk_share_dropdown_note': '_onShareNoteClick',
-        'click .mk_share_dropdown_mail': '_onShareMailClick',
-        'click .mk_share_dropdown_send': '_onShareSendClick',
-    }),
+    events: _.extend({}, copy.BinaryFileCopy, ShareMixin.shareEvents),
 	init: function () {
         this._super.apply(this, arguments);
         this.navigator = window.navigator.share;

muk_web_utils/static/src/scss/dropzone.scss

@@ -0,0 +1,60 @@
+/**********************************************************************************
+* 
+*    Copyright (C) 2017 MuK IT GmbH
+*
+*    This program is free software: you can redistribute it and/or modify
+*    it under the terms of the GNU Affero General Public License as
+*    published by the Free Software Foundation, either version 3 of the
+*    License, or (at your option) any later version.
+*
+*    This program is distributed in the hope that it will be useful,
+*    but WITHOUT ANY WARRANTY; without even the implied warranty of
+*    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+*    GNU Affero General Public License for more details.
+*
+*    You should have received a copy of the GNU Affero General Public License
+*    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*
+**********************************************************************************/
+
+.mk_dropzone {
+	&:before {
+		display:flex;
+		z-index: 1052;
+		color: gray('700');
+		flex-direction:row;
+		align-items: center;
+		justify-content: center;
+		width: #{"calc(100% - 20px)"};
+		height: #{"calc(100% - 10px)"};
+		border: 2px dashed gray('700');
+		@include gradient-y($white, gray('100'));
+		@include o-position-absolute(0, 0, 0, 10px);
+	}
+	&:after {
+		display:flex;
+		z-index: 1052;
+		color: gray('700');
+		flex-direction:row;
+		align-items: center;
+		justify-content: center;
+		width: #{"calc(100% - 20px)"};
+		height: #{"calc(100% - 10px)"};
+		@include o-position-absolute(0, 0, 0, 0);
+	}
+	&.mk_dropzone_file {
+		&:before {
+			font-family: FontAwesome;
+		    text-decoration: inherit;
+		    font-style: normal;
+		    font-weight: normal;
+			font-size: 15rem;
+		    content: "\f0ee";
+		}
+		&:after {
+			padding-top: 18rem;
+			font-size: 3rem;
+		    content: "Drop files here to upload!";
+		}
+	}
+}

muk_web_utils/template/assets.xml

@@ -33,6 +33,7 @@
 		<xpath expr="//link[last()]" position="after">
 			<link rel="stylesheet" type="text/scss" href="/muk_web_utils/static/src/scss/variables.scss" />
 			<link rel="stylesheet" type="text/scss" href="/muk_web_utils/static/src/scss/switch.scss" />
+			<link rel="stylesheet" type="text/scss" href="/muk_web_utils/static/src/scss/dropzone.scss" />
 			<link rel="stylesheet" type="text/scss" href="/muk_web_utils/static/src/scss/module.scss" />
 			<link rel="stylesheet" type="text/scss" href="/muk_web_utils/static/src/scss/copy.scss" />
 			<link rel="stylesheet" type="text/scss" href="/muk_web_utils/static/src/scss/share.scss" />