Commit d159da0a authored by Sebastian Castro's avatar Sebastian Castro
Browse files

Adds fontawesome icon picker

parent 78c71832
......@@ -45,7 +45,7 @@ protected $baseRoutePattern = 'admin_biopen_geodirectory_option';
->with('Paramètres principaux', array('class' => 'col-xs-12 col-md-6'))
->add('name', null, array('required' => true, 'label' => 'Nom'))
->add('color', 'text', array('required' => false, 'label' => 'Couleur', 'attr' => ['class' => 'gogo-color-picker']))
->add('icon', null, array('required' => false, 'label' => 'Icone'))
->add('icon', null, array('required' => false, 'label' => 'Icone', 'attr' => ['class' => 'gogo-icon-picker']))
->add('parent', 'sonata_type_model', array(
'class'=> 'Biopen\GeoDirectoryBundle\Document\Category',
'required' => false,
......
......@@ -29,9 +29,9 @@ class OptionLiteAdmin extends AbstractAdmin
->add('name', null, array('required' => true,'label' => 'Nom'))
->add('index', null, array('required' => false, 'label' => 'Position'))
->add('color', 'text', array('required' => false, 'label' => 'Couleur', 'attr' => ['class' => 'gogo-color-picker']))
->add('icon', null, array('required' => false, 'label' => 'Icone'))
->add('icon', null, array('required' => false, 'label' => 'Icone', 'attr' => ['class' => 'gogo-icon-picker']))
->add('useIconForMarker', null, array('required' => false, 'label' => "Icone pour le marqueur"))
->add('useColorForMarker', null, array('required' => false, 'label' => "Couleur pour le marqueur"))
->add('_link', 'text', array('required' => false, 'mapped' => false, 'label' => 'admin_biopen_geodirectory_option_edit'));
->add('_link', 'text', array('required' => false, 'mapped' => false, 'label' => 'admin_biopen_geodirectory_option_edit'));
}
}
\ No newline at end of file
......@@ -35,7 +35,7 @@
{% set elementId = nested_group_field.children['name'].parent.vars.data.id %}
{% set path = nested_field.vars.label %}
{% if elementId %}
<a href="{{ path(path, {id: elementId}) }}" class="btn btn-sm btn-default"> <i class="fa fa-pencil" aria-hidden="true"></i></a>
<a href="{{ path(path, {id: elementId}) }}" class="btn btn-sm btn-default"> <i class="fa fa-pencil fa-pencil-alt" aria-hidden="true"></i></a>
{% endif %}
{% elseif sonata_admin.field_description.associationadmin.formfielddescriptions[field_name] is defined %}
{{ form_widget(nested_field) }}
......
<div class="input-group">
<input data-placement="bottomRight" class="form-control gogo-icon-picker icp icp-auto" value="{{ form.vars.value }}"
type="text" id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" />
<span class="input-group-addon"></span>
</div>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">
<script src="{{ asset('assets/js/fontawesome-iconpicker.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/js/fontawesome-iconpicker.min.css') }}" />
<script>
jQuery(document).ready(function() {
if ($('.iconpicker-popover').length == 0) {
var options = {
title: false, // Popover title (optional) only if specified in the template
selected: false, // use this value as the current item and ignore the original
defaultValue: false, // use this value as the current item if input or element value is empty
placement: 'right', // (has some issues with auto and CSS). auto, top, bottom, left, right
collision: true, // If true, the popover will be repositioned to another position when collapses with the window borders
animation: true, // fade in/out on show/hide ?
//hide iconpicker automatically when a value is picked. it is ignored if mustAccept is not false and the accept button is visible
hideOnSelect: false,
showFooter: true,
searchInFooter: true, // If true, the search will be added to the footer instead of the title
mustAccept: false, // only applicable when there's an iconpicker-btn-accept button in the popover footer
selectedCustomClass: 'bg-primary', // Appends this class when to the selected item
// icons: [], // list of icon objects [{title:String, searchTerms:String}]. By default, all Font Awesome icons are included.
fullClassFormatter: function(val) {
return 'fab ' + val;
},
input: 'input,.iconpicker-input', // children input selector
inputSearch: false, // use the input as a search box too?
container: false, // Appends the popover to a specific element. If not set, the selected element or element parent is used
component: '.input-group-addon,.iconpicker-component', // children component jQuery selector or object, relative to the container element
// Plugin templates:
templates: {
popover: '<div class="iconpicker-popover popover"><div class="arrow"></div>' +
'<div class="popover-title"></div><div class="popover-content"></div></div>',
footer: '<div class="popover-footer"></div>',
buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Annuler</button>' +
' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Ok</button>',
search: '<input type="search" class="form-control iconpicker-search" placeholder="Rechercher" />',
iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
iconpickerItem: '<a role="button" class="iconpicker-item"><i></i></a>',
}
};
$('.icp-auto').iconpicker(options);
}
});
</script>
<style>
.iconpicker-popover.popover {
width: 400px;
/*left: 0 !important;*/
}
.iconpicker .iconpicker-item {
width: 20px;
height: 20px;
padding: 8px;
margin: 0 5px 5px 0;
text-align: center;
cursor: pointer;
border-radius: 3px;
font-size: 20px;
}
</style>
......@@ -23,6 +23,8 @@
{% include '@BiopenAdmin/core_custom/custom-fields/viewport-picker.html.twig' %}
{% elseif attr_class == "gogo-color-picker" %}
{% include '@BiopenAdmin/core_custom/custom-fields/color-picker.html.twig' %}
{% elseif attr_class == "gogo-icon-picker" %}
{% include '@BiopenAdmin/core_custom/custom-fields/icon-picker.html.twig' %}
{% else %}
{% set attr = attr|merge({'class': attr_class ~ ' form-control'}) %}
{{ parent() }}
......
/*!
* Font Awesome Icon Picker
* https://farbelous.github.io/fontawesome-iconpicker/
*
* Originally written by (c) 2016 Javi Aguilar
* Licensed under the MIT License
* https://github.com/farbelous/fontawesome-iconpicker/blob/master/LICENSE
*
*/
.iconpicker-popover.popover {
position: absolute;
top: 0;
left: 0;
display: none;
max-width: none;
padding: 1px;
text-align: left;
width: 234px;
background: #f7f7f7;
z-index: 9;
}
.iconpicker-popover.popover.top,
.iconpicker-popover.popover.topLeftCorner,
.iconpicker-popover.popover.topLeft,
.iconpicker-popover.popover.topRight,
.iconpicker-popover.popover.topRightCorner {
margin-top: -10px;
}
.iconpicker-popover.popover.right,
.iconpicker-popover.popover.rightTop,
.iconpicker-popover.popover.rightBottom {
margin-left: 10px;
}
.iconpicker-popover.popover.bottom,
.iconpicker-popover.popover.bottomRightCorner,
.iconpicker-popover.popover.bottomRight,
.iconpicker-popover.popover.bottomLeft,
.iconpicker-popover.popover.bottomLeftCorner {
margin-top: 10px;
}
.iconpicker-popover.popover.left,
.iconpicker-popover.popover.leftBottom,
.iconpicker-popover.popover.leftTop {
margin-left: -10px;
}
.iconpicker-popover.popover.inline {
margin: 0 0 12px 0;
position: relative;
display: inline-block;
opacity: 1;
top: auto;
left: auto;
bottom: auto;
right: auto;
max-width: 100%;
box-shadow: none;
z-index: auto;
vertical-align: top;
}
.iconpicker-popover.popover.inline > .arrow {
display: none;
}
.dropdown-menu .iconpicker-popover.inline {
margin: 0;
border: none;
}
.dropdown-menu.iconpicker-container {
padding: 0;
}
.iconpicker-popover.popover .popover-title {
padding: 12px;
font-size: 13px;
line-height: 15px;
border-bottom: 1px solid #ebebeb;
background-color: #f7f7f7;
}
.iconpicker-popover.popover .popover-title input[type=search].iconpicker-search {
margin: 0 0 2px 0;
}
.iconpicker-popover.popover .popover-title-text ~ input[type=search].iconpicker-search {
margin-top: 12px;
}
.iconpicker-popover.popover .popover-content {
padding: 0px;
text-align: center;
}
.iconpicker-popover .popover-footer {
float: none;
clear: both;
padding: 12px;
text-align: right;
margin: 0;
border-top: 1px solid #ebebeb;
background-color: #f7f7f7;
}
.iconpicker-popover .popover-footer:before,
.iconpicker-popover .popover-footer:after {
content: " ";
display: table;
}
.iconpicker-popover .popover-footer:after {
clear: both;
}
.iconpicker-popover .popover-footer .iconpicker-btn {
margin-left: 10px;
}
.iconpicker-popover .popover-footer input[type=search].iconpicker-search {
/*width:auto;
float:left;*/
margin-bottom: 12px;
}
.iconpicker-popover.popover > .arrow,
.iconpicker-popover.popover > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.iconpicker-popover.popover > .arrow {
border-width: 11px;
}
.iconpicker-popover.popover > .arrow:after {
border-width: 10px;
content: "";
}
.iconpicker-popover.popover.top > .arrow,
.iconpicker-popover.popover.topLeft > .arrow,
.iconpicker-popover.popover.topRight > .arrow {
left: 50%;
margin-left: -11px;
border-bottom-width: 0;
border-top-color: #999999;
border-top-color: rgba(0, 0, 0, 0.25);
bottom: -11px;
}
.iconpicker-popover.popover.top > .arrow:after,
.iconpicker-popover.popover.topLeft > .arrow:after,
.iconpicker-popover.popover.topRight > .arrow:after {
content: " ";
bottom: 1px;
margin-left: -10px;
border-bottom-width: 0;
border-top-color: #ffffff;
}
.iconpicker-popover.popover.topLeft > .arrow {
left: 8px;
margin-left: 0;
}
.iconpicker-popover.popover.topRight > .arrow {
left: auto;
right: 8px;
margin-left: 0;
}
.iconpicker-popover.popover.right > .arrow,
.iconpicker-popover.popover.rightTop > .arrow,
.iconpicker-popover.popover.rightBottom > .arrow {
top: 50%;
left: -11px;
margin-top: -11px;
border-left-width: 0;
border-right-color: #999999;
border-right-color: rgba(0, 0, 0, 0.25);
}
.iconpicker-popover.popover.right > .arrow:after,
.iconpicker-popover.popover.rightTop > .arrow:after,
.iconpicker-popover.popover.rightBottom > .arrow:after {
content: " ";
left: 1px;
bottom: -10px;
border-left-width: 0;
border-right-color: #ffffff;
}
.iconpicker-popover.popover.rightTop > .arrow {
top: auto;
bottom: 8px;
margin-top: 0;
}
.iconpicker-popover.popover.rightBottom > .arrow {
top: 8px;
margin-top: 0;
}
.iconpicker-popover.popover.bottom > .arrow,
.iconpicker-popover.popover.bottomRight > .arrow,
.iconpicker-popover.popover.bottomLeft > .arrow {
left: 50%;
margin-left: -11px;
border-top-width: 0;
border-bottom-color: #999999;
border-bottom-color: rgba(0, 0, 0, 0.25);
top: -11px;
}
.iconpicker-popover.popover.bottom > .arrow:after,
.iconpicker-popover.popover.bottomRight > .arrow:after,
.iconpicker-popover.popover.bottomLeft > .arrow:after {
content: " ";
top: 1px;
margin-left: -10px;
border-top-width: 0;
border-bottom-color: #ffffff;
}
.iconpicker-popover.popover.bottomLeft > .arrow {
left: 8px;
margin-left: 0;
}
.iconpicker-popover.popover.bottomRight > .arrow {
left: auto;
right: 8px;
margin-left: 0;
}
.iconpicker-popover.popover.left > .arrow,
.iconpicker-popover.popover.leftBottom > .arrow,
.iconpicker-popover.popover.leftTop > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999999;
border-left-color: rgba(0, 0, 0, 0.25);
}
.iconpicker-popover.popover.left > .arrow:after,
.iconpicker-popover.popover.leftBottom > .arrow:after,
.iconpicker-popover.popover.leftTop > .arrow:after {
content: " ";
right: 1px;
border-right-width: 0;
border-left-color: #ffffff;
bottom: -10px;
}
.iconpicker-popover.popover.leftBottom > .arrow {
top: 8px;
margin-top: 0;
}
.iconpicker-popover.popover.leftTop > .arrow {
top: auto;
bottom: 8px;
margin-top: 0;
}
.iconpicker {
position: relative;
text-align: left;
text-shadow: none;
line-height: 0;
display: block;
margin: 0;
overflow: hidden;
}
.iconpicker * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: relative;
}
.iconpicker:before,
.iconpicker:after {
content: " ";
display: table;
}
.iconpicker:after {
clear: both;
}
.iconpicker .iconpicker-items {
position: relative;
clear: both;
float: none;
padding: 12px 0 0 12px;
background: #fff;
margin: 0;
overflow: hidden;
overflow-y: auto;
min-height: 49px;
max-height: 246px;
}
.iconpicker .iconpicker-items:before,
.iconpicker .iconpicker-items:after {
content: " ";
display: table;
}
.iconpicker .iconpicker-items:after {
clear: both;
}
.iconpicker .iconpicker-item {
float: left;
width: 14px;
height: 14px;
padding: 12px;
margin: 0 12px 12px 0;
text-align: center;
cursor: pointer;
border-radius: 3px;
font-size: 14px;
box-shadow: 0 0 0 1px #dddddd;
color: inherit;
/*&:nth-child(4n+4) {
margin-right: 0;
}
&:nth-last-child(-n+4) {
margin-bottom: 0;
}*/
}
.iconpicker .iconpicker-item:hover:not(.iconpicker-selected) {
background-color: #eeeeee;
}
.iconpicker .iconpicker-item.iconpicker-selected {
box-shadow: none;
color: #fff;
background: #000;
}
.iconpicker-component {
cursor: pointer;
}
This diff is collapsed.
/*!
* Font Awesome Icon Picker
* https://farbelous.github.io/fontawesome-iconpicker/
*
* Originally written by (c) 2016 Javi Aguilar
* Licensed under the MIT License
* https://github.com/farbelous/fontawesome-iconpicker/blob/master/LICENSE
*
*/.iconpicker-popover.popover{position:absolute;top:0;left:0;display:none;max-width:none;padding:1px;text-align:left;width:234px;background:#f7f7f7;z-index:9}.iconpicker-popover.popover.top,.iconpicker-popover.popover.topLeftCorner,.iconpicker-popover.popover.topLeft,.iconpicker-popover.popover.topRight,.iconpicker-popover.popover.topRightCorner{margin-top:-10px}.iconpicker-popover.popover.right,.iconpicker-popover.popover.rightTop,.iconpicker-popover.popover.rightBottom{margin-left:10px}.iconpicker-popover.popover.bottom,.iconpicker-popover.popover.bottomRightCorner,.iconpicker-popover.popover.bottomRight,.iconpicker-popover.popover.bottomLeft,.iconpicker-popover.popover.bottomLeftCorner{margin-top:10px}.iconpicker-popover.popover.left,.iconpicker-popover.popover.leftBottom,.iconpicker-popover.popover.leftTop{margin-left:-10px}.iconpicker-popover.popover.inline{margin:0 0 12px 0;position:relative;display:inline-block;opacity:1;top:auto;left:auto;bottom:auto;right:auto;max-width:100%;box-shadow:none;z-index:auto;vertical-align:top}.iconpicker-popover.popover.inline>.arrow{display:none}.dropdown-menu .iconpicker-popover.inline{margin:0;border:none}.dropdown-menu.iconpicker-container{padding:0}.iconpicker-popover.popover .popover-title{padding:12px;font-size:13px;line-height:15px;border-bottom:1px solid #ebebeb;background-color:#f7f7f7}.iconpicker-popover.popover .popover-title input[type=search].iconpicker-search{margin:0 0 2px 0}.iconpicker-popover.popover .popover-title-text~input[type=search].iconpicker-search{margin-top:12px}.iconpicker-popover.popover .popover-content{padding:0px;text-align:center}.iconpicker-popover .popover-footer{float:none;clear:both;padding:12px;text-align:right;margin:0;border-top:1px solid #ebebeb;background-color:#f7f7f7}.iconpicker-popover .popover-footer:before,.iconpicker-popover .popover-footer:after{content:" ";display:table}.iconpicker-popover .popover-footer:after{clear:both}.iconpicker-popover .popover-footer .iconpicker-btn{margin-left:10px}.iconpicker-popover .popover-footer input[type=search].iconpicker-search{margin-bottom:12px}.iconpicker-popover.popover>.arrow,.iconpicker-popover.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.iconpicker-popover.popover>.arrow{border-width:11px}.iconpicker-popover.popover>.arrow:after{border-width:10px;content:""}.iconpicker-popover.popover.top>.arrow,.iconpicker-popover.popover.topLeft>.arrow,.iconpicker-popover.popover.topRight>.arrow{left:50%;margin-left:-11px;border-bottom-width:0;border-top-color:#999;border-top-color:rgba(0,0,0,0.25);bottom:-11px}.iconpicker-popover.popover.top>.arrow:after,.iconpicker-popover.popover.topLeft>.arrow:after,.iconpicker-popover.popover.topRight>.arrow:after{content:" ";bottom:1px;margin-left:-10px;border-bottom-width:0;border-top-color:#fff}.iconpicker-popover.popover.topLeft>.arrow{left:8px;margin-left:0}.iconpicker-popover.popover.topRight>.arrow{left:auto;right:8px;margin-left:0}.iconpicker-popover.popover.right>.arrow,.iconpicker-popover.popover.rightTop>.arrow,.iconpicker-popover.popover.rightBottom>.arrow{top:50%;left:-11px;margin-top:-11px;border-left-width:0;border-right-color:#999;border-right-color:rgba(0,0,0,0.25)}.iconpicker-popover.popover.right>.arrow:after,.iconpicker-popover.popover.rightTop>.arrow:after,.iconpicker-popover.popover.rightBottom>.arrow:after{content:" ";left:1px;bottom:-10px;border-left-width:0;border-right-color:#fff}.iconpicker-popover.popover.rightTop>.arrow{top:auto;bottom:8px;margin-top:0}.iconpicker-popover.popover.rightBottom>.arrow{top:8px;margin-top:0}.iconpicker-popover.popover.bottom>.arrow,.iconpicker-popover.popover.bottomRight>.arrow,.iconpicker-popover.popover.bottomLeft>.arrow{left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,0.25);top:-11px}.iconpicker-popover.popover.bottom>.arrow:after,.iconpicker-popover.popover.bottomRight>.arrow:after,.iconpicker-popover.popover.bottomLeft>.arrow:after{content:" ";top:1px;margin-left:-10px;border-top-width:0;border-bottom-color:#fff}.iconpicker-popover.popover.bottomLeft>.arrow{left:8px;margin-left:0}.iconpicker-popover.popover.bottomRight>.arrow{left:auto;right:8px;margin-left:0}.iconpicker-popover.popover.left>.arrow,.iconpicker-popover.popover.leftBottom>.arrow,.iconpicker-popover.popover.leftTop>.arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,0.25)}.iconpicker-popover.popover.left>.arrow:after,.iconpicker-popover.popover.leftBottom>.arrow:after,.iconpicker-popover.popover.leftTop>.arrow:after{content:" ";right:1px;border-right-width:0;border-left-color:#fff;bottom:-10px}.iconpicker-popover.popover.leftBottom>.arrow{top:8px;margin-top:0}.iconpicker-popover.popover.leftTop>.arrow{top:auto;bottom:8px;margin-top:0}.iconpicker{position:relative;text-align:left;text-shadow:none;line-height:0;display:block;margin:0;overflow:hidden}.iconpicker *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;position:relative}.iconpicker:before,.iconpicker:after{content:" ";display:table}.iconpicker:after{clear:both}.iconpicker .iconpicker-items{position:relative;clear:both;float:none;padding:12px 0 0 12px;background:#fff;margin:0;overflow:hidden;overflow-y:auto;min-height:49px;max-height:246px}.iconpicker .iconpicker-items:before,.iconpicker .iconpicker-items:after{content:" ";display:table}.iconpicker .iconpicker-items:after{clear:both}.iconpicker .iconpicker-item{float:left;width:14px;height:14px;padding:12px;margin:0 12px 12px 0;text-align:center;cursor:pointer;border-radius:3px;font-size:14px;box-shadow:0 0 0 1px #ddd;color:inherit}.iconpicker .iconpicker-item:hover:not(.iconpicker-selected){background-color:#eee}.iconpicker .iconpicker-item.iconpicker-selected{box-shadow:none;color:#fff;background:#000}.iconpicker-component{cursor:pointer}
\ No newline at end of file
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment