Fix drag shadow not visible when dragging a file on a narrow screen

When a file from the file list is dragged a drag shadow (a copy of the
file row that follows the cursor position) is created. The drag shadow
element is created as a direct child of the body element, so it needs a
higher "z-index" than the one used for the file list to be visible.

In narrow screens the "#app-content" uses a "z-index" of 1000 in order
to be visible over the "#navigation-bar" when they overlap, so the
"z-index" of the drag shadow must be at least 1000 to be visible over
the file list.

Instead of updating the hardcoded "z-index" it was removed and replaced
by CSS rules for ".dragshadow" elements to ease theming.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 48520cbd710d3835eeede11366e291f3774ba858..2b61b20778cec09e1018cee4594a64bdbf1cc27c 100644 (file)
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -681,6 +681,7 @@ table tr.summary td {
 
 table.dragshadow {
        width:auto;
+       z-index: 100;
 }
 table.dragshadow td.filename {
        padding-left:60px;

diff --git a/apps/files/css/mobile.scss b/apps/files/css/mobile.scss
index 9e1c8a01d89c6857d659a5e6dfdd39659aa056b9..6d7d3460abb28417cfb70a3c28f063c2fb0f21c1 100644 (file)
--- a/apps/files/css/mobile.scss
+++ b/apps/files/css/mobile.scss
@@ -85,4 +85,9 @@ table td.filename .nametext .innernametext {
        display: block !important;
 }
 
+/* ensure that it is visible over #app-content */
+table.dragshadow {
+       z-index: 1000;
+}
+
 }

diff --git a/apps/files/js/files.js b/apps/files/js/files.js
index cdc2e27a6128c1c3960ff45d88b288e300baeb45..9607400f1ddf82cf0aa7027cec4c74db44a555f9 100644 (file)
--- a/apps/files/js/files.js
+++ b/apps/files/js/files.js
@@ -383,7 +383,6 @@ var dragOptions={
        revert: 'invalid',
        revertDuration: 300,
        opacity: 0.7,
-       zIndex: 100,
        appendTo: 'body',
        cursorAt: { left: 24, top: 18 },
        helper: createDragShadow,