Textarea: New attachment menu

Web/Presenters/templates/components/textArea.xml

@@ -55,22 +55,25 @@
             <br/>
             <input type="submit" value="{_write}" class="button" />
             <div style="float: right; display: flex; flex-direction: column;">
-                <a href="javascript:void(u('#post-buttons{$textAreaId} #wallAttachmentMenu').toggleClass('hidden'));">
+                <a href="javascript:toggleMenu({$textAreaId});">
                     {_attach}
                 </a>
                 
                 <div id="wallAttachmentMenu" class="hidden">
+                    <a class="header" href="javascript:toggleMenu({$textAreaId});">
+                        {_attach}
+                    </a>
                     <a href="javascript:void(document.querySelector('#post-buttons{$textAreaId} input[name=_pic_attachment]').click());">
                         <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/mimetypes/application-x-egon.png" />
-                        {_attach_photo}
+                        {_photo}
                     </a>
                     <a href="javascript:void(document.querySelector('#post-buttons{$textAreaId} input[name=_vid_attachment]').click());">
                         <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/mimetypes/application-vnd.rn-realmedia.png" />
-                        {_attach_video}
+                        {_video}
                     </a>
                     <a n:if="$graffiti ?? false" href="javascript:initGraffiti({$textAreaId});">
                         <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/actions/draw-brush.png" />
-                        {_draw_graffiti}
+                        {_graffiti}
                     </a>
                 </div>
             </div>

Web/static/css/style.css

@@ -1517,14 +1517,17 @@ body.scrolled .toTop:hover {
 
 #wallAttachmentMenu {
     position: absolute;
-    margin-top: 20px;
     border: 1px solid darkgrey;
     background-color: white;
     z-index: 32;
+    margin-top: -7px;
+    margin-left: -16px;
+    box-shadow: 0 1px 3px -1px;
 }
 
 #wallAttachmentMenu>a {
-    display: block;
+    display: flex;
+    gap: 5px;
     padding: 2px 6px;
     cursor: pointer;
 }
@@ -1537,6 +1540,12 @@ body.scrolled .toTop:hover {
     background-color: #f0f0f0;
 }
 
+#wallAttachmentMenu>.header {
+	padding: 6px 15px;
+	background-color: #eee;
+	text-align: center;
+}
+
 #ovkDraw {
     border: 1px solid #757575;
 }

Web/static/js/openvk.cls.js

@@ -55,6 +55,17 @@ function parseAjaxResponse(responseString) {
     }
 }
 
+function toggleMenu(id) {
+    if($(`#post-buttons${id} #wallAttachmentMenu`).is('.hidden')) {
+        $(`#post-buttons${id} #wallAttachmentMenu`).css({ opacity: 0 });
+        $(`#post-buttons${id} #wallAttachmentMenu`).toggleClass('hidden').fadeTo(250, 1);
+    } else {
+        $(`#post-buttons${id} #wallAttachmentMenu`).fadeTo(250, 0, function () {
+            $(this).toggleClass('hidden');
+        });
+    }
+}
+
 document.addEventListener("DOMContentLoaded", function() { //BEGIN
 
     u("#_photoDelete").on("click", function(e) {

locales/en.strings

@@ -187,6 +187,8 @@
 "open_post" = "Open post";
 "version_incompatibility" = "This attachment could not be displayed. Probably the database is incompatible with the current version of OpenVK.";
 
+"graffiti" = "Graffiti";
+
 "reply" = "Reply";
 
 /* Friends */

locales/ru.strings

@@ -190,6 +190,8 @@
 "open_post" = "Открыть запись";
 "version_incompatibility" = "Не удалось отобразить это вложение. Возможно, база данных несовместима с текущей версией OpenVK.";
 
+"graffiti" = "Граффити";
+
 "reply" = "Ответить";
 
 /* Friends */