From 39c549fa27a17290dfb9cc2eaa8b17d0db2e1c7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= <danxuliu@gmail.com>
Date: Thu, 14 Dec 2017 04:05:49 +0100
Subject: [PATCH] Fix drag shadow not visible when dragging a file on a narrow
screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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>
---
apps/files/css/files.scss | 1 +
apps/files/css/mobile.scss | 5 +++++
apps/files/js/files.js | 1 -
3 files changed, 6 insertions(+), 1 deletion(-)
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
index 1be3c9216f0..6135b1ceeca 100644
--- a/apps/files/css/files.scss
+++ b/apps/files/css/files.scss
@@ -649,6 +649,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 12c9e4fa2d3..10fa29e7a38 100644
--- a/apps/files/css/mobile.scss
+++ b/apps/files/css/mobile.scss
@@ -69,4 +69,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 017bf7ecf41..479a2817f44 100644
--- 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,
--
GitLab