fix: 🐛 apply skin tone to default reactions, aria labels for tone picker

This commit is contained in:
ThatOneCalculator 2023-06-26 14:49:55 -07:00
parent 7fa2ed853a
commit d740c9fc61
No known key found for this signature in database
GPG key ID: 8703CACD01000000
5 changed files with 46 additions and 19 deletions

View file

@ -2073,7 +2073,13 @@ _experiments:
postImportsCaption: "Allows users to import their posts from past Calckey,\
\ Misskey, Mastodon, Akkoma, and Pleroma accounts. It may cause slowdowns during\
\ load if your queue is bottlenecked."
_dialog:
charactersExceeded: "Max characters exceeded! Current: {current}/Limit: {max}"
charactersBelow: "Not enough characters! Current: {current}/Limit: {min}"
_skinTones:
yellow: "Yellow"
light: "Light"
mediumLight: "Medium Light"
medium: "Medium"
mediumDark: "Medium Dark"
dark: "Dark"

View file

@ -23,6 +23,13 @@
<i
class="ph-circle ph-fill ph-fw ph-lg"
:style="{ color: skinTone + ' !important' }"
:aria-label="
props.skinToneLabels
? props.skinToneLabels[
props.skinTones.indexOf(skinTone)
]
: ''
"
></i>
</button>
</span>
@ -49,6 +56,7 @@ const props = defineProps<{
initialShown?: boolean;
skinToneSelector?: boolean;
skinTones?: string[];
skinToneLabels?: string[];
}>();
const localEmojis = ref([...props.emojis]);

View file

@ -115,6 +115,7 @@
:key="category"
:skin-tone-selector="category === 'people'"
:skin-tones="unicodeEmojiSkinTones"
:skin-tone-labels="unicodeEmojiSkinToneLabels"
:emojis="
emojilist
.filter((e) => e.category === category)
@ -168,7 +169,6 @@ import XSection from "@/components/MkEmojiPicker.section.vue";
import {
emojilist,
unicodeEmojiCategories,
unicodeEmojiSkinTones,
UnicodeEmojiDef,
getNicelyLabeledCategory,
} from "@/scripts/emojilist";
@ -210,6 +210,24 @@ const {
recentlyUsedEmojis,
} = defaultStore.reactiveState;
const unicodeEmojiSkinTones = [
"#FFDC5E",
"#F7DFCF",
"#F3D3A3",
"#D6AE89",
"#B17F56",
"#7D523C",
];
const unicodeEmojiSkinToneLabels = [
i18n.ts._skinTones.yellow,
i18n.ts._skinTones.light,
i18n.ts._skinTones.mediumLight,
i18n.ts._skinTones.medium,
i18n.ts._skinTones.mediumDark,
i18n.ts._skinTones.dark,
];
const size = computed(() =>
props.asReactionPicker ? reactionPickerSize.value : 1
);

View file

@ -47,22 +47,22 @@
<FormRadios v-model="reactionPickerSkinTone" class="_formBlock">
<template #label>{{ i18n.ts.reactionPickerSkinTone }}</template>
<option :value="1">
<option :value="1" :aria-label="i18n.ts._skinTones.yellow">
<MkEmoji style="height: 1.7em" emoji="✌️" />
</option>
<option :value="6">
<option :value="6" :aria-label="i18n.ts._skinTones.dark">
<MkEmoji style="height: 1.7em" emoji="✌🏿" />
</option>
<option :value="5">
<option :value="5" :aria-label="i18n.ts._skinTones.mediumDark">
<MkEmoji style="height: 1.7em" emoji="✌🏾" />
</option>
<option :value="4">
<option :value="4" :aria-label="i18n.ts._skinTones.medium">
<MkEmoji style="height: 1.7em" emoji="✌🏽" />
</option>
<option :value="3">
<option :value="3" :aria-label="i18n.ts._skinTones.mediumLight">
<MkEmoji style="height: 1.7em" emoji="✌🏼" />
</option>
<option :value="2">
<option :value="2" :aria-label="i18n.ts._skinTones.light">
<MkEmoji style="height: 1.7em" emoji="✌🏻" />
</option>
</FormRadios>
@ -137,6 +137,7 @@ import { i18n } from "@/i18n";
import { definePageMetadata } from "@/scripts/page-metadata";
import { deepClone } from "@/scripts/clone";
import { unisonReload } from "@/scripts/unison-reload";
import {addSkinTone } from "@/scripts/emojilist";
async function reloadAsk() {
const { canceled } = await os.confirm({
@ -239,8 +240,11 @@ watch(enableEmojiReactions, async () => {
});
watch(reactionPickerSkinTone, async () => {
reactions.forEach((emoji) => {
addSkinTone(emoji, reactionPickerSkinTone.value);
});
await reloadAsk();
})
});
const headerActions = $computed(() => []);

View file

@ -35,15 +35,6 @@ export const categoryMapping = {
Flags: "flags",
} as const;
export const unicodeEmojiSkinTones = [
"#FFDC5E",
"#F7DFCF",
"#F3D3A3",
"#D6AE89",
"#B17F56",
"#7D523C",
];
export function addSkinTone(emoji: string, skinTone?: number) {
const individualData = import("unicode-emoji-json/data-by-emoji.json");