AppSuite:Emoji

Emoji Support

Abstract. In this article, the support for emoji is described in detail. Learn about how different icon sets can be included and configured.

Enabling emoji support

Emoji support is disabled by default. In order to enable the feature, you must define the capability emoji. This is done by just adding the word "emoji" to the property "permissions" in /opt/openexchange/etc/permission.properties:

permissions=...,emoji

Settings

Configuration will be served via jslob service at the following path.

io.ox/mail/emoji

The following settings are relevant for emoji support:

io.ox/mail/emoji//defaultCollection=unified
io.ox/mail/emoji//availableCollections=unified,two,three
io.ox/mail/emoji//forceEmojiIcons=false
io.ox/mail/emoji//collectionControl=none # possible values 'none', 'tabs', 'dropdown'
io.ox/mail/emoji//autoClose=false
io.ox/mail/emoji//userCollection=emoji/defaultCollection
io.ox/mail/emoji//overrideUserCollection=false

In order to configure this server-side, just append to existing appsuite.properties or create a new file emoji.properties (in same directory; please mind the double-slash, this in not a typo! plus: changing such settings requires a backend restart).

How to add a new icon set

It is possible to add new icon sets by writing a core plugin. It is recommended, to install the files to

apps/3rd.party/emoji/<iconSetName>/

Put all your CSS code and images into this directory and create a register.js adding the CSS/LESS files as dependencies.

Once this is done, you need to add the CSS also to the tinyMCE editor, because an iframe is used to edit the text and in order to have full emoji support, you need to load the CSS code there as well. Doing so is really easy. There is an extension point you can use to add the paths to your CSS files.

 
define('3rd.party/emoji/greatestIconSet/register',
   ['io.ox/core/extensions',
    'css!3rd.party/emoji/greatestIconSet/emoji.css',
    'css!3rd.party/emoji/greatestIconSet/emoji_categories.css'
   ], function (ext) {

    "use strict";

    ext.point('3rd.party/emoji/editor_css').extend({
        id: 'greatestIconSet/categories',
        css: '3rd.party/emoji/greatestIconSet/emoji_categories.css'
    });
    ext.point('3rd.party/emoji/editor_css').extend({
        id: 'greatestIconSet/icons',
        css: '3rd.party/emoji/greatestIconSet/emoji.css'
    });
});

Naming conventions in CSS code

The CSS must follow some easy structure. There must be a base class for all icons that defines the background image. It must match the name of your icon set prefixed with “.emoji-”.

Each icon will then be identified by a string that can be defined in the icon set metadata.

Find here a short example copied from the unified icon set shipped with Appsuite.

.emoji-unified { 
    background: url("emoji.png") top left no-repeat;
    width: 20px;
    height: 20px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;
}
.emoji2600 { 
    background-position: -500px -120px;
}