deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

clickable graph popup (#6617) 

* clickable graph popup

* lint

* lint again

* review: only select div under popup element

Co-authored-by: Alex Cornellier <acornellier@drw.com>
pull/6626/head
acornellier 2020-05-13 15:16:59 -04:00 committed by GitHub
parent 7e12e4d02b
commit ed55eed2ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/lobby/css/app/_hook-chart.scss
View File

@ -65,12 +65,14 @@
.inner {
@extend %flex-column;
text-align: center;
padding-bottom: .5em;
&-clickable {
cursor: pointer;
padding: 5px 0;
}
}
.opponent {
@extend %metal;
min-width: 120px;
padding: .5em .7em;
margin-bottom: .5em;
}
}

13
ui/lobby/src/view/realTime/chart.ts
View File

@ -57,7 +57,14 @@ function renderPlot(ctrl: LobbyController, hook: Hook) {
mouseOnToPopup: true,
closeDelay: 200,
popupId: 'hook'
}).data('powertipjq', $(renderHook(ctrl, hook)));
}).data('powertipjq', $(renderHook(ctrl, hook)))
.on({
powerTipRender() {
$('#hook .inner-clickable').click(() => {
ctrl.clickHook(hook.id);
});
}
});
setTimeout(function() {
(vnode.elm as HTMLElement).classList.remove('new');
}, 20);
@ -80,9 +87,11 @@ function renderHook(ctrl: LobbyController, hook: Hook): string {
} else {
html += '<span class="opponent anon ' + color + '">' + ctrl.trans('anonymous') + '</span>';
}
html += hook.clock;
html += '<div class="inner-clickable">';
html += `<div>${hook.clock}</div>`;
html += '<i data-icon="' + perfIcons[hook.perf] + '"> ' + ctrl.trans(hook.ra ? 'rated' : 'casual') + '</i>';
html += '</div>';
html += '</div>';
return html;
}