Пользовательский HTML

Пользователь может использовать HTML в:

• панели type=«html»
• панели type=«list», style=«card» - отображение карточки
• панели type=«grid», field.type=«html»

Если выбран способ отображения карточки (панель list, style=card), есть возможность сворачивать/разворачивать содержимое. Соответственно, для карточки имеют смысл классы button-expand и collapsable.

Это классы контейнеры, вложенные в них элементы будут размещаться:

• для flex-row горизонтально, слева на право
• для flex-column вертикально, сверху вниз

Этот класс можно добавить к контейнерам flex-row и flex-column, при этом дочерние элементы начинают переноситься если не умещаются в размер.

Этот класс можно добавить к контейнерам flex-row и flex-column, описывает способ размещения дочерних элементов

• left - пытаться прижимать дочерние элементы к левому краю
• right - пытаться прижимать дочерние элементы к правому краю
• center-h - пытаться размещать дочерние элементы горизонтально по центру

• top - пытаться прижимать дочерние элементы к верхнему краю
• bottom - пытаться прижимать дочерние элементы к нижнему краю
• center-v - пытаться размещать дочерние элементы вертикально по центру

Элемент заголовка

<div class="title">Текст заголовка</div>

Элемент, выделенный цветным кружочком

<div class="tag lss-color-red">код</div>

Кнопочка разворачивания/сворачивания скрываемых элементов, имеет смысл только для карточек

<div class="button-expand"></div>

Элемент разделитель, следует размещать его между элементами, в начале или конце. Максимально раздвигает элементы друг от друга.

<div>элемент слева</div>
<div class="space"></div>
<div>элемент справа</div>

Элемент разделитель, отображается как вертикальная палочка между элементами

<div>элемент 1</div>
<div class="separator"></div>
<div>элемент 2</div>

Дополнительный признак элемента, пытается занять элементом все доступное пространство

Дополнительный признак элемента, скрывает элемент без содержимого. Часто при написании шаблона неизвестно, есть ли в конкретном экземпляре содержимое или нет. Бывает, что элемент должен отображаться даже если содержимого нет, а бывает что пустые элементы надо выкинуть. Тогда удобно использовать этот класс.

<!-- этот элемент будет скрыт -->
<div class="hide-empty"></div>

<!-- этот элемент отобразится -->
<div class="hide-empty">содержимое</div>

Дополнительный признак элемента, имеет смысл только для карточек. При сворачивании/разворачивании карточки скрывается/отображается

<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>