sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Switch emoji picker to use emoji for header icons (#31645)

Browse Source 
* Replace icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused icon

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Replace more icons with Compound alternatives

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Swap for outline icons in spotlight & update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Switch emoji picker to use emoji for header icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update football emoji

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tweak emoji and fix disabled state

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2026-01-07 10:22:26 +00:00
committed by GitHub
parent d7a58216ae
commit 7f057faaad
15 changed files with 27 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/emojipicker/Category.tsx
+2
View File
@@ -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;
src/components/views/emojipicker/EmojiPicker.tsx
+11 -15
View File
@@ -81,19 +81,16 @@ class EmojiPicker extends React.Component<IProps, IState> {
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<ICategory, "id" | "name" | "emoji">[] = [
{ 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<IProps, IState> {
firstVisible = !hasRecentlyUsed;
}
return {
id: config.id,
name: config.name,
...config,
enabled: isEnabled,
visible: isVisible,
firstVisible: firstVisible,
src/components/views/emojipicker/Header.tsx
+4 -2
View File
@@ -84,7 +84,7 @@ class Header extends React.PureComponent<IProps> {
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<IProps> {
tabIndex={category.firstVisible ? 0 : -1} // roving
aria-selected={category.visible}
aria-controls={`mx_EmojiPicker_category_${category.id}`}
/>
>
{category.emoji}
</button>
);
})}
</nav>