create form for uploading logo

refactor admin setup layout for adding logo personalisation section

lib/Alchemy/Phrasea/Form/Configuration/GeneralFormType.php

@@ -56,6 +56,27 @@ class GeneralFormType extends AbstractType
             'attr'        => ['min' => -1],
             'constraints' => new GreaterThanOrEqual(['value' => -1]),
         ]);
+        $builder->add('personalize-logo-choice', new PersonalisationLogoForm(), [
+            'label' => 'Design of personalization logo section',
+            'attr'  => [
+                'id' => 'personalize-logo-container'
+            ]
+        ]);
+//        $builder->add('personalize-logo-choice', 'choice', [
+//            'label'       => 'Design of personalization logo section',
+//            'choices' => ['original' => 'original', 'personalize' => 'personalize'],
+//            'required'=>true,
+//            'expanded'=>true,
+//            'multiple'=>false,
+//            'placeholder'=>false,
+//            'attr' => [
+//                'id' => 'personalize-logo-container'
+//            ]
+//
+//        ]);
+//        $builder->add('personalize-logo', 'file', [
+//            'label'         => false,
+//        ]);
     }
 
     public function getName()

lib/Alchemy/Phrasea/Form/Configuration/PersonalisationLogoForm.php

@@ -0,0 +1,44 @@
+<?php
+/*
+ * This file is part of Phraseanet
+ *
+ * (c) 2005-2014 Alchemy
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Alchemy\Phrasea\Form\Configuration;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+class PersonalisationLogoForm extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder->add('originalChoiceInput', 'choice', [
+            'label'    => false,
+            'choices'  => ['original' => 'original'],
+            'expanded' => true,
+
+        ]);
+        $builder->add('personaliseChoiceInput', 'choice', [
+            'label'    => false,
+            'choices'  => ['personalise' => 'personalise'],
+            'expanded' => true,
+
+        ]);
+        $builder->add('personalizeLogoInput', 'file', [
+            'label' => false,
+        ]);
+        $builder->add('logoChoice', 'hidden', [
+            'label' => false,
+        ]);
+    }
+
+    public function getName()
+    {
+        return null;
+    }
+}

resources/www/admin/styles/main.scss

@@ -630,6 +630,86 @@ span.simplecolorpicker.picker {
   }
 }
 
+.personalise-logo-row-container {
+  height: 105px;
+  td:first-child {
+    border-right: 1px solid #3b99fc;
+  }
+  td {
+    padding: 4px 40px 10px 40px;
+    min-width: 100px;
+    max-width: 200px;
+    vertical-align: top;
+    input[type="radio"] {
+      height: 25px;
+      margin: 0;
+    }
+    label {
+      display: inline-block;
+      line-height: 25px;
+      margin-left: 10px;
+    }
+    .image-container {
+      height: 42px;
+      width: 52px;
+      border: 1px solid #979797;
+      display: block;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: scale-down;
+    }
+    a {
+      font-family: Roboto;
+      font-size: 10px;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: #3b99fc;
+      text-align: left;
+      display: block;
+      margin-top: 10px;
+    }
+    #select-logo-btn {
+      border-radius: 5px;
+      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.09);
+      background-color: #ffffff;
+      border: solid 1px #c3c3c3;
+      font-family: Roboto;
+      font-size: 11px;
+      text-align: left;
+      color: #000000;
+      margin-top: 10px;
+      padding: 3px 20px;
+      line-height: 11px;
+    }
+    #help-text {
+      font-family: Roboto;
+      font-size: 12px;
+      line-height: 1.33;
+      letter-spacing: normal;
+      text-align: left;
+      color: #000000;
+    }
+    #error-text {
+      font-family: Roboto;
+      font-size: 12px;
+      font-weight: normal;
+      font-style: italic;
+      line-height: 1.33;
+      letter-spacing: normal;
+      text-align: left;
+      color: #ff0404;
+    }
+    //input[type="file"] {
+    //  display: none;
+    //}
+  }
+}
+
 @media screen and (max-width: 1150px) {
   .langTab {
     display: block;

templates/web/admin/personalisation_logo.html.twig

@@ -0,0 +1,102 @@
+<table cellspacing="0">
+    <tr class="personalise-logo-row-container">
+        <td>
+            {{ form_widget(form.originalChoiceInput, { 'attr': {'class': 'choice-radio'} }) }}
+            <div class="image-container">
+                <img id="original-image-placeholder" src="/assets/common/images/logo.png"/>
+            </div>
+            <a href="#">{{ 'prod::setup: download gabari' | trans }}</a>
+        </td>
+        <td>
+            {{ form_widget(form.personaliseChoiceInput) }}
+            <span id="help-text">{{ 'prod::setup: help text' | trans }}</span>
+            <span id="error-text"></span>
+            <div class="image-container" id="personalize-image-container">
+                <img id="personalise-image-placeholder"/>
+            </div>
+            <div>
+                {{ form_widget(form.personalizeLogoInput) }}
+                <button id="select-logo-btn">{{ 'prod::setup: select file' | trans }}</button>
+            </div>
+        </td>
+    </tr>
+    {{ form_widget(form.logoChoice) }}
+</table>
+
+<script type="text/javascript">
+    $(document).ready(function () {
+
+        var errorDimension = '{{ 'prod::setup: error text dimension' | trans }}';
+        var errorFileType = '{{ 'prod::setup: error text file type' | trans }}';
+        //by default select original logo
+        $('#general_personalize-logo-choice_originalChoiceInput_0').attr('checked', true);
+        $('#general_personalize-logo-choice_logoChoice').val('original');
+
+        $('#help-text').show();
+        $('#personalize-image-container').hide();
+        $('#error-text').hide();
+
+        $('input[type=radio]').on('change', function () {
+            $('#general_personalize-logo-choice_logoChoice').val($(this).val());
+            $(this).closest('td').siblings().find('input').prop('checked', false);
+        });
+
+        $('#select-logo-btn').on('click', function (e) {
+            e.stopPropagation();
+            $('#general_personalize-logo-choice_personalizeLogoInput').trigger('click');
+        });
+
+        $("#general_personalize-logo-choice_personalizeLogoInput").change(function () {
+            readURL(this);
+        });
+
+        function readURL(input) {
+            if (input.files && input.files[0]) {
+                var reader = new FileReader();
+
+                reader.onload = function (e) {
+                    var image = new Image();
+                    image.src = e.target.result;
+
+                    //Validate the File Height and Width.
+                    image.onload = function () {
+                        var height = this.height;
+                        var width = this.width;
+
+                        //check dimensions
+                        if (height > 42 || width > 52) {
+                            debugger;
+                            $('#error-text').text(errorDimension);
+                            $('#error-text').show();
+                            $('#help-text').hide();
+                            $('#personalize-image-container').hide();
+                            $('#general_personalize-logo-choice_personalizeLogoInput').val("");
+                            return false;
+                        }
+
+                        //check file extension
+                        var ext = $('#general_personalize-logo-choice_personalizeLogoInput').val().split('.').pop().toLowerCase();
+                        if (ext != 'png') {
+                            $('#general_personalize-logo-choice_personalizeLogoInput').val("");
+                            $('#error-text').text(errorFileType);
+                            $('#error-text').show();
+                            $('#help-text').hide();
+                            $('#personalize-image-container').hide();
+                            return false;
+                        }
+
+                        $('#personalize-image-container').show();
+                        $('#error-text').hide();
+                        $('#help-text').hide();
+                        $('#personalise-image-placeholder').attr('src', e.target.result);
+                        return true;
+                    };
+                }
+
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+    });
+
+</script>
+

templates/web/admin/setup.html.twig

@@ -38,6 +38,19 @@
         <fieldset>
             <legend>{{ daform.vars['label'] }}</legend>
             {% for formdata in daform %}
+                {% if formdata.vars['attr'] is defined and formdata.vars['attr']['id'] is defined
+                and formdata.vars['attr']['id'] == 'personalize-logo-container' %}
+                    <div class="control-group">
+                        {{ form_errors(formdata) }}
+                        {{ form_label(formdata, null, { 'label_attr': {'class' : 'control-label'} } ) }}
+                        <div class="controls">
+                            {% include 'admin/personalisation_logo.html.twig' with {'form': formdata} %}
+                        </div>
+
+                        <div>{{ formdata.vars['help_message'] }}</div>
+                        {{ form_rest(formdata) }}
+                    </div>
+                {% else %}
                     <div class="control-group">
                         {{ form_errors(formdata) }}
                         {{ form_label(formdata, null, { 'label_attr': {'class' : 'control-label'} } ) }}
@@ -48,6 +61,7 @@
                         <div>{{ formdata.vars['help_message'] }}</div>
                         {{ form_rest(formdata) }}
                     </div>
+                {% endif %}
             {% endfor %}
             {{ form_rest(daform) }}
         </fieldset>