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

calling screen layout tweaks

Browse Source
This commit is contained in:
Roland Osborne 2025-01-28 14:24:17 -08:00
parent a8a579dbda
commit e6535a14b6
2 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/mobile/src/calling/Calling.styled.ts
View File

@ -58,9 +58,9 @@ export const styles = StyleSheet.create({
}, },
name: { name: {
fontSize: 28, fontSize: 28,
minWidth: '50%',
color: '#aaaaaa', color: '#aaaaaa',
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16,
width: '100%', width: '100%',
textAlign: 'center', textAlign: 'center',
}, },

16
app/client/mobile/src/calling/Calling.tsx
View File

@ -111,20 +111,16 @@ export function Calling({ callCard }: { callCard: string }) {
{ state.calling && ( { state.calling && (
<View style={{ ...styles.frame, top: frameOffset, width: frameWidth, height: frameHeight }}> <View style={{ ...styles.frame, top: frameOffset, width: frameWidth, height: frameHeight }}>
<Image <Image
style={styles.image} style={{ ...styles.image, opacity: state.loaded ? 1 : 0 }}
resizeMode="contain" resizeMode="contain"
source={{ uri: state.calling.imageUrl }} source={{ uri: state.calling.imageUrl }}
onLayout={actions.loaded} onLayout={actions.loaded}
/> />
{ state.loaded && ( { state.loaded && (
<LinearGradient style={{...styles.overlap, width: '100%', height: frameHeight / 2, top: 2, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 0.5}} colors={['rgba(64,64,64,1)', 'rgba(64,64,64, 0)']}> <LinearGradient style={{...styles.overlap, width: '100%', height: 16, top: 0, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,1)', 'rgba(64,64,64, 0)']} />
<LinearGradient style={{...styles.overlap, width: '100%', height: frameHeight / 2, top: 2, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 0.5}} colors={['rgba(64,64,64,1)', 'rgba(64,64,64, 0)']} />
</LinearGradient>
)} )}
{ state.loaded && ( { state.loaded && (
<LinearGradient style={{...styles.overlap, width: '100%', height: frameHeight / 2, bottom: 2, borderRadius: 8}} start={{x: 0, y: 0.5}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']}> <LinearGradient style={{...styles.overlap, width: '100%', height: 16, bottom: 0, borderRadius: 8}} start={{x: 0, y: 0.2}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} />
<LinearGradient style={{...styles.overlap, width: '100%', height: frameHeight / 2, bottom: 2, borderRadius: 8}} start={{x: 0, y: 0.5}} end={{x: 0, y: 1}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} />
</LinearGradient>
)} )}
{ state.loaded && ( { state.loaded && (
<LinearGradient style={{...styles.overlap, height: '100%', width: 16, right: 0}} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} /> <LinearGradient style={{...styles.overlap, height: '100%', width: 16, right: 0}} start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} />
@ -135,13 +131,15 @@ export function Calling({ callCard }: { callCard: string }) {
</View> </View>
)} )}
{ state.calling && state.loaded && ( { state.calling && state.loaded && (
<View style={{ ...styles.overlap, top: 0 }}> <View style={{ ...styles.overlap, top: 16 }}>
<View style={{backgroundColor: 'rgba(32,32,32,0.8', borderRadius: 4 }}>
{ state.calling.name && ( { state.calling.name && (
<Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.calling.name }</Text> <Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.calling.name }</Text>
)} )}
{ !state.calling.name && ( { !state.calling.name && (
<Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ `${state.calling.handle}/${state.calling.node}` }</Text> <Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ `${state.calling.handle}/${state.calling.node}` }</Text>
)} )}
</View>
</View> </View>
)} )}
{ state.calling && state.loaded && state.remote && ( { state.calling && state.loaded && state.remote && (
@ -173,7 +171,7 @@ export function Calling({ callCard }: { callCard: string }) {
)} )}
{ state.calling && state.loaded && ( { state.calling && state.loaded && (
<View style={{ ...styles.overlap, bottom: frameOffset }}> <View style={{ ...styles.overlap, bottom: frameOffset }}>
<View style={{ paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, gap: 16, display: 'flex', flexDirection: 'row', borderRadius: 16, backgroundColor: 'rgba(128,128,128,0.5)' }}> <View style={{ paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, gap: 16, display: 'flex', flexDirection: 'row', borderRadius: 16, backgroundColor: 'rgba(128,128,128,0.6)' }}>
<IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon={state.audioEnabled ? 'microphone' : 'microphone-off'} loading={applyingAudio} disabled={!state.audio} compact="true" mode="contained" size={32} onPress={toggleAudio} /> <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon={state.audioEnabled ? 'microphone' : 'microphone-off'} loading={applyingAudio} disabled={!state.audio} compact="true" mode="contained" size={32} onPress={toggleAudio} />
<IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon={state.videoEnabled ? 'video-outline' : 'video-off-outline'} loading={applyingVideo} disabled={!state.video} compact="true" mode="contained" size={32} onPress={toggleVideo} /> <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.primary} icon={state.videoEnabled ? 'video-outline' : 'video-off-outline'} loading={applyingVideo} disabled={!state.video} compact="true" mode="contained" size={32} onPress={toggleVideo} />
<IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.danger} icon="phone-hangup-outline" compact="true" mode="contained" size={32} onPress={end} /> <IconButton style={styles.closeIcon} iconColor="white" containerColor={Colors.danger} icon="phone-hangup-outline" compact="true" mode="contained" size={32} onPress={end} />