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:
parent
4703e6b6b6
commit
86ca176c0a
5 changed files with 49 additions and 5 deletions
|
@ -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'),
|
||||
]);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue