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

added an option to share custom themes

Browse source
This commit is contained in:
Jack 2020-07-13 22:47:28 +01:00
parent 6ec1738cb1
commit 1e28d69cbb
3 changed files with 103 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
public/css/style.scss
View file

@ -308,6 +308,29 @@ a:hover {
}
}
#customThemeShareWrapper {
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: center;
padding: 5rem 0;
#customThemeShare {
width: 50vw;
background: var(--bg-color);
border-radius: var(--roundness);
padding: 2rem;
display: grid;
gap: 1rem;
overflow-y: scroll;
}
}
#resultEditTagsPanelWrapper {
width: 100%;

11
public/index.html
View file

@ -37,6 +37,12 @@
Important information about your account. Please click this message.
</div>
<div class="notification">Signed in</div>
<div id="customThemeShareWrapper" class="hidden">
<div id="customThemeShare" action="">
<input type="text">
<div class="button">ok</div>
</div>
</div>
<div id="tagsWrapper" class="hidden">
<div id="tagsEdit" action="" tagid="">
<div class="title"></div>
@ -999,7 +1005,10 @@
<label for="--colorful-error-extra-color">#e2b714</label>
<input type="color" value="" id="--colorful-error-extra-color">
</span>
<div class="button saveCustomThemeButton" style="grid-column: 4;">Save</div>
<div style="grid-column: 3/5;display:grid;gap:1rem;grid-auto-flow: column;">
<div class="button" id="shareCustomThemeButton">share</div>
<div class="button saveCustomThemeButton">save</div>
</div>
</div>
<div tabContent="preset" class="tabContent buttons">
</div>

71
public/js/settings.js
View file

@ -71,6 +71,73 @@ function updateSettingsPage() {
}
}
function showCustomThemeShare() {
if ($("#customThemeShareWrapper").hasClass("hidden")) {
let save = [];
$.each(
$(".pageSettings .section.customTheme [type='color']"),
(index, element) => {
save.push($(element).attr("value"));
}
);
$("#customThemeShareWrapper input").val(JSON.stringify(save));
$("#customThemeShareWrapper")
.stop(true, true)
.css("opacity", 0)
.removeClass("hidden")
.animate({ opacity: 1 }, 100, (e) => {
$("#customThemeShare input").focus();
$("#customThemeShare input").select();
$("#customThemeShare input").focus();
});
}
}
function hideCustomThemeShare() {
if (!$("#customThemeShareWrapper").hasClass("hidden")) {
try {
config.customThemeColors = JSON.parse(
$("#customThemeShareWrapper input").val()
);
} catch (e) {
showNotification(
"Something went wrong. Reverting to default custom colors.",
3000
);
config.customThemeColors = defaultConfig.customThemeColors;
}
setCustomThemeInputs();
applyCustomThemeColors();
$("#customThemeShareWrapper input").val("");
$("#customThemeShareWrapper")
.stop(true, true)
.css("opacity", 1)
.animate(
{
opacity: 0,
},
100,
(e) => {
$("#customThemeShareWrapper").addClass("hidden");
}
);
}
}
$("#customThemeShareWrapper").click((e) => {
if ($(e.target).attr("id") === "customThemeShareWrapper") {
hideCustomThemeShare();
}
});
$("#customThemeShare .button").click((e) => {
hideCustomThemeShare();
});
$("#shareCustomThemeButton").click((e) => {
showCustomThemeShare();
});
function refreshTagsSettingsSection() {
if (firebase.auth().currentUser !== null && dbSnapshot !== null) {
let tagsEl = $(".pageSettings .section.tags .tagsList").empty();
@ -192,7 +259,9 @@ function setActiveTimerColorButton() {
}
function setActiveTimerOpacityButton() {
$(`.pageSettings .section.timerOpacity .buttons .button`).removeClass("active");
$(`.pageSettings .section.timerOpacity .buttons .button`).removeClass(
"active"
);
$(
`.pageSettings .section.timerOpacity .buttons .button[opacity="` +
config.timerOpacity +