From 46a789de5c8c4f7ff9717a9d45abc7cfe66b9b6a Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Tue, 28 Apr 2015 16:12:58 +0200 Subject: [PATCH 1/7] [ticket/12542] Add initial drag-n-drop animation PHPBB3-12542 --- phpBB/assets/javascript/core.js | 8 ++++++++ phpBB/assets/javascript/editor.js | 1 + phpBB/styles/prosilver/theme/colours.css | 4 ++++ phpBB/styles/prosilver/theme/forms.css | 3 +++ 4 files changed, 16 insertions(+) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 806db7d35f..c15a51d959 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -1232,6 +1232,14 @@ phpbb.applyCodeEditor = function(textarea) { }); }; +phpbb.applyDragNDrop = function(textarea) { + $('html').on('dragenter dragover', function () { + $(textarea).addClass('drag-n-drop'); + }).on('dragleave dragout dragend drop', function() { + $(textarea).removeClass('drag-n-drop'); + }); +}; + /** * List of classes that toggle dropdown menu, * list of classes that contain visible dropdown menu diff --git a/phpBB/assets/javascript/editor.js b/phpBB/assets/javascript/editor.js index 5fd4f7eae3..45060c113b 100644 --- a/phpBB/assets/javascript/editor.js +++ b/phpBB/assets/javascript/editor.js @@ -355,6 +355,7 @@ function getCaretPosition(txtarea) { textarea = doc.forms[form_name].elements[text_name]; phpbb.applyCodeEditor(textarea); + phpbb.applyDragNDrop(textarea); }); })(jQuery); diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 4743b4b39b..0e16bff471 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -977,6 +977,10 @@ fieldset.quick-login input.inputbox { color: #333333; } +#message-box textarea.drag-n-drop { + outline-color: rgba(17, 163, 234, 0.7); +} + /* Input field styles ---------------------------------------- */ .inputbox { diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index f08a8a9691..11e0583542 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -243,6 +243,9 @@ fieldset.submit-buttons input { max-width: 100%; font-size: 1.2em; resize: vertical; + outline: 3px dashed transparent; + outline-offset: -4px; + transition: .5s; } /* Emoticons panel */ From ae8129b69902959212594e83435081a4bf0b5412 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Wed, 29 Apr 2015 00:12:55 +0200 Subject: [PATCH 2/7] [ticket/12542] Add different outline colors for body & textarea PHPBB3-12542 --- phpBB/assets/javascript/core.js | 7 ++++++- phpBB/styles/prosilver/theme/colours.css | 6 +++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index c15a51d959..6238b2c1f2 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -1233,11 +1233,16 @@ phpbb.applyCodeEditor = function(textarea) { }; phpbb.applyDragNDrop = function(textarea) { - $('html').on('dragenter dragover', function () { + $('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'); + }); }; /** diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 0e16bff471..29cf641df2 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -978,7 +978,11 @@ fieldset.quick-login input.inputbox { } #message-box textarea.drag-n-drop { - outline-color: rgba(17, 163, 234, 0.7); + 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 From c018b3bbc7bf7831d0d78c8006cf9dec5f591719 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Wed, 29 Apr 2015 12:24:12 +0200 Subject: [PATCH 3/7] [ticket/12542] Rename javascript method and add doc block PHPBB3-12542 --- phpBB/assets/javascript/core.js | 14 +++++++++++++- phpBB/assets/javascript/editor.js | 4 +++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 6238b2c1f2..23521824ff 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -1232,7 +1232,19 @@ phpbb.applyCodeEditor = function(textarea) { }); }; -phpbb.applyDragNDrop = 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 === 'undefined') { + return; + } + $('body').on('dragenter dragover', function () { $(textarea).addClass('drag-n-drop'); }).on('dragleave dragout dragend drop', function() { diff --git a/phpBB/assets/javascript/editor.js b/phpBB/assets/javascript/editor.js index 45060c113b..c58e4d19dd 100644 --- a/phpBB/assets/javascript/editor.js +++ b/phpBB/assets/javascript/editor.js @@ -355,7 +355,9 @@ function getCaretPosition(txtarea) { textarea = doc.forms[form_name].elements[text_name]; phpbb.applyCodeEditor(textarea); - phpbb.applyDragNDrop(textarea); + if ($('#attach-panel').length) { + phpbb.showDragNDrop(textarea); + } }); })(jQuery); From 818df0ec684d15789e2c20dda88ea314725b818d Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Wed, 29 Apr 2015 12:30:35 +0200 Subject: [PATCH 4/7] [ticket/12542] Use extended CSS for all browsers PHPBB3-12542 --- phpBB/styles/prosilver/theme/colours.css | 8 ++++++++ phpBB/styles/prosilver/theme/forms.css | 14 +++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 29cf641df2..8ea41ef95f 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -978,10 +978,18 @@ fieldset.quick-login input.inputbox { } #message-box textarea.drag-n-drop { + -webkit-outline-color: rgba(102, 102, 102, 0.5); + -moz-outline-color: rgba(102, 102, 102, 0.5); + -ms-outline-color: rgba(102, 102, 102, 0.5); + -o-outline-color: rgba(102, 102, 102, 0.5); outline-color: rgba(102, 102, 102, 0.5); } #message-box textarea.drag-n-drop-highlight { + -webkit-outline-color: rgba(17, 163, 234, 0.5); + -moz-outline-color: rgba(17, 163, 234, 0.5); + -ms-outline-color: rgba(17, 163, 234, 0.5); + -o-outline-color: rgba(17, 163, 234, 0.5); outline-color: rgba(17, 163, 234, 0.5); } diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index 11e0583542..ed2c253cf1 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -243,9 +243,21 @@ fieldset.submit-buttons input { max-width: 100%; font-size: 1.2em; resize: vertical; + -webkit-outline: 3px dashed transparent; + -moz-outline: 3px dashed transparent; + -ms-outline: 3px dashed transparent; + -o-outline: 3px dashed transparent; outline: 3px dashed transparent; + -webkit-outline-offset: -4px; + -moz-outline-offset: -4px; + -ms-outline-offset: -4px; + -o-outline-offset: -4px; outline-offset: -4px; - transition: .5s; + -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 */ From b7a89187b5b4b42d931f5e86e825c1a80395b6f7 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Wed, 20 May 2015 15:32:00 +0200 Subject: [PATCH 5/7] [ticket/12542] Properly check if textarea is undefined or null PHPBB3-12542 --- phpBB/assets/javascript/core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 23521824ff..9eb931270a 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -1241,7 +1241,7 @@ phpbb.applyCodeEditor = function(textarea) { * @param {object} textarea Textarea DOM object to apply editor to */ phpbb.showDragNDrop = function(textarea) { - if (textarea === 'undefined') { + if (textarea == null) { return; } From 622d5b264327f10c77e13576de83acd18392ea44 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Sat, 23 May 2015 10:51:04 +0200 Subject: [PATCH 6/7] [ticket/12542] Do not use browser specific css for outline Also, the CSS selector for the drag'n'drop was simplified to only use the class. PHPBB3-12542 --- phpBB/styles/prosilver/theme/colours.css | 12 ++---------- phpBB/styles/prosilver/theme/forms.css | 8 -------- 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 8ea41ef95f..a5a52fbe97 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -977,19 +977,11 @@ fieldset.quick-login input.inputbox { color: #333333; } -#message-box textarea.drag-n-drop { - -webkit-outline-color: rgba(102, 102, 102, 0.5); - -moz-outline-color: rgba(102, 102, 102, 0.5); - -ms-outline-color: rgba(102, 102, 102, 0.5); - -o-outline-color: rgba(102, 102, 102, 0.5); +.drag-n-drop { outline-color: rgba(102, 102, 102, 0.5); } -#message-box textarea.drag-n-drop-highlight { - -webkit-outline-color: rgba(17, 163, 234, 0.5); - -moz-outline-color: rgba(17, 163, 234, 0.5); - -ms-outline-color: rgba(17, 163, 234, 0.5); - -o-outline-color: rgba(17, 163, 234, 0.5); +.drag-n-drop-highlight { outline-color: rgba(17, 163, 234, 0.5); } diff --git a/phpBB/styles/prosilver/theme/forms.css b/phpBB/styles/prosilver/theme/forms.css index ed2c253cf1..777f011c35 100644 --- a/phpBB/styles/prosilver/theme/forms.css +++ b/phpBB/styles/prosilver/theme/forms.css @@ -243,15 +243,7 @@ fieldset.submit-buttons input { max-width: 100%; font-size: 1.2em; resize: vertical; - -webkit-outline: 3px dashed transparent; - -moz-outline: 3px dashed transparent; - -ms-outline: 3px dashed transparent; - -o-outline: 3px dashed transparent; outline: 3px dashed transparent; - -webkit-outline-offset: -4px; - -moz-outline-offset: -4px; - -ms-outline-offset: -4px; - -o-outline-offset: -4px; outline-offset: -4px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; From abef078ab970c7ddc7645bd3d698e541896972e9 Mon Sep 17 00:00:00 2001 From: Marc Alexander Date: Thu, 28 May 2015 11:04:22 +0200 Subject: [PATCH 7/7] [ticket/12542] Use more specific CSS for drag-n-drop Otherwise the CSS gets overwritten by other CSS rules. PHPBB3-12542 --- phpBB/styles/prosilver/theme/colours.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index a5a52fbe97..29cf641df2 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -977,11 +977,11 @@ fieldset.quick-login input.inputbox { color: #333333; } -.drag-n-drop { +#message-box textarea.drag-n-drop { outline-color: rgba(102, 102, 102, 0.5); } -.drag-n-drop-highlight { +#message-box textarea.drag-n-drop-highlight { outline-color: rgba(17, 163, 234, 0.5); }