From 8e96510b2528056e84cf8d0ed68d2e686e566180 Mon Sep 17 00:00:00 2001 From: ThibG Date: Sat, 6 Jun 2020 17:41:56 +0200 Subject: Hide sensitive preview cards with blurhash (#13985) * Use preview card blurhash in WebUI * Handle sensitive preview cards --- app/javascript/styles/mastodon/components.scss | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 2bd8ee456..5d725b908 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -3097,6 +3097,11 @@ a.status-card { flex: 1 1 auto; overflow: hidden; padding: 14px 14px 14px 8px; + + &--blurred { + filter: blur(2px); + pointer-events: none; + } } .status-card__description { @@ -3134,7 +3139,8 @@ a.status-card { width: 100%; } - .status-card__image-image { + .status-card__image-image, + .status-card__image-preview { border-radius: 4px 4px 0 0; } @@ -3179,6 +3185,24 @@ a.status-card.compact:hover { background-position: center center; } +.status-card__image-preview { + border-radius: 4px 0 0 4px; + display: block; + margin: 0; + width: 100%; + height: 100%; + object-fit: fill; + position: absolute; + top: 0; + left: 0; + z-index: 0; + background: $base-overlay-background; + + &--hidden { + display: none; + } +} + .load-more { display: block; color: $dark-text-color; -- cgit From db319c0fdc8a81718a64e0ff905d5ba628551fd2 Mon Sep 17 00:00:00 2001 From: ThibG Date: Tue, 9 Jun 2020 10:28:23 +0200 Subject: Improve rendering of emoji which do not contrast with background (#13772) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Refactor list of emoji requiring added outlines so that it can be theme-specific * Split inaccessible emoji to emoji requiring an outline and ones that can be inverted * Drop the “silouhettes” from black emoji as they seem to have changed color * Add inaccessible emojis list for the light theme * Use bordered emoji variant instead of unreliable CSS --- .../mastodon/features/emoji/__tests__/emoji-test.js | 2 +- app/javascript/mastodon/features/emoji/emoji.js | 11 ++++++++++- app/javascript/styles/mastodon-light/variables.scss | 2 ++ app/javascript/styles/mastodon/accessibility.scss | 11 +++++------ 4 files changed, 18 insertions(+), 8 deletions(-) (limited to 'app/javascript/styles') diff --git a/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js b/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js index c8425c4c6..36bbde0c0 100644 --- a/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js +++ b/app/javascript/mastodon/features/emoji/__tests__/emoji-test.js @@ -76,7 +76,7 @@ describe('emoji', () => { it('skips the textual presentation VS15 character', () => { expect(emojify('✴︎')) // This is U+2734 EIGHT POINTED BLACK STAR then U+FE0E VARIATION SELECTOR-15 - .toEqual('✴'); + .toEqual('✴'); }); }); }); diff --git a/app/javascript/mastodon/features/emoji/emoji.js b/app/javascript/mastodon/features/emoji/emoji.js index cd10e20b7..382ba683f 100644 --- a/app/javascript/mastodon/features/emoji/emoji.js +++ b/app/javascript/mastodon/features/emoji/emoji.js @@ -6,6 +6,15 @@ const trie = new Trie(Object.keys(unicodeMapping)); const assetHost = process.env.CDN_HOST || ''; +// Emoji requiring extra borders depending on theme +const darkEmoji = '🎱🐜⚫🖤⬛◼️◾◼️✒️▪️💣🎳📷📸♣️🕶️✴️🔌💂‍♀️📽️🍳🦍💂🔪🕳️🕹️🕋🖊️🖋️💂‍♂️🎤🎓🎥🎼♠️🎩🦃📼📹🎮🐃🏴'; +const lightEmoji = '👽⚾🐔☁️💨🕊️👀🍥👻🐐❕❔⛸️🌩️🔊🔇📃🌧️🐏🍚🍙🐓🐑💀☠️🌨️🔉🔈💬💭🏐🏳️⚪⬜◽◻️▫️'; + +const emojiFilename = (filename, match) => { + const borderedEmoji = document.body.classList.contains('theme-mastodon-light') ? lightEmoji : darkEmoji; + return borderedEmoji.includes(match) ? (filename + '_border') : filename; +}; + const emojify = (str, customEmojis = {}) => { const tagCharsWithoutEmojis = '<&'; const tagCharsWithEmojis = Object.keys(customEmojis).length ? '<&:' : '<&'; @@ -60,7 +69,7 @@ const emojify = (str, customEmojis = {}) => { } else { // matched to unicode emoji const { filename, shortCode } = unicodeMapping[match]; const title = shortCode ? `:${shortCode}:` : ''; - replacement = `${match}`; + replacement = `${match}`; rend = i + match.length; // If the matched character was followed by VS15 (for selecting text presentation), skip it. if (str.codePointAt(rend) === 65038) { diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss index c68944528..bc039ff03 100644 --- a/app/javascript/styles/mastodon-light/variables.scss +++ b/app/javascript/styles/mastodon-light/variables.scss @@ -39,3 +39,5 @@ $account-background-color: $white !default; @function lighten($color, $amount) { @return hsl(hue($color), saturation($color), lightness($color) - $amount); } + +$emojis-requiring-inversion: 'chains'; diff --git a/app/javascript/styles/mastodon/accessibility.scss b/app/javascript/styles/mastodon/accessibility.scss index d33806c84..c5bcb5941 100644 --- a/app/javascript/styles/mastodon/accessibility.scss +++ b/app/javascript/styles/mastodon/accessibility.scss @@ -1,14 +1,13 @@ -$black-emojis: '8ball' 'ant' 'back' 'black_circle' 'black_heart' 'black_large_square' 'black_medium_small_square' 'black_medium_square' 'black_nib' 'black_small_square' 'bomb' 'bowling' 'bust_in_silhouette' 'busts_in_silhouette' 'camera' 'camera_with_flash' 'clubs' 'copyright' 'curly_loop' 'currency_exchange' 'dark_sunglasses' 'eight_pointed_black_star' 'electric_plug' 'end' 'female-guard' 'film_projector' 'fried_egg' 'gorilla' 'guardsman' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'hocho' 'hole' 'joystick' 'kaaba' 'lower_left_ballpoint_pen' 'lower_left_fountain_pen' 'male-guard' 'microphone' 'mortar_board' 'movie_camera' 'musical_score' 'on' 'registered' 'soon' 'spades' 'speaking_head_in_silhouette' 'spider' 'telephone_receiver' 'tm' 'top' 'tophat' 'turkey' 'vhs' 'video_camera' 'video_game' 'water_buffalo' 'waving_black_flag' 'wavy_dash'; +$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange' 'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign' 'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on' 'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default; -%white-emoji-outline { - filter: drop-shadow(1px 1px 0 $white) drop-shadow(-1px 1px 0 $white) drop-shadow(1px -1px 0 $white) drop-shadow(-1px -1px 0 $white); - transform: scale(.71); +%emoji-color-inversion { + filter: invert(1); } .emojione { - @each $emoji in $black-emojis { + @each $emoji in $emojis-requiring-inversion { &[title=':#{$emoji}:'] { - @extend %white-emoji-outline; + @extend %emoji-color-inversion; } } } -- cgit