centralcloud/oncall-engine
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add nice pointer animation

Browse source
This commit is contained in:
Maxim 2022-11-03 16:19:43 +00:00
parent 693abdf7aa
commit 7ef830fdd2
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
grafana-plugin/src/containers/Rotation/Rotation.module.css
View file

@ -79,7 +79,15 @@
.pointer {
position: absolute;
top: -9px;
transition: left 500ms ease;
transition: left 500ms ease, opacity 500ms ease, transform 500ms ease;
transform-origin: bottom center;
opacity: 0;
transform: scale(0);
}
.pointer--active {
transform: scale(1);
opacity: 1;
}
.tutorial-slot {

4
grafana-plugin/src/containers/Rotation/RotationTutorial.tsx
View file

@ -57,8 +57,8 @@ const RotationTutorial: FC<RotationProps> = (props) => {
return (
<div className={cx('slots', 'slots--tutorial')} style={{ transform: `translate(${x * 100}%, 0)` }}>
<Pointer
className={cx('pointer')}
style={{ left: `calc(${pointerX * 100}% - 5px)`, visibility: pointerX === undefined ? 'hidden' : 'visible' }}
className={cx('pointer', { 'pointer--active': pointerX !== undefined })}
style={{ left: `calc(${pointerX * 100}% - 5px)` }}
/>
{events.map((event, index) => {
const duration = event.end.diff(event.start, 'seconds');