[mms] Improved UI for dropping attachments on dynamic compose screen.

horde · Sep 23, 2013 · 2c28dfa · 2c28dfa
1 parent 0d65a8d
commit 2c28dfa
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 34 deletions.
diff --git a/imp/docs/CHANGES b/imp/docs/CHANGES
@@ -2,6 +2,7 @@
 v6.1.5-git
 ----------
 
+[mms] Improved UI for dropping attachments on dynamic compose screen.
 [mms] SECURITY: Fix XSS when flagging a message in dynamic view with a
       user-defined flag (João Machado <geral@jpaulo.eu>).
 [mms] Fix manually loading all addresses in a header.

diff --git a/imp/js/compose-dimp.js b/imp/js/compose-dimp.js
@@ -1208,7 +1208,8 @@ var DimpCompose = {
                 }
             }.bindAsEventListener(this));
             DragHandler.dropelt = $('atcdrop');
-            DragHandler.droptarget = $('atctd');
+            DragHandler.droptarget = $('atcdiv');
+            DragHandler.hoverclass = 'atcdrop_over';
             DimpCore.addPopdown($('upload'), 'atc', {
                 no_offset: true
             });

diff --git a/imp/js/draghandler.js b/imp/js/draghandler.js
@@ -9,13 +9,12 @@
 
 var DragHandler = {
 
-    dragtrack: [],
     // dropelt,
     // droptarget,
+    // hoverclass,
 
     handleDrop: function(e)
     {
-        this.dragtrack = [];
         this.dropelt.hide();
         this.droptarget.show();
         this.dropelt.fire('DragHandler:drop', e);
@@ -24,26 +23,21 @@ var DragHandler = {
 
     handleEnter: function(e)
     {
-        if (!Object.isElement(e.target)) {
-            this.dragtrack.push(e.target);
-        } else if (!this.dropelt.visible()) {
+        if (!this.dropelt.visible()) {
             this.dropelt.clonePosition(this.droptarget).show();
             this.droptarget.hide();
-
-            if (e.target != this.droptarget &&
-                !e.target.descendantOf(this.droptarget)) {
-                this.dragtrack.push(e.target);
-            }
-        } else if (this.dragtrack.lastIndexOf(e.target) == -1) {
-            this.dragtrack.push(e.target);
         }
     },
 
     handleLeave: function(e)
     {
-        this.dragtrack = this.dragtrack.without(e.target);
+        var pointer = e.pointer(),
+            vp = document.viewport.getDimensions();
 
-        if (!this.dragtrack.length) {
+        if (pointer.x <= 0 ||
+            pointer.x >= vp.width ||
+            pointer.y <= 0 ||
+            pointer.y >= vp.height) {
             this.dropelt.hide();
             this.droptarget.show();
         }
@@ -52,14 +46,21 @@ var DragHandler = {
     handleOver: function(e)
     {
         if (e.target == this.dropelt) {
+            this.dropelt.addClassName(this.hoverclass);
             e.stop();
+        } else {
+            this.dropelt.removeClassName(this.hoverclass);
         }
+    },
+
+    onDomLoad: function()
+    {
+        document.on('dragenter', 'body', this.handleEnter.bindAsEventListener(this));
+        document.on('dragleave', 'body', this.handleLeave.bindAsEventListener(this));
+        document.observe('dragover', this.handleOver.bindAsEventListener(this));
+        document.observe('drop', this.handleDrop.bind(this));
     }
 
 };
 
-document.observe('dragenter', DragHandler.handleEnter.bindAsEventListener(DragHandler));
-document.observe('dragleave', DragHandler.handleLeave.bindAsEventListener(DragHandler));
-document.observe('dragover', DragHandler.handleOver.bindAsEventListener(DragHandler));
-document.observe('drop', DragHandler.handleDrop.bind(DragHandler));
-
+document.observe('dom:loaded', DragHandler.onDomLoad.bind(DragHandler));
diff --git a/imp/package.xml b/imp/package.xml
@@ -33,6 +33,7 @@
  </stability>
  <license uri="http://www.horde.org/licenses/gpl">GPL-2.0</license>
  <notes>
+* [mms] Improved UI for dropping attachments on dynamic compose screen.
 * [mms] SECURITY: Fix XSS when flagging a message in dynamic view with a user-defined flag (João Machado &lt;geral@jpaulo.eu&gt;).
 * [mms] Fix manually loading all addresses in a header.
 * [mms] Fix regression where reloading dynamic view would not load the previously selected message.
@@ -3293,6 +3294,7 @@
    <date>2013-09-04</date>
    <license uri="http://www.horde.org/licenses/gpl">GPL-2.0</license>
    <notes>
+* [mms] Improved UI for dropping attachments on dynamic compose screen.
 * [mms] SECURITY: Fix XSS when flagging a message in dynamic view with a user-defined flag (João Machado &lt;geral@jpaulo.eu&gt;).
 * [mms] Fix manually loading all addresses in a header.
 * [mms] Fix regression where reloading dynamic view would not load the previously selected message.

diff --git a/imp/templates/dynamic/compose.html.php b/imp/templates/dynamic/compose.html.php
@@ -148,18 +148,24 @@
      <td class="label">
       <span class="iconImg attachmentImg"></span>:
      </td>
-     <td id="atctd">
-      <span id="upload_limit" style="display:none"><?php echo _("The attachment limit has been reached.") ?></span>
-      <span id="upload_wait" style="display:none"></span>
-      <span>
-       <label id="compose_upload_add" for="upload"><?php echo _("Add Attachment") ?></label>
-       <?php echo $this->fileFieldTag('file_upload', array('id' => 'upload')) ?>
-      </span>
+     <td>
+      <div id="atcdrop" style="display:none">
+       <?php echo _("Drop file here to attach.") ?>
+      </div>
+      <div id="atcdiv">
+       <span id="upload_limit" style="display:none"><?php echo _("The attachment limit has been reached.") ?></span>
+       <span id="upload_wait" style="display:none"></span>
+       <span>
+        <label id="compose_upload_add" for="upload"><?php echo _("Add Attachment") ?></label>
+        <?php echo $this->fileFieldTag('file_upload', array('id' => 'upload')) ?>
+       </span>
 <?php else: ?>
      <td></td>
      <td>
+      <div>
 <?php endif; ?>
-      <ul id="attach_list" style="display:none"></ul>
+       <ul id="attach_list" style="display:none"></ul>
+      </div>
      </td>
     </tr>
     <tr id="noticerow" style="display:none">
@@ -196,7 +202,3 @@
   </div>
  </div>
 </form>
-
-<div id="atcdrop" style="display:none">
- <?php echo _("Drop file here to attach.") ?>
-</div>
diff --git a/imp/themes/default/dynamic/screen.css b/imp/themes/default/dynamic/screen.css
@@ -650,10 +650,17 @@ div.dimpActionsMsg #windowclose {
 }
 
 #atcdrop {
-    border: 1px dashed #ccc;
+    border: 1px dashed #999;
+    display: table-cell;
+    color: #999;
     font-size: 110%;
     font-weight: bold;
-    position: absolute;
+    text-align: center;
+    vertical-align: middle;
+}
+.atcdrop_over {
+    border-color: #111 !important;
+    color: #111 !important;
 }
 
 .msgwrite .sendtextarea {