Users: Add a popup to change the status

Now, when you click on the status, a popup window opens in which you can do this (just like in the original VK and OpenVK Classic). So far, changing the status requires a page reload. Closes #227
This commit is contained in:
Maxim Leshchenko 2021-11-25 22:10:53 +02:00
parent 60653cdf59
commit 76605b9eed
No known key found for this signature in database
GPG key ID: BB9C44A8733FBEEE
3 changed files with 61 additions and 3 deletions

View file

@ -173,6 +173,18 @@ final class UserPresenter extends OpenVKPresenter
$user->setFav_Books(empty($this->postParam("fav_books")) ? NULL : ovk_proc_strtr($this->postParam("fav_books"), 300));
$user->setFav_Quote(empty($this->postParam("fav_quote")) ? NULL : ovk_proc_strtr($this->postParam("fav_quote"), 300));
$user->setAbout(empty($this->postParam("about")) ? NULL : ovk_proc_strtr($this->postParam("about"), 300));
} elseif($_GET['act'] === "status") {
if(mb_strlen($this->postParam("status")) > 255) {
$statusLength = (string) mb_strlen($this->postParam("status"));
$this->flashFail("err", "Ошибка", "Статус слишком длинный ($statusLength символов вместо 255 символов)");
}
$user->setStatus(empty($this->postParam("status")) ? NULL : $this->postParam("status"));
$user->save();
header("HTTP/1.1 302 Found");
header("Location: /id" . $user->getId());
exit;
}
try {

View file

@ -353,14 +353,24 @@
<div class="right_big_block">
<div class="page_info">
<div n:if="!is_null($alert = $user->getAlert())" class="user-alert">{$alert}</div>
{var thatIsThisUser = isset($thisUser) && $user->getId() == $thisUser->getId()}
<div n:if="$thatIsThisUser" class="page_status_popup" id="status_editor" style="display: none;">
<form method="post" action="/edit?act=status">
<div style="margin-bottom: 10px;">
<input type="text" name="status" size="50" value="{$user->getStatus()}" />
</div>
<input type="hidden" name="hash" value="{$csrfToken}" />
<input type="submit" class="button" value="{_'save'}" />
</form>
</div>
<div class="accountInfo clearFix">
<div class="profileName">
<h2>{$user->getFullName()}</h2>
{if !is_null($user->getStatus())}
<div class="page_status">{$user->getStatus()}</div>
{elseif isset($thisUser) && $user->getId() == $thisUser->getId()}
<div n:class="page_status, $thatIsThisUser ? page_status_edit_button" n:attr="id => $thatIsThisUser ? page_status_text : NULL">{$user->getStatus()}</div>
{elseif $thatIsThisUser}
<div class="page_status">
<a href="/edit" class="edit_link">[ {_"change_status"} ]</a>
<div n:class="edit_link, $thatIsThisUser ? page_status_edit_button" id="page_status_text">[ {_"change_status"} ]</div>
</div>
{/if}
</div>
@ -542,6 +552,19 @@
Function.noop
]);
}
{if isset($thisUser) && $user->getId() == $thisUser->getId()}
function setStatusEditorShown(shown) {
document.getElementById("status_editor").style.display = shown ? "block" : "none";
}
document.addEventListener("click", event => {
if(!event.target.closest("#status_editor") && !event.target.closest("#page_status_text"))
setStatusEditorShown(false);
});
document.getElementById("page_status_text").onclick = setStatusEditorShown.bind(this, true);
{/if}
</script>
</div>

View file

@ -340,6 +340,29 @@ table {
overflow: hidden;
}
.page_status_edit_button {
cursor: pointer;
}
.page_status_edit_button:hover {
text-decoration: underline;
}
.page_status_popup {
position: absolute;
border: 1px solid #CCC;
background-color: #f7f7f7;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);;
padding: 10px;
float: right;
margin-top: 6px;
margin-left: -6px;
}
.page_status_popup form {
margin: 0;
}
.button {
border-radius: 2px;
border: #595959;