upstream/mattermost
1
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-02-18 18:18:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Use "transform: scale" to resize emoticons, and "zoom" when supported (#29276)

Browse source
This commit is contained in:
Michele Lo Russo 2024-12-06 00:22:55 +01:00 committed by GitHub
parent c67e5089c1
commit b03409202e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 50 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
webapp/channels/build/emoji/make_emojis.mjs
View file

@ -440,9 +440,14 @@ const cssRules = `.emojisprite-preview {
background-repeat: no-repeat;
cursor: pointer;
-moz-transform: scale(0.5);
transform: scale(0.5);
transform-origin: 0 0;
// Using zoom for now as it results in less blurry emojis on Chrome - MM-34178
zoom: 0.5;
@supports (zoom: 0.5) {
-moz-transform: none;
transform: none;
zoom: 0.5;
}
}
.emojisprite {
@ -453,7 +458,7 @@ const cssRules = `.emojisprite-preview {
border-radius: 18px;
cursor: pointer;
-moz-transform: scale(0.35);
zoom: 0.35;
transform: scale(0.35);
}
.emojisprite-loading {
@ -465,7 +470,16 @@ const cssRules = `.emojisprite-preview {
border-radius: 18px;
cursor: pointer;
-moz-transform: scale(0.35);
zoom: 0.35;
transform: scale(0.35);
}
@supports (zoom: 0.35) {
.emojisprite,
.emojisprite-loading {
-moz-transform: none;
transform: none;
zoom: 0.35;
}
}
${cssCats.join('\n')}

22
webapp/channels/src/sass/components/_emojisprite.scss
View file

@ -5,9 +5,14 @@
background-repeat: no-repeat;
cursor: pointer;
-moz-transform: scale(0.5);
transform: scale(0.5);
transform-origin: 0 0;
// Using zoom for now as it results in less blurry emojis on Chrome - MM-34178
zoom: 0.5;
@supports (zoom: 0.5) {
-moz-transform: none;
transform: none;
zoom: 0.5;
}
}
.emojisprite {
@ -18,7 +23,7 @@
background-repeat: no-repeat;
cursor: pointer;
-moz-transform: scale(0.35);
zoom: 0.35;
transform: scale(0.35);
}
.emojisprite-loading {
@ -30,7 +35,16 @@
background-repeat: no-repeat;
cursor: pointer;
-moz-transform: scale(0.35);
zoom: 0.35;
transform: scale(0.35);
}
@supports (zoom: 0.35) {
.emojisprite,
.emojisprite-loading {
-moz-transform: none;
transform: none;
zoom: 0.35;
}
}
.emoji-category-recent { background-image: url('images/emoji-sheets/apple-sheet.png'); }

17
webapp/channels/src/sass/components/_emoticons.scss
View file

@ -548,12 +548,23 @@ $emoji-footer-height: $emoji-footer-border-width + $emoji-half-height + $emoji-
img {
-moz-transform: scale(0.45);
zoom: 0.45;
transform: scale(0.45);
@supports (zoom: 0.45) {
-moz-transform: none;
transform: none;
zoom: 0.45;
}
&.emoji-category--custom {
-moz-transform: scale(1);
transform: scale(1.25);
zoom: 1;
transform: scale(1);
@supports (zoom: 1) {
-moz-transform: none;
transform: none;
zoom: 1;
}
}
}
}