Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MM-34475 Emoji 13.0 with new library #4700

Merged
merged 10 commits into from
Jul 9, 2021
1 change: 0 additions & 1 deletion source/guides/messaging.rst
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ Work with Messages
/help/messaging/sending-messages.rst
/help/messaging/formatting-text.rst
/help/messaging/emoji.rst
/help/settings/custom-emoji.rst
/help/messaging/mentioning-teammates.rst
/help/messaging/attaching-files.rst
/help/messaging/executing-commands.rst
Expand Down
122 changes: 39 additions & 83 deletions source/help/messaging/emoji.rst
Original file line number Diff line number Diff line change
Expand Up @@ -6,109 +6,65 @@ Emojis are small, digital images or icons used to communicate or express concept
Adding Emojis to messages
-------------------------

**Selecting Emojis**
Selecting an Emoji
~~~~~~~~~~~~~~~~~~

Select the smile icon inside the Mattermost message input box to open the Emoji Picker.
Select the **Smile** icon inside the Mattermost message input box to open the Emoji Picker.

.. image:: ../../images/selectemoji.png
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

emoji picker was redesigned, needs new screenshot

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Updated!

:alt: Open the Mattermost Emoji Picker.

**Typing Emojis**
Selecting a Default Skin Tone
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Alternatively, open the emoji autocomplete by typing ``:`` followed by at least two characters of the word describing the emoji.
Select the **Skin Tone** icon in the top right corner of the Emoji Picker to specify a preferred skin tone for people-based emojis.

.. image:: ../../images/emoji-skin-tone.png
:alt: Select a default skin tone for people-based emojis.

Typing an Emoji
---------------

Alternatively, open the emoji autocomplete by typing ``:`` followed by at least two characters of the word describing the emoji. Descriptions include skin tone details for people-based emojis, where supported.

.. image:: ../../images/emojiautocomplete.png
:alt: Emoji Autocomplete
:scale: 80

It's also possible to create your own `Custom Emoji <https://docs.mattermost.com/help/settings/custom-emoji.html>`__ if the emoji you want to use doesn't exist.

Accessing Alternate Skin Tones
------------------------------

The Mattermost Emoji Picker and Emoji autocomplete use generic skin tones. To access alternate skin tones, you can use the native emoji pickers provided on your platform or device.

**Windows 10**

1. Use the keyboard shortcut: Windows Key + **.** (period) to open the native emoji picker for Windows 10.
2. Select an alternate skin tone and then select an emoji.

.. image:: ../../images/windows10emojiskintones.png
:alt: Select alternate emoji skin tones on Windows 10 systems.
:scale: 70

**macOS**

1. Use the keyboard shortcut: CMD+CTRL+Space Bar to open the native emoji picker for macOS.
2. Select and hold an emoji to choose an alternate skin tone.

.. image:: ../../images/macosemojiskintones.png
:alt: Select alternate emoji skin tones on macOS systems.
:scale: 80

**iPhone and iPad**

1. Open the emoji keyboard.
2. Touch and hold an emoji to choose an alternate skin tone.
It's also possible to `create your own custom emoji <#custom-emoji>`_ if the emoji you want to use doesn't exist.

.. image:: ../../images/mobile/appleemojiskintones.png
:alt: Select alternate emoji skin tones on Apple devices.
:scale: 30


.. tip::
If you don't see the emoji keyboard for your Apple device, you can enable it. See `Use emoji on your iPhone, iPad, and iPod touch <https://support.apple.com/en-us/HT202332>`__ for details.

**Android**

1. Open the Android emoji keyboard.
2. Touch and hold an emoji to choose an alternate skin tone.

.. image:: ../../images/mobile/androidemojiskintones.png
:alt: Select alternate emoji skin tones on Android devices.
:scale: 80

Custom Emoji
-------------
Creating Custom Emojis
-----------------------

You can create Custom Emojis which are available to everyone on your Mattermost server. From the Emoji Picker, select **Custom Emoji**. Small, square pictures work best when selecting an image to upload. The file can be any JPG, GIF, or PNG and up to 1 MB in size.

You can create Custom Emojis which are available to everyone on your Mattermost server.
1. Enter a name for your Custom Emoji. This is the name that will show up in the emoji autocomplete.
2. Choose **Select**, then select the image to use for the emoji.
3. Select **Save**.

To create and find Custom Emojis, open the **Main Menu** at the top right of the channels sidebar and select **Custom Emoji**.
.. image:: ../../images/add_custom_emoji.png

.. note::
Once saved, your emoji is added to the list of Custom Emoji.

If you can't see the **Custom Emoji** option in the menu, then your Mattermost System Admin may have restricted access to certain users. Contact your Mattermost System Admin for help.
.. note::

If you can't see the **Custom Emoji** option, then your Mattermost System Admin may have restricted access to certain users. Contact your Mattermost System Admin for help.

For further assistance, review the `Troubleshooting forum <https://forum.mattermost.org/c/trouble-shoot>`__ for previously reported errors, or `join the Mattermost user community for troubleshooting help <https://mattermost.com/pl/default-ask-mattermost-community/>`_.

Creating Custom Emojis
^^^^^^^^^^^^^^^^^^^^^^

Small, square pictures work best when selecting an image. The file can be any JPG, GIF, or PNG and up to 1 MB in size.
For further assistance, review the `Troubleshooting forum <https://forum.mattermost.org/c/trouble-shoot>`__ for previously reported errors, or `join the Mattermost user community for troubleshooting help <https://mattermost.com/pl/default-ask-mattermost-community/>`_.

1. Open the **Main Menu** at the top-right of the channels sidebar.
2. Select **Custom Emoji**.
3. Choose **Add Custom Emoji**.
4. Enter a name for your Custom Emoji. This is the name that will show up in the emoji autocomplete.
5. Choose **Select**, and choose what image to use for the emoji.
6. Choose **Save**.

.. image:: ../../images/add_custom_emoji.png

Once saved, your emoji will be added to the list of Custom Emoji.
Using Custom Emojis
~~~~~~~~~~~~~~~~~~~

To use your Custom Emoji in a message, simply type ":" followed by your emoji name to bring it up in the emoji autocomplete. Other users on the site will also be able to see your emoji in the autocomplete, and will be able to use it in their own messages.
cwarnermm marked this conversation as resolved.
Show resolved Hide resolved

To use your Custom Emoji in a message, simply type ":" followed by your emoji name to bring it up in the emoji autocomplete. Other users on the site will also be able to see your emoji in the autocomplete, and will be able to use it in their own messages.
Deleting Custom Emojis
~~~~~~~~~~~~~~~~~~~~~~

Deleting Custom Emojis
^^^^^^^^^^^^^^^^^^^^^^^
You can delete Custom Emojis that you created.

You can delete Custom Emojis that you created.
1. If required, use the Search Bar to find your Custom Emoji in the list.
2. Under **Actions** select **Delete**.
3. Select **Delete** to confirm.

1. Open the **Main Menu** at the top-right of the channels sidebar.
2. Select **Custom Emoji**.
3. If required, use the Search Bar to find your Custom Emoji in the list.
4. Under **Actions** select **Delete**.
5. Choose **Delete** to confirm.
.. image:: ../../images/delete_custom_emoji.png

.. image:: ../../images/delete_custom_emoji.png

Binary file modified source/images/add_custom_emoji.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added source/images/emoji-skin-tone.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified source/images/selectemoji.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.