Fix drag shadow not visible when dragging a file on a narrow screen #7527
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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>
|
@danxuliu for design-related things please always cc the whole @nextcloud/designers group :) |
jancborchardt
approved these changes
Dec 15, 2017
MorrisJobke
deleted the
fix-drag-shadow-not-visible-when-dragging-a-file-on-a-narrow-screen
branch
This was referenced Jan 2, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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-indexthan the one used for the file list to be visible.In wide screens there is no problem, but in narrow screens the
#app-contentuses az-indexof 1000 in order to be visible over the#navigation-barwhen they overlap, so thez-indexof the drag shadow must be at least 1000 to be visible over the file list.Instead of updating the hardcoded
z-indexit was removed and replaced by CSS rules for.dragshadowelements to ease theming.Before:
After:
If you test this note that there are other issues when dragging files: it is not supported on touch screens, it triggers a slide of the navigation bar on narrow screens and the file could be dragged endlessly to the right. Those issues will be fixed in other pull requests.