monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-11-09 13:44:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve word highlight UI in input history (#4417) ademirkan

Browse source 
* put speed above word in input highlight

* updated class name
using class nesting

* put speed below word, added nocursor

* removed unnecessary line

---------

Co-authored-by: Miodec <jack@monkeytype.com>
This commit is contained in:
ademirkan 2023-06-29 09:53:22 -07:00 • committed by GitHub
parent 1bc6e3510b
commit 60720fbc80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/styles/test.scss
View file

@ -280,9 +280,6 @@
margin: 0.25em;
color: var(--sub-color);
font-variant: no-common-ligatures;
// display: flex;
// transition: 0.25s
/* margin-bottom: 1px; */
border-bottom: 2px solid transparent;
letter {
display: inline-block;
@ -296,8 +293,7 @@
opacity: 0.25;
}
// transition: .25s;
.wordInputAfter {
.wordInputHighlight {
opacity: 1;
white-space: nowrap;
position: absolute;
@ -315,12 +311,19 @@
text-shadow: none;
top: -0.5rem;
z-index: 10;
cursor: text;
.speed {
font-size: 0.75rem;
&.withSpeed {
.speed {
font-size: 0.75rem;
color: var(--sub-alt-color);
}
}
}
&.nocursor {
cursor: none;
}
&.error {
/* margin-bottom: 1px; */
border-bottom: 2px solid var(--error-color);

4
frontend/src/ts/controllers/chart-controller.ts
View file

@ -217,7 +217,7 @@ export const result: ChartWithUpdateColors<
callbacks: {
afterLabel: function (ti): string {
try {
$(".wordInputAfter").remove();
$(".wordInputHighlight").remove();
const wordsToHighlight =
TestInput.keypressPerSecond[parseInt(ti.label) - 1].words;
@ -230,7 +230,7 @@ export const result: ChartWithUpdateColors<
const input = wordEl.attr("input");
if (input !== undefined) {
wordEl.append(
`<div class="wordInputAfter">${input
`<div class="wordInputHighlight">${input
.replace(/\t/g, "_")
.replace(/\n/g, "_")
.replace(/</g, "&lt")

14
frontend/src/ts/test/test-ui.ts
View file

@ -898,13 +898,13 @@ async function loadWordsHistory(): Promise<boolean> {
const correctedChar = !containsKorean
? TestInput.corrected.getHistory(i)
: Hangul.assemble(TestInput.corrected.getHistory(i).split(""));
wordEl = `<div class='word' burst="${
wordEl = `<div class='word nocursor' burst="${
TestInput.burstHistory[i]
}" input="${correctedChar
.replace(/"/g, "&quot;")
.replace(/ /g, "_")}">`;
} else {
wordEl = `<div class='word' burst="${
wordEl = `<div class='word nocursor' burst="${
TestInput.burstHistory[i]
}" input="${input.replace(/"/g, "&quot;").replace(/ /g, "_")}">`;
}
@ -931,14 +931,14 @@ async function loadWordsHistory(): Promise<boolean> {
}
if (wordstats.incorrect !== 0 || Config.mode !== "time") {
if (Config.mode !== "zen" && input !== word) {
wordEl = `<div class='word error' burst="${
wordEl = `<div class='word nocursor error' burst="${
TestInput.burstHistory[i]
}" input="${input.replace(/"/g, "&quot;").replace(/ /g, "_")}">`;
}
}
} else {
if (Config.mode !== "zen" && input !== word) {
wordEl = `<div class='word error' burst="${
wordEl = `<div class='word nocursor error' burst="${
TestInput.burstHistory[i]
}" input="${input.replace(/"/g, "&quot;").replace(/ /g, "_")}">`;
}
@ -1214,11 +1214,11 @@ $(".pageTest #toggleBurstHeatmap").on("click", async () => {
});
$(".pageTest #resultWordsHistory").on("mouseleave", ".words .word", () => {
$(".wordInputAfter").remove();
$(".wordInputHighlight").remove();
});
$(".pageTest #result #wpmChart").on("mouseleave", () => {
$(".wordInputAfter").remove();
$(".wordInputHighlight").remove();
});
$(".pageTest #resultWordsHistory").on("mouseenter", ".words .word", (e) => {
@ -1227,7 +1227,7 @@ $(".pageTest #resultWordsHistory").on("mouseenter", ".words .word", (e) => {
const burst = parseInt(<string>$(e.currentTarget).attr("burst"));
if (input !== undefined) {
$(e.currentTarget).append(
`<div class="wordInputAfter">
`<div class="wordInputHighlight withSpeed">
<div class="text">
${input
.replace(/\t/g, "_")