ClickandJoin
/
App
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chatlist

alpha
Jan Umbach 2023-03-02 22:50:00 +01:00
parent caf6f5ebf6
commit 79365c55f1
7 changed files with 215 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/appStart/StartHelper.tsx
View File

@ -20,7 +20,7 @@ import {initKey} from '@caj/helper/storage/bdm/encryption';
import UserManager from '@caj/user/UserManager'; import UserManager from '@caj/user/UserManager';
import MyUserManager from '@caj/user/MyUserManager'; import MyUserManager from '@caj/user/MyUserManager';
import DBSchemas from '@caj/helper/storage/bdm/schemas'; import DBSchemas from '@caj/helper/storage/bdm/schemas';
import {chatType} from '@caj/components/chat/types'; import {chatTags, chatType} from '@caj/components/chat/types';
const AnimationView = animated(View); const AnimationView = animated(View);
@ -33,8 +33,8 @@ function onAppStart() {
console.log('finish'); console.log('finish');
await BigDataManager.databases.users.setEntry({ await BigDataManager.databases.users.setEntry({
UserId: 'test', UserId: 'test',
AccountName: 'TestAcc', AccountName: '#845613',
Username: 'TestAccountVirtual', Username: 'TestGroupVirtual',
Description: 'This is a test account that is not real. ^^', Description: 'This is a test account that is not real. ^^',
FollowersCount: 2, FollowersCount: 2,
FollowingCount: 24, FollowingCount: 24,
@ -54,14 +54,16 @@ function onAppStart() {
appNonSaveVarActions.setChatEntity({ appNonSaveVarActions.setChatEntity({
id: MyUserManager.getSelectedUserId(), id: MyUserManager.getSelectedUserId(),
type: chatType.User, type: chatType.User,
tags: [], tags: [chatTags.GOOD_FRIEND],
unreadMessages: 1234,
}), }),
); );
store.dispatch( store.dispatch(
appNonSaveVarActions.setChatEntity({ appNonSaveVarActions.setChatEntity({
id: 'test', id: 'test',
type: chatType.User, type: chatType.User,
tags: [], tags: [chatTags.GROUP, chatTags.GOOD_FRIEND, chatTags.FRIEND],
unreadMessages: 0,
}), }),
); );
}) })

122
src/caj/components/chat/listChats.tsx
View File

@ -1,12 +1,19 @@
import {
darkThemeStyle,
getBackgroundColor,
themeSelector,
} from '@caj/configs/colors';
import {RootState} from '@caj/redux/store'; import {RootState} from '@caj/redux/store';
import UserManager from '@caj/user/UserManager'; import UserManager from '@caj/user/UserManager';
import {Box, HStack, Text, VStack} from 'native-base'; import {Box, HStack, Text, VStack} from 'native-base';
import {useSelector} from 'react-redux'; import {useSelector} from 'react-redux';
import {start} from 'repl';
import {ProfilePicture} from '../ProfilePicture'; import {ProfilePicture} from '../ProfilePicture';
import {TextSkeleton} from '../simple/Skeleton'; import {TextSkeleton} from '../simple/Skeleton';
import {chatType} from './types'; import {chatType, getTagUI} from './types';
export function ListChats() { export function ListChats() {
const theme = themeSelector();
const chats = useSelector((state: RootState) => state.nonSaveVariables.chats); const chats = useSelector((state: RootState) => state.nonSaveVariables.chats);
const chatActivity = useSelector( const chatActivity = useSelector(
(state: RootState) => state.nonSaveVariables.chatActivity, (state: RootState) => state.nonSaveVariables.chatActivity,
@ -16,8 +23,14 @@ export function ListChats() {
const ppSize = 64; const ppSize = 64;
const tagSize = 24; const tagSize = 24;
const lang = useSelector((state: RootState) => state.appVariables.lang);
return ( return (
<VStack space={space + 'px'} width="100%" marginY={space + 'px'}> <VStack
mt={space * 2 + 'px'}
space={tagSize * 0.3 + space + 'px'}
width="100%"
marginY={space + 'px'}>
{chatActivity.map((chatId, i) => { {chatActivity.map((chatId, i) => {
const chat = chats[chatId]; const chat = chats[chatId];
if (chat.type === chatType.User) { if (chat.type === chatType.User) {
@ -26,20 +39,68 @@ export function ListChats() {
return ( return (
<Box <Box
key={'chatList_i' + i + chatId} key={'chatList_i' + i + chatId}
bg={'black.400'} bg={'blackBG.400'}
borderTopRadius={ppSize / 2 + 'px'} {...darkThemeStyle(theme, 'black.400')}
borderBottomRightRadius={ppSize / 2 + 'px'} borderRadius={ppSize / 2 + 'px'}
borderBottomLeftRadius={tagSize / 2 + 'px'} borderTopRightRadius={
chat.unreadMessages !== 0
? tagSize / 2 + 'px'
: ppSize / 2 + 'px'
}
borderBottomLeftRadius={
chat.tags.length > 0 ? tagSize / 2 + 'px' : ppSize / 2 + 'px'
}
marginX={space + 'px'} marginX={space + 'px'}
padding={space + 'px'}> padding={space + 'px'}>
<VStack space={space + 'px'}> <HStack
position={'absolute'}
space={space * 2 + 'px'}
right={space + 'px'}
top={-tagSize * 0.3 + 'px'}>
<Box
height={tagSize + 'px'}
paddingX={tagSize / 3 + 'px'}
borderRadius={tagSize / 2}
bg={'#666'}>
<TextSkeleton
color={'#eee'}
SkeletonProps={{
lines: 1,
width: '75px',
}}
lineHeight={tagSize + 'px'}
fontSize={tagSize / 1.75 + 'px'}>
{user.AccountName.data}
</TextSkeleton>
</Box>
<Box
alignItems={'center'}
height={tagSize + 'px'}
paddingX={tagSize / 2.75 + 'px'}
mt={tagSize * 0.3 + space + 'px'}
borderRadius={tagSize / 2}
bg={'primary.600'}
opacity={chat.unreadMessages === 0 ? 0 : 1}>
<TextSkeleton
color={'#fff'}
SkeletonProps={{
lines: 1,
width: '75px',
}}
lineHeight={tagSize + 'px'}
fontSize={tagSize / 1.75 + 'px'}>
{chat.unreadMessages}
</TextSkeleton>
</Box>
</HStack>
<VStack>
<HStack space={space + 'px'}> <HStack space={space + 'px'}>
<ProfilePicture <ProfilePicture
UserId={chatId} UserId={chatId}
size={ppSize}></ProfilePicture> size={ppSize}></ProfilePicture>
<VStack> <VStack mt={ppSize / 6 + 'px'}>
<TextSkeleton <TextSkeleton
lineHeight={ppSize / 2.5 + 'px'} lineHeight={ppSize / 3 + 'px'}
numberOfLines={1} numberOfLines={1}
SkeletonProps={{ SkeletonProps={{
lines: 1, lines: 1,
@ -49,28 +110,43 @@ export function ListChats() {
{user.Username.data} {user.Username.data}
</TextSkeleton> </TextSkeleton>
<TextSkeleton <TextSkeleton
lineHeight={ppSize / 2.5 + 'px'} lineHeight={ppSize / 3 + 'px'}
numberOfLines={1} numberOfLines={1}
SkeletonProps={{ SkeletonProps={{
lines: 1, lines: 1,
width: '160px', width: '160px',
}} }}
color="white.400"> color="white.700">
{user.Username.data} {'I love Chicken McNuggets von Burgerking'}
</TextSkeleton> </TextSkeleton>
</VStack> </VStack>
</HStack> </HStack>
<HStack> {chat.tags.length > 0 ? (
<Box <HStack flexWrap={'wrap'}>
height={tagSize + 'px'} {chat.tags.map((tag, i) => {
paddingX={tagSize / 2 + 'px'} const tagObj = getTagUI(tag, lang);
borderRadius={tagSize / 2}
bg={'lime.300'}> let tagName = tagObj.name;
<Text color={'#000'} lineHeight={tagSize + 'px'}> return (
Friend <Box
</Text> key={'tag' + i + tag + chat.id}
</Box> height={tagSize + 'px'}
</HStack> mr={space + 'px'}
mt={space + 'px'}
paddingX={tagSize / 3 + 'px'}
borderRadius={tagSize / 2}
bg={tagObj.background}>
<Text
color={tagObj.textColor}
lineHeight={tagSize + 'px'}
fontSize={tagSize / 1.75 + 'px'}>
{tagName}
</Text>
</Box>
);
})}
</HStack>
) : null}
</VStack> </VStack>
</Box> </Box>
); );

60
src/caj/components/chat/types.ts
View File

@ -1,23 +1,63 @@
import { UserId } from "@caj/configs/types" import {UserId} from '@caj/configs/types';
import LangFormat from '@caj/lang/default';
type GroupId = string; type GroupId = string;
export enum chatType { export enum chatType {
User = 0, User = 0,
Group = 1, Group = 1,
} }
export enum chatTags { export enum chatTags {
FRIEND, GROUP = 0,
GROUP, FRIEND = 1,
GOOD_FRIENDS, GOOD_FRIEND = 2,
}
interface tagUIType {
name: string;
background: string;
textColor?: string;
}
interface tagUITypeFinal extends tagUIType {
textColor: string;
}
const tagUI: {[key in chatTags]: tagUIType} = {
[chatTags.GROUP]: {
name: 'Group',
background: '#37f',
},
[chatTags.FRIEND]: {
name: 'Friend',
background: 'lime.300',
textColor: '#111',
},
[chatTags.GOOD_FRIEND]: {
name: 'Good friend',
background: 'lime.600',
},
};
export function getTagUI(tagKey: chatTags, lang?: LangFormat): tagUITypeFinal {
let tag = tagUI[tagKey];
tag.textColor = tag.textColor || '#fff';
if (lang !== undefined && lang.chat.tags.names[tagKey] !== undefined) {
tag.name = lang.chat.tags.names[tagKey];
}
return tag as tagUITypeFinal;
} }
export type chatId = UserId | GroupId; export type chatId = UserId | GroupId;
export interface chatEntity { export interface chatEntity {
type: chatType; type: chatType;
id: chatId; id: chatId;
title?: string; title?: string;
tags: chatTags[]; unreadMessages: number;
tags: chatTags[];
} }

8
src/caj/components/userUI/AccountInfoBanner.tsx
View File

@ -84,7 +84,7 @@ export default function AccountInfoBanner(props: {
</TextSkeleton> </TextSkeleton>
<TextSkeleton <TextSkeleton
SkeletonProps={{lines: 1, width: '120px'}} SkeletonProps={{lines: 1, width: '120px'}}
color="white.100" color="white.900"
margin={0} margin={0}
padding={0}> padding={0}>
{user.AccountName.data} {user.AccountName.data}
@ -104,13 +104,13 @@ export default function AccountInfoBanner(props: {
<TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}> <TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
{user.FollowingCount.data} {user.FollowingCount.data}
</TextSkeleton> </TextSkeleton>
<Text color="white.100">{lang.account.profile.follower}</Text> <Text color="white.900">{lang.account.profile.follower}</Text>
</VStack> </VStack>
<VStack alignItems={'center'}> <VStack alignItems={'center'}>
<TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}> <TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
{user.FollowersCount.data} {user.FollowersCount.data}
</TextSkeleton> </TextSkeleton>
<Text color="white.100">{lang.account.profile.following}</Text> <Text color="white.900">{lang.account.profile.following}</Text>
</VStack> </VStack>
</HStack> </HStack>
<Box <Box
@ -149,7 +149,7 @@ export default function AccountInfoBanner(props: {
width: '80%', width: '80%',
mx: spacing * 2 + 'px', mx: spacing * 2 + 'px',
}} }}
color="white.100"> color="white.900">
{user.Description.data} {user.Description.data}
</TextSkeleton> </TextSkeleton>
</Box> </Box>

63
src/caj/configs/colors.ts
View File

@ -46,15 +46,15 @@ export const theme = (_theme: ThemeMode) => {
}, },
{ {
//light //light
900: '#e9e8f0', 100: '#efefef',
800: '#e4e3ec', 200: '#dfdfdf',
700: '#dfdde8', 300: '#cececf',
600: '#dad8e4', 400: '#bebebf',
500: '#d7d5e1', 500: '#aeaeb0',
400: '#d4d2de', 600: '#9e9ea0',
300: '#d2d0db', 700: '#8e8e90',
200: '#cfcdd8', 800: '#7d7d80',
100: '#cdcbd5', 900: '#6d6d70',
}, },
][_theme], ][_theme],
blackBG: [ blackBG: [
@ -84,15 +84,15 @@ export const theme = (_theme: ThemeMode) => {
}, },
{ {
//light //light
900: '#e9e8f0', 900: '#fbfafc',
800: '#e4e3ec', 800: '#f8f8fb',
700: '#dfdde8', 700: '#f6f6f9',
600: '#dad8e4', 600: '#f4f4f8',
500: '#d7d5e1', 500: '#f2f1f6',
400: '#d4d2de', 400: '#f0eff5',
300: '#d2d0db', 300: '#ededf3',
200: '#cfcdd8', 200: '#ebeaf2',
100: '#cdcbd5', 100: '#e9e8f0',
}, },
][_theme], ][_theme],
white: [ white: [
@ -112,14 +112,14 @@ export const theme = (_theme: ThemeMode) => {
//dark //dark
900: '#e9e8f0', 900: '#e9e8f0',
800: '#e4e3ec', 800: '#d2d1d8',
700: '#dfdde8', 700: '#babac0',
600: '#dad8e4', 600: '#a3a2a8',
500: '#d7d5e1', 500: '#8c8b90',
400: '#d4d2de', 400: '#757478',
300: '#d2d0db', 300: '#5d5d60',
200: '#cfcdd8', 200: '#464648',
100: '#cdcbd5', 100: '#2f2e30',
}, },
{ {
//light //light
@ -162,7 +162,7 @@ export const theme = (_theme: ThemeMode) => {
fontFamily: 'Outfit-Regular', fontFamily: 'Outfit-Regular',
colorScheme: 'black', colorScheme: 'black',
}, },
spaces:{}, spaces: {},
sizes: { sizes: {
xl: { xl: {
fontSize: '64px', fontSize: '64px',
@ -191,14 +191,17 @@ export const theme = (_theme: ThemeMode) => {
}); });
}; };
export function getBackgroundColor(tm: ThemeMode): string { export function getBackgroundColor(tm: ThemeMode /*, index?: number*/): string {
let i = /*index ||*/ 0;
i += 2;
switch (tm) { switch (tm) {
case ThemeMode.Light: case ThemeMode.Light:
return '#fff'; return ['#fff', '#e8e8e9', '#d1d2d3', '#bbbbbd', '#a4a4a7'][0];
case ThemeMode.Darkest: case ThemeMode.Darkest:
return '#000'; return '#000';
default: default:
return '#1b1c22'; return ['#16161b', '##18191f', '#1b1c22', '#323338', '#49494e'][i];
} }
} }

15
src/caj/lang/default.ts
View File

@ -1,3 +1,4 @@
import {chatTags} from '@caj/components/chat/types';
import {type} from 'os'; import {type} from 'os';
interface LangDetails { interface LangDetails {
@ -21,10 +22,16 @@ export default interface LangFormat {
info: string; info: string;
error: string; error: string;
success: string; success: string;
account: {profile: { chat: {
follower: string, tags: {
following: string, names: {[key in chatTags]: string};
}, };
};
account: {
profile: {
follower: string;
following: string;
};
login: { login: {
title: string; title: string;
wrongEmPw: string; wrongEmPw: string;

13
src/caj/lang/en.ts
View File

@ -20,10 +20,19 @@ export const lang: LangFormat = {
info: 'Info', info: 'Info',
error: 'Error', error: 'Error',
success: 'Success', success: 'Success',
chat: {
tags: {
names: {
0: 'Group',
1: 'Friend',
2: 'Good friend',
},
},
},
account: { account: {
profile: { profile: {
follower: "Follower", follower: 'Follower',
following: "Following", following: 'Following',
}, },
login: { login: {
title: 'Log in', title: 'Log in',