0 Style Developers: Migrating to 3.0.0
emsquared edited this page 2013-03-05 04:46:39 -08:00

Version 2.1.1 compatible styles will work on Textual v3.0.0 without any migration. However, there have been additions that a style can opt-into that will enhance the experience for the end user.

CSS Changes

Version 3.0.0 of Textual supports message playback after each restart. A style that would like to distinguish old messages from new ones can define CSS settings for the .historic class type. The recommended way to shown older messages is to change their opacity.

For example:

.historic 
{
	opacity: 0.6;
}

Template Engine

Base Layout Changes

The token {{isChannelView}} in baseLayout.mustache no longer applies to queries.

The token {{isPrivateMessageView}} is now available to handle those.

Encryption Lock

Textual now hands down information on whether a specific message is encrypted so that a lock may be shown somewhere in the message to inform the end user.

A style that does not override the default templates used by Textual will find adoption of this feature easier than those who have.

Textual does not understand the color scheme of each style that it shows so it is up to the developer of each style to define the template for the lock themselves. There are two variants that are available by default. A light and dark one.

To get started, the template encryptedMessageLock.mustache must be defined in the style's template folder. Once this template is created, it can be filled with custom HTML or it can use the following example:

<span class="encryptionLock">
<img src="{{applicationResourcePath}}/encryptionLockIconLight.tiff" alt="[encrypted]" title="This communication is encrypted." />
</span>

Replace encryptionLockIconLight.tiff with encryptionLockIconDark.tiff if a darker lock is needed.

If defining a custom icon, then use the token {{activeStyleAbsolutePath}} for the image to be relative to the style's location.


If the newMessagePostedWithSender.mustache default template of Textual is overrode, then the following has to be added to shown the actual HTML of the lock icon.

{{#isEncrypted}}
	{{{encryptedMessageLockTemplate}}}
{{/isEncrypted}}

These template tokens are only available within this template. Additionally, these icons may require extra CSS based on the layout of the style. See the default styles bundled with Textual to see how they are laid out in those.