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.

Sign up for GitHub

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
Merged

MM-34475 Emoji 13.0 with new library #4700

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d7688e0
MM-34475 Emoji 13.0 with new library
cwarnermm Jul 6, 2021
6f58034
removed custom emoji topic from toctree
cwarnermm Jul 6, 2021
1de9f6a
Replace 1 screenshot
cwarnermm Jul 6, 2021
71428fe
Reverted screenshot replacement
cwarnermm Jul 6, 2021
f915d4a
Added new screenshot for default skin tone selection
cwarnermm Jul 6, 2021
e45c36f
Added skin tone selection screenshot
cwarnermm Jul 6, 2021
2e4a324
Update source/help/messaging/emoji.rst
cwarnermm Jul 6, 2021
4cbbb88
Minor text updates for clarity
cwarnermm Jul 6, 2021
d2dc7ac
Replaced first image with redesigned Emoji Picker
cwarnermm Jul 6, 2021
a4898e0
Update source/help/messaging/emoji.rst
cwarnermm Jul 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion source/guides/messaging.rst
View file
Open in desktop
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
118 changes: 40 additions & 78 deletions source/help/messaging/emoji.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,109 +6,71 @@ Emojis are small, digital images or icons used to communicate or express concept
Adding Emojis to messages
-------------------------

**Selecting Emojis**
**Select 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.

**Select a Default Skin Tone**

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

**Typing Emojis**
**Type an Emoji**

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

.. 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.
cwarnermm marked this conversation as resolved.
Show resolved Hide resolved

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.

.. 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
-------------
Custom Emoji
-------------

You can create Custom Emojis which are available to everyone on your Mattermost server.
You can create Custom Emojis which are available to everyone on your Mattermost server.

To create and find Custom Emojis, open the **Main Menu** at the top right of the channels sidebar and select **Custom Emoji**.
To create and find Custom Emojis, open the **Main Menu** at the top right of the channels sidebar and select **Custom Emoji**.

.. note::
.. note::

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

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/>`_.
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
~~~~~~~~~~~~~~~~~~~~~~

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.

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

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

.. image:: ../../images/add_custom_emoji.png
Once saved, your emoji will be added to the list of Custom Emoji.

Once saved, your emoji will be added to the list of Custom Emoji.
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. 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.

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
View file
Open in desktop
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
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.