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,\ postImportsCaption: "Allows users to import their posts from past Calckey,\
\ Misskey, Mastodon, Akkoma, and Pleroma accounts. It may cause slowdowns during\ \ Misskey, Mastodon, Akkoma, and Pleroma accounts. It may cause slowdowns during\
\ load if your queue is bottlenecked." \ load if your queue is bottlenecked."
_dialog: _dialog:
charactersExceeded: "Max characters exceeded! Current: {current}/Limit: {max}" charactersExceeded: "Max characters exceeded! Current: {current}/Limit: {max}"
charactersBelow: "Not enough characters! Current: {current}/Limit: {min}" 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

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

View File

@ -115,6 +115,7 @@
:key="category" :key="category"
:skin-tone-selector="category === 'people'" :skin-tone-selector="category === 'people'"
:skin-tones="unicodeEmojiSkinTones" :skin-tones="unicodeEmojiSkinTones"
:skin-tone-labels="unicodeEmojiSkinToneLabels"
:emojis=" :emojis="
emojilist emojilist
.filter((e) => e.category === category) .filter((e) => e.category === category)
@ -168,7 +169,6 @@ import XSection from "@/components/MkEmojiPicker.section.vue";
import { import {
emojilist, emojilist,
unicodeEmojiCategories, unicodeEmojiCategories,
unicodeEmojiSkinTones,
UnicodeEmojiDef, UnicodeEmojiDef,
getNicelyLabeledCategory, getNicelyLabeledCategory,
} from "@/scripts/emojilist"; } from "@/scripts/emojilist";
@ -210,6 +210,24 @@ const {
recentlyUsedEmojis, recentlyUsedEmojis,
} = defaultStore.reactiveState; } = 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(() => const size = computed(() =>
props.asReactionPicker ? reactionPickerSize.value : 1 props.asReactionPicker ? reactionPickerSize.value : 1
); );

View File

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

View File

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