mirror of
https://github.com/openvk/openvk
synced 2024-11-13 10:39:24 +03:00
Notes: add new note viewing UI for wall
This commit is contained in:
celestora
parent
5ca9e2808c
commit
49e449e478
8 changed files with 217 additions and 1 deletions
41
ServiceAPI/Notes.php
Normal file
41
ServiceAPI/Notes.php
Normal 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(),
|
||||
],
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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");
|
||||
}
|
||||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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" = "ред.";
|
||||
|
|
|
|||
|
|
@ -392,6 +392,9 @@
|
|||
"notes_list_many" = "Знайдено $1 нотаток";
|
||||
"notes_list_other" = "Знайдено $1 нотаток";
|
||||
|
||||
/* Notes: Article Viewer */
|
||||
"aw_legacy_ui" = "Класичне дієвидло";
|
||||
|
||||
/* Menus */
|
||||
|
||||
"edit_button" = "ред.";
|
||||
|
|
|
|||
Loading…
Reference in a new issue