Nitra WIKI @nitrawiki - Tumblr Blog

УРА!!! виджет DOUBLE-LIST уже в admingeneratore

Double-list - это виджет имеющий 2 списка, в первом находятся все доступные значения, во втором - необходимые вам (выбранные из первого). Переброс значения из одного в другой выполняется посредством выделения значения и нажатием кнопки перенаправления ( "<" или ">").

Встречайте:

Реализацию можна найти по адресу: • шаблоны-компоненты - vendor/nitra/admingenerator-bundle/Admingenerator/GeneratorBundle/Resources/views/Form/DoubleList (https://bitbucket.org/nitra/admingeneratorbundle/src/6554f009a602b7a123c53bf36d39686985629b20/Resources/views/Form/?at=master)

• FormType - vendor/nitra/admingenerator-bundle/Admingenerator/GeneratorBundle/Form/Type/Propel/DoubleListType.php  (https://bitbucket.org/nitra/admingeneratorbundle/src/6554f009a602b7a123c53bf36d39686985629b20/Form/Type/Propel/?at=master) • подключение в общем шаблоне - vendor/nitra/admingenerator-bundle/Admingenerator/GeneratorBundle/Resources/views/Form/fields.html.twig (https://bitbucket.org/nitra/admingeneratorbundle/src/6554f009a602b7a123c53bf36d39686985629b20/Resources/views/Form/fields.html.twig?at=master {% block double_list_widget %})

• js - vendor/nitra/admingenerator-bundle/Admingenerator/GeneratorBundle/Resources/public/js/double_list.js (https://bitbucket.org/nitra/admingeneratorbundle/src/6554f009a602b7a123c53bf36d39686985629b20/Resources/public/js/double_list.js?at=master)

Пример использования (...-generator.yml): generator: admingenerator.generator.doctrine params: 

....... 

fields:  

....... 

film: { label: Город/Кинотеатр, formType: double_list, .... } }

#NitraTheme #admingenerator верстка

Добавление placeholder в select и select2

SELECT

Общее замечание: у select нет такого атрибута как placeholder :( и его роль в "обычном" select выполняет:

<option disabled selected>{{ выберите ...}}</option>.

Реализация: По умолчанию блок реализующий select {% block choice_widget_collapsed %} ( шаблон vendor/symfony/symfony/src/ Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig) не содержит <option disabled>, поэтому нужно переопределить шаблон (в app) следующим образом:

{% trans_default_domain "NitraProductBundle" %} {# переопределено для добавления "плейсхолдера" (<option disabled selected>{{ 'select'|trans|raw }}</option>) #} {% block choice_widget_collapsed %} {% spaceless %} {% if required and empty_value is none and not empty_value_ in_choices and not multiple %} {% set required = false %} {% endif %} <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple" {% endif %}> {# добавление опции "плайсхолдера" #} <option disabled selected>{{ 'select'|trans|raw }}</option> {% if empty_value is not none %} <option value=""{% if required and value is empty %} selected="selected" {% endif %}>{{ empty_value|trans({}, translation_domain) }}</option>{% endif %} {% if preferred_choices|length > 0 %} {% set options = preferred_choices %} {{ block('choice_widget_options') }} {% if choices|length > 0 and separator is not none %} <option disabled="disabled">{{ separator }}</option> {% endif %} {% endif %} {% set options = choices %} {{ block('choice_widget_options') }} </select> {% endspaceless %} {% endblock choice_widget_collapsed %}

Если необходимо чтобы тест "placeholder"-a был "особым" цветом (обычно "серым"): 1) Добавьте скрипт: <script> function placeholder() { $('select').each(function() { if ($(this).children('option:first-child').is(':selected')) { $(this).addClass('placeholder'); } else { $(this).removeClass('placeholder'); } }); } $(document).ready(function() { placeholder(); $('select').change(placeholder); }); </script>

При необходимости стилизации в "особых" случаях (например, ajax) просто вызовите функцию функции placeholder().

2) В стилях добавьте: select { option { &:first-child { display: none; } // скрываем тест "placeholder"-a в выпадающем списке } &.placeholder, &[disabled] { color: @color_grey; // только для placeholder option { color: #000; } } }

Итоговая структура будет иметь вид: <select class="placeholder"> <option selected="" disabled="">выберите</option> // плейсхолдер <option value=""></option> // пустое значение для отмены любого выбора (сброс) <option value="Alfa Romeo">Alfa Romeo</option> <option value="....">....</option> </select>

SELECT2

Структура select2 по-умолчанию более адаптированная для добавления placeholder-a :).

В шаблоне:

В атрибуты виджета передайте параметр placeholder с необходимым значением, например:

<div class="form_row city"> // необходимо для стилизации

{{ form_errors(form.city) }} {{ form_label(form.city) }} {{ form_widget(form.city, { 'attr': {'placeholder': 'введите'} }) }} </div>

В коде (например, если form):

$cityOptions = $builder->get('city')->getOptions(); // установка опции empty_value для пустого значения по умолчанию (!!!обязательно для работы placeholder) $cityOptions['empty_value'] = ''; // реинициализация поля город с новыми опциями $builder->add('city', $builder->get('city')->getType()->getName(), array_merge ( $cityOptions, array( 'attr' => array( 'placeholder' => 'cart.city.placeholder', ), ) )); Стилизация: .select2-container .select2-default { color: #c9c9c9 !important; }

Доступные иконки NitraTheme

Наследуем *-generator.yml

Бандл должен быть переопределен

Переопределенные *-generator.yml должен лежать аналогично родительскому (относительно папки банда) и иметь идентичное название

Пример(добавляем поле):

Родительский генератор:

# /var/www/project/vendor/nitra/somebundle/Nitra/SomeBundle/Resources/config/Sample-generator.yml generator: admingenerator.generator.doctrine_odm params: model: Nitra\SampleBundle\Document\Sample namespace_prefix: Nitra bundle_name: SampleBundle i18n_catalog: NitraSampleBundle object_actions: delete: ~ fields: # some fields

builders: list: params: title: sample.list display: # some fields actions: new: ~ object_actions: edit: ~ delete: ~ filters: params: display: # some fields label: sample.filter new: params: title: sample.add display: # some fields actions: list: ~ save: ~ save-and-list: ~ edit: params: title: sample.edit display: # some fields actions: list: ~ save: ~ save-and-list: ~ actions: params: object_actions: delete: ~

Дочерний генератор:

# /var/www/project/src/Nitra/NewSomeBundle/Resources/config/Sample-generator.yml params.model: Nitra\NewSampleBundle\Document\Sample params.fields.new_field: label: fields.new_field.label builders.list.display: [ new_field ] # and same fields

Скролл в safari для windows у svg иконок

При использовании svg иконок в качестве background в safari для windows у них может появляться скролл.

Если возникла такая ситуация, нужно открыть svg файл в NetBeans (или другом редакторе) и проверить параметры у тега svg. Там не должно быть дробных чисел. Если у какого-то из параметров дробное значение, то нужно округлить его до ближайшего целого либо пересохранить svg файл с целыми размерами.

#SVG #safari #scroll

NitraTheme: Как применить иконки для тегов <input>, <select> , <select2> используя twig-шаблон

1. Откройте twig-шаблон страницы, где находится виджет.

2. Добавьте в form_row параметр icon c классом необходимой иконки.

Пример:

{{ form_row(form['staff'], {'icon': 'i_client'}) }}

Если нужной вам иконки в предложенном наборе нет (соответветственно и нет класса) или Вы желаете добавить “свою” иконку выполните действия описанные в посте : http://nitrawiki.tumblr.com/post/88955992976/nitratheme

#NitraTheme #twig admingenerator

NitraTheme: Как применить иконки для тегов <input>, <select> , <select2> используя twig-шаблон

1. Откройте twig-шаблон страницы, где находится виджет.

2. Добавьте в form_row параметр icon c классом необходимой иконки.

Пример:

{{ form_row(form['staff'], {'icon': 'i_client'}) }}

Если нужной вам иконки в предложенном наборе нет (соответветственно и нет класса) или Вы желаете добавить “свою” иконку выполните действия описанные в посте : http://nitrawiki.tumblr.com/post/88955992976/nitratheme

NitraTheme: admingenerator

Добавляем иконки для поля "Действия" таблицы

1. Идем в в generator.yml страницы, на которой расположена таблица (например: City-generator.yml).

2. В params:object_actions:name_button добавляем параметр icon в значение которого указываем название класса иконки + не ленитесь добавлять описательный текст в параметр label.

Пример:

generator.yml :

params:

……………………………………….

object_actions:

photo:

icon: i_gallery

label: Просмотр фото

……………………...

builders:

list:

params:

object_actions:

photo: ~

Если нужной вам иконки нет (соответветственно и нет класса) в предложенном наборе или Вы желаете добавить "свою" иконку выполните следующие действия:

1. Подбираем иконку, скорее “гуглим”, желательно на прозрачном фоне (.png). Неплохие ресурсы: http://icomoon.io/app/#/select http://fontello.com/

Если иконка имеет общее название типа images1 - переименуйте должным образом (название должно отражать суть иконки).

2. Положите иконку в бандл в котором будет использоваться данная иконка по пути src\Nitra\nameyourbundleBundle\Resources\public\images\. (например src\Nitra\UserBundle\Resources\public\images\)

3. В том бандре в который Вы положили иконку ищем less-файл (по пути src\Nitra\nameyourbundleBundle\Resources\public\сss ). Если файл найден желательно проверить подключен ли найденный Вами .less в шаблоне. Для этого откройте файл app\Resources\views\base_admin.html.twig и проверьте наличие блока, где соответственно вместо nameyourbundle должно быть название бандла, в который Вы положили иконку.

{% stylesheets

'bundles/nitraYour/css/name_less_file.less' %}

{% endstylesheets %}

Если файла не найдено его нужно создать и подключить. Для этого:

3.2.1. Создайте файл name_less_file.less в src\Nitra\nameyourbundleBundle\Resources\public\сss, где name_less_file - название бандла (например: user.less).

3.2.1. Подключите созданный файл в app\Resources\views\base_admin.html.twig, добавив в блок stylesheets путь к созданному less-файлу:

{% block stylesheets %}

{% stylesheets

'bundles/nitranameyourbundle/css/name_less_file.less' %}

{% endstylesheets %}

{% endblock %}

4. Откройте less-файл Вашего бандла и вставьте следующее:

.i_my_class { background-image: url("../images/my_icon.png") !important; background-position: 0.3em 50% !important; background-size: 2.4em 2.4em !important; }

Затем:

- замените класс i_my_class на подходящий по смыслу вашей иконке( например: i_smile), при этом класс должен обязательно начинаться с i_.

- замените название рисунка my_icon на название добавленного вами файла (например: smile).

Все остальные свойства класса оставьте без изменений.

5. Добавьте созданный Вами класс (например: i_my_class) в generator.yml в блок params:object_actions:name_button: icon.

Готово - проверяйте :)

Как применить иконки для тегов <input>, <select> , <select2>

1. Идем в в generator.yml страницы, на которой расположен тег (например: City-generator.yml).

2. В params:fields:name_input добавляем параметр icon в значение которого указываем название класса иконки.

Например:

params:

………………...

fields:

id:

dbType: string

name:

label: Имя

icon: i_client

Если нужно сменить порядок кнопок, отображаемых в таблице в поле “Действия”

1. Откройте файл generator.yml страницы, на которой расположена таблица (например: City-generator.yml).

2. Смените порядок действий при перечислении в группе object_actions.

Пример:

builders: builders:

list: list:

params: params:

………………. ……………….

object_actions: object_actions:

edit: ~ info: ~

info: ~ edit: ~

Почему отображаются не все колонки таблицы

Благодаря применению jQuery-плагина для адаптивных таблиц - FooTable по умолчанию в таблице отображается разное к-во колонок в зависимости от разрешения устройства.

Если ширина экрана < 480 = максимальное 3 шт.

Если 480< ширина экрана <1024 = максимальное 5 шт.

Если 1024< ширина экрана <1280 = максимальное 7 шт.

Если ширина экрана > 1280 = все.

Если к-во колонок больше указанных максимальных значений, то “лишние” колонки автоматически скрываются посредством javascript и в таблице появляется колонка с иконками в виде троеточия.

Чтобы увидеть скрытые колонки нажмите на строке и увидите подобное рисунку ниже.

Где сменить количество отображаемых записей в таблице на одной странице

В файле generator.xml страницы, где находится таблица, смените значение параметра max_per_page на требуемое.

builders:

list:

params:

max_per_page: 100

#NitraTheme #admingenerator верстка иконки yml

NitraTheme: Как добавить "свою" иконку

1. Подбираем иконку, скорее “гуглим”, желательно на прозрачном фоне (.png). Неплохие ресурсы: http://icomoon.io/app/#/select http://fontello.com/

Если иконка имеет общее название типа images1 - переименуйте должным образом (название должно отражать суть иконки).

2. Положите иконку в бандл в котором будет использоваться данная иконка по пути src\Nitra\nameyourbundleBundle\Resources\public\images\. (например src\Nitra\UserBundle\Resources\public\images\)

3. В том бандре в который Вы положили иконку ищем less-файл (по пути src\Nitra\nameyourbundleBundle\Resources\public\сss ). Если файл найден желательно проверить подключен ли найденный Вами .less в шаблоне. Для этого откройте файл app\Resources\views\base_admin.html.twig и проверьте наличие блока, где соответственно вместо nameyourbundle должно быть название бандла, в который Вы положили иконку.

{% stylesheets

'bundles/nitraYour/css/name_less_file.less' %}

{% endstylesheets %}

Если файла не найдено его нужно создать и подключить. Для этого:

3.2.1. Создайте файл name_less_file.less в src\Nitra\nameyourbundleBundle\Resources\public\сss, где name_less_file - название бандла (например: user.less).

3.2.1. Подключите созданный файл в app\Resources\views\base_admin.html.twig, добавив в блок stylesheets путь к созданному less-файлу:

{% block stylesheets %}

{% stylesheets

'bundles/nitranameyourbundle/css/name_less_file.less' %}

{% endstylesheets %}

{% endblock %}

4. Откройте less-файл Вашего бандла и вставьте следующее:

.i_my_class { background-image: url("../images/my_icon.png") !important; background-position: 0.3em 50% !important; background-size: 2.4em 2.4em !important; }

Затем:

замените класс i_my_class на подходящий по смыслу вашей иконке( например: i_smile), при этом класс должен обязательно начинаться с i_.

замените название рисунка my_icon на название добавленного вами файла (например: smile).

Все остальные свойства класса оставьте без изменений.

5. Добавьте созданный Вами класс (например: i_my_class) к нужному тегу или параметру.

Наслаждайтесь:)

Например:

а) <a class="i_smile">Сохранить</a>

Рис. Пример применения "своей" иконки

b) {{ form_row(form['staff'], {'icon': 'i_client'}) }}

#NitraTheme #верстка

NitraTheme: Оформление Input

Рис. Возможные состояния Input

a) фокусное состояние.

b) только для чтения (+ можно скопировать) . Для создания добавте в тег input атрибут disabled.

Например: <input disabled>

с) недоступное для редактирования и копирования Для создания добавте в тег input атрибут readonly.

Например: <input readonly>

d) поле с ошибкой или обязательное к заполнению и не заполненное (invalid).

#NitraTheme #верстка

NitraTheme: Оформление формы доступной только для просмотра

Для реализации формы с обычным выводом информации необходимо чтобы:

1. данные находились в ячейках таблицы (тег <td>).

2. у <table> был класс admin_show.

Пример:

<tr>

<td>Название</td>

</tr>

<tr>

<td>Адресс</td>

<td>{{ pos.address }}</td>

</tr>

</table>

Рис. Пример формы вывода информации

#NitraTheme #верстка #таблицы

NitraTheme: Оформление табов

Для оформление списка в виде табов вопроизведите структуру, приведенную в примере.

Т.е. заголовки должны быть в обертке с классом “tabs” и в “data-tab” содержаться id контента; контент табов может быть обернут в любой удобный для вас тег (не обязятельно fieldset), главное чтобы контент содержал id, который будет являтся “опознавательным знаком” для ссылки.

!!! Для реализиции табов используется js: 'bundles/admingeneratorgenerator/js/tab.js'

Пример:

……………………………………………...

</div>

………………………………….

Рис. Пример табов

#NitraTheme #верстка

NitraTheme: Оформляем Popup

Рис. Popup-виджет (слева), открытый Popup-виджет (справа).

Для организации такого виджета в тег <div> с классом popup положите то содержимое, которое должно отображаться при наведении на “треугольник”.

Пример:

<span>Удалить</span>

<span>Добавить</span>

</div>

На заметку: Для реализации используется js из vendor\nitra\admingenerator-bundle\ Admingenerator\GeneratorBundle\Resources\public\js\common.js

NitraTheme: Оформление Drop-list

Рис. Drop-виджет (слева), открытый Drop-виджет (справа)

Для организации такого виджета создайте ниже приведенную структуру:

<li>

<span class='link'>Drop_label</span>

<a class="selected">item_drop_selected</a>

<ul>

………………………….

</ul>

</span>

</li>

Если не нужен label (надпись справа) просто не создавайте <span> с классом link.

NitraTheme: Cлева таблица и справа фильтр

Чтобы таблица и фильтр располагались друг за другом необходимо воcсоздать следующую структуру:

<div class="list_filters"><form>Контент фильтров</form></div>

<div class="list_results"> Контент левой части страницы (header+table+footer)

</div>

NitraTheme: Если в меню не отображается метка текущей вкладки (зеленая точечка)

1. В файле app\config\menu.yml Укажите параметру ancestorClass значение current active.

2. Укажите параметру currentClass значение current.

millwright_menu:

renderers:

navigation:

renderer: null

rendererOptions:

template: AdmingeneratorGeneratorBundle::knp_menu.html.twig

ancestorClass: current active

currentClass: current

NitraTheme: Меняем Лого

- Для добавления иконки и замены стандартного текста:

1. Поместите иконку в \web\images\logo.png

2. В base_admin.html.twig добавьте блок:

{% block logo_image %}

{% endblock logo_image %}

3. В блок logo_name введите текст названия проекта.

{% block logo_name 'NameYourProject' %}

- Если нужна только иконка без текста:

1. Поместите иконку в \web\images\logo.png

2. В base_admin.html.twig добавьте блок

{% block logo_image %}

{% endblock logo_image %}

3 . Обнулите текст названия

{% block logo_name '' %}

- Если нужет просто текст

1. В base_admin.html.twig добавьте блок

{% block logo_name %}NameYourProject{% endblock logo_name %}

Trending Blogs

Recently Viewed Blogs

Nitra WIKI