martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-27 03:55:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rendering thread

Browse Source
This commit is contained in:
balzack 2024-12-30 12:46:54 -08:00
parent e0a24445b4
commit 07a5a1d59d
3 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/mobile/src/conversation/Conversation.styled.ts
View File

@ -27,9 +27,11 @@ export const styles = StyleSheet.create({
paddingTop: 16, paddingTop: 16,
position: 'absolute', position: 'absolute',
top: 0, top: 0,
opacity: 0.5,
}, },
loading: { loading: {
position: 'absolute', position: 'absolute',
opacity: 0.3,
}, },
empty: { empty: {
position: 'absolute', position: 'absolute',

15
app/client/mobile/src/message/Message.styled.ts
View File

@ -35,7 +35,6 @@ export const styles = StyleSheet.create({
alignItems: 'flexStart', alignItems: 'flexStart',
width: '100%', width: '100%',
lineHeight: '16', lineHeight: '16',
paddingBottom: '4',
gap: '16', gap: '16',
position: 'relative', position: 'relative',
}, },
@ -47,7 +46,6 @@ export const styles = StyleSheet.create({
}, },
handle: { handle: {
fontSize: 14, fontSize: 14,
fontWeight: 'bold',
}, },
unknown: { unknown: {
fontSize: 14, fontSize: 14,
@ -60,6 +58,19 @@ export const styles = StyleSheet.create({
timestamp: { timestamp: {
fontSize: 12, fontSize: 12,
}, },
options: {
display: 'flex',
flexDirection: 'row',
position: 'absolute',
top: 0,
right: 0,
borderRadius: 8,
},
option: {
backgroundColor: 'transparent',
padding: 0,
margin: 0,
},
padding: { padding: {
paddingLeft: 12, paddingLeft: 12,
paddingRight: 12, paddingRight: 12,

18
app/client/mobile/src/message/Message.tsx
View File

@ -1,7 +1,7 @@
import { useRef, useEffect, useState, useCallback } from 'react'; import { useRef, useEffect, useState, useCallback } from 'react';
import { avatar } from '../constants/Icons' import { avatar } from '../constants/Icons'
import { View, Image } from 'react-native'; import { Pressable, View, Image } from 'react-native';
import {Icon, Text, IconButton, Divider} from 'react-native-paper'; import {Icon, Text, IconButton, Surface, Divider} from 'react-native-paper';
import { Topic, Card, Profile } from 'databag-client-sdk'; import { Topic, Card, Profile } from 'databag-client-sdk';
import { ImageAsset } from './imageAsset/ImageAsset'; import { ImageAsset } from './imageAsset/ImageAsset';
import { AudioAsset } from './audioAsset/AudioAsset'; import { AudioAsset } from './audioAsset/AudioAsset';
@ -22,6 +22,7 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
const [editing, setEditing] = useState(false); const [editing, setEditing] = useState(false);
const [editText, setEditText] = useState(''); const [editText, setEditText] = useState('');
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const [options, setOptions] = useState(false);
return ( return (
<View style={styles.message}> <View style={styles.message}>
@ -29,7 +30,7 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
<View style={styles.content}> <View style={styles.content}>
<Image style={styles.logo} resizeMode={'contain'} source={{uri: logoUrl}} /> <Image style={styles.logo} resizeMode={'contain'} source={{uri: logoUrl}} />
<View style={styles.body}> <View style={styles.body}>
<View style={styles.header}> <Pressable style={styles.header} onPress={()=>setOptions(!options)}>
<View style={styles.name}> <View style={styles.name}>
{ name && ( { name && (
<Text style={styles.handle}>{ name }</Text> <Text style={styles.handle}>{ name }</Text>
@ -42,7 +43,7 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
)} )}
<Text style={styles.timestamp}> { timestamp }</Text> <Text style={styles.timestamp}> { timestamp }</Text>
</View> </View>
</View> </Pressable>
<View style={styles.padding}> <View style={styles.padding}>
{! locked && status === 'confirmed' && editing && ( {! locked && status === 'confirmed' && editing && (
<View style={styles.editing}> <View style={styles.editing}>
@ -62,6 +63,15 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
</View> </View>
</View> </View>
</View> </View>
{ options && (
<Surface style={styles.options}>
<IconButton style={styles.option} loading={false} compact="true" mode="contained" icon="share-variant-outline" size={24} onPress={() => {}} />
<IconButton style={styles.option} loading={false} compact="true" mode="contained" icon="square-edit-outline" size={24} onPress={() => {}} />
<IconButton style={styles.option} loading={false} compact="true" mode="contained" icon="trash-can-outline" size={24} onPress={() => {}} />
<IconButton style={styles.option} loading={false} compact="true" mode="contained" icon="eye-remove-outline" size={24} onPress={() => {}} />
<IconButton style={styles.option} loading={false} compact="true" mode="contained" icon="alert-octagon-outline" size={24} onPress={() => {}} />
</Surface>
)}
<Divider style={styles.border} /> <Divider style={styles.border} />
</View> </View>
); );