From 8a3b8918cbd62702f1652e55f716af0d0cbcdda3 Mon Sep 17 00:00:00 2001
From: Frederic Massart <fred@moodle.com>
Date: Thu, 8 Nov 2012 19:40:21 +0800
Subject: [PATCH] MDL-36449 usability: Course drag and drop field styling

---
 course/dndupload.js             |  1 +
 course/yui/dragdrop/dragdrop.js |  3 +-
 theme/base/style/core.css       | 60 ++++++++++++++++-----------------
 theme/base/style/course.css     |  3 +-
 4 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/course/dndupload.js b/course/dndupload.js
index 2dcaa13a3d9..e1d1b1109ac 100644
--- a/course/dndupload.js
+++ b/course/dndupload.js
@@ -524,6 +524,7 @@ M.course_dndupload = {
         preview.li.appendChild(preview.div);
 
         preview.icon.src = M.util.image_url('t/addfile');
+        preview.icon.className = 'icon';
         preview.div.appendChild(preview.icon);
 
         preview.div.appendChild(document.createTextNode(' '));
diff --git a/course/yui/dragdrop/dragdrop.js b/course/yui/dragdrop/dragdrop.js
index 2b4cc39072d..96b8f1b3777 100644
--- a/course/yui/dragdrop/dragdrop.js
+++ b/course/yui/dragdrop/dragdrop.js
@@ -266,7 +266,8 @@ YUI.add('moodle-course-dragdrop', function(Y) {
                 });
                 del.dd.plug(Y.Plugin.DDProxy, {
                     // Don't move the node at the end of the drag
-                    moveOnEnd: false
+                    moveOnEnd: false,
+                    cloneNode: true
                 });
                 del.dd.plug(Y.Plugin.DDConstrained, {
                     // Keep it inside the .course-content
diff --git a/theme/base/style/core.css b/theme/base/style/core.css
index d3947fb792c..2cb5e8e4cdc 100644
--- a/theme/base/style/core.css
+++ b/theme/base/style/core.css
@@ -650,39 +650,39 @@ body.tag .managelink {padding: 5px;}
  */
 .ie.dir-rtl .mform .fitem .felement {margin-right:0;text-align:right;float:right;}
 
-.mod-indent-1 {margin-left:20px;}
-.mod-indent-2 {margin-left:40px;}
-.mod-indent-3 {margin-left:60px;}
-.mod-indent-4 {margin-left:80px;}
-.mod-indent-5 {margin-left:100px;}
-.mod-indent-6 {margin-left:120px;}
-.mod-indent-7 {margin-left:140px;}
-.mod-indent-8 {margin-left:160px;}
-.mod-indent-9 {margin-left:180px;}
-.mod-indent-10 {margin-left:200px;}
-.mod-indent-11 {margin-left:220px;}
-.mod-indent-12 {margin-left:240px;}
-.mod-indent-13 {margin-left:260px;}
-.mod-indent-14 {margin-left:280px;}
+.mod-indent-1 {margin-left:27px;}
+.mod-indent-2 {margin-left:54px;}
+.mod-indent-3 {margin-left:81px;}
+.mod-indent-4 {margin-left:108px;}
+.mod-indent-5 {margin-left:135px;}
+.mod-indent-6 {margin-left:162px;}
+.mod-indent-7 {margin-left:189px;}
+.mod-indent-8 {margin-left:216px;}
+.mod-indent-9 {margin-left:243px;}
+.mod-indent-10 {margin-left:270px;}
+.mod-indent-11 {margin-left:297px;}
+.mod-indent-12 {margin-left:324px;}
+.mod-indent-13 {margin-left:351px;}
+.mod-indent-14 {margin-left:378px;}
 .mod-indent-15,
-.mod-indent-huge {margin-left:300px;}
+.mod-indent-huge {margin-left:405px;}
 
-.dir-rtl .mod-indent-1 {margin-right:20px;margin-left:0;}
-.dir-rtl .mod-indent-2 {margin-right:40px;margin-left:0;}
-.dir-rtl .mod-indent-3 {margin-right:60px;margin-left:0;}
-.dir-rtl .mod-indent-4 {margin-right:80px;margin-left:0;}
-.dir-rtl .mod-indent-5 {margin-right:100px;margin-left:0;}
-.dir-rtl .mod-indent-6 {margin-right:120px;margin-left:0;}
-.dir-rtl .mod-indent-7 {margin-right:140px;margin-left:0;}
-.dir-rtl .mod-indent-8 {margin-right:160px;margin-left:0;}
-.dir-rtl .mod-indent-9 {margin-right:180px;margin-left:0;}
-.dir-rtl .mod-indent-10 {margin-right:200px;margin-left:0;}
-.dir-rtl .mod-indent-11 {margin-right:220px;margin-left:0;}
-.dir-rtl .mod-indent-12 {margin-right:240px;margin-left:0;}
-.dir-rtl .mod-indent-13 {margin-right:260px;margin-left:0;}
-.dir-rtl .mod-indent-14 {margin-right:280px;margin-left:0;}
+.dir-rtl .mod-indent-1 {margin-right:27px;margin-left:0;}
+.dir-rtl .mod-indent-2 {margin-right:54px;margin-left:0;}
+.dir-rtl .mod-indent-3 {margin-right:81px;margin-left:0;}
+.dir-rtl .mod-indent-4 {margin-right:108px;margin-left:0;}
+.dir-rtl .mod-indent-5 {margin-right:135px;margin-left:0;}
+.dir-rtl .mod-indent-6 {margin-right:162px;margin-left:0;}
+.dir-rtl .mod-indent-7 {margin-right:189px;margin-left:0;}
+.dir-rtl .mod-indent-8 {margin-right:216px;margin-left:0;}
+.dir-rtl .mod-indent-9 {margin-right:243px;margin-left:0;}
+.dir-rtl .mod-indent-10 {margin-right:270px;margin-left:0;}
+.dir-rtl .mod-indent-11 {margin-right:297px;margin-left:0;}
+.dir-rtl .mod-indent-12 {margin-right:324px;margin-left:0;}
+.dir-rtl .mod-indent-13 {margin-right:351px;margin-left:0;}
+.dir-rtl .mod-indent-14 {margin-right:378px;margin-left:0;}
 .dir-rtl .mod-indent-15,
-.dir-rtl .mod-indent-huge {margin-right:300px;margin-left:0;}
+.dir-rtl .mod-indent-huge {margin-right:405px;margin-left:0;}
 
 .dir-rtl .mform .fitem .felement {margin-right: 16%;margin-left:auto;text-align: right;}
 .dir-rtl .mform .fitem .felement input[name=email],
diff --git a/theme/base/style/course.css b/theme/base/style/course.css
index e137efe54c1..5e21258ad4a 100644
--- a/theme/base/style/course.css
+++ b/theme/base/style/course.css
@@ -187,7 +187,8 @@ input.titleeditor {
 
 /* Course drag and drop upload styles */
 #dndupload-status {width:40%;margin:0 30%;padding:6px;border:1px solid #ddd;text-align:center;background:#ffc;position:absolute;z-index:9999;box-shadow:2px 2px 5px 1px #ccc;border-radius:0px 0px 8px 8px;z-index: 0;}
-.dndupload-preview {color:#909090;border:1px dashed #909090;list-style:none;}
+.dndupload-preview {color:#909090;border:1px dashed #909090;list-style:none; margin-top: .2em; padding: .3em; line-height: 16px;}
+.dndupload-preview img.icon { vertical-align: text-bottom; padding: 0;}
 .dndupload-progress-outer {width:70px;border:1px solid black;height:10px;display:inline-block;margin:0;padding:0;overflow:hidden;position:relative;}
 .dndupload-progress-inner {width:0%;height:100%;background-color:green;display:inline-block;margin:0;padding:0;float:left;}
 .dndupload-hidden {display:none;}