add good view

Web/Presenters/PhotosPresenter.php

@@ -224,12 +224,12 @@ final class PhotosPresenter extends OpenVKPresenter
         $this->willExecuteWriteAction(true);
         
         if(is_null($this->queryParam("album")))
-            $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в <b>DELETED</b>.", 500, true);
+            $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в DELETED.", 500, true);
         
         [$owner, $id] = explode("_", $this->queryParam("album"));
         $album = $this->albums->get((int) $id);
         if(!$album)
-            $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в <b>DELETED</b>.", 500, true);
+            $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в DELETED.", 500, true);
         if(is_null($this->user) || !$album->canBeModifiedBy($this->user->identity))
             $this->flashFail("err", "Ошибка доступа", "Недостаточно прав для модификации данного ресурса.", 500, true);
         
@@ -243,6 +243,9 @@ final class PhotosPresenter extends OpenVKPresenter
                     if(!$phot || $phot->isDeleted() || $phot->getOwner()->getId() != $this->user->id)
                         continue;
                     
+                    if(iconv_strlen($description) > 255)
+                        $this->flashFail("err", tr("error"), tr("description_too_long"), 500, true);
+
                     $phot->setDescription($description);
                     $phot->save();
 
@@ -276,7 +279,7 @@ final class PhotosPresenter extends OpenVKPresenter
                     ];
                 } catch(ISE $ex) {
                     $name = $album->getName();
-                    $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в <b>$name</b>.", 500, true);
+                    $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию в $name.", 500, true);
                 }
 
                 $album->addPhoto($photo);

Web/Presenters/templates/Photos/EditAlbum.xml

@@ -14,6 +14,15 @@
 {/block}
 
 {block content}
+    <div class="tabs">
+        <div id="activetabs" class="tab">
+            <a id="act_tab_a" href="/album{$album->getPrettyId()}/edit">{_edit_album}</a>
+        </div>
+        <div class="tab">
+            <a href="/photos/upload?album={$album->getPrettyId()}">{_add_photos}</a>
+        </div>
+    </div>
+
     <form method="post" enctype="multipart/form-data">
       <table cellspacing="6">
         <tbody>

Web/Presenters/templates/Photos/UploadPhoto.xml

@@ -12,17 +12,48 @@
 {/block}
 
 {block content}
-    <div class="uploadPhotos">
+    <div class="tabs">
+        <div class="tab">
+            <a href="/album{$album->getPrettyId()}/edit">{_edit_album}</a>
+        </div>
+        <div id="activetabs" class="tab">
+            <a id="act_tab_a" href="#">{_add_photos}</a>
+        </div>
+    </div>
+
     <input type="file" accept=".jpg,.png,.gif" name="files[]" multiple class="button" id="uploadButton" style="display:none">
+
+    <div class="container_gray" style="height: 344px;">
+        <div class="insertThere"></div>
+        <div class="whiteBox" style="display: block;">
+            <div class="boxContent">
+                <h4>{_uploading_photos_from_computer}</h4>
+
+                <div class="limits" style="margin-top:17px">
+                    <b style="color:#45688E">{_admin_limits}</b>
+                    <ul class="blueList" style="margin-left: -25px;margin-top: 1px;">
+                        <li>{_supported_formats}</li>
+                        <li>{_max_load_photos}</li>
+                    </ul>
+
+                    <div style="text-align: center;padding-top: 4px;" class="insertAgain">
                         <input type="button" class="button" id="fakeButton" onclick="uploadButton.click()" value="{_upload_picts}">
                     </div>
 
-    <table style="border-spacing: 6px 10px;">
+                    <div class="tipping" style="margin-top: 19px;">
-        <tbody id="photos"></tbody>
+                        <span style="line-height: 15px"><b>{_tip}</b>: {_tip_ctrl}</span>
-    </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="insertPhotos" id="photos" style="margin-top: 9px;padding-bottom: 12px;"></div>
+
+        <input type="button" class="button" style="display:none;margin-left: auto;margin-right: auto;" id="endUploading" value="{_end_uploading}">
+    </div>
+
     <input n:ifset="$_GET['album']" type="hidden" id="album" value="{$_GET['album']}" />
 
-    <input type="button" class="button" style="display:none;" id="endUploading" value="{_end_uploading}">
     <script>
         uploadButton.value = ''
     </script>

Web/static/css/main.css

@@ -2722,3 +2722,78 @@ body.article .floating_sidebar, body.article .page_content {
     border-color: #c4c4c4 !important;
     color: black !important;
 }
+
+.whiteBox {
+    background: white;
+    width: 421px;
+    margin-left: auto;
+    margin-right: auto;
+    border: 1px solid #E8E8E8;
+    margin-top: 7%;
+    height: 231px;
+}
+
+.boxContent {
+    padding: 24px 38px;
+}
+
+.blueList {
+    list-style-type: none;
+}
+
+.blueList li {
+    color: black;
+    font-size: 11px;
+    padding-top: 7px;
+}
+
+.blueList li::before {
+    content: " ";
+    width: 5px;
+    height: 5px;
+    display: inline-block;
+    vertical-align: bottom;
+    background-color: #73889C;
+    margin: 3px;
+    margin-left: 2px;
+    margin-right: 7px;
+}
+
+.insertedPhoto {
+    background: white;
+    border: 1px solid #E8E7EA;
+    padding: 10px;
+    height: 100px;
+    margin-top: 6px;
+}
+
+.uploadedImage {
+    float: right;
+    display: flex;
+    flex-direction: column;
+}
+
+.uploadedImageDescription {
+    width: 449px;
+}
+
+.uploadedImageDescription textarea {
+    width: 84%;
+    height: 86px;
+}
+
+.smallFrame {
+    border: 1px solid #E1E3E5;
+    background: #F0F0F0;
+    height: 33px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.smallFrame .smallBtn {
+    margin-top: 10px;
+}
+
+.smallFrame:hover {
+    background: #E9F0F1 !important;
+}

Web/static/js/al_photos.js

@@ -6,6 +6,11 @@ $(document).on("change", "#uploadButton", (e) => {
         return;
     }
 
+    if(document.querySelector(".whiteBox").style.display == "block") {
+        document.querySelector(".whiteBox").style.display = "none"
+        document.querySelector(".insertThere").append(document.getElementById("fakeButton"));
+    }
+
     let photos = new FormData()
     for(file of e.currentTarget.files) {
         photos.append("photo_"+iterator, file)
@@ -19,7 +24,7 @@ $(document).on("change", "#uploadButton", (e) => {
     xhr.open("POST", "/photos/upload?album="+document.getElementById("album").value)
 
     xhr.onloadstart = () => {
-        document.getElementById("photos").insertAdjacentHTML("beforeend", `<img id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">`)
+        document.querySelector(".insertPhotos").insertAdjacentHTML("beforeend", `<img id="loader" src="/assets/packages/static/openvk/img/loading_mini.gif">`)
     }
 
     xhr.onload = () => {
@@ -30,27 +35,29 @@ $(document).on("change", "#uploadButton", (e) => {
             let photosArr = result.photos
 
             for(photo of photosArr) {
-                let table = document.querySelector("#photos")
+                let table = document.querySelector(".insertPhotos")
 
                 table.insertAdjacentHTML("beforeend", `
-                <tr id="photo" data-id="${photo.id}">
+                <div id="photo" class="insertedPhoto" data-id="${photo.id}">
-                    <td width="120" valign="top">
+                    <div class="uploadedImageDescription" style="float: left;">
+                        <span style="color: #464646;position: absolute;">${tr("description")}:</span>
+                        <textarea style="margin-left: 62px; resize: none;" maxlength="255"></textarea>
+                    </div>
                     <div class="uploadedImage">
                         <a href="${photo.link}" target="_blank"><img width="125" src="${photo.url}"></a>
+                        <a class="profile_link" style="width: 125px;" id="deletePhoto" data-id="${photo.vid}" data-owner="${photo.owner}">${tr("delete")}</a>
+                        <!--<div class="smallFrame" style="margin-top: 6px;">
+                            <div class="smallBtn">${tr("album_poster")}</div>
+                        </div>-->
+                    </div>
                 </div>
-                        <a style="float:right" id="deletePhoto" data-id="${photo.vid}" data-owner="${photo.owner}">${tr("delete")}</a>
-                    </td>
-                    <td>
-                        <textarea style="margin: 0px; height: 50px; width: 259px; resize: none;" maxlength="255"></textarea>
-                    </td>
-                </tr>
                 `)
             }
 
             document.getElementById("endUploading").style.display = "block"
         } else {
             u("#loader").remove()
-            MessageBox(tr("error"), result.flash.message ?? tr("error_uploading_photo"), [tr("ok")], [() => {Function.noop}])
+            MessageBox(tr("error"), escapeHtml(result.flash.message) ?? tr("error_uploading_photo"), [tr("ok")], [() => {Function.noop}])
         }
     }
 
@@ -61,7 +68,7 @@ $(document).on("click", "#endUploading", (e) => {
     let table = document.querySelector("#photos")
     let data  = new FormData()
     let arr   = new Map();
-    for(el of table.querySelectorAll("tr#photo")) {
+    for(el of table.querySelectorAll("div#photo")) {
         arr.set(el.dataset.id, el.querySelector("textarea").value)
     }
 
@@ -83,11 +90,19 @@ $(document).on("click", "#endUploading", (e) => {
     xhr.onload = () => {
         let result = JSON.parse(xhr.responseText)
 
-        e.currentTarget.removeAttribute("disabled")
+        if(!result.success) {
-        document.querySelector(".page_content tbody").innerHTML = ""
+            MessageBox(tr("error"), escapeHtml(result.flash.message), [tr("ok")], [() => {Function.noop}])
+        } else {
+            document.querySelector(".page_content .insertPhotos").innerHTML = ""
             document.getElementById("endUploading").style.display = "none"
     
             NewNotification(tr("photos_successfully_uploaded"), tr("click_to_go_to_album"), null, () => {window.location.assign(`/album${result.owner}_${result.album}`)})
+            
+            document.querySelector(".whiteBox").style.display = "block"
+            document.querySelector(".insertAgain").append(document.getElementById("fakeButton"))
+        }
+
+        e.currentTarget.removeAttribute("disabled")
     }
 
     xhr.send(data)
@@ -101,7 +116,7 @@ $(document).on("click", "#deletePhoto", (e) => {
     xhr.open("POST", `/photo${e.currentTarget.dataset.owner}_${e.currentTarget.dataset.id}/delete`)
 
     xhr.onloadstart = () => {
-        e.currentTarget.closest("tr#photo").classList.add("lagged")
+        e.currentTarget.closest("div#photo").classList.add("lagged")
     }
 
     xhr.onerror = () => {
@@ -109,10 +124,12 @@ $(document).on("click", "#deletePhoto", (e) => {
     }
 
     xhr.onload = () => {
-        u(e.currentTarget.closest("tr#photo")).remove()
+        u(e.currentTarget.closest("div#photo")).remove()
 
-        if(document.querySelectorAll("tr#photo").length < 1) {
+        if(document.querySelectorAll("div#photo").length < 1) {
             document.getElementById("endUploading").style.display = "none"
+            document.querySelector(".whiteBox").style.display = "block"
+            document.querySelector(".insertAgain").append(document.getElementById("fakeButton"))
         }
     }
 
@@ -129,16 +146,12 @@ $(document).on("dragover", (e) => {
     e.preventDefault()
     document.querySelector("#fakeButton").classList.add("dragged")
     document.querySelector("#fakeButton").value = tr("drag_files_here")
-    document.querySelector("#fakeButton").style.width = "100%";
-    document.querySelector("#fakeButton").style.height = "196px";
 })
 
 $(document).on("dragleave", (e) => {
     e.preventDefault()
     document.querySelector("#fakeButton").classList.remove("dragged")
     document.querySelector("#fakeButton").value = tr("upload_picts")
-    document.querySelector("#fakeButton").style.width = "max-content";
-    document.querySelector("#fakeButton").style.height = "max-content";
 })
 
 $("#fakeButton").on("drop", (e) => {

locales/en.strings

@@ -381,6 +381,7 @@
 "upd_f" = "updated her profile picture";
 "upd_g" = "updated group's picture";
 
+"add_photos" = "Add photos";
 "upload_picts" = "Upload photos";
 "end_uploading" = "Finish uploading";
 "photos_successfully_uploaded" = "Photos successfully uploaded";
@@ -392,6 +393,13 @@
 "only_images_accepted" = "File \"$1\" is not an image";
 "max_filesize" = "Max filesize is $1 MB";
 
+"uploading_photos_from_computer" = "Uploading photos from Your computer";
+"supported_formats" = "Supported file formats: JPG, PNG and GIF.";
+"max_load_photos" = "You can upload up to 10 photos at a time.";
+"tip" = "Tip";
+"tip_ctrl" = "to select multiple photos at once, hold down the Ctrl key when selecting files in Windows or the CMD key in Mac OS.";
+"album_poster" = "Album poster";
+
 /* Notes */
 
 "notes" = "Notes";
@@ -1129,6 +1137,7 @@
 "media_file_corrupted_or_too_large" = "The media content file is corrupted or too large.";
 "post_is_empty_or_too_big" = "The post is empty or too big.";
 "post_is_too_big" = "The post is too big.";
+"description_too_long" = "Description is too long.";
 
 /* Admin actions */
 

locales/ru.strings

@@ -364,6 +364,7 @@
 "upd_f" = "обновила фотографию на своей странице";
 "upd_g" = "обновило фотографию группы";
 
+"add_photos" = "Добавить фотографии";
 "upload_picts" = "Загрузить фотографии";
 "end_uploading" = "Завершить загрузку";
 "photos_successfully_uploaded" = "Фотографии успешно загружены";
@@ -375,6 +376,13 @@
 "only_images_accepted" = "Файл \"$1\" не является изображением";
 "max_filesize" = "Максимальный размер файла — $1 мегабайт";
 
+"uploading_photos_from_computer" = "Загрузка фотографий с Вашего компьютера";
+"supported_formats" = "Поддерживаемые форматы файлов: JPG, PNG и GIF.";
+"max_load_photos" = "Вы можете загружать до 10 фотографий за один раз.";
+"tip" = "Подсказка";
+"tip_ctrl" = "для того, чтобы выбрать сразу несколько фотографий, удерживайте клавишу Ctrl при выборе файлов в ОС Windows или клавишу CMD в Mac OS.";
+"album_poster" = "Обложка альбома";
+
 /* Notes */
 
 "notes" = "Заметки";
@@ -1029,6 +1037,7 @@
 "media_file_corrupted_or_too_large" = "Файл медиаконтента повреждён или слишком велик.";
 "post_is_empty_or_too_big" = "Пост пустой или слишком большой.";
 "post_is_too_big" = "Пост слишком большой.";
+"description_too_long" = "Описание слишком длинное.";
 
 /* Admin actions */