Merge remote-tracking branch 'marc1706/ticket/12542' into 3.1.x

* marc1706/ticket/12542:
  [ticket/12542] Use more specific CSS for drag-n-drop
  [ticket/12542] Do not use browser specific css for outline
  [ticket/12542] Properly check if textarea is undefined or null
  [ticket/12542] Use extended CSS for all browsers
  [ticket/12542] Rename javascript method and add doc block
  [ticket/12542] Add different outline colors for body & textarea
  [ticket/12542] Add initial drag-n-drop animation

phpBB/assets/javascript/core.js

@@ -1232,6 +1232,31 @@ phpbb.applyCodeEditor = function(textarea) {
 	});
 };
 
+/**
+ * Show drag and drop animation when textarea is present
+ *
+ * This function will enable the drag and drop animation for a specified
+ * textarea.
+ *
+ * @param {object} textarea Textarea DOM object to apply editor to
+ */
+phpbb.showDragNDrop = function(textarea) {
+	if (textarea == null) {
+		return;
+	}
+
+	$('body').on('dragenter dragover', function () {
+		$(textarea).addClass('drag-n-drop');
+	}).on('dragleave dragout dragend drop', function() {
+		$(textarea).removeClass('drag-n-drop');
+	});
+	$(textarea).on('dragenter dragover', function () {
+		$(textarea).addClass('drag-n-drop-highlight');
+	}).on('dragleave dragout dragend drop', function() {
+		$(textarea).removeClass('drag-n-drop-highlight');
+	});
+};
+
 /**
 * List of classes that toggle dropdown menu,
 * list of classes that contain visible dropdown menu

phpBB/assets/javascript/editor.js

@@ -355,6 +355,9 @@ function getCaretPosition(txtarea) {
 		textarea = doc.forms[form_name].elements[text_name];
 
 		phpbb.applyCodeEditor(textarea);
+		if ($('#attach-panel').length) {
+			phpbb.showDragNDrop(textarea);
+		}
 	});
 })(jQuery);
 

phpBB/styles/prosilver/theme/colours.css

@@ -977,6 +977,14 @@ fieldset.quick-login input.inputbox {
 	color: #333333;
 }
 
+#message-box textarea.drag-n-drop {
+	outline-color: rgba(102, 102, 102, 0.5);
+}
+
+#message-box textarea.drag-n-drop-highlight {
+	outline-color: rgba(17, 163, 234, 0.5);
+}
+
 /* Input field styles
 ---------------------------------------- */
 .inputbox {

phpBB/styles/prosilver/theme/forms.css

@@ -243,6 +243,13 @@ fieldset.submit-buttons input {
 	max-width: 100%;
 	font-size: 1.2em;
 	resize: vertical;
+	outline: 3px dashed transparent;
+	outline-offset: -4px;
+	-webkit-transition: all .5s ease;
+	-moz-transition: all .5s ease;
+	-ms-transition: all .5s ease;
+	-o-transition: all .5s ease;
+	transition: all .5s ease;
 }
 
 /* Emoticons panel */