Notes: add new note viewing UI for wall

This commit is contained in:
celestora 2023-07-06 13:20:49 +03:00
parent 5ca9e2808c
commit 49e449e478
8 changed files with 217 additions and 1 deletions

41
ServiceAPI/Notes.php Normal file
View file

@ -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(),
],
]);
}
}

View file

@ -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>

View file

@ -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">

View file

@ -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;
}

View file

@ -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");
}

View file

@ -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 */

View file

@ -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" = "ред.";

View file

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