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

theming for call screen

Browse Source
This commit is contained in:
balzack 2025-01-29 16:37:27 -08:00
parent b6b5301638
commit b88242fed2
2 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,6 @@ export const styles = StyleSheet.create({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgb(64,64,64)',
},
calls: {
borderRadius: 8,
@ -73,7 +72,6 @@ export const styles = StyleSheet.create({
},
name: {
fontSize: 28,
color: '#aaaaaa',
paddingLeft: 16,
paddingRight: 16,
width: '100%',
@ -100,14 +98,14 @@ export const styles = StyleSheet.create({
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor: 'rgb(64,64,64)',
},
card: {
width: '100%',
height: 48,
paddingTop: 8,
paddingBottom: 8,
paddingLeft: 16,
height: 64,
paddingTop: 16,
paddingBottom: 16,
paddingLeft: 32,
paddingRight: 32,
borderBottomWidth: 1,
}
});

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

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useWindowDimensions, Image, SafeAreaView, Modal, ScrollView, View } from 'react-native';
import { Surface, Icon, Divider, Button, IconButton, Text, TextInput} from 'react-native-paper';
import { Surface, Icon, Divider, Button, IconButton, Text, TextInput, useTheme} from 'react-native-paper';
import {styles} from './Calling.styled';
import {useCalling} from './useCalling.hook';
import {BlurView} from '@react-native-community/blur';
@ -24,6 +24,19 @@ export function Calling({ callCard }: { callCard: string }) {
const [accepting, setAccepting] = useState(null as null|string);
const [ignoring, setIgnoring] = useState(null as null|string);
const [declining, setDeclining] = useState(null as null|string);
const theme = useTheme();
const surface = theme.dark ? {
base: 'rgba(16,16,16,1)',
blend: 'rgba(16,16,16,0)',
control: 'rgba(64,64,64,0.6)',
title: 'rgba(32,32,32,0.8)',
} : {
base: 'rgba(212,212,212,1)',
blend: 'rgba(212,212,212,0)',
control: 'rgba(128,128,128,0.6)',
title: 'rgba(192,192,192,0.8)',
};
const toggleVideo = async () => {
if (!applyingVideo) {
@ -178,12 +191,12 @@ export function Calling({ callCard }: { callCard: string }) {
</View>
)}
{ connecting && !state.calling && (
<View style={styles.container}>
<View style={{ ...styles.container, backgroundColor: surface.base }}>
<ActivityIndicator size={72} />
</View>
)}
{ state.calling && (
<View style={styles.container}>
<View style={{ ...styles.container, backgroundColor: surface.base }}>
<View style={{ ...styles.frame, top: frameOffset, width: frameWidth, height: frameHeight }}>
<Image
style={{ ...styles.image, opacity: state.loaded ? 1 : 0 }}
@ -192,23 +205,23 @@ export function Calling({ callCard }: { callCard: string }) {
onLayout={actions.loaded}
/>
{ state.loaded && (
<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: 16, top: 0, borderRadius: 8}} start={{x: 0, y: 0}} end={{x: 0, y: 1}} colors={[surface.base, surface.blend]} />
)}
{ state.loaded && (
<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: 16, bottom: 0, borderRadius: 8}} start={{x: 0, y: 0.2}} end={{x: 0, y: 1}} colors={[surface.blend, surface.base]} />
)}
{ 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={[surface.blend, surface.base]} />
)}
{ state.loaded && (
<LinearGradient style={{...styles.overlap, height: '100%', width: 16, left: 0}} start={{x: 1, y: 0}} end={{x: 0, y: 0}} colors={['rgba(64,64,64,0)', 'rgba(64,64,64, 1)']} />
<LinearGradient style={{...styles.overlap, height: '100%', width: 16, left: 0}} start={{x: 1, y: 0}} end={{x: 0, y: 0}} colors={[surface.blend, surface.base]} />
)}
</View>
</View>
)}
{ state.calling && state.loaded && (
<View style={{ ...styles.overlap, top: 64 }}>
<View style={{backgroundColor: 'rgba(32,32,32,0.8', borderRadius: 4 }}>
<View style={{backgroundColor: surface.title, borderRadius: 4 }}>
{ state.calling.name && (
<Text style={styles.name} adjustsFontSizeToFit={true} numberOfLines={1}>{ state.calling.name }</Text>
)}
@ -245,7 +258,7 @@ export function Calling({ callCard }: { callCard: string }) {
)}
{ state.calling && state.loaded && (
<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.6)' }}>
<View style={{ paddingTop: 8, paddingBottom: 8, paddingLeft: 16, paddingRight: 16, gap: 16, display: 'flex', flexDirection: 'row', borderRadius: 16, backgroundColor: surface.control }}>
<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.danger} icon="phone-hangup-outline" compact="true" mode="contained" size={32} onPress={end} />