[CONTROLLER][UI] Avatar JS cropping added

public/assets/css/left/left.css

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

public/assets/css/left/left_mid.css

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

public/assets/css/left/left_small.css

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

public/assets/css/settings/settings.css

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

public/assets/css/settings/settings_mid.css

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

public/assets/css/settings/settings_small.css

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

public/assets/javascript/cropperjs

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

src/Controller/UserPanel.php

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

templates/left/left.html.twig

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

templates/settings/avatar.html.twig

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