From a41b18b331c81adb392f5dd90ebc5e993f76981c Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 00:50:38 +0800 Subject: [PATCH 1/8] Fix auto-prepending mentions when replying Prepend not just the reply-to status's acct, but also all mentions' acct BUT excluding self --- src/components/compose.jsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/compose.jsx b/src/components/compose.jsx index b926a98a..0f4efcc2 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -89,10 +89,15 @@ function Compose({ spoilerTextRef.current.value = spoilerText; spoilerTextRef.current.focus(); } else { + const mentions = new Set([ + 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.focus(); - if (replyToStatus.account.id !== currentAccount) { - textareaRef.current.value = `@${replyToStatus.account.acct} `; - } } setVisibility(visibility); setSensitive(sensitive); From 859500a29216616801f8b478765ebf0918681cbf Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 00:51:08 +0800 Subject: [PATCH 2/8] Fix copy since it's not just replying to one person --- src/components/compose.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/compose.jsx b/src/components/compose.jsx index 0f4efcc2..2b329814 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -453,6 +453,7 @@ function Compose({
Replying to @ {replyToStatus.account.acct || replyToStatus.account.username} + ’s status
)} From 03d2e2aa72755ee35f7a9d449f61c390c8ff1a47 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 00:53:04 +0800 Subject: [PATCH 3/8] Add TODO for now for handling multiple mentions If it's just all mentions with no textual content = can close(?) But if there're a lot of mentions, won't it be dangerous to close? User can still edit whatever in between like rearranging the mentions etc --- src/components/compose.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/compose.jsx b/src/components/compose.jsx index 2b329814..469ce277 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -271,6 +271,7 @@ function Compose({ const isSelf = replyToStatus?.account.id === currentAccount; const hasOnlyAcct = replyToStatus && value.trim() === `@${replyToStatus.account.acct}`; + // TODO: check for mentions, or maybe just generic "@username", including multiple mentions like "@username1@username2" if (!isSelf && hasOnlyAcct) { console.log('canClose', { isSelf, hasOnlyAcct }); return true; From db1e481bd37a7a3a7d0c485b765877222eeed5c5 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 00:54:44 +0800 Subject: [PATCH 4/8] Ugh have to manual trigger onInput Is there a way to just auto trigger this? --- src/components/compose.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/compose.jsx b/src/components/compose.jsx index 469ce277..c35d8913 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -97,6 +97,7 @@ function Compose({ .filter((m) => m !== currentAccountInfo.acct) // Excluding self .map((m) => `@${m}`) .join(' ')} `; + textareaRef.current.dispatchEvent(new Event('input')); textareaRef.current.focus(); } setVisibility(visibility); From 9717b94468859cb8c3862509c8fca57a03364caa Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 00:57:21 +0800 Subject: [PATCH 5/8] Smaller header for small screen --- src/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.css b/src/app.css index 8730242c..53eed3d0 100644 --- a/src/app.css +++ b/src/app.css @@ -71,7 +71,7 @@ a.mention span { } .deck header { - min-height: 4em; + min-height: 3em; padding: 0 8px; position: sticky; top: 0; From 51484626707a8a024098fbb8cc4f793bf564c63f Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 01:28:22 +0800 Subject: [PATCH 6/8] Have a little fun with action icons' animations Also fix the jumpy border --- src/components/status.css | 68 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 3 deletions(-) diff --git a/src/components/status.css b/src/components/status.css index a7c1f914..1c640b28 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -461,6 +461,7 @@ a.card:hover { } .status .actions > button.plain { color: inherit; + border: 1.5px solid transparent; } .status .actions > button.plain:hover { color: var(--link-color); @@ -471,18 +472,79 @@ a.card:hover { } .status .actions > button.plain.reblog-button.reblogged { color: var(--reblog-color); - border: 1.5px solid var(--reblog-color); + border-color: var(--reblog-color); +} +@keyframes reblogged { + 5% { + transform: translate(-2px, -2px); + } + 10% { + transform: translate(2px, 2px); + } + 15% { + transform: translate(0, 0); + } + 100% { + transform: translate(30px, -30px); + opacity: 0; + } +} +.status .actions > button.plain.reblog-button.reblogged .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 { color: var(--favourite-color); - border: 1.5px solid var(--favourite-color); + border-color: var(--favourite-color); +} +@keyframes hearted { + 20% { + transform: rotate(10deg) scale(1); + } + 40% { + transform: rotate(-10deg) scale(1.25); + } + 60% { + transform: rotate(10deg) scale(1.75); + } + 80% { + transform: rotate(-10deg) scale(2); + } + 100% { + transform: rotate(10deg) scale(2.25); + opacity: 0; + } +} +.status .actions > button.plain.favourite-button.favourited .icon { + transform-origin: bottom center; + animation: hearted 1s ease-in-out; } .status .actions > button.plain.bookmark-button.bookmarked { color: var(--link-color); - border: 1.5px solid var(--link-color); + border-color: var(--link-color); +} +@keyframes bookmarked { + 25% { + transform: translateY(-10px) rotate(10deg); + opacity: 0.5; + } + 50% { + transform: translateY(0); + opacity: 1; + } + 75% { + transform: translateY(-15px) rotate(-10deg); + opacity: 0.5; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} +.status .actions > button.plain.bookmark-button.bookmarked .icon { + animation: bookmarked 1s ease-in-out; } /* ENHANCED CONTENT */ From 715791f41e666ae9a494bcbf103916939e17f71f Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 01:37:19 +0800 Subject: [PATCH 7/8] Try disable this less-bright images fancy CSS for dark mode Copied from webkit blog but I guess this is a bit fancy Also possibly conflicting with other styles --- src/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.css b/src/index.css index 7788a4f7..72d2b77f 100644 --- a/src/index.css +++ b/src/index.css @@ -194,7 +194,7 @@ code { } @media (prefers-color-scheme: dark) { - img, + /* img, video { filter: brightness(0.7); transition: filter 0.3s ease-out; @@ -202,7 +202,7 @@ code { img:hover, video:hover { filter: brightness(1); - } + } */ :is(button, .button).plain2 { backdrop-filter: blur(12px) brightness(0.5); } From 7762c5b6a7674540304657067bc0ff2f56d7f264 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Fri, 16 Dec 2022 01:44:51 +0800 Subject: [PATCH 8/8] Yeah, this depends on the header height --- src/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.css b/src/app.css index 53eed3d0..4066f341 100644 --- a/src/app.css +++ b/src/app.css @@ -50,7 +50,7 @@ a.mention span { .deck-container, .deck.contained { - scroll-padding-top: 4em; + scroll-padding-top: 3em; } .deck {