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

Web/Presenters/UserPresenter.php

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

Web/Presenters/templates/User/View.xml

@@ -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>
+                        <div n:class="page_status, $thatIsThisUser ? page_status_edit_button" n:attr="id => $thatIsThisUser ? page_status_text : NULL">{$user->getStatus()}</div>
-                    {elseif isset($thisUser) && $user->getId() == $thisUser->getId()}
+                    {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>
     

Web/static/css/style.css

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