Fix contacts menu on mentions #11258
Merged
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
The contacts menu was triggered only when the avatar or the name of the user were clicked. Due to this, clicking on certain (small) areas of a mention (like the right end, or the space between the avatar and the name) did not show the contacts menu. Now the contacts menu is shown when any area of the mention is clicked. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
There are no default CSS rules for the contacts menu, as its position depends on the element on which it is shown. Note, however, that if no explicit rules are provided the contacts menu on mentions is affected by the rules for the contacts menu on shares from the sharing tab. The contacts menu is now positioned to show the tip of the arrow horizontally aligned with the center of the avatar, and with the top of the menu slightly below the bottom border of the mention. Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
danxuliu
added
bug
design
nickvergessen
approved these changes
Sep 17, 2018
skjnldsv
approved these changes
Sep 17, 2018
|
@danxuliu backport today if it shall be in 14.0.1, otherwise 14.0.2 |
Not super important, it can be in 14.0.2. |
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.
This pull request ensures that the contacts menu will be shown when clicking on any area of the mention, and it also fixes the position of the contacts menu shown on mentions in the comments.
The positioning of the contacts menu is a bit messy right now. There are no default CSS rules for the contacts menu, as its position depends on the context in which it is shown (a different position is needed if the avatar is 16px or 32px, for example). However, there are some rules set in the share tab which use a broad selector and thus affect the contacts menu in the Comments app. Moreover, the position is also affected by the default rules for other CSS classes used in the contacts menu, like
.popover-menu.menu-left.The contacts menu is now positioned to show the tip of the arrow horizontally aligned with the center of the avatar *1, and with the top of the menu slightly below the bottom border of the mention *2.
*1: the avatar is 16px and the mention has a left padding of 1px, so the tip of the arrow has to appear at 9px from the left border of the mention to be centered on the avatar; the arrow is 18px (it is created using a 9px bottom border), so the tip is at 9px from its left border, and the left border of the arrow is 6px to the left of the contacts menu, which is left aligned with the mention, so the contacts menu has to be pulled 6px to the left to horizontally center the tip of the arrow on the avatar.
*2: the height of the mention is 20px, so the top of the contacts menu is at 24px to give some space between the mention and the menu while still keeping the tip of the arrow on the avatar.
Before:
After:
@nextcloud/designers