Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: prevents scrollbar jumping in the emoji picker (#10749) 

This was mostly due to `content-visibility: auto;` but setting the width/height is also a good practice.
This commit is contained in:
Joffrey JAFFEUX 2020-09-28 13:23:46 +02:00 committed by GitHub
parent e00abbe1b7
commit c230d2e443
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/pretty-text/addon/emoji.js
View File

@ -126,7 +126,9 @@ export function performEmojiUnescape(string, opts) {
isReplacableInlineEmoji(string, index, inlineEmoji); isReplacableInlineEmoji(string, index, inlineEmoji);
return url && isReplacable return url && isReplacable
? `<img src='${url}' ${opts.skipTitle ? "" : `title='${emojiVal}'`} ${ ? `<img width="20" height="20" src='${url}' ${
opts.skipTitle ? "" : `title='${emojiVal}'`
} ${
opts.lazy ? "loading='lazy' " : "" opts.lazy ? "loading='lazy' " : ""
}alt='${emojiVal}' class='${classes}'>` }alt='${emojiVal}' class='${classes}'>`
: m; : m;

1
app/assets/stylesheets/common/base/emoji.scss
View File

@ -65,7 +65,6 @@ sup img.emoji {
.section { .section {
margin-bottom: 1em; margin-bottom: 1em;
content-visibility: auto;
.trash-recent { .trash-recent {
background: none; background: none;

6
test/javascripts/acceptance/topic-test.js
View File

@ -152,7 +152,7 @@ QUnit.test("Updating the topic title with emojis", async (assert) => {
assert.equal( assert.equal(
find(".fancy-title").html().trim(), find(".fancy-title").html().trim(),
`emojis title <img src="/images/emoji/emoji_one/bike.png?v=${v}" title="bike" alt="bike" class="emoji"> <img src="/images/emoji/emoji_one/blonde_woman/6.png?v=${v}" title="blonde_woman:t6" alt="blonde_woman:t6" class="emoji">`, `emojis title <img width=\"20\" height=\"20\" src="/images/emoji/emoji_one/bike.png?v=${v}" title="bike" alt="bike" class="emoji"> <img width=\"20\" height=\"20\" src="/images/emoji/emoji_one/blonde_woman/6.png?v=${v}" title="blonde_woman:t6" alt="blonde_woman:t6" class="emoji">`,
"it displays the new title with emojis" "it displays the new title with emojis"
); );
}); });
@ -167,7 +167,7 @@ QUnit.test("Updating the topic title with unicode emojis", async (assert) => {
assert.equal( assert.equal(
find(".fancy-title").html().trim(), find(".fancy-title").html().trim(),
`emojis title <img src="/images/emoji/emoji_one/man_farmer.png?v=${v}" title="man_farmer" alt="man_farmer" class="emoji"><img src="/images/emoji/emoji_one/pray.png?v=${v}" title="pray" alt="pray" class="emoji">`, `emojis title <img width=\"20\" height=\"20\" src="/images/emoji/emoji_one/man_farmer.png?v=${v}" title="man_farmer" alt="man_farmer" class="emoji"><img width=\"20\" height=\"20\" src="/images/emoji/emoji_one/pray.png?v=${v}" title="pray" alt="pray" class="emoji">`,
"it displays the new title with escaped unicode emojis" "it displays the new title with escaped unicode emojis"
); );
}); });
@ -185,7 +185,7 @@ QUnit.test(
assert.equal( assert.equal(
find(".fancy-title").html().trim(), find(".fancy-title").html().trim(),
`Test<img src="/images/emoji/emoji_one/slightly_smiling_face.png?v=${v}" title="slightly_smiling_face" alt="slightly_smiling_face" class="emoji">Title`, `Test<img width=\"20\" height=\"20\" src="/images/emoji/emoji_one/slightly_smiling_face.png?v=${v}" title="slightly_smiling_face" alt="slightly_smiling_face" class="emoji">Title`,
"it displays the new title with escaped unicode emojis" "it displays the new title with escaped unicode emojis"
); );
} }

20
test/javascripts/lib/emoji-test.js
View File

@ -32,12 +32,12 @@ QUnit.test("emojiUnescape", function (assert) {
); );
testUnescape( testUnescape(
"emoticons :)", "emoticons :)",
`emoticons <img src='/images/emoji/emoji_one/slight_smile.png?v=${v}' title='slight_smile' alt='slight_smile' class='emoji'>`, `emoticons <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/slight_smile.png?v=${v}' title='slight_smile' alt='slight_smile' class='emoji'>`,
"emoticons are still supported" "emoticons are still supported"
); );
testUnescape( testUnescape(
"With emoji :O: :frog: :smile:", "With emoji :O: :frog: :smile:",
`With emoji <img src='/images/emoji/emoji_one/o.png?v=${v}' title='O' alt='O' class='emoji'> <img src='/images/emoji/emoji_one/frog.png?v=${v}' title='frog' alt='frog' class='emoji'> <img src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'>`, `With emoji <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/o.png?v=${v}' title='O' alt='O' class='emoji'> <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/frog.png?v=${v}' title='frog' alt='frog' class='emoji'> <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'>`,
"title with emoji" "title with emoji"
); );
testUnescape( testUnescape(
@ -47,27 +47,27 @@ QUnit.test("emojiUnescape", function (assert) {
); );
testUnescape( testUnescape(
"(:frog:) :)", "(:frog:) :)",
`(<img src='/images/emoji/emoji_one/frog.png?v=${v}' title='frog' alt='frog' class='emoji'>) <img src='/images/emoji/emoji_one/slight_smile.png?v=${v}' title='slight_smile' alt='slight_smile' class='emoji'>`, `(<img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/frog.png?v=${v}' title='frog' alt='frog' class='emoji'>) <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/slight_smile.png?v=${v}' title='slight_smile' alt='slight_smile' class='emoji'>`,
"non-word characters allowed next to emoji" "non-word characters allowed next to emoji"
); );
testUnescape( testUnescape(
":smile: hi", ":smile: hi",
`<img src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'> hi`, `<img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'> hi`,
"start of line" "start of line"
); );
testUnescape( testUnescape(
"hi :smile:", "hi :smile:",
`hi <img src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'>`, `hi <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'>`,
"end of line" "end of line"
); );
testUnescape( testUnescape(
"hi :blonde_woman:t4:", "hi :blonde_woman:t4:",
`hi <img src='/images/emoji/emoji_one/blonde_woman/4.png?v=${v}' title='blonde_woman:t4' alt='blonde_woman:t4' class='emoji'>`, `hi <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/blonde_woman/4.png?v=${v}' title='blonde_woman:t4' alt='blonde_woman:t4' class='emoji'>`,
"support for skin tones" "support for skin tones"
); );
testUnescape( testUnescape(
"hi :blonde_woman:t4: :blonde_man:t6:", "hi :blonde_woman:t4: :blonde_man:t6:",
`hi <img src='/images/emoji/emoji_one/blonde_woman/4.png?v=${v}' title='blonde_woman:t4' alt='blonde_woman:t4' class='emoji'> <img src='/images/emoji/emoji_one/blonde_man/6.png?v=${v}' title='blonde_man:t6' alt='blonde_man:t6' class='emoji'>`, `hi <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/blonde_woman/4.png?v=${v}' title='blonde_woman:t4' alt='blonde_woman:t4' class='emoji'> <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/blonde_man/6.png?v=${v}' title='blonde_man:t6' alt='blonde_man:t6' class='emoji'>`,
"support for multiple skin tones" "support for multiple skin tones"
); );
testUnescape( testUnescape(
@ -95,7 +95,7 @@ QUnit.test("emojiUnescape", function (assert) {
); );
testUnescape( testUnescape(
"Hello 😊 World", "Hello 😊 World",
`Hello <img src='/images/emoji/emoji_one/blush.png?v=${v}' title='blush' alt='blush' class='emoji'> World`, `Hello <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/blush.png?v=${v}' title='blush' alt='blush' class='emoji'> World`,
"emoji from Unicode emoji" "emoji from Unicode emoji"
); );
testUnescape( testUnescape(
@ -108,7 +108,7 @@ QUnit.test("emojiUnescape", function (assert) {
); );
testUnescape( testUnescape(
"Hello😊World", "Hello😊World",
`Hello<img src='/images/emoji/emoji_one/blush.png?v=${v}' title='blush' alt='blush' class='emoji'>World`, `Hello<img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/blush.png?v=${v}' title='blush' alt='blush' class='emoji'>World`,
"emoji from Unicode emoji when inline translation enabled", "emoji from Unicode emoji when inline translation enabled",
{ {
enable_inline_emoji_translation: true, enable_inline_emoji_translation: true,
@ -124,7 +124,7 @@ QUnit.test("emojiUnescape", function (assert) {
); );
testUnescape( testUnescape(
"hi:smile:", "hi:smile:",
`hi<img src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'>`, `hi<img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'>`,
"emoji when inline translation enabled", "emoji when inline translation enabled",
{ enable_inline_emoji_translation: true } { enable_inline_emoji_translation: true }
); );

2
test/javascripts/lib/search-test.js
View File

@ -32,7 +32,7 @@ QUnit.test("unescapesEmojisInBlurbs", (assert) => {
const blurb = results.posts[0].get("blurb"); const blurb = results.posts[0].get("blurb");
assert.ok(blurb.indexOf("thinking.png")); assert.ok(blurb.indexOf("thinking.png"));
assert.ok(blurb.indexOf("<img src") === 0); assert.ok(blurb.indexOf('<img width="20" height="20" src') === 0);
assert.ok(blurb.indexOf(":thinking:") === -1); assert.ok(blurb.indexOf(":thinking:") === -1);
}); });

4
test/javascripts/models/topic-test.js
View File

@ -129,7 +129,7 @@ QUnit.test("fancyTitle", (assert) => {
assert.equal( assert.equal(
topic.get("fancyTitle"), topic.get("fancyTitle"),
`<img src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'> with all <img src='/images/emoji/emoji_one/slight_smile.png?v=${v}' title='slight_smile' alt='slight_smile' class='emoji'> the emojis <img src='/images/emoji/emoji_one/pear.png?v=${v}' title='pear' alt='pear' class='emoji'><img src='/images/emoji/emoji_one/peach.png?v=${v}' title='peach' alt='peach' class='emoji'>`, `<img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'> with all <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/slight_smile.png?v=${v}' title='slight_smile' alt='slight_smile' class='emoji'> the emojis <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/pear.png?v=${v}' title='pear' alt='pear' class='emoji'><img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/peach.png?v=${v}' title='peach' alt='peach' class='emoji'>`,
"supports emojis" "supports emojis"
); );
}); });
@ -159,7 +159,7 @@ QUnit.test("excerpt", (assert) => {
assert.equal( assert.equal(
topic.get("escapedExcerpt"), topic.get("escapedExcerpt"),
`This is a test topic <img src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'>`, `This is a test topic <img width=\"20\" height=\"20\" src='/images/emoji/emoji_one/smile.png?v=${v}' title='smile' alt='smile' class='emoji'>`,
"supports emojis" "supports emojis"
); );
}); });