mirror of
https://github.com/openvk/openvk
synced 2025-07-07 16:29:50 +03:00
Смена аватарки как в старом вк
Панель и крестик
This commit is contained in:
makar0nny
parent
35d8b3a6fe
commit
4d9ba74de8
6 changed files with 147 additions and 9 deletions
|
|
@ -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 !is_null($thisUser) && $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-33+"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>
|
||||
|
|
|
|||
|
|
@ -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 !is_null($thisUser) && $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="!is_null($thisUser) && $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
BIN
Web/static/img/delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 238 B |
BIN
Web/static/img/miniature.png
Normal file
BIN
Web/static/img/miniature.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 B |
BIN
Web/static/img/upload.png
Normal file
BIN
Web/static/img/upload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 211 B |
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue