[CONTROLLER][UI] Avatar JS cropping added

This commit is contained in:
rainydaysavings 2020-07-28 00:07:31 +01:00 committed by Hugo Sales
parent 85d8d9b268
commit caab08b017
10 changed files with 68 additions and 5 deletions

View File

@ -83,6 +83,7 @@
weight: auto;
width: 25%;
margin-right: var(--small-size);
clip-path: circle(2.5em at center);
}
.info {

View File

@ -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 {

View File

@ -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 {

View File

@ -218,4 +218,17 @@ 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;
}

View File

@ -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;
}

View File

@ -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;
}

@ -0,0 +1 @@
Subproject commit c665070ac8acffd3822e9bbcb6db07774e6334d8

View File

@ -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()];
}

View File

@ -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">

View File

@ -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 %}