Add a visual notification when a new private message arrives

Implemented by adding a class to div (id="fork") and animation.
This commit is contained in:
Visman 2023-07-24 17:34:01 +07:00
parent 4703e6b6b6
commit 86ca176c0a
5 changed files with 49 additions and 5 deletions

View file

@ -98,6 +98,18 @@ abstract class Page extends Model
*/
public function prepare(): void
{
// вспышка нового личного сообщения
if (
null !== $this->onlinePos
&& ! $this->user->isGuest
&& 1 === $this->user->u_pm_flash
) {
$this->fPMFlash = true;
$this->user->u_pm_flash = 0;
$this->c->users->update($this->user);
}
$this->pageHeader('commonJS', 'script', 10000, [
'src' => $this->publicLink('/js/common.js'),
]);

View file

@ -244,6 +244,8 @@ class PMPost extends AbstractPM
$this->user->u_pm_num_all += 1; // ???? может recalculate() ниже u_pm_last_post = $now?
$this->targetUser->u_pm_flash = 1;
$this->pms->recalculate($this->targetUser);
// сообщение в архивный диалог
} elseif (Cnst::PT_ARCHIVE === $topic->poster_status) {
@ -252,6 +254,8 @@ class PMPost extends AbstractPM
} else {
$message = 'PM sent Redirect';
$this->targetUser->u_pm_flash = 1;
$this->pms->recalculate($this->targetUser);
}

View file

@ -116,6 +116,8 @@ class PMTopic extends AbstractPM
$this->model->poster_status = Cnst::PT_NORMAL; //????
$this->model->target_status = Cnst::PT_NORMAL; //????
$this->targetUser->u_pm_flash = 1;
$this->pms->update(Cnst::PTOPIC, $this->model);
$this->pms->recalculate($this->targetUser);
$this->pms->recalculate($this->user);

View file

@ -13,7 +13,7 @@
@endforeach
</head>
<body>
<div id="fork" @if ($p->fNavigation) class="f-with-nav" @endif>
<div id="fork" class="@if ($p->fNavigation)f-with-nav @endif @if($p->fPMFlash) f-pm-flash @endif">
<header id="fork-header">
<p id="id-fhth1"><a id="id-fhtha" rel="home" href="{{ $p->fRootLink }}">{{ $p->fTitle }}</a></p>
@if ('' != $p->fDescription)

View file

@ -132,10 +132,10 @@ body,
#fork ul,
#fork var,
#fork video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
margin: 0;
padding: 0;
border: 0;
font: inherit;
box-sizing: border-box;
overflow-wrap: break-word;
word-break: break-word;
@ -3057,3 +3057,29 @@ body,
box-shadow: 0 0 0 0.25rem var(--br-fprimary) inset;
}
}
#fork.f-pm-flash {
animation: pmFlashAnim 0.5s ease 0s 1 normal forwards;
}
@keyframes pmFlashAnim {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70% {
transform: translateX(-0.5rem);
}
20%, 40%, 60% {
transform: translateX(0.5rem);
}
80% {
transform: translateX(0.25rem);
}
90% {
transform: translateX(-0.25rem);
}
}