monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-11-10 17:04:49 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor(version history modal): use new modal system

Browse source
This commit is contained in:
Miodec 2024-03-13 00:27:51 +01:00
parent a172225510
commit c1c0f45708
6 changed files with 72 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/html/popups.html
View file

@ -948,9 +948,9 @@
</div>
</div>
</div>
<div id="versionHistoryWrapper" class="popupWrapper hidden">
<div id="versionHistory"></div>
</div>
<dialog id="versionHistoryModal" class="modalWrapper hidden">
<div class="modal"></div>
</dialog>
<dialog id="supportModal" class="modalWrapper hidden">
<div class="modal">
<div class="title">Support Monkeytype</div>

24
frontend/src/styles/popups.scss
View file

@ -1289,29 +1289,11 @@
}
}
#versionHistoryWrapper {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.75);
position: fixed;
left: 0;
top: 0;
z-index: 1000;
display: grid;
justify-content: center;
align-items: start;
padding: 5rem 0;
#versionHistory {
width: 75vw;
height: 100%;
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
#versionHistoryModal {
.modal {
@extend .ffscroll;
overflow-y: scroll;
min-width: 800px;
hr {
background: var(--sub-alt-color);

9
frontend/src/ts/event-handlers/footer.ts
View file

@ -5,6 +5,7 @@ import * as Notifications from "../elements/notifications";
import { getCommandline } from "../utils/async-modules";
import * as SupportPopup from "../modals/support";
import * as ContactModal from "../modals/contact";
import * as VersionHistoryModal from "../modals/version-history";
import { envConfig } from "../constants/env-config";
document
@ -21,6 +22,8 @@ document
const event = e as MouseEvent;
if (event.shiftKey) {
alert(envConfig.clientVersion);
} else {
VersionHistoryModal.show();
}
});
@ -61,3 +64,9 @@ document
?.addEventListener("click", () => {
ContactModal.show();
});
document
.querySelector("footer #newVersionIndicator")
?.addEventListener("click", () => {
document.querySelector("#newVersionIndicator")?.classList.add("hidden");
});

1
frontend/src/ts/index.ts
View file

@ -22,7 +22,6 @@ import * as Result from "./test/result";
import "./controllers/account-controller";
import { enable } from "./states/glarses-mode";
import "./test/caps-warning";
import "./popups/version-popup";
import "./popups/edit-preset-popup";
import "./popups/set-streak-hour-offset";
import "./popups/simple-popups";

57
frontend/src/ts/modals/version-history.ts Normal file
View file

@ -0,0 +1,57 @@
import format from "date-fns/format";
import { getReleasesFromGitHub } from "../utils/misc";
import AnimatedModal from "../utils/animated-modal";
export function show(): void {
void modal.show({
beforeAnimation: async () => {
$("#versionHistoryModal .modal").html(`
<div class="preloader">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
</div
`);
getReleasesFromGitHub()
.then((releases) => {
$("#versionHistoryModal .modal").html(`<div class="releases"></div`);
releases.forEach((release: MonkeyTypes.GithubRelease) => {
if (!release.draft && !release.prerelease) {
let body = release.body;
body = body.replace(/\r\n/g, "<br>");
//replace ### title with h3 title h3
body = body.replace(/### (.*?)<br>/g, "<h3>$1</h3>");
body = body.replace(/<\/h3><br>/gi, "</h3>");
//remove - at the start of a line
body = body.replace(/^- /gm, "");
//replace **bold** with bold
body = body.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
//replace links with a tags
body = body.replace(
/\[(.*?)\]\((.*?)\)/g,
'<a href="$2" target="_blank">$1</a>'
);
$("#versionHistoryModal .modal .releases").append(`
<div class="release">
<div class="title">${release.name}</div>
<div class="date">${format(
new Date(release.published_at),
"dd MMM yyyy"
)}</div>
<div class="body">${body}</div>
</div>
`);
}
});
})
.catch((e) => {
$("#versionHistoryModal .modal").html(
`<div class="releases">Failed to fetch version history:<br>${e.message}</div`
);
});
$("#newVersionIndicator").addClass("hidden");
},
});
}
const modal = new AnimatedModal("versionHistoryModal", "popups");

92
frontend/src/ts/popups/version-popup.ts
View file

@ -1,92 +0,0 @@
import format from "date-fns/format";
import { getReleasesFromGitHub, isPopupVisible } from "../utils/misc";
import * as Skeleton from "../utils/skeleton";
const wrapperId = "versionHistoryWrapper";
function show(): void {
Skeleton.append(wrapperId, "popups");
$("#versionHistory").html(`
<div class="preloader">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
</div
`);
getReleasesFromGitHub()
.then((releases) => {
$("#versionHistory").html(`<div class="releases"></div`);
releases.forEach((release: MonkeyTypes.GithubRelease) => {
if (!release.draft && !release.prerelease) {
let body = release.body;
body = body.replace(/\r\n/g, "<br>");
//replace ### title with h3 title h3
body = body.replace(/### (.*?)<br>/g, "<h3>$1</h3>");
body = body.replace(/<\/h3><br>/gi, "</h3>");
//remove - at the start of a line
body = body.replace(/^- /gm, "");
//replace **bold** with bold
body = body.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
//replace links with a tags
body = body.replace(
/\[(.*?)\]\((.*?)\)/g,
'<a href="$2" target="_blank">$1</a>'
);
$("#versionHistory .releases").append(`
<div class="release">
<div class="title">${release.name}</div>
<div class="date">${format(
new Date(release.published_at),
"dd MMM yyyy"
)}</div>
<div class="body">${body}</div>
</div>
`);
}
});
})
.catch((e) => {
$("#versionHistory").html(
`<div class="releases">Failed to fetch version history:<br>${e.message}</div`
);
});
$("#versionHistoryWrapper")
.css("opacity", 0)
.removeClass("hidden")
.animate({ opacity: 1 }, 125);
$("#newVersionIndicator").addClass("hidden");
}
function hide(): void {
$("#versionHistoryWrapper")
.css("opacity", 1)
.animate({ opacity: 0 }, 125, () => {
$("#versionHistoryWrapper").addClass("hidden");
$("#versionHistory").html("");
Skeleton.remove(wrapperId);
});
}
$("footer").on("click", "#newVersionIndicator", () => {
$("#newVersionIndicator").addClass("hidden");
});
$("footer").on("click", "button.currentVersion", (e) => {
if (e.shiftKey) return;
show();
});
$("#popups").on("click", "#versionHistoryWrapper", (e) => {
if ($(e.target).attr("id") === "versionHistoryWrapper") {
hide();
}
});
$(document).on("keydown", (event) => {
if (event.key === "Escape" && isPopupVisible(wrapperId)) {
hide();
event.preventDefault();
}
});
Skeleton.save(wrapperId);