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

rendering thread

Browse Source
This commit is contained in:
balzack 2024-12-30 13:01:05 -08:00
parent 07a5a1d59d
commit ce2ffabe9b
3 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/mobile/src/conversation/Conversation.tsx
View File

@ -19,6 +19,7 @@ export type MediaAsset = {
export function Conversation({close}: {close: ()=>void}) { export function Conversation({close}: {close: ()=>void}) {
const { state, actions } = useConversation(); const { state, actions } = useConversation();
const [ more, setMore ] = useState(false); const [ more, setMore ] = useState(false);
const [ selected, setSelected ] = useState(null);
const thread = useRef(); const thread = useRef();
const scrolled = useRef(false); const scrolled = useRef(false);
@ -115,6 +116,8 @@ export function Conversation({close}: {close: ()=>void}) {
card={card} card={card}
profile={profile} profile={profile}
host={host} host={host}
select={(id: string)=>setSelected(id)}
selected={selected}
/> />
) )
}} }}

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

@ -55,6 +55,9 @@ export const styles = StyleSheet.create({
fontStyle: 'italic', fontStyle: 'italic',
color: Colors.placeholder, color: Colors.placeholder,
}, },
text: {
fontSize: 16,
},
timestamp: { timestamp: {
fontSize: 12, fontSize: 12,
}, },

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

@ -10,19 +10,18 @@ import { BinaryAsset } from './binaryAsset/BinaryAsset';
import { useMessage } from './useMessage.hook'; import { useMessage } from './useMessage.hook';
import {styles} from './Message.styled'; import {styles} from './Message.styled';
export function Message({ topic, card, profile, host }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean }) { export function Message({ topic, card, profile, host, select, selected }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean, select: (id: string)=>void, selected: string }) {
const { state, actions } = useMessage(); const { state, actions } = useMessage();
const { locked, data, created, topicId, status, transform } = topic; const { locked, data, created, topicId, status, transform } = topic;
const { name, handle, node } = profile || card || { name: null, handle: null, node: null } const { name, handle, node } = profile || card || { name: null, handle: null, node: null }
const { text, textColor, textSize, assets } = data || { text: null, textColor: null, textSize: null } const { text, textColor, textSize, assets } = data || { text: null, textColor: null, textSize: null }
const textStyle = { color: textColor ? textColor : undefined, fontSize: textSize ? textSize : undefined }; const textStyle = textColor && textSize ? { fontSize: textSize, color: textColor } : textColor ? { color: textColor } : textSize ? { fontSize: textSize } : {}
const logoUrl = profile ? profile.imageUrl : card ? card.imageUrl : avatar; const logoUrl = profile ? profile.imageUrl : card ? card.imageUrl : avatar;
const timestamp = actions.getTimestamp(created); const timestamp = actions.getTimestamp(created);
const [message, setMessage] = useState(''); const [message, setMessage] = useState('');
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}>
@ -30,7 +29,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}>
<Pressable style={styles.header} onPress={()=>setOptions(!options)}> <Pressable style={styles.header} onPress={()=>select(topicId)}>
<View style={styles.name}> <View style={styles.name}>
{ name && ( { name && (
<Text style={styles.handle}>{ name }</Text> <Text style={styles.handle}>{ name }</Text>
@ -50,7 +49,7 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
</View> </View>
)} )}
{ !locked && status === 'confirmed' && text && !editing && ( { !locked && status === 'confirmed' && text && !editing && (
<Text style={styles.text}>{ text }</Text> <Text style={{ ...styles.text, ...textStyle }}>{ text }</Text>
)} )}
{ !locked && status !== 'confirmed' && ( { !locked && status !== 'confirmed' && (
<View style={styles.unconfirmed}> <View style={styles.unconfirmed}>
@ -63,7 +62,7 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
</View> </View>
</View> </View>
</View> </View>
{ options && ( { topicId === selected && (
<Surface style={styles.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="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="square-edit-outline" size={24} onPress={() => {}} />