Unread messages stub

Web/Models/Entities/Correspondence.php

@@ -57,6 +57,14 @@ class Correspondence
         return "/im?sel=$id";
     }
     
+    function getID(): int
+    {
+        $id = $this->correspondents[1]->getId();
+        $id = get_class($this->correspondents[1]) === 'openvk\Web\Models\Entities\Club' ? $id * -1 : $id;
+        
+        return $id;
+    }
+    
     /**
      * Get correspondents as array.
      * 
@@ -86,6 +94,9 @@ class Correspondence
         ];
         $params = array_merge($params[0], $params[1], array_reverse($params[0]), array_reverse($params[1]), $params[2]);
         
+        if ($limit === NULL)
+            DatabaseConnection::i()->getConnection()->query("UPDATE messages SET unread = 0 WHERE sender_id = ".$this->correspondents[1]->getId());
+        
         if(is_null($cap)) {
             $query = str_replace("\n  AND (`id` > ?)", "", $query);
         } else {
@@ -102,7 +113,7 @@ class Correspondence
         
         if($reverse)
             $query = str_replace("`created` DESC", "`created` ASC", $query);
-        
+            
         $msgs   = DatabaseConnection::i()->getConnection()->query($query, ...$params);
         $msgs   = array_map(function($message) {
             $message = new ActiveRow((array) $message, $this->messages); #Directly creating ActiveRow is faster than making query
@@ -150,8 +161,11 @@ class Correspondence
         $message->setSender_Type($classes[0]);
         $message->setRecipient_Type($classes[1]);
         $message->setCreated(time());
+        $message->setUnread(1);
         $message->save();
         
+        DatabaseConnection::i()->getConnection()->query("UPDATE messages SET unread = 0 WHERE sender_id = ".$this->correspondents[1]->getId());
+        
         # да
         if($ids[0] !== $ids[1]) {
             $event = new NewMessageEvent($message);

Web/Models/Entities/Message.php

@@ -1,5 +1,6 @@
 <?php declare(strict_types=1);
 namespace openvk\Web\Models\Entities;
+use Chandler\Database\DatabaseConnection;
 use openvk\Web\Models\Repositories\Clubs;
 use openvk\Web\Models\Repositories\Users;
 use openvk\Web\Models\Entities\Photo;
@@ -43,6 +44,13 @@ class Message extends RowModel
             return (new Clubs)->get($this->getRecord()->recipient_id);
     }
     
+    function getUnreadState(): int
+    {
+        trigger_error("TODO: use isUnread", E_USER_DEPRECATED);
+        
+        return (int) $this->isUnread();
+    }
+    
     /**
      * Get date of initial publication.
      * 
@@ -78,6 +86,11 @@ class Message extends RowModel
         return false;
     }
     
+    function isUnread(): bool
+    {
+        return (bool) $this->getRecord()->unread;
+    }
+    
     /**
      * Simplify to array
      * 
@@ -109,13 +122,14 @@ class Message extends RowModel
                 "id"     => $author->getId(),
                 "link"   => $_SERVER['REQUEST_SCHEME'] . "://" . $_SERVER['HTTP_HOST'] . $author->getURL(),
                 "avatar" => $author->getAvatarUrl(),
-                "name"   => $author->getFirstName(),
+                "name"   => $author->getFirstName().$unreadmsg,
             ],
             "timing" => [
                 "sent"   => (string) $this->getSendTime()->format("%e %B %G" . tr("time_at_sp") . "%X"),
                 "edited" => is_null($this->getEditTime()) ? null : (string) $this->getEditTime(),
             ],
             "text"        => $this->getText(),
+            "read"        => !$this->isUnread(),
             "attachments" => $attachments,
         ];
     }

Web/Presenters/templates/Messenger/App.xml

@@ -19,7 +19,7 @@
     <div class="messenger-app">
         <div class="messenger-app--messages" data-bind="event: { scroll: onMessagesScroll }">
             <div data-bind="foreach: messages">
-                <div class="messenger-app--messages---message">
+                <div class="messenger-app--messages---message" data-bind="css: { unread: !read }">
                     <img class="ava" data-bind="attr: { src: sender.avatar, alt: sender.name }" />
                     <div class="_content">
                         <a href="#" data-bind="attr: { href: sender.link }">
@@ -188,6 +188,7 @@
                         "edited": null
                     },
                     "text": content,
+                    "read": false,
                     "attachments": [],
                     "_tuid": Math.ceil(performance.now())
                 };
@@ -205,6 +206,7 @@
                         "edited": null
                     },
                     "text": content,
+                    "read": true,
                     "_tuid": Math.ceil(performance.now())
                 };
             }

Web/Presenters/templates/Messenger/Index.xml

@@ -32,10 +32,10 @@
                     <a href="{$recipient->getURL()}">{$recipient->getCanonicalName()}</a><br/>
                     <span>{$lastMsg->getSendTime()->format("%e %B %G" . tr("time_at_sp") . "%X")}</span>
                 </div>
-                <div class="crp-entry--message">
+                <div n:class="crp-entry--message, $lastMsg->getUnreadState() ? unread">
                     {var _author = $lastMsg->getSender()}
                     
-                    <div class="crp-entry--message---av">
+                    <div class="crp-entry--message---av" n:if="$_author->getId() === $thisUser->getId()">
                         <img src="{$_author->getAvatarURL()}"
                         alt="Фотография пользователя" />
                     </div>

Web/static/css/avatar.1.css

@@ -22,15 +22,15 @@ div.content > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth
 
 .crp-entry--image > img
 {
-    width: 64px;
+    width: 48px;
-    height: 64px;
+    height: 48px;
     object-fit: cover;
 }
 
 .crp-entry--message---av > img,
 .ava
 {
-    width: 46px;
+    width: 42px;
-    height: 46px;
+    height: 42px;
     object-fit: cover;
 }

Web/static/css/style.css

@@ -714,7 +714,7 @@ table.User {
 }
 
 .crp-list {
-    margin: 10px -6px 0 -11px;
+    margin: 10px -6px -10px -11px;
     display: flex;
     flex-direction: column;
     border-top: 1px solid #d6d6d6;
@@ -726,10 +726,18 @@ table.User {
 .crp-entry {
     display: flex;
     padding: 8px;
-    border-bottom: 1px solid #d6d6d6;
     cursor: pointer;
-width: 592px;
+    width: 611px;
-margin-left: 1px;
+    margin-left: 1px;
+    border-bottom: 1px solid #d6d6d6;
+}
+
+.crp-entry:hover {
+    background-color: #f9f9f9;
+}
+
+.crp-entry:first-of-type {
+    border-top: 1px solid #d6d6d6;
 }
 
 .crp-entry--image, .crp-entry--info {
@@ -744,14 +752,6 @@ margin-left: 1px;
     max-width: 64px;
 }
 
-.crp-entry:hover {
-    background-color: #f9f9f9;
-
-	width: 592px;
-
-	margin-left: 1px;
-}
-
 .crp-entry--info span {
     color: grey;
 }
@@ -760,6 +760,35 @@ margin-left: 1px;
     font-weight: 900;
 }
 
+.crp-entry--message.unread {
+    background-color: #dcdcdc;
+    padding: 5px;
+    width: 346px;
+    border-radius: 3px;
+}
+
+.messenger-app--messages---message.unread {
+    background-color: #dcdcdc;
+    padding: 5px;
+    margin: -5px;
+    padding-bottom: 1.2rem;
+    margin-bottom: 0;
+}
+
+.messenger-app--messages---message.unread:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    padding-bottom: 5px;
+    margin-bottom: 1.2rem;
+}
+
+.messenger-app--messages---message.unread:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    padding-bottom: 5px;
+    margin-bottom: 1.2rem;
+}
+
 .crp-entry--message---av img {
     max-width: 42px;
 }
@@ -1275,4 +1304,4 @@ body.scrolled .toTop:hover {
 
 .knowledgeBaseArticle ul {
     color: unset;
-}
+}