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;
|
weight: auto;
|
||||||
width: 25%;
|
width: 25%;
|
||||||
margin-right: var(--small-size);
|
margin-right: var(--small-size);
|
||||||
|
clip-path: circle(2.5em at center);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
|
@ -92,6 +92,7 @@
|
|||||||
height: calc(5 * var(--unit-size));
|
height: calc(5 * var(--unit-size));
|
||||||
width: 25%;
|
width: 25%;
|
||||||
margin-right: var(--small-size);
|
margin-right: var(--small-size);
|
||||||
|
clip-path: circle(2.5em at center);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
|
@ -90,8 +90,9 @@
|
|||||||
.icon-avatar {
|
.icon-avatar {
|
||||||
order: 1;
|
order: 1;
|
||||||
height: calc(5 * var(--unit-size));
|
height: calc(5 * var(--unit-size));
|
||||||
width: 25%;
|
width: 5em;
|
||||||
margin-right: var(--small-size);
|
margin-right: var(--small-size);
|
||||||
|
clip-path: circle(2.5em at center);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
|
@ -218,4 +218,17 @@ select {
|
|||||||
|
|
||||||
.form-single input[type=checkbox] {
|
.form-single input[type=checkbox] {
|
||||||
margin-left: var(--unit-size);
|
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] {
|
.form-single input[type=checkbox] {
|
||||||
margin-left: var(--unit-size);
|
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);
|
margin-left: var(--unit-size);
|
||||||
float: right;
|
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\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||||
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
|
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
|
||||||
use Symfony\Component\Form\Extension\Core\Type\FileType;
|
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\LanguageType;
|
||||||
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
|
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
|
||||||
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
|
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
|
||||||
@ -99,10 +100,22 @@ class UserPanel extends AbstractController
|
|||||||
public function avatar(Request $request)
|
public function avatar(Request $request)
|
||||||
{
|
{
|
||||||
$avatar = Form::create([
|
$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')]],
|
['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()];
|
return ['_template' => 'settings/avatar.html.twig', 'avatar' => $avatar->createView()];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,9 +17,7 @@
|
|||||||
<div class='navbar'>
|
<div class='navbar'>
|
||||||
<div class="left-nav">
|
<div class="left-nav">
|
||||||
<div class='profile'>
|
<div class='profile'>
|
||||||
<svg class="icon icon-avatar">
|
<img src='{{ asset('assets/image.png') }}' class="icon icon-avatar">
|
||||||
<use xlink:href="#icon-avatar"></use>
|
|
||||||
</svg>
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<b id="nick">{{ app.user.username }}</b>
|
<b id="nick">{{ app.user.username }}</b>
|
||||||
<div class="tags">
|
<div class="tags">
|
||||||
|
@ -2,6 +2,12 @@
|
|||||||
|
|
||||||
{% block title %}Avatar Settings{% endblock %}
|
{% 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 %}
|
{% block body %}
|
||||||
{{ parent() }}
|
{{ parent() }}
|
||||||
{% endblock body %}
|
{% endblock body %}
|
||||||
@ -9,5 +15,8 @@
|
|||||||
{% block form %}
|
{% block form %}
|
||||||
<div class='form'>
|
<div class='form'>
|
||||||
{{ form(avatar) }}
|
{{ form(avatar) }}
|
||||||
|
<div id="img-container">
|
||||||
|
<img id="img-cropped">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock form %}
|
{% endblock form %}
|
||||||
|
Loading…
Reference in New Issue
Block a user