Notes: add new note viewing UI for wall

ServiceAPI/Notes.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace openvk\ServiceAPI;
+use openvk\Web\Models\Entities\User;
+use openvk\Web\Models\Repositories\Notes as NoteRepo;
+
+class Notes implements Handler
+{
+    protected $user;
+    protected $notes;
+    
+    function __construct(?User $user)
+    {
+        $this->user  = $user;
+        $this->notes = new NoteRepo;
+    }
+    
+    function getNote(int $noteId, callable $resolve, callable $reject): void
+    {
+        $note = $this->notes->get($noteId);
+        if(!$note || $note->isDeleted())
+            $reject("Note is gone");
+        
+        $noteOwner = $note->getOwner();
+        assert($noteOwner instanceof User);
+        if(!$noteOwner->getPrivacyPermission("notes.read", $this->user))
+            $reject("You don't have permission to access this note");
+        
+        $resolve([
+            "title"   => $note->getName(),
+            "link"    => "/note" . $note->getPrettyId(),
+            "html"    => $note->getText(),
+            "created" => (string) $note->getPublicationTime(),
+            "author"  => [
+                "name" => $noteOwner->getCanonicalName(),
+                "ava"  => $noteOwner->getAvatarUrl(),
+                "link" => $noteOwner->getURL(),
+            ],
+        ]);
+    }
+}

Web/Presenters/templates/@layout.xml

@@ -49,6 +49,28 @@
         <div class="notifications_global_wrap"></div>
         <div class="dimmer"></div>
 
+        <div class="articleView">
+            <a id="articleCloseButton" class="button" href="javascript:u('body').removeClass('article');">{_close}</a>
+            <div class="articleView_container">
+                <div class="articleView_info">
+                    <div class="articleView_author">
+                        <img id="articleAuthorAva" src="" />
+                        <div>
+                            <span><a id="articleAuthorName"></a></span>
+                            <time id="articleTime"></time>
+                        </div>
+                    </div>
+
+                    <div class="articleView_link">
+                        <a id="articleLink" href="/" class="button">{_aw_legacy_ui}</a>
+                    </div>
+                </div>
+
+                <div class="articleView_text" id="articleText">
+                </div>
+            </div>
+        </div>
+
         {if isset($backdrops) && !is_null($backdrops)}
             <div id="backdrop" style="background-image: url('{$backdrops[0]|noescape}'), url('{$backdrops[1]|noescape}');">
                 <div id="backdropDripper"></div>

Web/Presenters/templates/components/attachment.xml

@@ -33,7 +33,7 @@
         <div class="attachment_note">
             <img class="attachment_note_icon" src="/assets/packages/static/openvk/img/note.svg">
             <span class="attachment_note_text">{_note}</span>
-            <span class="attachment_note_name"><a href="/note{$attachment->getPrettyId()}">{ovk_proc_strtr($attachment->getName(), 66)}</a></span>
+            <span class="attachment_note_name"><a href="javascript:showArticle({$attachment->getId()});">{ovk_proc_strtr($attachment->getName(), 66)}</a></span>
         </div>
     {else}
         <div class="attachment_note">

Web/static/css/main.css

@@ -1403,6 +1403,7 @@ textarea {
     box-sizing: border-box;
     opacity: 0;
     transition: .1s all;
+    z-index: 129;
 }
 
 body.scrolled .toTop:hover {
@@ -2565,3 +2566,133 @@ a.poll-retract-vote {
 {
     background-color: rgb(233, 232, 232);
 }
+
+body.article {
+    height: 100vh;
+    overflow-y: hidden;
+}
+
+body.article .articleView {
+    display: unset;
+}
+
+body.article .floating_sidebar, body.article .page_content {
+    display: none;
+}
+
+.articleView {
+    display: none;
+    position: absolute;
+    z-index: 128;
+    width: 100%;
+    height: 100vh;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #fff;
+}
+
+.articleView_container {
+    width: 791px;
+    margin: auto;
+}
+
+.articleView_info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.articleView_author {
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+}
+
+.articleView_author > img {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    border-radius: 100%;
+}
+
+.articleView_author > div {
+    display: flex;
+    flex-direction: column;
+}
+
+.articleView_author > div > span {
+    font-size: 13pt;
+    font-weight: 600;
+    font-family: sans-serif;
+}
+
+.articleView_author > div > span > a {
+    color: #000;
+}
+
+.articleView_author > div > time {
+    font-size: 11pt;
+    font-family: sans-serif;
+    color: grey;
+}
+
+.articleView_text {
+    padding: 30px 0;
+    font-size: 19px;
+    font-family: serif;
+}
+
+.articleView_text h1, .articleView_text h2, .articleView_text h3, .articleView_text h4 {
+    font-family: sans-serif;
+}
+
+.articleView_text h1 {
+    font-size: 38px;
+    line-height: 41px;
+}
+
+.articleView_text h2 {
+    font-size: 32px;
+    line-height: 1.13em;
+}
+
+.articleView_text h3 {
+    font-size: 24px;
+    line-height: 1.4em;
+}
+
+.articleView_text h4 {
+    font-size: 19px;
+    line-height: 1.2em;
+    color: black;
+    border: none;
+}
+
+.articleView_text p {
+    margin-top: 24px;
+}
+
+.articleView_text p:first-of-type {
+    margin-top: 40px;
+}
+
+.articleView_text ::selection {
+    color: #fff;
+    background: #000;
+}
+
+.articleView_link > a {
+    font-size: 14px;
+}
+
+.articleView_text hr {
+    border: none;
+    height: 20px;
+    background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20height%3D%229%22%20width%3D%2235%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22.5%22%3E%3Cpath%20d%3D%22m0%200h35v9h-35z%22%2F%3E%3Cpath%20d%3D%22m3.997%200h1v3h-1zm4.147%201.817.5.866-2.598%201.5-.5-.866zm.5%204.5-.5.866-2.598-1.5.5-.866zm-3.647%202.683h-1v-3h1zm-4.147-1.817-.5-.866%202.598-1.5.5.866zm-.5-4.5.5-.866%202.598%201.5-.5.866zm16.647-2.683h1v3h-1zm4.147%201.817.5.866-2.598%201.5-.5-.866zm.5%204.5-.5.866-2.598-1.5.5-.866zm-3.647%202.683h-1v-3h1zm-4.147-1.817-.5-.866%202.598-1.5.5.866zm-.5-4.5.5-.866%202.598%201.5-.5.866zm16.647-2.683h1v3h-1zm4.147%201.817.5.866-2.598%201.5-.5-.866zm.5%204.5-.5.866-2.598-1.5.5-.866zm-3.647%202.683h-1v-3h1zm-4.147-1.817-.5-.866%202.598-1.5.5.866zm-.5-4.5.5-.866%202.598%201.5-.5.866z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat center;
+    margin: 0;
+}
+#articleCloseButton {
+    position: absolute;
+    right: 22px;
+    font-size: 12px;
+}

Web/static/js/al_wall.js

@@ -249,4 +249,17 @@ async function attachNote(id)
     let frame = MessageBox(tr("select_note"), body, [tr("cancel")], [Function.noop]);
 
     document.querySelector(".ovk-diag-body").style.padding = "10px"
+}
+
+async function showArticle(note_id) {
+    u("body").addClass("dimmed");
+    let note = await API.Notes.getNote(note_id);
+    u("#articleAuthorAva").attr("src", note.author.ava);
+    u("#articleAuthorName").text(note.author.name);
+    u("#articleAuthorName").attr("href", note.author.link);
+    u("#articleTime").text(note.created);
+    u("#articleLink").attr("href", note.link);
+    u("#articleText").html(`<h1 class="articleView_nameHeading">${note.title}</h1>` + note.html);
+    u("body").removeClass("dimmed");
+    u("body").addClass("article");
 }

locales/en.strings

@@ -414,6 +414,9 @@
 "notes_closed" = "You can't attach note to post, because only you can see them.<br> You can change it in <a href=\"/settings?act=privacy\">settings</a>.";
 "do_not_attach_note" = "Do not attach note";
 
+/* Notes: Article Viewer */
+"aw_legacy_ui" = "Legacy interface";
+
 /* Menus */
 
 /* Note that is string need to fit into the "My Page" link */

locales/ru.strings

@@ -399,6 +399,9 @@
 "notes_closed" = "Вы не можете прикрепить заметку к записи, так как ваши заметки видны только вам.<br><br> Вы можете поменять это в <a href=\"/settings?act=privacy\">настройках</a>.";
 "do_not_attach_note" = "Не прикреплять заметку";
 
+/* Notes: Article Viewer */
+"aw_legacy_ui" = "Старый интерфейс";
+
 /* Menus */
 
 "edit_button" = "ред.";

locales/uk.strings

@@ -392,6 +392,9 @@
 "notes_list_many" = "Знайдено $1 нотаток";
 "notes_list_other" = "Знайдено $1 нотаток";
 
+/* Notes: Article Viewer */
+"aw_legacy_ui" = "Класичне дієвидло";
+
 /* Menus */
 
 "edit_button" = "ред.";