every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Add transliteration position navigator when hiragana and romaji is both enabled and mouse hovered.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-09-18 00:06:09 +09:00
parent 17e450310e
commit 56af62029a
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
View File

@@ -94,17 +94,17 @@ const MessageWithTransliteration = ({ item }) => {
const hira = token.hira ?? ""; const hira = token.hira ?? "";
const hepburn = token.hepburn ?? ""; const hepburn = token.hepburn ?? "";
if ((hira && orig === hira)) { if (hira && hira === orig && hepburn) {
return ( return (
<span key={key} title={hepburn} className={styles.token}> <span key={key} title={hepburn} className={styles.with_hepburn}>
{orig} {orig}
</span> </span>
); );
} }
if (hira && hira !== orig) { if (hira && hira !== orig && hepburn) {
return ( return (
<ruby key={key} title={hepburn} className={styles.tokenRuby}> <ruby key={key} title={hepburn} className={styles.with_hepburn}>
{orig} {orig}
<rt>{hira}</rt> <rt>{hira}</rt>
</ruby> </ruby>
@@ -113,7 +113,7 @@ const MessageWithTransliteration = ({ item }) => {
if (hepburn && hepburn !== orig) { if (hepburn && hepburn !== orig) {
return ( return (
<ruby key={key} className={styles.tokenRuby}> <ruby key={key} className={styles.ruby}>
{orig} {orig}
<rt>{hepburn}</rt> <rt>{hepburn}</rt>
</ruby> </ruby>
@@ -121,7 +121,7 @@ const MessageWithTransliteration = ({ item }) => {
} }
return ( return (
<span key={key} className={styles.token}> <span key={key} className={styles.original_only}>
{orig} {orig}
</span> </span>
); );

7
src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
View File

@@ -112,4 +112,11 @@
font-size: 1.2rem; font-size: 1.2rem;
color: var(--dark_500_color); color: var(--dark_500_color);
} }
}
// For ruby
.with_hepburn {
&:hover {
color: var(--dark_500_color);
}
} }