mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-13 17:10:06 +00:00
emojis and sticker user settings - WIP
This commit is contained in:
parent
c1ef616409
commit
9d812a6abc
src/app/features/settings
|
@ -11,6 +11,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
|||
import { UserAvatar } from '../../components/user-avatar';
|
||||
import { nameInitials } from '../../utils/common';
|
||||
import { Notifications } from './notifications';
|
||||
import { EmojisStickers } from './emojis-stickers';
|
||||
import { DeveloperTools } from './developer-tools';
|
||||
import { About } from './about';
|
||||
|
||||
|
@ -170,6 +171,9 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
|
|||
{activePage === SettingsPages.NotificationPage && (
|
||||
<Notifications requestClose={handlePageRequestClose} />
|
||||
)}
|
||||
{activePage === SettingsPages.EmojisStickersPage && (
|
||||
<EmojisStickers requestClose={handlePageRequestClose} />
|
||||
)}
|
||||
{activePage === SettingsPages.DeveloperToolsPage && (
|
||||
<DeveloperTools requestClose={handlePageRequestClose} />
|
||||
)}
|
||||
|
|
39
src/app/features/settings/emojis-stickers/EmojisStickers.tsx
Normal file
39
src/app/features/settings/emojis-stickers/EmojisStickers.tsx
Normal file
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
|
||||
import { Page, PageContent, PageHeader } from '../../../components/page';
|
||||
import { GlobalPacks } from './GlobalPacks';
|
||||
import { UserPack } from './UserPack';
|
||||
|
||||
type EmojisStickersProps = {
|
||||
requestClose: () => void;
|
||||
};
|
||||
export function EmojisStickers({ requestClose }: EmojisStickersProps) {
|
||||
return (
|
||||
<Page>
|
||||
<PageHeader outlined={false}>
|
||||
<Box grow="Yes" gap="200">
|
||||
<Box grow="Yes" alignItems="Center" gap="200">
|
||||
<Text size="H3" truncate>
|
||||
Emojis & Stickers
|
||||
</Text>
|
||||
</Box>
|
||||
<Box shrink="No">
|
||||
<IconButton onClick={requestClose} variant="Surface">
|
||||
<Icon src={Icons.Cross} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</PageHeader>
|
||||
<Box grow="Yes">
|
||||
<Scroll hideTrack visibility="Hover">
|
||||
<PageContent>
|
||||
<Box direction="Column" gap="700">
|
||||
<UserPack />
|
||||
<GlobalPacks />
|
||||
</Box>
|
||||
</PageContent>
|
||||
</Scroll>
|
||||
</Box>
|
||||
</Page>
|
||||
);
|
||||
}
|
88
src/app/features/settings/emojis-stickers/GlobalPacks.tsx
Normal file
88
src/app/features/settings/emojis-stickers/GlobalPacks.tsx
Normal file
|
@ -0,0 +1,88 @@
|
|||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
Button,
|
||||
Icon,
|
||||
Icons,
|
||||
IconButton,
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
AvatarFallback,
|
||||
} from 'folds';
|
||||
import { useGlobalImagePacks } from '../../../hooks/useImagePacks';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { ImageUsage } from '../../../plugins/custom-emoji';
|
||||
import { LineClamp2 } from '../../../styles/Text.css';
|
||||
|
||||
export function GlobalPacks() {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
const globalPacks = useGlobalImagePacks();
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Globally Accessible</Text>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title="Select Pack"
|
||||
description="Pick emojis and stickers pack to use in all rooms."
|
||||
after={
|
||||
<Button variant="Secondary" fill="Soft" size="300" radii="300" outlined>
|
||||
<Text size="B300">Select</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
{globalPacks.map((pack) => {
|
||||
const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
|
||||
const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
|
||||
|
||||
return (
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title={pack.meta.name ?? 'Unknown'}
|
||||
description={<span className={LineClamp2}>{pack.meta.attribution}</span>}
|
||||
before={
|
||||
<Box alignItems="Center" gap="300">
|
||||
<IconButton size="300" radii="Pill" variant="Secondary">
|
||||
<Icon src={Icons.Cross} size="100" />
|
||||
</IconButton>
|
||||
<Avatar size="300" radii="300">
|
||||
{avatarUrl ? (
|
||||
<AvatarImage style={{ objectFit: 'contain' }} src={avatarUrl} />
|
||||
) : (
|
||||
<AvatarFallback>
|
||||
<Icon size="400" src={Icons.Sticker} filled />
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
</Box>
|
||||
}
|
||||
after={
|
||||
<Button variant="Secondary" fill="Soft" size="300" radii="300" outlined>
|
||||
<Text size="B300">View</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
}
|
52
src/app/features/settings/emojis-stickers/UserPack.tsx
Normal file
52
src/app/features/settings/emojis-stickers/UserPack.tsx
Normal file
|
@ -0,0 +1,52 @@
|
|||
import React from 'react';
|
||||
import { Avatar, AvatarFallback, AvatarImage, Box, Button, Icon, Icons, Text } from 'folds';
|
||||
import { useUserImagePack } from '../../../hooks/useImagePacks';
|
||||
import { SequenceCard } from '../../../components/sequence-card';
|
||||
import { SequenceCardStyle } from '../styles.css';
|
||||
import { SettingTile } from '../../../components/setting-tile';
|
||||
import { ImageUsage } from '../../../plugins/custom-emoji';
|
||||
import { useMatrixClient } from '../../../hooks/useMatrixClient';
|
||||
import { mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
|
||||
export function UserPack() {
|
||||
const mx = useMatrixClient();
|
||||
const useAuthentication = useMediaAuthentication();
|
||||
|
||||
const userPack = useUserImagePack();
|
||||
const avatarMxc = userPack?.getAvatarUrl(ImageUsage.Emoticon);
|
||||
const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
|
||||
|
||||
return (
|
||||
<Box direction="Column" gap="100">
|
||||
<Text size="L400">Personal Pack</Text>
|
||||
<SequenceCard
|
||||
className={SequenceCardStyle}
|
||||
variant="SurfaceVariant"
|
||||
direction="Column"
|
||||
gap="400"
|
||||
>
|
||||
<SettingTile
|
||||
title={userPack?.meta.name ?? 'Default'}
|
||||
description={userPack?.meta.attribution}
|
||||
before={
|
||||
<Avatar size="300" radii="300">
|
||||
{avatarUrl ? (
|
||||
<AvatarImage style={{ objectFit: 'contain' }} src={avatarUrl} />
|
||||
) : (
|
||||
<AvatarFallback>
|
||||
<Icon size="400" src={Icons.Sticker} filled />
|
||||
</AvatarFallback>
|
||||
)}
|
||||
</Avatar>
|
||||
}
|
||||
after={
|
||||
<Button variant="Secondary" fill="Soft" size="300" radii="300" outlined>
|
||||
<Text size="B300">View</Text>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</SequenceCard>
|
||||
</Box>
|
||||
);
|
||||
}
|
1
src/app/features/settings/emojis-stickers/index.ts
Normal file
1
src/app/features/settings/emojis-stickers/index.ts
Normal file
|
@ -0,0 +1 @@
|
|||
export * from './EmojisStickers';
|
Loading…
Reference in a new issue