blsmedia/bot
2
0
Fork 0
Code Issues Activity

Add editor header translation keys (#1110)

Browse Source 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Implemented internationalization support across various components
using the `useTranslate` function for dynamic content translation.

- **Enhancements**
- Updated UI elements such as buttons, tooltips, placeholders, and
labels to display translated text, improving accessibility and user
experience for non-English speakers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
This commit is contained in:
Gabriel Pavão
2023-12-28 06:50:33 -03:00
committed by GitHub
parent 74f5a17de0
commit d42e4a9ce1
38 changed files with 520 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/builder/src/components/CopyButton.tsx
View File

@@ -1,5 +1,6 @@
import React, { useEffect } from 'react'
import { ButtonProps, Button, useClipboard } from '@chakra-ui/react'
import { useTranslate } from '@tolgee/react'
interface CopyButtonProps extends ButtonProps {
textToCopy: string
@@ -13,6 +14,7 @@ interface CopyButtonProps extends ButtonProps {
export const CopyButton = (props: CopyButtonProps) => {
const { textToCopy, onCopied, ...buttonProps } = props
const { hasCopied, onCopy, setValue } = useClipboard(textToCopy)
const { t } = useTranslate()
useEffect(() => {
setValue(textToCopy)
@@ -27,7 +29,9 @@ export const CopyButton = (props: CopyButtonProps) => {
}}
{...buttonProps}
>
{!hasCopied ? props.text?.copy ?? 'Copy' : props.text?.copied ?? 'Copied'}
{!hasCopied
? props.text?.copy ?? t('copy')
: props.text?.copied ?? t('copied')}
</Button>
)
}

4
apps/builder/src/components/EditableEmojiOrImageIcon.tsx
View File

@@ -11,6 +11,7 @@ import React from 'react'
import { EmojiOrImageIcon } from './EmojiOrImageIcon'
import { ImageUploadContent } from './ImageUploadContent'
import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
import { useTranslate } from '@tolgee/react'
type Props = {
uploadFileProps: FilePathUploadProps
@@ -25,13 +26,14 @@ export const EditableEmojiOrImageIcon = ({
onChangeIcon,
boxSize,
}: Props) => {
const { t } = useTranslate()
const bg = useColorModeValue('gray.100', 'gray.700')
return (
<Popover isLazy>
{({ onClose }: { onClose: () => void }) => (
<>
<Tooltip label="Change icon">
<Tooltip label={t('editor.header.tooltip.changeIcon.label')}>
<Flex
cursor="pointer"
p="2"

4
apps/builder/src/components/ImageUploadContent/IconPicker.tsx
View File

@@ -11,6 +11,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import { iconNames } from './iconNames'
import { TextInput } from '../inputs'
import { ColorPicker } from '../ColorPicker'
import { useTranslate } from '@tolgee/react'
const batchSize = 200
@@ -39,6 +40,7 @@ export const IconPicker = ({ onIconSelected }: Props) => {
[initialIconColor, selectedColor]
)
const [recentIconNames, setRecentIconNames] = useState([])
const { t } = useTranslate()
useEffect(() => {
const recentIconNames = localStorage.getItem(localStorageRecentIconNamesKey)
@@ -105,7 +107,7 @@ export const IconPicker = ({ onIconSelected }: Props) => {
<Stack>
<HStack>
<TextInput
placeholder="Search..."
placeholder={t('emojiList.searchInput.placeholder')}
onChange={searchIcon}
withVariableButton={false}
debounceTimeout={300}

51
apps/builder/src/components/ImageUploadContent/ImageUploadContent.tsx
View File

@@ -7,6 +7,7 @@ import { EmojiSearchableList } from './emoji/EmojiSearchableList'
import { UnsplashPicker } from './UnsplashPicker'
import { IconPicker } from './IconPicker'
import { FilePathUploadProps } from '@/features/upload/api/generateUploadUrl'
import { useTranslate } from '@tolgee/react'
type Tabs = 'link' | 'upload' | 'giphy' | 'emoji' | 'unsplash' | 'icon'
@@ -173,31 +174,39 @@ type ContentProps = { onNewUrl: (url: string) => void }
const UploadFileContent = ({
uploadFileProps,
onNewUrl,
}: ContentProps & { uploadFileProps: FilePathUploadProps }) => (
<Flex justify="center" py="2">
<UploadButton
fileType="image"
filePathProps={uploadFileProps}
onFileUploaded={onNewUrl}
colorScheme="blue"
>
Choose an image
</UploadButton>
</Flex>
)
}: ContentProps & { uploadFileProps: FilePathUploadProps }) => {
const { t } = useTranslate()
return (
<Flex justify="center" py="2">
<UploadButton
fileType="image"
filePathProps={uploadFileProps}
onFileUploaded={onNewUrl}
colorScheme="blue"
>
{t('editor.header.uploadTab.uploadButton.label')}
</UploadButton>
</Flex>
)
}
const EmbedLinkContent = ({
defaultUrl,
onNewUrl,
}: ContentProps & { defaultUrl?: string }) => (
<Stack py="2">
<TextInput
placeholder={'Paste the image link...'}
onChange={onNewUrl}
defaultValue={defaultUrl ?? ''}
/>
</Stack>
)
}: ContentProps & { defaultUrl?: string }) => {
const { t } = useTranslate()
return (
<Stack py="2">
<TextInput
placeholder={t('editor.header.linkTab.searchInputPlaceholder.label')}
onChange={onNewUrl}
defaultValue={defaultUrl ?? ''}
/>
</Stack>
)
}
const GiphyContent = ({ onNewUrl }: ContentProps) => (
<GiphyPicker onSubmit={onNewUrl} />

25
apps/builder/src/components/ImageUploadContent/emoji/EmojiSearchableList.tsx
View File

@@ -9,6 +9,7 @@ import {
Text,
} from '@chakra-ui/react'
import { useState, ChangeEvent, useEffect, useRef } from 'react'
import { useTranslate } from '@tolgee/react'
const emojiTags = emojiTagsData as Record<string, string[]>
@@ -41,6 +42,7 @@ export const EmojiSearchableList = ({
const [filteredFlags, setFilteredFlags] = useState(flags)
const [totalDisplayedCategories, setTotalDisplayedCategories] = useState(1)
const [recentEmojis, setRecentEmojis] = useState([])
const { t } = useTranslate()
useEffect(() => {
const recentIconNames = localStorage.getItem(localStorageRecentEmojisKey)
@@ -104,12 +106,15 @@ export const EmojiSearchableList = ({
return (
<Stack>
<ClassicInput placeholder="Search..." onChange={handleSearchChange} />
<ClassicInput
placeholder={t('emojiList.searchInput.placeholder')}
onChange={handleSearchChange}
/>
<Stack ref={scrollContainer} overflow="scroll" maxH="350px" spacing={4}>
{recentEmojis.length > 0 && (
<Stack>
<Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">
RECENT
{t('emojiList.categories.recent.label')}
</Text>
<EmojiGrid emojis={recentEmojis} onEmojiClick={selectEmoji} />
</Stack>
@@ -117,7 +122,7 @@ export const EmojiSearchableList = ({
{filteredPeople.length > 0 && (
<Stack>
<Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">
PEOPLE
{t('emojiList.categories.people.label')}
</Text>
<EmojiGrid emojis={filteredPeople} onEmojiClick={selectEmoji} />
</Stack>
@@ -125,7 +130,7 @@ export const EmojiSearchableList = ({
{filteredAnimals.length > 0 && totalDisplayedCategories >= 2 && (
<Stack>
<Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">
ANIMALS & NATURE
{t('emojiList.categories.animalsAndNature.label')}
</Text>
<EmojiGrid emojis={filteredAnimals} onEmojiClick={selectEmoji} />
</Stack>
@@ -133,7 +138,7 @@ export const EmojiSearchableList = ({
{filteredFood.length > 0 && totalDisplayedCategories >= 3 && (
<Stack>
<Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">
FOOD & DRINK
{t('emojiList.categories.foodAndDrink.label')}
</Text>
<EmojiGrid emojis={filteredFood} onEmojiClick={selectEmoji} />
</Stack>
@@ -141,7 +146,7 @@ export const EmojiSearchableList = ({
{filteredTravel.length > 0 && totalDisplayedCategories >= 4 && (
<Stack>
<Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">
TRAVEL & PLACES
{t('emojiList.categories.travelAndPlaces.label')}
</Text>
<EmojiGrid emojis={filteredTravel} onEmojiClick={selectEmoji} />
</Stack>
@@ -149,7 +154,7 @@ export const EmojiSearchableList = ({
{filteredActivities.length > 0 && totalDisplayedCategories >= 5 && (
<Stack>
<Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">
ACTIVITIES
{t('emojiList.categories.activities.label')}
</Text>
<EmojiGrid emojis={filteredActivities} onEmojiClick={selectEmoji} />
</Stack>
@@ -157,7 +162,7 @@ export const EmojiSearchableList = ({
{filteredObjects.length > 0 && totalDisplayedCategories >= 6 && (
<Stack>
<Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">
OBJECTS
{t('emojiList.categories.objects.label')}
</Text>
<EmojiGrid emojis={filteredObjects} onEmojiClick={selectEmoji} />
</Stack>
@@ -165,7 +170,7 @@ export const EmojiSearchableList = ({
{filteredSymbols.length > 0 && totalDisplayedCategories >= 7 && (
<Stack>
<Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">
SYMBOLS
{t('emojiList.categories.symbols.label')}
</Text>
<EmojiGrid emojis={filteredSymbols} onEmojiClick={selectEmoji} />
</Stack>
@@ -173,7 +178,7 @@ export const EmojiSearchableList = ({
{filteredFlags.length > 0 && totalDisplayedCategories >= 8 && (
<Stack>
<Text fontSize="xs" color="gray.400" fontWeight="semibold" pl="2">
FLAGS
{t('emojiList.categories.flags.label')}
</Text>
<EmojiGrid emojis={filteredFlags} onEmojiClick={selectEmoji} />
</Stack>

2
apps/builder/src/components/logos/AzureAdLogo.tsx
View File

@@ -12,7 +12,7 @@ export const AzureAdLogo = (props: IconProps) => {
<g id="g1016" transform="translate(-63.947 -88.179)">
<path
id="path1008"
fill='#00bef2'
fill="#00bef2"
d="M290 166.3c.4 0 .8.5 1.4 1.4.5.8 42.6 51.3 93.6 112.2 51 60.9 92.6 111 92.4 111.3-.1.3-40.7 33.6-90.2 73.9s-91.6 74.6-93.5 76.2c-3.3 2.7-3.5 2.8-4.7 1.6-.7-.7-42.9-35.2-93.8-76.7S102.8 390.5 103 390c.2-.5 42-50.4 93.1-111s92.9-110.7 93.1-111.5c.2-.8.5-1.2.8-1.2z"
/>
<path

35
apps/builder/src/components/logos/GitlabLogo.tsx
View File

@@ -2,12 +2,33 @@ import { IconProps, Icon } from '@chakra-ui/react'
export const GitlabLogo = (props: IconProps) => (
<Icon viewBox="0 0 256 236" {...props}>
<path d="M128.075 236.075l47.104-144.97H80.97l47.104 144.97z" fill="#E24329" />
<path d="M128.075 236.074L80.97 91.104H14.956l113.119 144.97z" fill="#FC6D26" />
<path d="M14.956 91.104L.642 135.16a9.752 9.752 0 0 0 3.542 10.903l123.891 90.012-113.12-144.97z" fill="#FCA326" />
<path d="M14.956 91.105H80.97L52.601 3.79c-1.46-4.493-7.816-4.492-9.275 0l-28.37 87.315z" fill="#E24329" />
<path d="M128.075 236.074l47.104-144.97h66.015l-113.12 144.97z" fill="#FC6D26" />
<path d="M241.194 91.104l14.314 44.056a9.752 9.752 0 0 1-3.543 10.903l-123.89 90.012 113.119-144.97z" fill="#FCA326" />
<path d="M241.194 91.105h-66.015l28.37-87.315c1.46-4.493 7.816-4.492 9.275 0l28.37 87.315z" fill="#E24329" />
<path
d="M128.075 236.075l47.104-144.97H80.97l47.104 144.97z"
fill="#E24329"
/>
<path
d="M128.075 236.074L80.97 91.104H14.956l113.119 144.97z"
fill="#FC6D26"
/>
<path
d="M14.956 91.104L.642 135.16a9.752 9.752 0 0 0 3.542 10.903l123.891 90.012-113.12-144.97z"
fill="#FCA326"
/>
<path
d="M14.956 91.105H80.97L52.601 3.79c-1.46-4.493-7.816-4.492-9.275 0l-28.37 87.315z"
fill="#E24329"
/>
<path
d="M128.075 236.074l47.104-144.97h66.015l-113.12 144.97z"
fill="#FC6D26"
/>
<path
d="M241.194 91.104l14.314 44.056a9.752 9.752 0 0 1-3.543 10.903l-123.89 90.012 113.119-144.97z"
fill="#FCA326"
/>
<path
d="M241.194 91.105h-66.015l28.37-87.315c1.46-4.493 7.816-4.492 9.275 0l28.37 87.315z"
fill="#E24329"
/>
</Icon>
)