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 MyUserManager from '@caj/user/MyUserManager';
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);
@ -33,8 +33,8 @@ function onAppStart() {
console.log('finish');
await BigDataManager.databases.users.setEntry({
UserId: 'test',
AccountName: 'TestAcc',
Username: 'TestAccountVirtual',
AccountName: '#845613',
Username: 'TestGroupVirtual',
Description: 'This is a test account that is not real. ^^',
FollowersCount: 2,
FollowingCount: 24,
@ -54,14 +54,16 @@ function onAppStart() {
appNonSaveVarActions.setChatEntity({
id: MyUserManager.getSelectedUserId(),
type: chatType.User,
tags: [],
tags: [chatTags.GOOD_FRIEND],
unreadMessages: 1234,
}),
);
store.dispatch(
appNonSaveVarActions.setChatEntity({
id: 'test',
type: chatType.User,
tags: [],
tags: [chatTags.GROUP, chatTags.GOOD_FRIEND, chatTags.FRIEND],
unreadMessages: 0,
}),
);
})

110
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 UserManager from '@caj/user/UserManager';
import {Box, HStack, Text, VStack} from 'native-base';
import {useSelector} from 'react-redux';
import {start} from 'repl';
import {ProfilePicture} from '../ProfilePicture';
import {TextSkeleton} from '../simple/Skeleton';
import {chatType} from './types';
import {chatType, getTagUI} from './types';
export function ListChats() {
const theme = themeSelector();
const chats = useSelector((state: RootState) => state.nonSaveVariables.chats);
const chatActivity = useSelector(
(state: RootState) => state.nonSaveVariables.chatActivity,
@ -16,8 +23,14 @@ export function ListChats() {
const ppSize = 64;
const tagSize = 24;
const lang = useSelector((state: RootState) => state.appVariables.lang);
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) => {
const chat = chats[chatId];
if (chat.type === chatType.User) {
@ -26,20 +39,68 @@ export function ListChats() {
return (
<Box
key={'chatList_i' + i + chatId}
bg={'black.400'}
borderTopRadius={ppSize / 2 + 'px'}
borderBottomRightRadius={ppSize / 2 + 'px'}
borderBottomLeftRadius={tagSize / 2 + 'px'}
bg={'blackBG.400'}
{...darkThemeStyle(theme, 'black.400')}
borderRadius={ppSize / 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'}
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'}>
<ProfilePicture
UserId={chatId}
size={ppSize}></ProfilePicture>
<VStack>
<VStack mt={ppSize / 6 + 'px'}>
<TextSkeleton
lineHeight={ppSize / 2.5 + 'px'}
lineHeight={ppSize / 3 + 'px'}
numberOfLines={1}
SkeletonProps={{
lines: 1,
@ -49,28 +110,43 @@ export function ListChats() {
{user.Username.data}
</TextSkeleton>
<TextSkeleton
lineHeight={ppSize / 2.5 + 'px'}
lineHeight={ppSize / 3 + 'px'}
numberOfLines={1}
SkeletonProps={{
lines: 1,
width: '160px',
}}
color="white.400">
{user.Username.data}
color="white.700">
{'I love Chicken McNuggets von Burgerking'}
</TextSkeleton>
</VStack>
</HStack>
<HStack>
{chat.tags.length > 0 ? (
<HStack flexWrap={'wrap'}>
{chat.tags.map((tag, i) => {
const tagObj = getTagUI(tag, lang);
let tagName = tagObj.name;
return (
<Box
key={'tag' + i + tag + chat.id}
height={tagSize + 'px'}
paddingX={tagSize / 2 + 'px'}
mr={space + 'px'}
mt={space + 'px'}
paddingX={tagSize / 3 + 'px'}
borderRadius={tagSize / 2}
bg={'lime.300'}>
<Text color={'#000'} lineHeight={tagSize + 'px'}>
Friend
bg={tagObj.background}>
<Text
color={tagObj.textColor}
lineHeight={tagSize + 'px'}
fontSize={tagSize / 1.75 + 'px'}>
{tagName}
</Text>
</Box>
);
})}
</HStack>
) : null}
</VStack>
</Box>
);

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

@ -1,4 +1,5 @@
import { UserId } from "@caj/configs/types"
import {UserId} from '@caj/configs/types';
import LangFormat from '@caj/lang/default';
type GroupId = string;
@ -8,9 +9,47 @@ export enum chatType {
}
export enum chatTags {
FRIEND,
GROUP,
GOOD_FRIENDS,
GROUP = 0,
FRIEND = 1,
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;
@ -19,5 +58,6 @@ export interface chatEntity {
type: chatType;
id: chatId;
title?: string;
unreadMessages: number;
tags: chatTags[];
}

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

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

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

@ -46,15 +46,15 @@ export const theme = (_theme: ThemeMode) => {
},
{
//light
900: '#e9e8f0',
800: '#e4e3ec',
700: '#dfdde8',
600: '#dad8e4',
500: '#d7d5e1',
400: '#d4d2de',
300: '#d2d0db',
200: '#cfcdd8',
100: '#cdcbd5',
100: '#efefef',
200: '#dfdfdf',
300: '#cececf',
400: '#bebebf',
500: '#aeaeb0',
600: '#9e9ea0',
700: '#8e8e90',
800: '#7d7d80',
900: '#6d6d70',
},
][_theme],
blackBG: [
@ -84,15 +84,15 @@ export const theme = (_theme: ThemeMode) => {
},
{
//light
900: '#e9e8f0',
800: '#e4e3ec',
700: '#dfdde8',
600: '#dad8e4',
500: '#d7d5e1',
400: '#d4d2de',
300: '#d2d0db',
200: '#cfcdd8',
100: '#cdcbd5',
900: '#fbfafc',
800: '#f8f8fb',
700: '#f6f6f9',
600: '#f4f4f8',
500: '#f2f1f6',
400: '#f0eff5',
300: '#ededf3',
200: '#ebeaf2',
100: '#e9e8f0',
},
][_theme],
white: [
@ -112,14 +112,14 @@ export const theme = (_theme: ThemeMode) => {
//dark
900: '#e9e8f0',
800: '#e4e3ec',
700: '#dfdde8',
600: '#dad8e4',
500: '#d7d5e1',
400: '#d4d2de',
300: '#d2d0db',
200: '#cfcdd8',
100: '#cdcbd5',
800: '#d2d1d8',
700: '#babac0',
600: '#a3a2a8',
500: '#8c8b90',
400: '#757478',
300: '#5d5d60',
200: '#464648',
100: '#2f2e30',
},
{
//light
@ -162,7 +162,7 @@ export const theme = (_theme: ThemeMode) => {
fontFamily: 'Outfit-Regular',
colorScheme: 'black',
},
spaces:{},
spaces: {},
sizes: {
xl: {
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) {
case ThemeMode.Light:
return '#fff';
return ['#fff', '#e8e8e9', '#d1d2d3', '#bbbbbd', '#a4a4a7'][0];
case ThemeMode.Darkest:
return '#000';
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';
interface LangDetails {
@ -21,10 +22,16 @@ export default interface LangFormat {
info: string;
error: string;
success: string;
account: {profile: {
follower: string,
following: string,
},
chat: {
tags: {
names: {[key in chatTags]: string};
};
};
account: {
profile: {
follower: string;
following: string;
};
login: {
title: string;
wrongEmPw: string;

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

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