diff --git a/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png b/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png index 27d91ca70f..939ab008e0 100644 Binary files a/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png and b/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png differ diff --git a/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png b/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png index d9238f36fb..75bb1b4172 100644 Binary files a/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png and b/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png differ diff --git a/res/css/views/emojipicker/_EmojiPicker.pcss b/res/css/views/emojipicker/_EmojiPicker.pcss index babdb1d5e7..d1fb8d91d6 100644 --- a/res/css/views/emojipicker/_EmojiPicker.pcss +++ b/res/css/views/emojipicker/_EmojiPicker.pcss @@ -31,17 +31,25 @@ Please see LICENSE files in the repository root for full details. .mx_EmojiPicker_anchor { border: none; - padding: 8px 8px 6px; + padding: var(--cpd-space-1x) 0; + font-size: $font-20px; + line-height: 1; border-bottom: 2px solid transparent; background-color: transparent; border-radius: 4px 4px 0 0; width: 36px; - height: 38px; + height: 36px; + + color: $primary-content; + display: inline-block; &:not(:disabled) { cursor: pointer; } + &:disabled { + filter: opacity(0.3); + } &:not(:disabled):hover { background-color: $focus-bg-color; @@ -49,48 +57,6 @@ Please see LICENSE files in the repository root for full details. } } -.mx_EmojiPicker_anchor::before { - background-color: $primary-content; - content: ""; - display: inline-block; - mask-size: 100%; - mask-repeat: no-repeat; - width: 100%; - height: 100%; -} - -.mx_EmojiPicker_anchor:disabled::before { - background-color: $focus-bg-color; -} - -.mx_EmojiPicker_anchor_activity::before { - mask-image: url("$(res)/img/emojipicker/activity.svg"); -} -.mx_EmojiPicker_anchor_flags::before { - mask-image: url("$(res)/img/emojipicker/flags.svg"); -} -.mx_EmojiPicker_anchor_foods::before { - mask-image: url("$(res)/img/emojipicker/foods.svg"); -} -.mx_EmojiPicker_anchor_nature::before { - mask-image: url("$(res)/img/emojipicker/nature.svg"); -} -.mx_EmojiPicker_anchor_objects::before { - mask-image: url("$(res)/img/emojipicker/objects.svg"); -} -.mx_EmojiPicker_anchor_people::before { - mask-image: url("$(res)/img/emojipicker/people.svg"); -} -.mx_EmojiPicker_anchor_places::before { - mask-image: url("$(res)/img/emojipicker/places.svg"); -} -.mx_EmojiPicker_anchor_recent::before { - mask-image: url("$(res)/img/emojipicker/recent.svg"); -} -.mx_EmojiPicker_anchor_symbols::before { - mask-image: url("$(res)/img/emojipicker/symbols.svg"); -} - .mx_EmojiPicker_anchor_visible { border-bottom: 2px solid $accent; } diff --git a/res/img/emojipicker/activity.svg b/res/img/emojipicker/activity.svg deleted file mode 100644 index d921667e7a..0000000000 --- a/res/img/emojipicker/activity.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/res/img/emojipicker/flags.svg b/res/img/emojipicker/flags.svg deleted file mode 100644 index bd0a935265..0000000000 --- a/res/img/emojipicker/flags.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/res/img/emojipicker/foods.svg b/res/img/emojipicker/foods.svg deleted file mode 100644 index 57a15976d8..0000000000 --- a/res/img/emojipicker/foods.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/res/img/emojipicker/nature.svg b/res/img/emojipicker/nature.svg deleted file mode 100644 index a4778be927..0000000000 --- a/res/img/emojipicker/nature.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - diff --git a/res/img/emojipicker/objects.svg b/res/img/emojipicker/objects.svg deleted file mode 100644 index e0d39f985a..0000000000 --- a/res/img/emojipicker/objects.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - diff --git a/res/img/emojipicker/people.svg b/res/img/emojipicker/people.svg deleted file mode 100644 index c2fdb579f6..0000000000 --- a/res/img/emojipicker/people.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - diff --git a/res/img/emojipicker/places.svg b/res/img/emojipicker/places.svg deleted file mode 100644 index 0947baaf04..0000000000 --- a/res/img/emojipicker/places.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - diff --git a/res/img/emojipicker/recent.svg b/res/img/emojipicker/recent.svg deleted file mode 100644 index 2fdcc65cd2..0000000000 --- a/res/img/emojipicker/recent.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - diff --git a/res/img/emojipicker/symbols.svg b/res/img/emojipicker/symbols.svg deleted file mode 100644 index a2b86d9ec8..0000000000 --- a/res/img/emojipicker/symbols.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/src/components/views/emojipicker/Category.tsx b/src/components/views/emojipicker/Category.tsx index 21e5c97c33..17f33d9346 100644 --- a/src/components/views/emojipicker/Category.tsx +++ b/src/components/views/emojipicker/Category.tsx @@ -22,6 +22,8 @@ export type CategoryKey = keyof typeof DATA_BY_CATEGORY | "recent"; export interface ICategory { id: CategoryKey; name: string; + // Emoji to show in the header for this category + emoji: string; enabled: boolean; // Whether the category is currently visible visible: boolean; diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx index 9ba2445102..192a40b782 100644 --- a/src/components/views/emojipicker/EmojiPicker.tsx +++ b/src/components/views/emojipicker/EmojiPicker.tsx @@ -81,19 +81,16 @@ class EmojiPicker extends React.Component { const hasRecentlyUsed = this.recentlyUsed.length > 0; - const categoryConfig: Array<{ - id: CategoryKey; - name: string; - }> = [ - { id: "recent", name: _t("emoji|category_frequently_used") }, - { id: "people", name: _t("emoji|category_smileys_people") }, - { id: "nature", name: _t("emoji|category_animals_nature") }, - { id: "foods", name: _t("emoji|category_food_drink") }, - { id: "activity", name: _t("emoji|category_activities") }, - { id: "places", name: _t("emoji|category_travel_places") }, - { id: "objects", name: _t("emoji|category_objects") }, - { id: "symbols", name: _t("emoji|category_symbols") }, - { id: "flags", name: _t("emoji|category_flags") }, + const categoryConfig: Pick[] = [ + { id: "recent", name: _t("emoji|category_frequently_used"), emoji: "🕒" }, + { id: "people", name: _t("emoji|category_smileys_people"), emoji: "😀" }, + { id: "nature", name: _t("emoji|category_animals_nature"), emoji: "🐕" }, + { id: "foods", name: _t("emoji|category_food_drink"), emoji: "🍎" }, + { id: "activity", name: _t("emoji|category_activities"), emoji: "⚽️" }, + { id: "places", name: _t("emoji|category_travel_places"), emoji: "🚗" }, + { id: "objects", name: _t("emoji|category_objects"), emoji: "💡" }, + { id: "symbols", name: _t("emoji|category_symbols"), emoji: "⁉️" }, + { id: "flags", name: _t("emoji|category_flags"), emoji: "🏁" }, ]; this.categories = categoryConfig.map((config) => { @@ -109,8 +106,7 @@ class EmojiPicker extends React.Component { firstVisible = !hasRecentlyUsed; } return { - id: config.id, - name: config.name, + ...config, enabled: isEnabled, visible: isVisible, firstVisible: firstVisible, diff --git a/src/components/views/emojipicker/Header.tsx b/src/components/views/emojipicker/Header.tsx index ed2c6b9f21..5b57c065b5 100644 --- a/src/components/views/emojipicker/Header.tsx +++ b/src/components/views/emojipicker/Header.tsx @@ -84,7 +84,7 @@ class Header extends React.PureComponent { onKeyDown={this.onKeyDown} > {this.props.categories.map((category) => { - const classes = classNames(`mx_EmojiPicker_anchor mx_EmojiPicker_anchor_${category.id}`, { + const classes = classNames("mx_EmojiPicker_anchor", { mx_EmojiPicker_anchor_visible: category.visible, }); // Properties of this button are also modified by EmojiPicker's updateVisibility in DOM. @@ -100,7 +100,9 @@ class Header extends React.PureComponent { tabIndex={category.firstVisible ? 0 : -1} // roving aria-selected={category.visible} aria-controls={`mx_EmojiPicker_category_${category.id}`} - /> + > + {category.emoji} + ); })}