From e6ed64cfd0006f5a8b59588d5e74ff20fc1f3a0c Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 17 Dec 2022 14:38:21 +0800 Subject: [PATCH 1/5] Fix auto display: none not working `this` probably refers to something else --- src/components/status.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/status.jsx b/src/components/status.jsx index dc135046..d31f5f38 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -220,8 +220,10 @@ function Card({ card }) { height={height} loading="lazy" alt="" - onError={() => { - this.style.display = 'none'; + onError={(e) => { + try { + e.target.style.display = 'none'; + } catch (e) {} }} />
From b9c762cf535294270f28ab85c74175232352a997 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 17 Dec 2022 17:23:31 +0800 Subject: [PATCH 2/5] Nudge font size smaller for code --- src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index 72d2b77f..061c9f63 100644 --- a/src/index.css +++ b/src/index.css @@ -188,7 +188,7 @@ select.plain { pre code, code { - font-size: 95%; + font-size: 90%; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; } From d0579a57d66f2d58fad00f914736f90f5f9485e9 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 17 Dec 2022 17:24:26 +0800 Subject: [PATCH 3/5] Fix bug when text nodes contain HTML <> Text nodes don't escape them --- src/utils/enhance-content.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js index 783bcffe..4783f3c3 100644 --- a/src/utils/enhance-content.js +++ b/src/utils/enhance-content.js @@ -20,7 +20,7 @@ function enhanceContent(content, opts = {}) { // Convert :shortcode: to let textNodes = extractTextNodes(dom); textNodes.forEach((node) => { - let html = node.nodeValue; + let html = node.nodeValue.replace(//g, '>'); if (emojis) { html = emojifyText(html, emojis); } @@ -34,7 +34,7 @@ function enhanceContent(content, opts = {}) { // Convert `code` to code textNodes = extractTextNodes(dom); textNodes.forEach((node) => { - let html = node.nodeValue; + let html = node.nodeValue.replace(//g, '>'); if (/`[^`]+`/g.test(html)) { html = html.replaceAll(/(`[^]+?`)/g, '$1'); } From 1c18184ef4fd3ddda089bd8d37a0f83bf5b47dbc Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 17 Dec 2022 17:25:04 +0800 Subject: [PATCH 4/5] Fix one-char space inserted when replying to own posts --- src/components/compose.jsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/compose.jsx b/src/components/compose.jsx index c35d8913..aca29fde 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -93,11 +93,15 @@ function Compose({ replyToStatus.account.acct, ...replyToStatus.mentions.map((m) => m.acct), ]); - textareaRef.current.value = `${[...mentions] - .filter((m) => m !== currentAccountInfo.acct) // Excluding self - .map((m) => `@${m}`) - .join(' ')} `; - textareaRef.current.dispatchEvent(new Event('input')); + const allMentions = [...mentions].filter( + (m) => m !== currentAccountInfo.acct, + ); + if (allMentions.length > 0) { + textareaRef.current.value = `${allMentions + .map((m) => `@${m}`) + .join(' ')} `; + textareaRef.current.dispatchEvent(new Event('input')); + } textareaRef.current.focus(); } setVisibility(visibility); From 5f0d1e865643ee3d25aa1fb9ddd663254b59343a Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Sat, 17 Dec 2022 17:26:41 +0800 Subject: [PATCH 5/5] Refactor action buttons + optimistic UI --- src/components/status.css | 13 +-- src/components/status.jsx | 197 ++++++++++++++++++++------------------ 2 files changed, 111 insertions(+), 99 deletions(-) diff --git a/src/components/status.css b/src/components/status.css index 2be410d8..731dfb4d 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -294,6 +294,7 @@ } .status .media-audio { border: 0; + min-height: 0; } .status .media-audio audio { width: 100%; @@ -471,7 +472,7 @@ a.card:hover { .status .actions > button.plain.reblog-button:hover { color: var(--reblog-color); } -.status .actions > button.plain.reblog-button.reblogged { +.status .actions > button.plain.reblog-button.checked { color: var(--reblog-color); border-color: var(--reblog-color); } @@ -490,13 +491,13 @@ a.card:hover { opacity: 0; } } -.status .actions > button.plain.reblog-button.reblogged .icon { +.status .actions > button.plain.reblog-button.checked .icon { animation: reblogged 1s ease-in-out; } .status .actions > button.plain.favourite-button:hover { color: var(--favourite-color); } -.status .actions > button.plain.favourite-button.favourited { +.status .actions > button.plain.favourite-button.checked { color: var(--favourite-color); border-color: var(--favourite-color); } @@ -518,11 +519,11 @@ a.card:hover { opacity: 0; } } -.status .actions > button.plain.favourite-button.favourited .icon { +.status .actions > button.plain.favourite-button.checked .icon { transform-origin: bottom center; animation: hearted 1s ease-in-out; } -.status .actions > button.plain.bookmark-button.bookmarked { +.status .actions > button.plain.bookmark-button.checked { color: var(--link-color); border-color: var(--link-color); } @@ -544,7 +545,7 @@ a.card:hover { opacity: 1; } } -.status .actions > button.plain.bookmark-button.bookmarked .icon { +.status .actions > button.plain.bookmark-button.checked .icon { animation: bookmarked 1s ease-in-out; } diff --git a/src/components/status.jsx b/src/components/status.jsx index d31f5f38..d4457617 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -857,42 +857,35 @@ function Status({ )}
- + /> {/* TODO: if visibility = private, only can reblog own statuses */} {visibility !== 'direct' && ( - + /> )} - - + /> {isSelf && ( + ); +} + export default Status;