deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

nag players into noticing the resize handle

v2
Thibault Duplessis 2019-05-03 11:23:02 +07:00
parent 5a04fd6f72
commit 3894a2b778
8 changed files with 96 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/common/css/abstract/_z-index.scss
View File

@ -24,6 +24,7 @@ $z-indexes: (
'site-header': 106,
'reconnecting': 105,
'tour-reminder': 104,
'nag-circle': 103,
'above-link-overlay': 3,
'friend-box': 2,
'link-overlay': 2,

7
ui/common/css/component/_board-resize.scss
View File

@ -31,10 +31,13 @@ body.resizing {
translate(1px, 6px)
rotate(-45deg);
}
&:hover,
&:active {
&:hover {
border-radius: 50%;
background: fade-out($c-accent, 0.5);
}
.resizing & {
border-radius: 50%;
background: fade-out($c-secondary, 0.5);
}
}
}

66
ui/common/css/component/_nag-circle.scss 100644
View File

@ -0,0 +1,66 @@
$c-circle: 'd64f00';
$scale-out: 1.15;
@keyframes inner-circle-loop {
0% {
opacity: .2;
transform: scale(#{$scale-out})
}
42% {
opacity: .8;
transform: scale(.9)
}
to {
opacity: .2;
transform: scale(#{$scale-out})
}
}
@keyframes outer-circle-loop {
0% {
opacity: 0;
transform: scale(#{$scale-out})
}
51% {
opacity: .9;
transform: scale(.9)
}
to {
opacity: 0;
transform: scale(#{$scale-out})
}
}
.nag-circle {
position: absolute;
z-index: z('nag-circle');
top: -8px;
left: -8px;
&::before {
content: ' ';
animation: inner-circle-loop 1.5s infinite;
position: absolute;
background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 17 17' enable-background='new 0 0 17 17' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23#{$c-circle}' d='M8.495,2c0.566,0,1.133,0.075,1.687,0.223c3.461,0.928,5.522,4.498,4.595,7.958 C14.016,13.019,11.437,15,8.505,15c-0.566,0-1.134-0.075-1.687-0.223c-1.677-0.449-3.078-1.524-3.946-3.027 c-0.868-1.503-1.098-3.254-0.649-4.931C2.984,3.981,5.562,2,8.495,2 M8.495,0C4.743,0,1.309,2.504,0.292,6.301 c-1.215,4.533,1.475,9.193,6.009,10.408C7.037,16.906,7.777,17,8.505,17c3.752,0,7.186-2.504,8.203-6.301 c1.215-4.533-1.476-9.193-6.009-10.408C9.963,0.094,9.223,0,8.495,0L8.495,0z'/%3E%3C/g%3E%3C/svg%3E%0A");
background-size: contain;
width: 30px;
height: 30px;
top: 3px;
left: 3px;
}
&::after {
content: ' ';
animation: outer-circle-loop 1.5s infinite;
position: absolute;
background: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23#{$c-circle}' d='M9.994,1c0.784,0,1.569,0.104,2.335,0.309c4.792,1.284,7.646,6.228,6.362,11.02 C17.638,16.257,14.067,19,10.006,19c-0.784,0-1.57-0.104-2.335-0.309c-2.322-0.622-4.262-2.111-5.463-4.192 c-1.202-2.081-1.521-4.506-0.899-6.828C2.362,3.743,5.933,1,9.994,1 M9.994,0C5.58,0,1.54,2.946,0.343,7.412 c-1.429,5.333,1.736,10.815,7.069,12.244C8.279,19.889,9.15,20,10.006,20c4.414,0,8.454-2.946,9.651-7.412 c1.429-5.333-1.736-10.815-7.069-12.244C11.721,0.111,10.85,0,9.994,0L9.994,0z'/%3E%3C/g%3E%3C/svg%3E ") 50% no-repeat;
background-size: contain;
width: 36px;
height: 36px;
}
}

16
ui/common/src/resize.ts
View File

@ -39,6 +39,8 @@ export default function resizeHandle(el: HTMLElement) {
document.body.classList.remove('resizing');
}, { once: true });
});
addNag(el);
}
function eventPosition(e: MouchEvent): [number, number] | undefined {
@ -46,3 +48,17 @@ function eventPosition(e: MouchEvent): [number, number] | undefined {
if (e.touches && e.targetTouches[0]) return [e.targetTouches[0].clientX, e.targetTouches[0].clientY];
return undefined;
}
function addNag(el: HTMLElement) {
const storage = window.lichess.storage.makeBoolean('resize-nag');
if (storage.get()) return;
window.lichess.loadCssPath('nag-circle');
el.title = 'Drag to resize';
el.innerHTML = '<div class="nag-circle"></div>';
el.addEventListener(window.lichess.mousedownEvent, () => {
storage.set(true);
el.innerHTML = '';
}, { once: true });
}

2
ui/site/css/build/_nag-circle.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/plugin';
@import '../../../common/css/component/nag-circle';

2
ui/site/css/build/nag-circle.dark.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/dark';
@import 'nag-circle';

2
ui/site/css/build/nag-circle.light.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/light';
@import 'nag-circle';

2
ui/site/css/build/nag-circle.transp.scss 100644
View File

@ -0,0 +1,2 @@
@import '../../../common/css/theme/transp';
@import 'nag-circle';