Skip to content

Commit

Permalink
Merge pull request #1073 from The-Commit-Company/translations
Browse files Browse the repository at this point in the history 
feat: translations
  • Loading branch information
@nikkothari22
nikkothari22 authored Oct 6, 2024
2 parents 12cd920 + 381b273 commit 88d2263
Show file tree
Hide file tree
Showing 21 changed files with 160 additions and 110 deletions.
17 changes: 9 additions & 8 deletions ...mponents/feature/channel-details/edit-channel-description/EditChannelDescriptionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Box, Dialog, Flex, Button, TextArea, Text } from "@radix-ui/themes"
import { Loader } from "@/components/common/Loader"
import { ErrorText, Label } from "@/components/common/Form"
import { toast } from 'sonner'
import { __ } from "@/utils/translations"

interface RenameChannelForm {
channel_description: string
Expand All @@ -30,7 +31,7 @@ export const EditChannelDescriptionModalContent = ({ channelData, onClose }: Ren
updateDoc("Raven Channel", channelData?.name ?? null, {
channel_description: data.channel_description
}).then(() => {
toast.success("Channel description updated")
toast.success(__("Channel description updated"))
onClose()
})
}
Expand All @@ -39,36 +40,36 @@ export const EditChannelDescriptionModalContent = ({ channelData, onClose }: Ren
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>

<Dialog.Title>{channelData && channelData?.channel_description && channelData?.channel_description.length > 0 ? 'Edit description' : 'Add description'}</Dialog.Title>
<Dialog.Title>{channelData && channelData?.channel_description && channelData?.channel_description.length > 0 ? __('Edit description') : __('Add description')}</Dialog.Title>

<Flex gap='2' direction='column' width='100%'>
<ErrorBanner error={error} />
<Box width='100%'>
<Label htmlFor='channel_description'>Channel description</Label>
<Label htmlFor='channel_description'>{__("Channel description")}</Label>
<TextArea
maxLength={140}
id='channel_description'
placeholder='Add description'
placeholder={__('Add description')}
{...register('channel_description', {
maxLength: {
value: 140,
message: "Channel description cannot be more than 200 characters."
message: __("Channel description cannot be more than 200 characters.")
}
})}
aria-invalid={errors.channel_description ? 'true' : 'false'}
/>
<Text size='1' weight='light'>This is how people will know what this channel is about.</Text>
<Text size='1' weight='light'>{__("This is how people will know what this channel is about.")}</Text>
{errors?.channel_description && <ErrorText>{errors.channel_description?.message}</ErrorText>}
</Box>
</Flex>

<Flex gap="3" mt="6" justify="end" align='center'>
<Dialog.Close disabled={updatingDoc}>
<Button variant="soft" color="gray">Cancel</Button>
<Button variant="soft" color="gray">{__("Cancel")}</Button>
</Dialog.Close>
<Button type='submit' disabled={updatingDoc}>
{updatingDoc && <Loader />}
{updatingDoc ? "Saving" : "Save"}
{updatingDoc ? __("Saving") : __("Save")}
</Button>
</Flex>

Expand Down
7 changes: 4 additions & 3 deletions frontend/src/components/feature/channels/ChannelList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { RiPushpinLine, RiUnpinLine } from "react-icons/ri"
import { FrappeConfig, FrappeContext } from "frappe-react-sdk"
import { RavenUser } from "@/types/Raven/RavenUser"
import clsx from "clsx"
import { __ } from "@/utils/translations"

export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }) => {

Expand Down Expand Up @@ -64,7 +65,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
<SidebarGroupItem className={'gap-1 pl-1'}>
<Flex width='100%' justify='between' align='center' gap='2' pr='2' className="group">
<Flex align='center' gap='2' width='100%' onClick={toggle} className="cursor-default select-none">
<SidebarGroupLabel>Channels</SidebarGroupLabel>
<SidebarGroupLabel>{__("Channels")}</SidebarGroupLabel>
<Box className={clsx('transition-opacity ease-in-out duration-200',
!showData && unread_count && totalUnreadCount > 0 ? 'opacity-100' : 'opacity-0')}>
<SidebarBadge>
Expand Down Expand Up @@ -177,15 +178,15 @@ const PinButton = ({ channelID }: { channelID: string }) => {
className='flex justify-start gap-2 min-w-24'
>
<RiUnpinLine size='18' />
Remove Pin
{__("Remove Pin")}
</ContextMenu.Item>
}
return <ContextMenu.Item
onClick={onClick}
className='flex justify-start gap-2 min-w-24'
>
<RiPushpinLine size='18' />
Pin
{__("Pin")}
</ContextMenu.Item>

}
41 changes: 21 additions & 20 deletions frontend/src/components/feature/channels/CreateChannelModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { toast } from 'sonner'
import { FiPlus } from 'react-icons/fi'
import { useIsDesktop } from '@/hooks/useMediaQuery'
import { Drawer, DrawerContent, DrawerTrigger } from '@/components/layout/Drawer'
import { __ } from '@/utils/translations'

interface ChannelCreationForm {
channel_name: string,
Expand Down Expand Up @@ -102,7 +103,7 @@ const CreateChannelContent = ({ updateChannelList, isOpen, setIsOpen }: { update
const onSubmit = (data: ChannelCreationForm) => {
createDoc('Raven Channel', data).then(result => {
if (result) {
toast.success('Channel created')
toast.success(__("Channel created"))
onClose(result.name)
}
})
Expand All @@ -117,20 +118,20 @@ const CreateChannelContent = ({ updateChannelList, isOpen, setIsOpen }: { update
case 'Private':
return {
channelIcon: <BiLockAlt />,
header: 'Create a private channel',
helperText: 'When a channel is set to private, it can only be viewed or joined by invitation.'
header: __("Create a private channel"),
helperText: __('When a channel is set to private, it can only be viewed or joined by invitation.')
}
case 'Open':
return {
channelIcon: <BiGlobe />,
header: 'Create an open channel',
helperText: 'When a channel is set to open, everyone is a member.'
header: __("Create an open channel"),
helperText: __('When a channel is set to open, everyone is a member.')
}
default:
return {
channelIcon: <BiHash />,
header: 'Create a public channel',
helperText: 'When a channel is set to public, anyone can join the channel and read messages, but only members can post messages.'
header: __('Create a public channel'),
helperText: __('When a channel is set to public, anyone can join the channel and read messages, but only members can post messages.')
}
}
}, [channelType])
Expand All @@ -143,32 +144,32 @@ const CreateChannelContent = ({ updateChannelList, isOpen, setIsOpen }: { update
{header}
</Dialog.Title>
<Dialog.Description size='2'>
Channels are where your team communicates. They are best when organized around a topic - #development, for example.
{__("Channels are where your team communicates. They are best when organized around a topic - #development, for example.")}
</Dialog.Description>
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>
<Flex direction='column' gap='4' py='4'>
<ErrorBanner error={channelCreationError} />
<Box>
<Label htmlFor='channel_name' isRequired>Name</Label>
<Label htmlFor='channel_name' isRequired>{__("Name")}</Label>
<Controller
name='channel_name'
control={control}
rules={{
required: "Please add a channel name",
required: __("Please add a channel name"),
maxLength: {
value: 50,
message: "Channel name cannot be more than 50 characters."
message: __("Channel name cannot be more than {0} characters.", ["50"])
},
minLength: {
value: 3,
message: "Channel name cannot be less than 3 characters."
message: __("Channel name cannot be less than {0} characters.", ["3"])
},
pattern: {
// no special characters allowed
// cannot start with a space
value: /^[a-zA-Z0-9][a-zA-Z0-9-]*$/,
message: "Channel name can only contain letters, numbers and hyphens."
message: __("Channel name can only contain letters, numbers and hyphens.")
}
}}
render={({ field, fieldState: { error } }) => (
Expand All @@ -194,15 +195,15 @@ const CreateChannelContent = ({ updateChannelList, isOpen, setIsOpen }: { update
</Box>

<Box>
<Label htmlFor='channel_description'>Description <Text as='span' weight='light'>(optional)</Text></Label>
<Label htmlFor='channel_description'>{__("Description")} <Text as='span' weight='light'>({__("optional")})</Text></Label>
<TextArea
maxLength={140}
id='channel_description'
placeholder='Great wine and food. What could go wrong?'
{...register('channel_description', {
maxLength: {
value: 140,
message: "Channel description cannot be more than 140 characters."
message: __("Channel description cannot be more than {0} characters.", ["140"])
}
})}
aria-invalid={errors.channel_description ? 'true' : 'false'}
Expand All @@ -225,17 +226,17 @@ const CreateChannelContent = ({ updateChannelList, isOpen, setIsOpen }: { update
<Flex gap="4">
<Text as="label" size="2">
<Flex gap="2">
<RadioGroup.Item value="Public" /> Public
<RadioGroup.Item value="Public" /> {__("Public")}
</Flex>
</Text>
<Text as="label" size="2">
<Flex gap="2">
<RadioGroup.Item value="Private" /> Private
<RadioGroup.Item value="Private" /> {__("Private")}
</Flex>
</Text>
<Text as="label" size="2">
<Flex gap="2">
<RadioGroup.Item value="Open" /> Open
<RadioGroup.Item value="Open" /> {__("Open")}
</Flex>
</Text>
</Flex>
Expand All @@ -251,12 +252,12 @@ const CreateChannelContent = ({ updateChannelList, isOpen, setIsOpen }: { update
<Flex gap="3" mt="4" justify="end">
<Dialog.Close disabled={creatingChannel}>
<Button variant="soft" color="gray">
Cancel
{__("Cancel")}
</Button>
</Dialog.Close>
<Button type='submit' disabled={creatingChannel}>
{creatingChannel && <Loader />}
{creatingChannel ? "Saving" : "Save"}
{creatingChannel ? __("Saving") : __("Save")}
</Button>
</Flex>
</form>
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/components/feature/direct-messages/DirectMessageList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useStickyState } from "@/hooks/useStickyState"
import clsx from "clsx"
import { UserFields, UserListContext } from "@/utils/users/UserListProvider"
import { replaceCurrentUserFromDMChannelName } from "@/utils/operations"
import { __ } from "@/utils/translations"

export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCountData }) => {

Expand All @@ -37,7 +38,7 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount
<SidebarGroupItem className={'gap-1 pl-1'}>
<Flex width='100%' justify='between' align='center' gap='2' pr='2' className="group">
<Flex align='center' gap='2' width='100%' onClick={toggle} className="cursor-default select-none">
<SidebarGroupLabel className="pt-0.5">Members</SidebarGroupLabel>
<SidebarGroupLabel className="pt-0.5">{__("Members")}</SidebarGroupLabel>
<Box className={clsx('transition-opacity ease-in-out duration-200', !showData && unread_count && unread_count?.total_unread_count_in_dms > 0 ? 'opacity-100' : 'opacity-0')}>
<SidebarBadge>{unread_count?.total_unread_count_in_dms}</SidebarBadge>
</Box>
Expand Down Expand Up @@ -137,7 +138,7 @@ const ExtraUsersItemList = () => {
mutate()
})
.catch((e) => {
toast.error('Could not create channel', {
toast.error(__("Could not create channel"), {
description: getErrorMessage(e)
})
})
Expand Down
15 changes: 8 additions & 7 deletions frontend/src/components/feature/userSettings/AvailabilityStatus/SetUserAvailabilityMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { DropdownMenu, Flex } from '@radix-ui/themes'
import { useUserData } from '@/hooks/useUserData'
import { GrPowerReset } from 'react-icons/gr'
import useCurrentRavenUser from '@/hooks/useCurrentRavenUser'
import { __ } from '@/utils/translations'

export type AvailabilityStatus = 'Available' | 'Away' | 'Do not disturb' | 'Invisible' | ''

Expand All @@ -24,7 +25,7 @@ export const SetUserAvailabilityMenu = () => {
fieldname: 'availability_status',
value: status
}).then(() => {
toast.success("User availability updated")
toast.success(__("User availability updated"))
mutate()
})
}, [userData.name])
Expand All @@ -49,7 +50,7 @@ export const SetUserAvailabilityMenu = () => {
{getStatusText('Invisible')}
</DropdownMenu.Item>
<DropdownMenu.Item className={'flex justify-normal gap-2'} color='gray' onClick={() => setAvailabilityStatus('')}>
<GrPowerReset fontSize={'0.7rem'} /> Reset
<GrPowerReset fontSize={'0.7rem'} /> {__("Reset")}
</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
Expand All @@ -59,14 +60,14 @@ export const SetUserAvailabilityMenu = () => {
export const getStatusText = (status: AvailabilityStatus) => {
switch (status) {
case 'Available':
return <><BiSolidCircle color={'green'} fontSize={'0.7rem'} /> Available</>
return <><BiSolidCircle color={'green'} fontSize={'0.7rem'} /> {__("Available")}</>
case 'Away':
return <><MdWatchLater color={'#FFAA33'} fontSize={'0.8rem'} /> Away</>
return <><MdWatchLater color={'#FFAA33'} fontSize={'0.8rem'} /> {__("Away")}</>
case 'Do not disturb':
return <><FaCircleMinus color={'#D22B2B'} fontSize={'0.7rem'} /> Do not disturb</>
return <><FaCircleMinus color={'#D22B2B'} fontSize={'0.7rem'} /> {__("Do not disturb")}</>
case 'Invisible':
return <><FaCircleDot className={'text-gray-400'} fontSize={'0.7rem'} /> Invisible</>
return <><FaCircleDot className={'text-gray-400'} fontSize={'0.7rem'} /> {__("Invisible")}</>
default:
return <><BiSolidCircle color={'green'} fontSize={'0.7rem'} /> Available</>
return <><BiSolidCircle color={'green'} fontSize={'0.7rem'} /> {__("Available")}</>
}
}
Loading

0 comments on commit 88d2263

Please sign in to comment.