Merge pull request #1 from lalka2016/avatars

Изменение аватарок как в старом ВК
This commit is contained in:
lalka2018 2023-04-23 11:05:04 +03:00 committed by GitHub
commit 7bcabb4c73
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 182 additions and 13 deletions

View file

@ -96,9 +96,48 @@
<div class="right_small_block">
{var $avatarPhoto = $club->getAvatarPhoto()}
{var $avatarLink = ((is_null($avatarPhoto) ? FALSE : $avatarPhoto->isAnonymous()) ? "/photo" . ("s/" . base_convert((string) $avatarPhoto->getId(), 10, 32)) : $club->getAvatarLink())}
<a href="{$avatarLink|nocheck}">
<img src="{$club->getAvatarUrl('normal')}" style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
</a>
<div id="avatark" style="position:relative;width:100%;"
onmouseover="
avatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
avatarChange.style.opacity = '1';
_avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
_avatarDelete.style.opacity = '1';
deleteButton.style.opacity = '1';
"
onmouseleave="
avatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0)';
avatarChange.style.opacity = '0';
_avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0)';
_avatarDelete.style.opacity = '0';
deleteButton.style.opacity = '0';
">
{if $club->canBeModifiedBy($thisUser)}
{if is_null($avatarPhoto) == true}
<a href="/club{$club->getId()}/edit" id="_newAvatarPicture" class="newpict" style="position:absolute;margin-left:0;margin-right:0;">{_add_photo}</a>
{else}
<a id="_avatarDelete" href="/photo{$club->getAvatarPhoto()->getPrettyId()}/delete"
style="position:absolute;right:0;top:0;background-color:rgba(51, 51, 51, 0); border-radius: 0px 0px 3px 3px;padding:2px;padding-left:3px;"><img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png" style="opacity:0;"></a>
<ul id="avatarChange" style="position:absolute;width:100px;background-color:rgba(51, 51, 51, 0);list-style-type: none;font-size:11px;padding-top:10px;padding-bottom:10px;opacity:0%;">
<li id="ff">
<img src="/assets/packages/static/openvk/img/upload.png" style="position:absolute;left:0;margin-left:20px;"><a href="/club{$club->getId()}/edit" id="_newAvatarPicture" style="color:#B2B2B2;" onmouseover="_newAvatarPicture.style.color = '#D9D9D9';" onmouseleave="_newAvatarPicture.style.color = '#B2B2B2';"> {tr("new_photo")}</a>
</li>
<!--<li><img src="/assets/packages/static/openvk/img/miniature.png"><a href="javascript:alert('')" id="_changeMiniature" style="color:#B2B2B2;" onmouseover="_changeMiniature.style.color = '#D9D9D9';" onmouseleave="_changeMiniature.style.color = '#B2B2B2';">{tr("change_miniature")}</a></li>-->
</ul>
{/if}
{/if}
{if is_null($avatarPhoto) == false}<a href="/photo{$club->getAvatarPhoto()->getPrettyId()}"
{else}<a href="javascript:void(0)"
{/if}>
<img id="clubAvatar" src="{$club->getAvatarUrl('normal')}" style="width: 100%; image-rendering: -webkit-optimize-contrast;"></a>
<script>
//_newAvatarPicture.style.marginTop = clubAvatar.height-30+"px";
window.addEventListener("load", event => {
let image = clubAvatar;
avatarChange.style.marginTop = image.height-34+"px";
avatarChange.style.width = image.width/1.25+"px"
});
</script>
</div>
<div n:ifset="$thisUser" id="profile_links">
{if $club->canBeModifiedBy($thisUser)}
<a href="/club{$club->getId()}/edit" id="profile_link">{_edit_group}</a>

View file

@ -70,10 +70,51 @@
<div class="left_small_block">
<div style="margin-left: auto;margin-right: auto;display: table;">
<a href="{$user->getAvatarLink()|nocheck}">
<img src="{$user->getAvatarUrl('normal')}"
alt="{$user->getCanonicalName()}"
style="width: 100%; image-rendering: -webkit-optimize-contrast;" />
<div
{if $user->getId() == $thisUser->getId()} onmouseover="
{if is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != "$serverUrl/assets/packages/static/openvk/img/camera_200.png"}
_avatarDelete.style.backgroundColor='rgba(0, 0, 0, 0.7)';
deleteButton.style.opacity='100%';
{/if}
avatarChange.style.backgroundColor='rgba(0, 0, 0, 0.7)';
avatarChange.style.opacity='100%';
"
onmouseleave="
{if is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != "$serverUrl/assets/packages/static/openvk/img/camera_200.png"}
_avatarDelete.style.backgroundColor='rgba(0, 0, 0, 0)';
deleteButton.style.opacity='0%';
{/if}
avatarChange.style.backgroundColor='rgba(0, 0, 0, 0)';
avatarChange.style.opacity='0%';
//pizdec
"{/if}>
<div n:if="$user->getId() == $thisUser->getId()">
<div id="avatarEdit" style="position:relative;">
<div n:if="is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != '$serverUrl/assets/packages/static/openvk/img/camera_200.png'">
<a id="_avatarDelete" href="/photo{$user->getAvatarPhoto()->getPrettyId()}/delete"
style="position:absolute;right:0;top:0;background-color:rgba(51, 51, 51, 0); border-radius: 0px 0px 3px 3px;padding:2px;padding-left:3px;">
<img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png" style="opacity:0;"></a>
</div>
</div>
<ul id="avatarChange" style="position:absolute;width:100px;background-color:rgba(51, 51, 51, 0);list-style-type: none;font-size:11px;padding-top:10px;padding-bottom:10px;opacity:0%;">
<li><img src="/assets/packages/static/openvk/img/upload.png" style="position:absolute;left:0;margin-left:20px;"><a href="/al_avatars" id="_newPicture" style="color:#B2B2B2;" onmouseover="_newPicture.style.color = '#D9D9D9';" onmouseleave="_newPicture.style.color = '#B2B2B2';"> {tr("new_photo")}</a></li>
<!--<li><img src="/assets/packages/static/openvk/img/miniature.png"><a href="javascript:alert('')" id="_changeMiniature" style="color:#B2B2B2;" onmouseover="_changeMiniature.style.color = '#D9D9D9';" onmouseleave="_changeMiniature.style.color = '#B2B2B2';">{tr("change_miniature")}</a></li>-->
</ul>
</div>
<a href="{$user->getAvatarLink()|nocheck}">
<img src="{$user->getAvatarUrl('normal')}"
id="avatarImage"
alt="{$user->getCanonicalName()}"
style="max-width:100%; image-rendering: -webkit-optimize-contrast;" />
<script>
window.addEventListener("load", event => {
let image = avatarImage;
avatarChange.style.marginTop = image.height-32+"px";
avatarChange.style.width = image.width/1.25+"px"
});
</script>
</div>
</a>
</div>
<div n:ifset="$thisUser" id="profile_links">

BIN
Web/static/img/delete.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 178 B

BIN
Web/static/img/upload.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 211 B

View file

@ -65,7 +65,6 @@ function toggleMenu(id) {
});
}
}
document.addEventListener("DOMContentLoaded", function() { //BEGIN
u("#_photoDelete").on("click", function(e) {
@ -88,7 +87,66 @@ document.addEventListener("DOMContentLoaded", function() { //BEGIN
return e.preventDefault();
});
u("#_avatarDelete").on("click", function(e) {
var formHtml = "<form id='tmpPhDelF' action='" + u(this).attr("href") + "' >";
formHtml += "<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />";
formHtml += "</form>";
u("body").append(formHtml);
MessageBox(tr('prevention'), tr('delete_photo'), [
tr('delete'),
tr('close')
], [
(function() {
u("#tmpPhDelF").nodes[0].submit();
}),
(function() {
u("#tmpPhDelF").remove();
}),
]);
return e.preventDefault();
});
u("#_newPicture").on("click", function(e) {
MessageBox(tr('new_photo'),
"<form id='tmpPhDelF' action='" + u(this).attr("href") + "' method='POST' enctype='multipart/form-data'>"+
"<div id='tmpdd' style='text-align:center'>"+tr('real_photo')+"<br><br>"+tr('formats')+"<br><br>"+"<input type='file' accept='image/*' name='blob' value='"+tr('select_file')+"'><br><br>"+tr('upload_problems')+"<br></div>"+
//"<p><input type='checkbox' name='makeAvatarPost'>"+tr('leave_photo')+"</p>"+
"<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />"+
"</form>", [
tr('upload_button'),
tr('close')
], [
(function() {
u("#tmpPhDelF").nodes[0].submit();
}),
(function() {
u("#tmpPhDelF").remove();
}),
]);
return e.preventDefault();
});
u("#_newAvatarPicture").on("click", function(e) {
MessageBox(tr('new_photo'),
"<form id='tmpPhDelF' action='" + u(this).attr("href") + "' method='POST' enctype='multipart/form-data'>"+
"<div id='tmpdd' style='text-align:center'>"+tr('good_photo')+"<br><br>"+tr('formats')+"<br><br>"+"<input type='file' accept='image/*' name='ava' value='"+tr('select_file')+"'><br><br>"+tr('upload_problems')+"<br></div>"+
//"<p><input type='checkbox' name='makeAvatarPost' value='1'>"+tr('leave_photo')+"</p>"+
"<input type='hidden' name='hash' value='" + u("meta[name=csrf]").attr("value") + "' />"+
"</form>", [
tr('upload_button'),
tr('close')
], [
(function() {
u("#tmpPhDelF").nodes[0].submit();
}),
(function() {
u("#tmpPhDelF").remove();
}),
]);
return e.preventDefault();
});
/* @rem-pai why this func wasn't named as "#_deleteDialog"? It looks universal IMO */
u("#_noteDelete").on("click", function(e) {

View file

@ -210,6 +210,9 @@
"reply" = "Reply";
"updated_photo_m" = "updated his avatar";
"updated_photo_f" = "updated her avatar";
/* Friends */
"friends" = "Friends";
@ -326,6 +329,7 @@
"search_group" = "Search group";
"search_by_groups" = "Search by groups";
"search_group_desc" = "Here you can browse through the existing groups and choose a group to suit your needs...";
"add_photo" = "Add photo";
/* Albums */
@ -351,6 +355,18 @@
"albums_list_one" = "You have one album";
"albums_list_other" = "You have $1 albums";
"new_photo" = "Upload new photo";
"real_photo" = "It will be easier for your friends to recognize you, if you upload your real picture.";
"formats" = "You can upload an image in JPG, GIF or PNG format.";
"upload_problems" = "If you're having troubles during uploading, try selecting a smaller photo.";
"webcam_avatar" = "If your computer has a webcam, you can take a photo from the webcam »";
"delete_photo" = "Are you sure you want to delete the photo?";
"change_miniature" = "Change miniature";
"good_photo" = "A good photo will make your community more recognizable.";
"leave_photo" = "Leave post on the wall";
/* Notes */
"notes" = "Notes";
@ -992,7 +1008,6 @@
"error_upload_failed" = "Failed to upload a photo";
"error_old_password" = "Old password does not match";
"error_new_password" = "New password does not match";
"error_weak_password" = "Password isn't strong enough. It should has at least 8 symbols, at least one capital letter and at least one digit.";
"error_shorturl_incorrect" = "The short address has an incorrect format.";
"error_repost_fail" = "Failed to share post";
"error_data_too_big" = "Attribute '$1' must be at most $2 $3 long";
@ -1194,7 +1209,7 @@
"warning" = "Warning";
"question_confirm" = "This action can't be undone. Do you really wanna do it?";
"prevention" = "Prevention";
/* User alerts */
"user_alert_scam" = "This account has been reported a lot for scam. Please be careful, especially if he asked for money.";

View file

@ -187,6 +187,8 @@
"version_incompatibility" = "Не удалось отобразить это вложение. Возможно, база данных несовместима с текущей версией OpenVK.";
"graffiti" = "Граффити";
"reply" = "Ответить";
"updated_photo_m" = "обновил фотографию на странице";
"updated_photo_f" = "обновила фотографию на странице";
/* Friends */
@ -310,6 +312,7 @@
"search_group" = "Поиск группы";
"search_by_groups" = "Поиск по группам";
"search_group_desc" = "Здесь Вы можете просмотреть существующие группы и выбрать группу себе по вкусу...";
"add_photo" = "Загрузить фотографию";
/* Albums */
@ -335,6 +338,20 @@
"albums_list_many" = "У Вас $1 альбомов";
"albums_list_other" = "У Вас $1 альбомов";
"new_photo" = "Загрузка новой фотографии";
"real_photo" = "Друзьям будет проще узнать Вас, если вы загрузите свою настоящую фотографию.";
"formats" = "Вы можете загрузить изображение в формате JPG, GIF или PNG.";
"upload_problems" = "Если у Вас возникают проблемы с загрузкой, попробуйте выбрать фотографию меньшего размера.";
"webcam_avatar" = "Если Ваш компьютер оснащён веб-камерой, Вы можете сделать моментальную фотографию »";
"select_file" = "Выбрать файл";
"delete_photo" = "Вы уверены, что хотите удалить фотографию?";
"change_miniature" = "Изменить миниатюру";
"good_photo" = "Хорошее фото сделает Ваше сообщество более узнаваемым.";
"leave_photo" = "Оставить пост на стене";
/* Notes */
"notes" = "Заметки";
@ -905,7 +922,6 @@
"error_upload_failed" = "Не удалось загрузить фото";
"error_old_password" = "Старый пароль не совпадает";
"error_new_password" = "Новые пароли не совпадает";
"error_weak_password" = "Ненадёжный пароль. Пароль должен содержать не менее 8 символов, цифры, прописные и строчные буквы";
"error_shorturl_incorrect" = "Короткий адрес имеет некорректный формат.";
"error_repost_fail" = "Не удалось поделиться записью";
"error_data_too_big" = "Аттрибут '$1' не может быть длиннее $2 $3";
@ -1082,7 +1098,7 @@
"close" = "Закрыть";
"warning" = "Внимание";
"question_confirm" = "Это действие нельзя отменить. Вы действительно уверены в том что хотите сделать?";
"prevention" = "Предупреждение";
/* User alerts */
"user_alert_scam" = "На этот аккаунт много жаловались в связи с мошенничеством. Пожалуйста, будьте осторожны, особенно если у вас попросят денег.";