LSS Техническая документация

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Пользовательский HTML ======
===== Введение =====
Пользователь может использовать HTML в:
  * панели type="html"
  * панели type="list", style="card" - отображение карточки
  * панели type="grid", field.type="html"
Если выбран способ отображения карточки (панель list, style=card), есть возможность сворачивать/разворачивать содержимое. 
Соответственно, для карточки имеют смысл классы **button-expand** и **collapsable**.

===== Классы контейнеров, основанных на flex =====
==== flex-row и flex-column - классы контейнеры  ====
Это классы контейнеры, вложенные в них элементы будут размещаться:
  * для **flex-row** горизонтально, слева на право 
  * для **flex-column** вертикально, сверху вниз
==== wrap - признак контейнера ====
Этот класс можно добавить к контейнерам **flex-row** и **flex-column**, при этом дочерние элементы начинают переноситься если не умещаются в размер.
==== left, right, top, bottom, center-v, center-h - признак контейнера ====
Этот класс можно добавить к контейнерам **flex-row** и **flex-column**, описывает способ размещения дочерних элементов
  * **left** - пытаться прижимать дочерние элементы к левому краю
  * **right** - пытаться прижимать дочерние элементы к правому краю
  * **center-h** - пытаться размещать дочерние элементы горизонтально по центру

  * **top** - пытаться прижимать дочерние элементы к верхнему краю
  * **bottom** - пытаться прижимать дочерние элементы к нижнему краю
  * **center-v** - пытаться размещать дочерние элементы вертикально по центру
===== Классы элементов, вложенных в контейнеры =====
==== title - класс заголовка ====
Элемент заголовка
<code>
<div class="title">Текст заголовка</div>
</code>
==== tag - класс выделения ====
Элемент, выделенный цветным кружочком
<code>
<div class="tag lss-color-red">код</div>
</code>
==== button-expand ====
Кнопочка разворачивания/сворачивания скрываемых элементов, имеет смысл только для карточек
<code>
<div class="button-expand"></div>
</code>
==== space ====
Элемент разделитель, следует размещать его между элементами, в начале или конце. Максимально раздвигает элементы друг от друга.
<code>
<div>элемент слева</div>
<div class="space"></div>
<div>элемент справа</div>
</code>
==== separator ====
Элемент разделитель, отображается как вертикальная палочка между элементами
<code>
<div>элемент 1</div>
<div class="separator"></div>
<div>элемент 2</div>
</code>
==== stretch ====
Дополнительный признак элемента, пытается занять элементом все доступное пространство
==== hide-empty ====
Дополнительный признак элемента, скрывает элемент без содержимого. 
Часто при написании шаблона неизвестно, есть ли в конкретном экземпляре содержимое или нет.
Бывает, что элемент должен отображаться даже если содержимого нет, а бывает что пустые элементы надо выкинуть. Тогда удобно использовать этот класс.
<code>
<!-- этот элемент будет скрыт -->
<div class="hide-empty"></div>

<!-- этот элемент отобразится -->
<div class="hide-empty">содержимое</div>
</code>
==== collapsable ====
Дополнительный признак элемента, имеет смысл только для карточек. При сворачивании/разворачивании карточки скрывается/отображается
===== Пример шаблона =====
<code>
<div class="flex-column stretch">
	<div class="flex-row center-v stretch">
		<div class="flex-row center-v wrap">
			<div>{$html_code}</div>
			<div>[{$html_project_code}]</div>
			<div>{$html_theme_name}</div>
		</div>
		<div class="space"></div>
		<div class="flex-row center-v">
			<div class="lss-icons-{$html_priority} hide-empty">{$html_priority}</div>
			<div class="lss-icons-{$html_iconunreaded} hide-empty">{$html_iconunreaded}</div>
			<div class="tag lss-color-{$html_status_code_color}">{$html_status_code}</div>
			<div class="tag lss-color-{$taskpriority_code_color}">{$taskpriority_code}</div>
		</div>
	</div>
	<div class="flex-row stretch">
		<div class="flex-column stretch">
			<div class="title">{$html_name}</div>
			<div class="collapsable hide-empty">{$html_info}</div>
			<div class="flex-row wrap">
				<div>от:</div>
				<div class="title">{$html_userfrom_fio}</div>
				<div class="separator"></div>
				<div>для:</div>
				<div class="title">{$html_userto_fio}</div>
			</div>
		</div>
		<div class="button-expand"></div>
	</div>
	<div class="flex-row wrap center-v stretch">
		<div class="flex-row center-v hide-empty">
			<div>{$html_status_datecode}</div>
			<div class="tag lss-color-white">{$html_status_date}</div>
		</div>
		<div class="space"></div>
		<div class="tag lss-color-{$html_deadline_status_color} hide-empty">{$html_deadline}</div>
	</div>
</div>
</code>