A basic implementation of user avatar pill #9845
Conversation
|
Thanks @shubham-padia! I wouldn't change anything about the styling here; I think these look great. Should be ready to go! |
|
The padding/margins at the top are a bit off on the pills (most visible if you click on them so you see the green):
Otherwise this lgtm. |
|
I could also imagine rounding all four corners of the avatar? |
@timabbott What browser are you using, I'm unable to repro this. Firefox: |
Here's a preview: @rishig I personally like the pills without the right borders, what are your thoughts after viewing the preview ? |
|
@shubham-padia I think it's a zoom issue; I see it at 110% zoom in Chrome, but not other sizes. |
|
I can take a look at this too if needed |
shubham-padia
force-pushed
the
user_avatar_pill
branch
from
902a3f9
to
7a1a0e1
Compare
|
@timabbott Updated the PR to work for all zoom sizes. |
shubham-padia
force-pushed
the
user_avatar_pill
branch
from
7a1a0e1
to
64e5323
Compare
Allow passing image link in the item passed to appendValidatedData. When passing image link via any of the append* functions, make sure that create_item_from_text for that pill also adds the image link to the item created. This commit does not make any visual change to the current app. Changes to user_pill.js are necessary to enable user avatars for pills.
Adding the 20*20 image inside the pill caused a minor increase in pill height. Making the image 19*19 causes some increase in the height under different zoom conditions. I'm not sure about the reason behind this, so this can be counted as a hack.
shubham-padia
force-pushed
the
user_avatar_pill
branch
from
64e5323
to
988832d
Compare
Fixes zulip#9842. Enables avatar images in pills wherever user_pill.js is used. (e.g composebox, user group settings) Changes to search_pill.js are not made as search pills haven't been added yet completely and search_pill.js just contains the preparatory code right now. No change to compose_pm_pill.js is not required as it uses `user_pill.create_item_from_text` in its `create` function.
shubham-padia
force-pushed
the
user_avatar_pill
branch
from
988832d
to
93573e7
Compare
|
Update: I've made the pill height: 20px change as a separate commit. I've added the following text to the last commit message: |
|
Nice, merged, thanks @shubham-padia! |
Fixes #9842 .
Result:
User group settings:
@rishig @maxnuss I've implemented the user avatar pills as above.