Fix size of icons in menus inside apps when shown as images #11054
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
Some popover menus, like the contacts menu, still show their icon using an img element. The main CSS rules assume that a "content-box" sizing is being used, and thus set the size and padding of the image to add up to the line height. However, ".app-*" descendants use a "border-box" sizing, so when a menu with an image was shown in an app the icon was not properly shown. Now both the width and height of the image is set to the item height in those cases, which causes the visible size of the icon to be the item height minus the padding (the same as when "content-box" sizing is used). Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
danxuliu
added
bug
design
|
I added this css Nice catch on the other hand!! 🤗 |
skjnldsv
approved these changes
Sep 5, 2018
rullzer
deleted the
fix-size-of-icons-in-menus-inside-apps-when-shown-as-images
branch
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 fixes the icons in the contacts menu popover for Files app, although it can potentially fix other menus too.
In our beloved #9982 :-P the descendants of
.app-*elements were set to useborder-boxsizing. This caused the descendants of the Files app (like the comments and the sharing tab in its sidebar) to useborder-boxsizing (before they usedcontent-boxbecause there was no ancestor#appelement).The main CSS rules for images in popover menus assume that
content-boxsizing is used, so when they were shown usingborder-boxthey were not properly shown. Now both the width and height of the image is set to the item height in that case, which causes the visible size of the icon to be the item height minus the padding (the same as whencontent-boxsizing is used).Before:
After:
@nextcloud/designers