forked from GNUsocial/gnu-social
[CONTROLLER][UI] Avatar JS cropping added
This commit is contained in:
parent
85d8d9b268
commit
caab08b017
@ -83,6 +83,7 @@
|
||||
weight: auto;
|
||||
width: 25%;
|
||||
margin-right: var(--small-size);
|
||||
clip-path: circle(2.5em at center);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
@ -92,6 +92,7 @@
|
||||
height: calc(5 * var(--unit-size));
|
||||
width: 25%;
|
||||
margin-right: var(--small-size);
|
||||
clip-path: circle(2.5em at center);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
@ -90,8 +90,9 @@
|
||||
.icon-avatar {
|
||||
order: 1;
|
||||
height: calc(5 * var(--unit-size));
|
||||
width: 25%;
|
||||
width: 5em;
|
||||
margin-right: var(--small-size);
|
||||
clip-path: circle(2.5em at center);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
@ -219,3 +219,16 @@ select {
|
||||
.form-single input[type=checkbox] {
|
||||
margin-left: var(--unit-size);
|
||||
}
|
||||
|
||||
/* JS Cropping */
|
||||
#img-cropped {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
#img-container {
|
||||
display: flex;
|
||||
margin-top: var(--main-size);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 500px;
|
||||
}
|
@ -217,3 +217,16 @@ select {
|
||||
.form-single input[type=checkbox] {
|
||||
margin-left: var(--unit-size);
|
||||
}
|
||||
|
||||
/* JS Cropping */
|
||||
#img-cropped {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
#img-container {
|
||||
display: flex;
|
||||
margin-top: var(--main-size);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
@ -218,3 +218,16 @@ select {
|
||||
margin-left: var(--unit-size);
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* JS Cropping */
|
||||
#img-cropped {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
#img-container {
|
||||
display: flex;
|
||||
margin-top: var(--main-size);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 500px;
|
||||
}
|
1
public/assets/javascript/cropperjs
Submodule
1
public/assets/javascript/cropperjs
Submodule
@ -0,0 +1 @@
|
||||
Subproject commit c665070ac8acffd3822e9bbcb6db07774e6334d8
|
@ -48,6 +48,7 @@ use Misd\PhoneNumberBundle\Form\Type\PhoneNumberType;
|
||||
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
|
||||
use Symfony\Component\Form\Extension\Core\Type\FileType;
|
||||
use Symfony\Component\Form\Extension\Core\Type\HiddenType;
|
||||
use Symfony\Component\Form\Extension\Core\Type\LanguageType;
|
||||
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
|
||||
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
|
||||
@ -99,10 +100,22 @@ class UserPanel extends AbstractController
|
||||
public function avatar(Request $request)
|
||||
{
|
||||
$avatar = Form::create([
|
||||
['avatar', FileType::class, ['label' => _m('Avatar'), 'help' => _m('You can upload your personal avatar. The maximum file size is 10MB.')]],
|
||||
['avatar', FileType::class, ['label' => _m('Avatar'), 'help' => _m('You can upload your personal avatar. The maximum file size is 2MB.')]],
|
||||
['hidden', HiddenType::class, []],
|
||||
['save', SubmitType::class, ['label' => _m('Submit')]],
|
||||
]);
|
||||
|
||||
$avatar->handleRequest($request);
|
||||
|
||||
if ($avatar->isSubmitted() && $avatar->isValid()) {
|
||||
$data = $avatar->getData()['hidden'];
|
||||
list($type, $data) = explode(';', $data);
|
||||
list(, $data) = explode(',', $data);
|
||||
$data = base64_decode($data);
|
||||
|
||||
file_put_contents('/tmp/image.png', $data);
|
||||
}
|
||||
|
||||
return ['_template' => 'settings/avatar.html.twig', 'avatar' => $avatar->createView()];
|
||||
}
|
||||
|
||||
|
@ -17,9 +17,7 @@
|
||||
<div class='navbar'>
|
||||
<div class="left-nav">
|
||||
<div class='profile'>
|
||||
<svg class="icon icon-avatar">
|
||||
<use xlink:href="#icon-avatar"></use>
|
||||
</svg>
|
||||
<img src='{{ asset('assets/image.png') }}' class="icon icon-avatar">
|
||||
<div class="info">
|
||||
<b id="nick">{{ app.user.username }}</b>
|
||||
<div class="tags">
|
||||
|
@ -2,6 +2,12 @@
|
||||
|
||||
{% block title %}Avatar Settings{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link href="{{ asset('assets/javascript/cropperjs/dist/cropper.css') }}" rel="stylesheet">
|
||||
<script src="{{ asset('assets/javascript/cropperjs/dist/cropper.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{{ parent() }}
|
||||
{% endblock body %}
|
||||
@ -9,5 +15,8 @@
|
||||
{% block form %}
|
||||
<div class='form'>
|
||||
{{ form(avatar) }}
|
||||
<div id="img-container">
|
||||
<img id="img-cropped">
|
||||
</div>
|
||||
</div>
|
||||
{% endblock form %}
|
||||
|
Loading…
Reference in New Issue
Block a user