this repo has no description
Support non-rectangular custom emojis 😩
Platforms like Misskey have irregularly-shaped custom emojis (emojos?)
- So far this handles horizontally-wide emojis, not tall ones (haven't seen any)
- text-overflow: ellipsis is not used because it can't ellipsis-fy wide emoji images
+32
-16
+17
-8
src/components/compose.jsx
+17
-8
src/components/compose.jsx
···
1893
1893
}}
1894
1894
title={`:${emoji.shortcode}:`}
1895
1895
>
1896
-
<img
1897
-
src={emoji.url || emoji.staticUrl}
1898
-
alt={emoji.shortcode}
1899
-
width="16"
1900
-
height="16"
1901
-
loading="lazy"
1902
-
decoding="async"
1903
-
/>
1896
+
<picture>
1897
+
{!!emoji.staticUrl && (
1898
+
<source
1899
+
srcset={emoji.staticUrl}
1900
+
media="(prefers-reduced-motion: reduce)"
1901
+
/>
1902
+
)}
1903
+
<img
1904
+
class="shortcode-emoji"
1905
+
src={emoji.url || emoji.staticUrl}
1906
+
alt={emoji.shortcode}
1907
+
width="16"
1908
+
height="16"
1909
+
loading="lazy"
1910
+
decoding="async"
1911
+
/>
1912
+
</picture>
1904
1913
</button>
1905
1914
))}
1906
1915
</section>
+2
-2
src/components/emoji-text.jsx
+2
-2
src/components/emoji-text.jsx
+12
-5
src/components/status.css
+12
-5
src/components/status.css
···
283
283
284
284
.status > .container > .meta {
285
285
display: flex;
286
-
gap: 8px;
287
-
justify-content: space-between;
286
+
gap: 4px;
287
+
/* justify-content: space-between; */
288
288
white-space: nowrap;
289
289
}
290
290
.status.small > .container > .meta {
···
293
293
.status > .container > .meta > * {
294
294
min-width: 0;
295
295
overflow: hidden;
296
-
text-overflow: ellipsis;
296
+
/* text-overflow: ellipsis; */
297
+
}
298
+
.status > .container > .meta .name-text {
299
+
mask-image: linear-gradient(to left, transparent, black 16px);
300
+
flex-grow: 1;
297
301
}
298
302
.status.large > .container > .meta {
299
303
min-height: 50px;
···
1473
1477
}
1474
1478
1475
1479
.shortcode-emoji {
1476
-
width: 1.2em;
1480
+
width: auto;
1481
+
min-width: 1.2em;
1482
+
max-width: 100%;
1477
1483
height: 1.2em;
1478
1484
vertical-align: text-bottom;
1479
-
object-fit: scale-down;
1485
+
object-fit: cover;
1486
+
object-position: left;
1480
1487
}
1481
1488
1482
1489
/* EDIT HISTORY */
+1
-1
src/utils/emojify-text.js
+1
-1
src/utils/emojify-text.js
···
8
8
const { shortcode, staticUrl, url } = emoji;
9
9
text = text.replace(
10
10
new RegExp(`:${shortcode}:`, 'g'),
11
-
`<picture><source srcset="${staticUrl}" media="(prefers-reduced-motion: reduce)"></source><img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="12" height="12" loading="lazy" decoding="async" /></picture>`,
11
+
`<picture><source srcset="${staticUrl}" media="(prefers-reduced-motion: reduce)"></source><img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="16" height="16" loading="lazy" decoding="async" /></picture>`,
12
12
);
13
13
});
14
14
// console.log(text, emojis);