mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-23 18:03:17 +00:00
create form for uploading logo
refactor admin setup layout for adding logo personalisation section
This commit is contained in:
mike-esokia
@@ -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()
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
102
templates/web/admin/personalisation_logo.html.twig
Normal file
102
templates/web/admin/personalisation_logo.html.twig
Normal file
@@ -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>
|
||||
|
||||
@@ -38,16 +38,30 @@
|
||||
<fieldset>
|
||||
<legend>{{ daform.vars['label'] }}</legend>
|
||||
{% for formdata in daform %}
|
||||
<div class="control-group">
|
||||
{{ form_errors(formdata) }}
|
||||
{{ form_label(formdata, null, { 'label_attr': {'class' : 'control-label'} } ) }}
|
||||
<div class="controls">
|
||||
{{ form_widget(formdata, {'attr': {'class': 'input-xxlarge'}}) }}
|
||||
</div>
|
||||
{% 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>
|
||||
<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'} } ) }}
|
||||
<div class="controls">
|
||||
{{ form_widget(formdata, {'attr': {'class': 'input-xxlarge'}}) }}
|
||||
</div>
|
||||
|
||||
<div>{{ formdata.vars['help_message'] }}</div>
|
||||
{{ form_rest(formdata) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{{ form_rest(daform) }}
|
||||
</fieldset>
|
||||
|
||||
Reference in New Issue
Block a user