martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing layout issues in iPad

Browse Source
This commit is contained in:
balzack 2022-10-30 17:22:05 -07:00
parent ec07246b5f
commit ccf84790b0
19 changed files with 109 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/mobile/src/access/create/Create.jsx
View File

@ -72,6 +72,11 @@ export function Create() {
</View> </View>
</View> </View>
)} )}
{ !state.tokenRequired && state.server === 'databag.coredb.org' && (
<View style={styles.demo}>
<Text style={styles.demoText}>The default public server is to test out the system. Use a private server othersise.</Text>
</View>
)}
</View> </View>
<View style={styles.inputwrapper}> <View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="user" size={18} color="#888888" /> <Ionicons style={styles.icon} name="user" size={18} color="#888888" />

10
app/mobile/src/access/create/Create.styled.js
View File

@ -9,6 +9,16 @@ export const styles = StyleSheet.create({
config: { config: {
paddingTop: 8, paddingTop: 8,
}, },
demo: {
alignItems: 'center',
justifyContent: 'center',
paddingLeft: 16,
paddingRight: 16,
},
demoText: {
color: Colors.grey,
textAlign: 'center',
},
space: { space: {
width: 32, width: 32,
display: 'flex', display: 'flex',

15
app/mobile/src/session/Session.jsx
View File

@ -248,7 +248,7 @@ export function Session() {
}; };
return ( return (
<CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }} <CardDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '50%' } }}
drawerContent={(props) => <Cards openContact={setCardContact} openRegistry={openRegistry} />}> drawerContent={(props) => <Cards openContact={setCardContact} openRegistry={openRegistry} />}>
<CardDrawer.Screen name="home"> <CardDrawer.Screen name="home">
{(props) => <HomeScreen cardNav={props.navigation} {...params} />} {(props) => <HomeScreen cardNav={props.navigation} {...params} />}
@ -275,7 +275,7 @@ export function Session() {
}; };
return ( return (
<RegistryDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.baseWidth } }} <RegistryDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '50%' } }}
drawerContent={(props) => <Registry openContact={setRegistryContact} />}> drawerContent={(props) => <Registry openContact={setRegistryContact} />}>
<RegistryDrawer.Screen name="card"> <RegistryDrawer.Screen name="card">
{(props) => <CardDrawerScreen registryNav={props.navigation} {...params} />} {(props) => <CardDrawerScreen registryNav={props.navigation} {...params} />}
@ -301,7 +301,7 @@ export function Session() {
}; };
return ( return (
<ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }} <ContactDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '45%' } }}
drawerContent={(props) => <Contact contact={selected} />}> drawerContent={(props) => <Contact contact={selected} />}>
<ContactDrawer.Screen name="registry"> <ContactDrawer.Screen name="registry">
{(props) => <RegistryDrawerScreen {...params} contactNav={props.navigation} setContact={setContact} />} {(props) => <RegistryDrawerScreen {...params} contactNav={props.navigation} setContact={setContact} />}
@ -332,7 +332,7 @@ export function Session() {
}; };
return ( return (
<DetailDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }} <DetailDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '45%' } }}
drawerContent={(props) => <Details channel={selected} clearConversation={clearConversation} />} drawerContent={(props) => <Details channel={selected} clearConversation={clearConversation} />}
> >
<DetailDrawer.Screen name="contact"> <DetailDrawer.Screen name="contact">
@ -347,9 +347,10 @@ export function Session() {
return ( return (
<View style={styles.body}> <View style={styles.body}>
{ state.firstRun == true && ( { state.firstRun == true && (
<View style={styles.firstRun}> <SafeAreaView edges={['top', 'bottom']} style={styles.firstRun}>
<View style={styles.title}> <View style={styles.title}>
<Text style={styles.titleText}>Welcome To Databag</Text> <Text style={styles.titleText}>Welcome To Databag</Text>
<Text style={styles.tagText}>Communication for the Decentralized Web</Text>
</View> </View>
<Image style={styles.splash} source={splash} resizeMode="contain" /> <Image style={styles.splash} source={splash} resizeMode="contain" />
<View style={styles.steps} > <View style={styles.steps} >
@ -369,12 +370,12 @@ export function Session() {
<Text style={styles.startText}>Get Started</Text> <Text style={styles.startText}>Get Started</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </SafeAreaView>
)} )}
{ state.firstRun == false && ( { state.firstRun == false && (
<View style={styles.container}> <View style={styles.container}>
{ state.tabbed === false && ( { state.tabbed === false && (
<ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: state.subWidth } }} <ProfileDrawer.Navigator screenOptions={{ drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front', drawerStyle: { width: '45%' } }}
drawerContent={(props) => <Profile />}> drawerContent={(props) => <Profile />}>
<ProfileDrawer.Screen name="detail"> <ProfileDrawer.Screen name="detail">
{(props) => <DetailDrawerScreen profileNav={props.navigation}/>} {(props) => <DetailDrawerScreen profileNav={props.navigation}/>}

6
app/mobile/src/session/Session.styled.js
View File

@ -40,9 +40,15 @@ export const styles = StyleSheet.create({
fontSize: 20, fontSize: 20,
fontWeight: 'bold', fontWeight: 'bold',
}, },
tagText: {
paddingTop: 8,
color: Colors.white,
fontSize: 16,
},
title: { title: {
flexGrow: 1, flexGrow: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center',
}, },
stepText: { stepText: {
color: Colors.white, color: Colors.white,

12
app/mobile/src/session/cards/Cards.jsx
View File

@ -102,9 +102,9 @@ export function Cards({ openRegistry, openContact }) {
</> </>
)} )}
{ !state.tabbed && ( { !state.tabbed && (
<> <SafeAreaView style={styles.drawer} edges={['top', 'right', 'bottom']}>
<View style={styles.searcharea}> <View style={styles.searcharea}>
<SafeAreaView edges={['top', 'right']} style={styles.searchbar}> <View style={styles.searchbar}>
{ state.sorting && ( { state.sorting && (
<TouchableOpacity style={styles.sort} onPress={actions.unsort}> <TouchableOpacity style={styles.sort} onPress={actions.unsort}>
<AntIcons style={styles.icon} name="menufold" size={18} color={Colors.text} /> <AntIcons style={styles.icon} name="menufold" size={18} color={Colors.text} />
@ -123,16 +123,16 @@ export function Cards({ openRegistry, openContact }) {
<TouchableOpacity style={styles.add} onPress={openRegistry}> <TouchableOpacity style={styles.add} onPress={openRegistry}>
<AntIcons name={'adduser'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/> <AntIcons name={'adduser'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
</TouchableOpacity> </TouchableOpacity>
</SafeAreaView> </View>
</View> </View>
<SafeAreaView edges={['right']} style={styles.searcharea}> <View style={styles.cardlist}>
<FlatList style={styles.cards} <FlatList style={styles.cards}
data={state.cards} data={state.cards}
renderItem={({ item }) => <CardItem item={item} openContact={openContact} />} renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
keyExtractor={item => item.cardId} keyExtractor={item => item.cardId}
/> />
</SafeAreaView> </View>
</> </SafeAreaView>
)} )}
</View> </View>
); );

12
app/mobile/src/session/cards/Cards.styled.js
View File

@ -9,6 +9,9 @@ export const styles = StyleSheet.create({
flexDirection: 'column', flexDirection: 'column',
backgroundColor: Colors.formBackground, backgroundColor: Colors.formBackground,
}, },
drawer: {
flexGrow: 1,
},
title: { title: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
@ -28,6 +31,11 @@ export const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
cardlist: {
flexGrow: 1,
borderBottomWidth: 1,
borderColor: Colors.divider,
},
searcharea: { searcharea: {
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.divider, borderColor: Colors.divider,
@ -35,8 +43,9 @@ export const styles = StyleSheet.create({
searchbar: { searchbar: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
paddingTop: 16, paddingTop: 8,
paddingLeft: 8, paddingLeft: 8,
paddingRight: 8,
paddingBottom: 8, paddingBottom: 8,
alignItems: 'center', alignItems: 'center',
}, },
@ -63,7 +72,6 @@ export const styles = StyleSheet.create({
paddingLeft: 8, paddingLeft: 8,
}, },
cards: { cards: {
flexGrow: 1,
width: '100%', width: '100%',
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16, paddingRight: 16,

2
app/mobile/src/session/cardsIcon/CardsIcon.jsx
View File

@ -10,7 +10,7 @@ export function CardsIcon({ size, color, active }) {
return ( return (
<View> <View>
<Ionicons name={'contacts'} size={size} color={color} /> <Ionicons name={'contacts'} size={size} color={color} />
{ state.curRevision !== state.setRevision && ( { state.curRevision && state.curRevision !== state.setRevision && (
<View style={styles.requested} /> <View style={styles.requested} />
)} )}
</View> </View>

12
app/mobile/src/session/channels/Channels.styled.js
View File

@ -27,6 +27,7 @@ export const styles = StyleSheet.create({
}, },
searchbar: { searchbar: {
paddingRight: 8, paddingRight: 8,
paddingLeft: 16,
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.divider, borderColor: Colors.divider,
paddingBottom: 8, paddingBottom: 8,
@ -73,17 +74,16 @@ export const styles = StyleSheet.create({
flexShrink: 1, flexShrink: 1,
flexGrow: 1, flexGrow: 1,
width: '100%', width: '100%',
paddingLeft: 16,
paddingRight: 16,
}, },
addbottom: { addbottom: {
backgroundColor: Colors.primary, backgroundColor: Colors.primary,
marginRight: 8, marginRight: 8,
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', paddingTop: 8,
justifyContent: 'center', paddingBottom: 8,
padding: 8, paddingLeft: 16,
paddingRight: 16,
borderRadius: 4, borderRadius: 4,
}, },
add: { add: {
@ -103,6 +103,8 @@ export const styles = StyleSheet.create({
paddingTop: 8, paddingTop: 8,
borderTopWidth: 1, borderTopWidth: 1,
borderColor: Colors.divider, borderColor: Colors.divider,
display: 'flex',
alignItems: 'center',
}, },
cancel: { cancel: {
borderWidth: 1, borderWidth: 1,

2
app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
View File

@ -10,6 +10,8 @@ export const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.itemDivider, borderColor: Colors.itemDivider,
paddingLeft: 16,
paddingRight: 16,
}, },
detail: { detail: {
paddingLeft: 12, paddingLeft: 12,

8
app/mobile/src/session/contact/Contact.jsx
View File

@ -170,11 +170,15 @@ export function Contact({ contact, closeContact }) {
<Text style={styles.nametext}>{ state.name }</Text> <Text style={styles.nametext}>{ state.name }</Text>
</View> </View>
<View style={styles.attribute}> <View style={styles.attribute}>
<Ionicons name="enviromento" size={14} color={Colors.text} /> <View style={styles.glyph}>
<Ionicons name="enviromento" size={14} color={Colors.text} />
</View>
<Text style={styles.locationtext}>{ state.location }</Text> <Text style={styles.locationtext}>{ state.location }</Text>
</View> </View>
<View style={styles.attribute}> <View style={styles.attribute}>
<Ionicons name="book" size={14} color={Colors.text} /> <View style={styles.glyph}>
<Ionicons name="book" size={14} color={Colors.text} />
</View>
<Text style={styles.descriptiontext}>{ state.description }</Text> <Text style={styles.descriptiontext}>{ state.description }</Text>
</View> </View>
</View> </View>

6
app/mobile/src/session/contact/Contact.styled.js
View File

@ -24,6 +24,9 @@ export const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
glyph: {
paddingTop: 2,
},
icon: { icon: {
width: 32, width: 32,
paddingLeft: 8 paddingLeft: 8
@ -72,6 +75,8 @@ export const styles = StyleSheet.create({
}, },
detail: { detail: {
paddingTop: 32, paddingTop: 32,
paddingLeft: 32,
paddingRight: 32,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
@ -80,7 +85,6 @@ export const styles = StyleSheet.create({
attribute: { attribute: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
paddingBottom: 8, paddingBottom: 8,
}, },
nametext: { nametext: {

4
app/mobile/src/session/conversation/Conversation.jsx
View File

@ -71,7 +71,7 @@ export function ConversationBody() {
const noop = () => {}; const noop = () => {};
return ( return (
<KeyboardAvoidingView style={styles.thread} behavior="padding" keyboardVerticalOffset="100" <KeyboardAvoidingView style={styles.thread} behavior="padding"
enabled={Platform.OS === 'ios' ? true : false}> enabled={Platform.OS === 'ios' ? true : false}>
<FlatList style={styles.conversation} <FlatList style={styles.conversation}
contentContainerStyle={styles.topics} contentContainerStyle={styles.topics}
@ -136,7 +136,7 @@ export function Conversation({ closeConversation, openDetails }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<SafeAreaView edges={['right']} style={styles.header}> <SafeAreaView edges={['right', 'top']} style={styles.header}>
<Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text> <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
<TouchableOpacity style={styles.action} onPress={openDetails}> <TouchableOpacity style={styles.action} onPress={openDetails}>
<Ionicons name="setting" size={24} color={Colors.primary} /> <Ionicons name="setting" size={24} color={Colors.primary} />

3
app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx
View File

@ -9,7 +9,8 @@ export function ImageThumb({ topicId, asset, onAssetView }) {
return ( return (
<TouchableOpacity activeOpacity={1} onPress={onAssetView}> <TouchableOpacity activeOpacity={1} onPress={onAssetView}>
<Image source={{ uri: state.url }} style={{ borderRadius: 4, width: 92 * state.ratio, height: 92, marginRight: 16 }} resizeMode={'cover'} /> <Image source={{ uri: state.url }} style={{ borderRadius: 4, width: 92 * state.ratio, height: 92, marginRight: 16 }}
onLoad={actions.loaded} resizeMode={'cover'} />
</TouchableOpacity> </TouchableOpacity>
); );

10
app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js
View File

@ -17,14 +17,14 @@ export function useImageThumb(topicId, asset) {
useEffect(() => { useEffect(() => {
const url = conversation.actions.getTopicAssetUrl(topicId, asset.thumb); const url = conversation.actions.getTopicAssetUrl(topicId, asset.thumb);
if (url) { updateState({ url });
Image.getSize(url, (width, height) => {
updateState({ url, ratio: width / height });
});
}
}, [topicId, conversation, asset]); }, [topicId, conversation, asset]);
const actions = { const actions = {
loaded: (e) => {
const { width, height } = e.nativeEvent.source;
updateState({ ratio: width / height });
},
}; };
return { state, actions }; return { state, actions };

10
app/mobile/src/session/profile/Profile.jsx
View File

@ -153,7 +153,9 @@ export function Profile({ navigation }) {
<Ionicons name="edit" size={16} color={Colors.text} /> <Ionicons name="edit" size={16} color={Colors.text} />
</View> </View>
<View style={styles.attribute}> <View style={styles.attribute}>
<Ionicons name="enviromento" size={14} color={Colors.text} /> <View style={styles.icon}>
<Ionicons name="enviromento" size={14} color={Colors.text} />
</View>
{ state.location && ( { state.location && (
<Text style={styles.locationtext}>{ state.location }</Text> <Text style={styles.locationtext}>{ state.location }</Text>
)} )}
@ -162,7 +164,9 @@ export function Profile({ navigation }) {
)} )}
</View> </View>
<View style={styles.attribute}> <View style={styles.attribute}>
<Ionicons name="book" size={14} color={Colors.text} /> <View style={styles.icon}>
<Ionicons name="book" size={14} color={Colors.text} />
</View>
{ state.description && ( { state.description && (
<Text style={styles.descriptiontext}>{ state.description }</Text> <Text style={styles.descriptiontext}>{ state.description }</Text>
)} )}
@ -194,7 +198,7 @@ export function Profile({ navigation }) {
}; };
return ( return (
<ScrollView> <ScrollView style={styles.wrapper}>
{ state.tabbed && ( { state.tabbed && (
<View style={styles.body}> <View style={styles.body}>
<Body /> <Body />

12
app/mobile/src/session/profile/Profile.styled.js
View File

@ -11,9 +11,14 @@ export const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
icon: {
paddingTop: 2,
},
wrapper: {
backgroundColor: Colors.formBackground,
},
drawer: { drawer: {
paddingTop: 16, paddingTop: 16,
backgroundColor: Colors.formBackground,
}, },
action: { action: {
width: 64, width: 64,
@ -78,11 +83,12 @@ export const styles = StyleSheet.create({
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
color: Colors.text, color: Colors.text,
paddingLeft: 32,
paddingRight: 32,
}, },
attribute: { attribute: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center',
paddingBottom: 8, paddingBottom: 8,
}, },
nonametext: { nonametext: {
@ -258,7 +264,7 @@ export const styles = StyleSheet.create({
save: { save: {
padding: 8, padding: 8,
borderRadius: 4, borderRadius: 4,
backgroundColor: Colors.error, backgroundColor: Colors.primary,
width: 72, width: 72,
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',

30
app/mobile/src/session/registry/Registry.jsx
View File

@ -130,7 +130,7 @@ export function Registry({ closeRegistry, openContact }) {
</> </>
)} )}
{ !state.tabbed && ( { !state.tabbed && (
<> <SafeAreaView edges={['top', 'right', 'bottom']}>
<View style={styles.searcharea}> <View style={styles.searcharea}>
<SafeAreaView edges={['right']}> <SafeAreaView edges={['right']}>
<View style={styles.searchbar}> <View style={styles.searchbar}>
@ -151,21 +151,19 @@ export function Registry({ closeRegistry, openContact }) {
</View> </View>
</SafeAreaView> </SafeAreaView>
</View> </View>
<SafeAreaView edges={['right']}> { state.accounts.length === 0 && state.searched && (
{ state.accounts.length === 0 && state.searched && ( <View style={style.empty}>
<View style={style.empty}> <Text style={styles.emptyText}>No Contacts Found</Text>
<Text style={styles.emptyText}>No Contacts Found</Text> </View>
</View> )}
)} { state.accounts.length !== 0 && (
{ state.accounts.length !== 0 && ( <FlatList style={styles.accounts}
<FlatList style={styles.accounts} data={state.accounts}
data={state.accounts} renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />} keyExtractor={item => item.guid}
keyExtractor={item => item.guid} />
/> )}
)} </SafeAreaView>
</SafeAreaView>
</>
)} )}
</View> </View>
); );

2
app/mobile/src/session/registry/Registry.styled.js
View File

@ -35,7 +35,7 @@ export const styles = StyleSheet.create({
searchbar: { searchbar: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
paddingTop: 16, paddingTop: 8,
paddingLeft: 8, paddingLeft: 8,
paddingBottom: 8, paddingBottom: 8,
alignItems: 'center', alignItems: 'center',

11
app/mobile/src/session/useSession.hook.js
View File

@ -8,8 +8,8 @@ export function useSession() {
const [state, setState] = useState({ const [state, setState] = useState({
tabbled: null, tabbled: null,
subWidth: '33%', subWidth: '50%',
baseWidth: '33%', baseWidth: '50%',
cardId: null, cardId: null,
converstaionId: null, converstaionId: null,
firstRun: null, firstRun: null,
@ -38,12 +38,7 @@ export function useSession() {
if (dimensions.width > config.tabbedWidth) { if (dimensions.width > config.tabbedWidth) {
const width = Math.floor((dimensions.width * 33) / 100); const width = Math.floor((dimensions.width * 33) / 100);
tabbed.current = false; tabbed.current = false;
if (width > 500) { updateState({ tabbed: false, baseWidth: width + 50, subWidth: width });
updateStatus({ tabbed: false, baseWidth: 550, subWidth: 500 });
}
else {
updateState({ tabbed: false, baseWidth: width + 50, subWidth: width });
}
} }
else { else {
tabbed.current = true; tabbed.current = true;