mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-06 05:26:54 +08:00
changed the result list to include icons
added the ability to edit result tags made sure tag filters save when refreshed
This commit is contained in:
Jack
parent
01f1609bb5
commit
357ff5e776
4 changed files with 232 additions and 25 deletions
|
|
@ -148,6 +148,60 @@ a:hover {
|
|||
}
|
||||
|
||||
|
||||
#resultEditTagsPanelWrapper{
|
||||
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;
|
||||
#resultEditTagsPanel{
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--roundness);
|
||||
padding: 2rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
overflow-y: scroll;
|
||||
width: 500px;
|
||||
.buttons{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.button{
|
||||
display: block;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
transition: .25s;
|
||||
padding: .2rem .5rem;
|
||||
border-radius: var(--roundness);
|
||||
|
||||
background: rgba(0,0,0,.1);
|
||||
text-align: center;
|
||||
-webkit-user-select: none;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
height: min-content;
|
||||
height: -moz-min-content;
|
||||
&.active{
|
||||
background: var(--main-color);
|
||||
color: var(--bg-color);
|
||||
}
|
||||
&:hover,&:focus{
|
||||
color: var(--bg-color);
|
||||
background: var(--main-color);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#versionHistoryWrapper{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1493,6 +1547,17 @@ key {
|
|||
tbody tr:nth-child(odd) td{
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
td.infoIcons span{
|
||||
margin: 0 .1rem;
|
||||
}
|
||||
}
|
||||
#resultEditTags{
|
||||
transition: .25s;
|
||||
}
|
||||
#resultEditTags:hover{
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Monkey Type</title>
|
||||
<link rel="stylesheet" href="css/fa.css">
|
||||
<link rel="stylesheet" href="css/balloon.css">
|
||||
<link rel="stylesheet" href="css/style.css?v=18">
|
||||
<link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme">
|
||||
<link id="favicon" rel="shortcut icon" href="fav.png">
|
||||
|
|
@ -40,6 +41,15 @@
|
|||
<div class="button"><i class="fas fa-plus"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="resultEditTagsPanelWrapper" class="hidden">
|
||||
<div id="resultEditTagsPanel" resultid="">
|
||||
<div class="buttons">
|
||||
<div class="button tag">asdf</div>
|
||||
<div class="button active tag">asdf</div>
|
||||
</div>
|
||||
<div class="button confirmButton"><i class="fas fa-check"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="versionHistoryWrapper" class="hidden">
|
||||
<div id="versionHistory">
|
||||
<div class="tip">Click anywhere to dismiss</div>
|
||||
|
|
@ -73,26 +83,6 @@
|
|||
<div id="timerWrapper">
|
||||
<div id="timer"></div>
|
||||
</div>
|
||||
<div id="resultScreenshot" class="">
|
||||
<div class="stats">
|
||||
<div class="group">
|
||||
<div class="top">wpm</div>
|
||||
<div class="bottom">100</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="top">key</div>
|
||||
<div class="bottom">100/2</div>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="top">acc</div>
|
||||
<div class="bottom">100%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<!-- <div class="top">monkey-see</div> -->
|
||||
<div class="bottom">monkey-type.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="centerContent" class="hidden">
|
||||
<div id="top">
|
||||
<div class="logo">
|
||||
|
|
@ -671,8 +661,8 @@
|
|||
<td>incorrect<br>chars</td>
|
||||
<td>mode</td>
|
||||
<!-- <td>punctuation</td> -->
|
||||
<td>difficulty</td>
|
||||
<td>language</td>
|
||||
<td>info</td>
|
||||
<td>tags</td>
|
||||
<td>date</td>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
|
|||
|
|
@ -165,6 +165,12 @@ firebase.auth().onAuthStateChanged(function(user) {
|
|||
updateFilterTags();
|
||||
updateCommandsTagsList();
|
||||
loadActiveTagsFromCookie();
|
||||
updateResultEditTagsPanelButtons();
|
||||
config.resultFilters.forEach(filter => {
|
||||
if(filter.substring(0,4) === "tag_" && filter !== "tag_notag"){
|
||||
toggleFilterButton(filter);
|
||||
}
|
||||
})
|
||||
});
|
||||
var displayName = user.displayName;
|
||||
var email = user.email;
|
||||
|
|
@ -483,6 +489,53 @@ function loadMoreLines(){
|
|||
if (raw == undefined){
|
||||
raw = '-';
|
||||
}
|
||||
|
||||
|
||||
let icons = `<span aria-label="${result.language.replace('_',' ')}" data-balloon-pos="up"><i class="fas fa-fw fa-globe-americas"></i></span>`;
|
||||
|
||||
if(diff === 'normal'){
|
||||
icons += `<span aria-label="${result.difficulty}" data-balloon-pos="up"><i class="far fa-fw fa-star"></i></span>`;
|
||||
}else if(diff === "expert"){
|
||||
icons += `<span aria-label="${result.difficulty}" data-balloon-pos="up"><i class="fas fa-fw fa-star-half-alt"></i></span>`;
|
||||
}else if(diff === "master"){
|
||||
icons += `<span aria-label="${result.difficulty}" data-balloon-pos="up"><i class="fas fa-fw fa-star"></i></span>`;
|
||||
}
|
||||
|
||||
if(result.punctuation){
|
||||
icons += `<span aria-label="punctuation" data-balloon-pos="up"><i class="fas fa-fw fa-quote-right"></i></span>`;
|
||||
}
|
||||
|
||||
if(result.blindMode){
|
||||
icons += `<span aria-label="blind mode" data-balloon-pos="up"><i class="fas fa-fw fa-eye-slash"></i></span>`;
|
||||
}
|
||||
|
||||
let tagNames = "";
|
||||
|
||||
if(result.tags !== undefined && result.tags.length > 0){
|
||||
result.tags.forEach(tag => {
|
||||
dbSnapshot.tags.forEach(snaptag => {
|
||||
if(tag === snaptag.id){
|
||||
tagNames += snaptag.name + ", ";
|
||||
}
|
||||
})
|
||||
})
|
||||
tagNames = tagNames.substring(0, tagNames.length - 2);
|
||||
}
|
||||
|
||||
// if(tagNames !== ""){
|
||||
// icons += `<span aria-label="${tagNames}" data-balloon-pos="up"><i class="fas fa-fw fa-tag"></i></span>`;
|
||||
// }
|
||||
|
||||
let tagIcons = `<span id="resultEditTags" resultId="${result.id}" tags='${JSON.stringify(result.tags)}' style="opacity: .25"><i class="fas fa-fw fa-tag"></i></span>`;
|
||||
|
||||
if(tagNames !== ""){
|
||||
if(result.tags !== undefined && result.tags.length > 1){
|
||||
tagIcons = `<span id="resultEditTags" resultId="${result.id}" tags='${JSON.stringify(result.tags)}' aria-label="${tagNames}" data-balloon-pos="up"><i class="fas fa-fw fa-tags"></i></span>`;
|
||||
}else{
|
||||
tagIcons = `<span id="resultEditTags" resultId="${result.id}" tags='${JSON.stringify(result.tags)}' aria-label="${tagNames}" data-balloon-pos="up"><i class="fas fa-fw fa-tag"></i></span>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(".pageAccount .history table tbody").append(`
|
||||
<tr>
|
||||
|
|
@ -492,8 +545,8 @@ function loadMoreLines(){
|
|||
<td>${result.correctChars}</td>
|
||||
<td>${result.incorrectChars}</td>
|
||||
<td>${result.mode} ${result.mode2}${withpunc}</td>
|
||||
<td>${diff}</td>
|
||||
<td>${result.language.replace('_','<br>')}</td>
|
||||
<td class="infoIcons">${icons}</td>
|
||||
<td>${tagIcons}</td>
|
||||
<td>${moment(result.timestamp).format('DD MMM YYYY<br>HH:mm')}</td>
|
||||
</tr>`);
|
||||
}
|
||||
|
|
@ -806,3 +859,102 @@ function refreshAccountPage() {
|
|||
cont();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function showResultEditTagsPanel(){
|
||||
if ($("#resultEditTagsPanelWrapper").hasClass("hidden")) {
|
||||
$("#resultEditTagsPanelWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 0)
|
||||
.removeClass("hidden")
|
||||
.animate({opacity: 1},125);
|
||||
}
|
||||
}
|
||||
|
||||
function hideResultEditTagsPanel(){
|
||||
if (!$("#resultEditTagsPanelWrapper").hasClass("hidden")) {
|
||||
$("#resultEditTagsPanelWrapper")
|
||||
.stop(true, true)
|
||||
.css("opacity", 1)
|
||||
.animate(
|
||||
{
|
||||
opacity: 0
|
||||
},100,e => {
|
||||
$("#resultEditTagsPanelWrapper").addClass('hidden');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on('click','.pageAccount .group.history #resultEditTags',f => {
|
||||
let resultid = $(f.target).parents('span').attr('resultid');
|
||||
let tags = $(f.target).parents('span').attr('tags');
|
||||
$("#resultEditTagsPanel").attr('resultid',resultid);
|
||||
$("#resultEditTagsPanel").attr('tags',tags);
|
||||
updateActiveResultEditTagsPanelButtons(JSON.parse(tags));
|
||||
showResultEditTagsPanel();
|
||||
})
|
||||
|
||||
$(document).on('click','#resultEditTagsPanelWrapper .button.tag',f => {
|
||||
$(f.target).toggleClass('active');
|
||||
})
|
||||
|
||||
$("#resultEditTagsPanelWrapper").click(e => {
|
||||
if($(e.target).attr('id') === "resultEditTagsPanelWrapper"){
|
||||
hideResultEditTagsPanel();
|
||||
}
|
||||
})
|
||||
|
||||
function updateResultEditTagsPanelButtons(){
|
||||
$("#resultEditTagsPanel .buttons").empty();
|
||||
dbSnapshot.tags.forEach(tag => {
|
||||
$("#resultEditTagsPanel .buttons").append(`<div class="button tag" tagid="${tag.id}">${tag.name}</div>`);
|
||||
})
|
||||
}
|
||||
|
||||
function updateActiveResultEditTagsPanelButtons(active){
|
||||
if(active === []) return;
|
||||
$.each($("#resultEditTagsPanel .buttons .button"), (index,obj) => {
|
||||
let tagid = $(obj).attr('tagid');
|
||||
if(active.includes(tagid)){
|
||||
$(obj).addClass('active');
|
||||
}else{
|
||||
$(obj).removeClass('active');
|
||||
}
|
||||
// active.forEach(activetagid => {
|
||||
// if(activetagid === tagid){
|
||||
// $(obj).addClass('active');
|
||||
// }else{
|
||||
// $(obj).removeClass('active');
|
||||
// }
|
||||
// })
|
||||
});
|
||||
}
|
||||
|
||||
$("#resultEditTagsPanel .confirmButton").click(f => {
|
||||
let resultid = $("#resultEditTagsPanel").attr('resultid');
|
||||
let oldtags = JSON.parse($("#resultEditTagsPanel").attr('tags'));
|
||||
|
||||
let newtags = [];
|
||||
$.each($("#resultEditTagsPanel .buttons .button"), (index,obj) => {
|
||||
let tagid = $(obj).attr('tagid');
|
||||
if($(obj).hasClass('active')){
|
||||
newtags.push(tagid);
|
||||
}
|
||||
});
|
||||
showBackgroundLoader();
|
||||
hideResultEditTagsPanel();
|
||||
updateResultTags({uid:firebase.auth().currentUser.uid,tags:newtags,resultid:resultid}).then(r=>{
|
||||
hideBackgroundLoader();
|
||||
if(r.data.resultCode === 1){
|
||||
showNotification('Tags updated',1000);
|
||||
dbSnapshot.results.forEach(result => {
|
||||
if(result.id === resultid){
|
||||
result.tags = newtags;
|
||||
}
|
||||
})
|
||||
refreshAccountPage();
|
||||
}else{
|
||||
showNotification('Error updating tags',3000);
|
||||
}
|
||||
});
|
||||
})
|
||||
|
|
@ -34,7 +34,7 @@ const testCompleted = firebase.functions().httpsCallable('testCompleted');
|
|||
const addTag = firebase.functions().httpsCallable('addTag');
|
||||
const editTag = firebase.functions().httpsCallable('editTag');
|
||||
const removeTag = firebase.functions().httpsCallable('removeTag');
|
||||
|
||||
const updateResultTags = firebase.functions().httpsCallable('updateResultTags');
|
||||
|
||||
function showNotification(text, time) {
|
||||
let noti = $(".notification");
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue