-
-
+
+
+
+
+
+
+
+
+
{_uploading_photos_from_computer}
+
+
+
{_admin_limits}
+
+ - {_supported_formats}
+ - {_max_load_photos}
+
+
+
+
+
+
+
+ {_tip}: {_tip_ctrl}
+
+
+
+
+
+
+
+
-
-
-
+
diff --git a/Web/static/css/main.css b/Web/static/css/main.css
index 9baf246e..f05d0a2b 100644
--- a/Web/static/css/main.css
+++ b/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;
+}
diff --git a/Web/static/js/al_photos.js b/Web/static/js/al_photos.js
index ee69d7fc..59965c09 100644
--- a/Web/static/js/al_photos.js
+++ b/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", `
`)
+ document.querySelector(".insertPhotos").insertAdjacentHTML("beforeend", `
`)
}
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("description")}:
+
+
+
+
`)
}
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")
- document.querySelector(".page_content tbody").innerHTML = ""
- document.getElementById("endUploading").style.display = "none"
+ if(!result.success) {
+ 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"))
+ }
- NewNotification(tr("photos_successfully_uploaded"), tr("click_to_go_to_album"), null, () => {window.location.assign(`/album${result.owner}_${result.album}`)})
+ 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) => {
diff --git a/locales/en.strings b/locales/en.strings
index 98bba6c0..780da8b3 100644
--- a/locales/en.strings
+++ b/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 */
diff --git a/locales/ru.strings b/locales/ru.strings
index 26d4d829..2364175a 100644
--- a/locales/ru.strings
+++ b/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 */