fixing layout issues in iPad

2025-02-12 03:29:16 +00:00 · 2022-10-30 17:22:05 -07:00 · 2022-10-30 17:22:05 -07:00 · ccf84790b0
commit ccf84790b0
parent ec07246b5f
19 changed files with 109 additions and 63 deletions
--- a/app/mobile/src/access/create/Create.jsx
+++ b/app/mobile/src/access/create/Create.jsx
@ -72,6 +72,11 @@ export function Create() {
                </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 style={styles.inputwrapper}>
            <Ionicons style={styles.icon} name="user" size={18} color="#888888" />
--- a/app/mobile/src/access/create/Create.styled.js
+++ b/app/mobile/src/access/create/Create.styled.js
@ -9,6 +9,16 @@ export const styles = StyleSheet.create({
  config: {
    paddingTop: 8,
  },
+  demo: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  demoText: {
+    color: Colors.grey,
+    textAlign: 'center',
+  },
  space: {
    width: 32,
    display: 'flex',
--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@ -248,7 +248,7 @@ export function Session() {
    };

    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} />}>
        <CardDrawer.Screen name="home">
          {(props) => <HomeScreen cardNav={props.navigation} {...params} />}
@ -275,7 +275,7 @@ export function Session() {
    };

    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} />}>
        <RegistryDrawer.Screen name="card">
          {(props) => <CardDrawerScreen registryNav={props.navigation} {...params} />}
@ -301,7 +301,7 @@ export function Session() {
    };

    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} />}>
        <ContactDrawer.Screen name="registry">
          {(props) => <RegistryDrawerScreen {...params} contactNav={props.navigation} setContact={setContact} />}
@ -332,7 +332,7 @@ export function Session() {
    };
  
    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} />}
        >
        <DetailDrawer.Screen name="contact">
@ -347,9 +347,10 @@ export function Session() {
  return (
    <View style={styles.body}>
      { state.firstRun == true && (
-        <View style={styles.firstRun}>
+        <SafeAreaView edges={['top', 'bottom']}  style={styles.firstRun}>
          <View style={styles.title}>
            <Text style={styles.titleText}>Welcome To Databag</Text>
+            <Text style={styles.tagText}>Communication for the Decentralized Web</Text>
          </View>
          <Image style={styles.splash} source={splash} resizeMode="contain" />
          <View style={styles.steps} >
@ -369,12 +370,12 @@ export function Session() {
              <Text style={styles.startText}>Get Started</Text>
            </TouchableOpacity>
          </View>
-        </View>
+        </SafeAreaView>
      )}
      { state.firstRun == false && (
        <View style={styles.container}>
          { 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 />}>
              <ProfileDrawer.Screen name="detail">
                {(props) => <DetailDrawerScreen profileNav={props.navigation}/>}
--- a/app/mobile/src/session/Session.styled.js
+++ b/app/mobile/src/session/Session.styled.js
@ -40,9 +40,15 @@ export const styles = StyleSheet.create({
    fontSize: 20,
    fontWeight: 'bold',
  },
+  tagText: {
+    paddingTop: 8,
+    color: Colors.white,
+    fontSize: 16,
+  },
  title: {
    flexGrow: 1,
    justifyContent: 'center',
+    alignItems: 'center',
  },
  stepText: {
    color: Colors.white,
--- a/app/mobile/src/session/cards/Cards.jsx
+++ b/app/mobile/src/session/cards/Cards.jsx
@ -102,9 +102,9 @@ export function Cards({ openRegistry, openContact }) {
        </>
      )}
      { !state.tabbed && (
-        <>
+        <SafeAreaView style={styles.drawer} edges={['top', 'right', 'bottom']}>
          <View style={styles.searcharea}>
-            <SafeAreaView edges={['top', 'right']} style={styles.searchbar}>
+            <View style={styles.searchbar}>
              { state.sorting && (
                <TouchableOpacity style={styles.sort} onPress={actions.unsort}>
                  <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}>
                <AntIcons name={'adduser'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
              </TouchableOpacity>
-            </SafeAreaView>
            </View>
-          <SafeAreaView edges={['right']} style={styles.searcharea}>
+          </View>
+          <View style={styles.cardlist}>
            <FlatList style={styles.cards}
              data={state.cards}
              renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
              keyExtractor={item => item.cardId}
            />
+          </View>
        </SafeAreaView>
-        </>
      )}
    </View>
  );
--- a/app/mobile/src/session/cards/Cards.styled.js
+++ b/app/mobile/src/session/cards/Cards.styled.js
@ -9,6 +9,9 @@ export const styles = StyleSheet.create({
    flexDirection: 'column',
    backgroundColor: Colors.formBackground,
  },
+  drawer: {
+    flexGrow: 1,
+  },
  title: {
    display: 'flex',
    flexDirection: 'row',
@ -28,6 +31,11 @@ export const styles = StyleSheet.create({
    alignItems: 'center',
    justifyContent: 'center',
  },
+  cardlist: {
+    flexGrow: 1,
+    borderBottomWidth: 1,
+    borderColor: Colors.divider,
+  },
  searcharea: {
    borderBottomWidth: 1,
    borderColor: Colors.divider,
@ -35,8 +43,9 @@ export const styles = StyleSheet.create({
  searchbar: {
    display: 'flex',
    flexDirection: 'row',
-    paddingTop: 16,
+    paddingTop: 8,
    paddingLeft: 8,
+    paddingRight: 8,
    paddingBottom: 8,
    alignItems: 'center',
  },
@ -63,7 +72,6 @@ export const styles = StyleSheet.create({
    paddingLeft: 8,
  },
  cards: {
-    flexGrow: 1,
    width: '100%',
    paddingLeft: 16,
    paddingRight: 16,
--- a/app/mobile/src/session/cardsIcon/CardsIcon.jsx
+++ b/app/mobile/src/session/cardsIcon/CardsIcon.jsx
@ -10,7 +10,7 @@ export function CardsIcon({ size, color, active }) {
  return (
    <View>
      <Ionicons name={'contacts'} size={size} color={color} />
-      { state.curRevision !== state.setRevision && (
+      { state.curRevision && state.curRevision !== state.setRevision && (
        <View style={styles.requested} />
      )}
    </View>
--- a/app/mobile/src/session/channels/Channels.styled.js
+++ b/app/mobile/src/session/channels/Channels.styled.js
@ -27,6 +27,7 @@ export const styles = StyleSheet.create({
  },
  searchbar: {
    paddingRight: 8,
+    paddingLeft: 16,
    borderBottomWidth: 1,
    borderColor: Colors.divider,
    paddingBottom: 8,
@ -73,17 +74,16 @@ export const styles = StyleSheet.create({
    flexShrink: 1,
    flexGrow: 1,
    width: '100%',
-    paddingLeft: 16,
-    paddingRight: 16,
  },
  addbottom: {
    backgroundColor: Colors.primary,
    marginRight: 8,
    display: 'flex',
    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
    borderRadius: 4,
  },
  add: {
@ -103,6 +103,8 @@ export const styles = StyleSheet.create({
    paddingTop: 8,
    borderTopWidth: 1,
    borderColor: Colors.divider,
+    display: 'flex',
+    alignItems: 'center',
  },
  cancel: {
    borderWidth: 1,
--- a/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
+++ b/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
@ -10,6 +10,8 @@ export const styles = StyleSheet.create({
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: Colors.itemDivider,
+    paddingLeft: 16,
+    paddingRight: 16,
  },
  detail: {
    paddingLeft: 12,
--- a/app/mobile/src/session/contact/Contact.jsx
+++ b/app/mobile/src/session/contact/Contact.jsx
@ -170,11 +170,15 @@ export function Contact({ contact, closeContact }) {
            <Text style={styles.nametext}>{ state.name }</Text>
          </View>
          <View style={styles.attribute}>
+            <View style={styles.glyph}>
              <Ionicons name="enviromento" size={14} color={Colors.text} />
+            </View>
            <Text style={styles.locationtext}>{ state.location }</Text>
          </View>
          <View style={styles.attribute}>
+            <View style={styles.glyph}>
              <Ionicons name="book" size={14} color={Colors.text} />
+            </View>
            <Text style={styles.descriptiontext}>{ state.description }</Text>
          </View>
        </View>
--- a/app/mobile/src/session/contact/Contact.styled.js
+++ b/app/mobile/src/session/contact/Contact.styled.js
@ -24,6 +24,9 @@ export const styles = StyleSheet.create({
    alignItems: 'center',
    justifyContent: 'center',
  },
+  glyph: {
+    paddingTop: 2,
+  },
  icon: {
    width: 32,
    paddingLeft: 8
@ -72,6 +75,8 @@ export const styles = StyleSheet.create({
  },
  detail: {
    paddingTop: 32,
+    paddingLeft: 32,
+    paddingRight: 32,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
@ -80,7 +85,6 @@ export const styles = StyleSheet.create({
  attribute: {
    display: 'flex',
    flexDirection: 'row',
-    alignItems: 'center',
    paddingBottom: 8,
  },
  nametext: {
--- a/app/mobile/src/session/conversation/Conversation.jsx
+++ b/app/mobile/src/session/conversation/Conversation.jsx
@ -71,7 +71,7 @@ export function ConversationBody() {
  const noop = () => {};

  return (
-      <KeyboardAvoidingView style={styles.thread} behavior="padding" keyboardVerticalOffset="100"
+      <KeyboardAvoidingView style={styles.thread} behavior="padding"
          enabled={Platform.OS === 'ios' ? true : false}>
        <FlatList style={styles.conversation}
           contentContainerStyle={styles.topics}
@ -136,7 +136,7 @@ export function Conversation({ closeConversation, openDetails }) {

  return (
    <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>
        <TouchableOpacity style={styles.action} onPress={openDetails}>
          <Ionicons name="setting" size={24} color={Colors.primary} />
--- a/app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx
+++ b/app/mobile/src/session/conversation/topicItem/imageThumb/ImageThumb.jsx
@ -9,7 +9,8 @@ export function ImageThumb({ topicId, asset, onAssetView }) {

  return (
    <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>
  );

--- a/app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/imageThumb/useImageThumb.hook.js
@ -17,14 +17,14 @@ export function useImageThumb(topicId, asset) {

  useEffect(() => {
    const url = conversation.actions.getTopicAssetUrl(topicId, asset.thumb); 
-    if (url) {
-      Image.getSize(url, (width, height) => {
-        updateState({ url, ratio: width / height });
-      });
-    }
+    updateState({ url });
  }, [topicId, conversation, asset]);

  const actions = {
+    loaded: (e) => {
+      const { width, height } = e.nativeEvent.source;
+      updateState({ ratio: width / height });
+    },
  };

  return { state, actions };
--- a/app/mobile/src/session/profile/Profile.jsx
+++ b/app/mobile/src/session/profile/Profile.jsx
@ -153,7 +153,9 @@ export function Profile({ navigation }) {
            <Ionicons name="edit" size={16} color={Colors.text} />
          </View>
          <View style={styles.attribute}>
+            <View style={styles.icon}>
              <Ionicons name="enviromento" size={14} color={Colors.text} />
+            </View>
            { state.location && (
              <Text style={styles.locationtext}>{ state.location }</Text>
            )}
@ -162,7 +164,9 @@ export function Profile({ navigation }) {
            )}
          </View> 
          <View style={styles.attribute}>
+            <View style={styles.icon}>
              <Ionicons name="book" size={14} color={Colors.text} />
+            </View>
            { state.description && (
              <Text style={styles.descriptiontext}>{ state.description }</Text>
            )}
@ -194,7 +198,7 @@ export function Profile({ navigation }) {
  };
 
  return (
-    <ScrollView>
+    <ScrollView style={styles.wrapper}>
      { state.tabbed && (
        <View style={styles.body}>
          <Body />
--- a/app/mobile/src/session/profile/Profile.styled.js
+++ b/app/mobile/src/session/profile/Profile.styled.js
@ -11,9 +11,14 @@ export const styles = StyleSheet.create({
    alignItems: 'center',
    justifyContent: 'center',
  },
+  icon: {
+    paddingTop: 2,
+  },
+  wrapper: {
+    backgroundColor: Colors.formBackground,
+  },
  drawer: {
    paddingTop: 16,
-    backgroundColor: Colors.formBackground,
  },
  action: {
    width: 64,
@ -78,11 +83,12 @@ export const styles = StyleSheet.create({
    flexDirection: 'column',
    alignItems: 'center',
    color: Colors.text,
+    paddingLeft: 32,
+    paddingRight: 32,
  },
  attribute: {
    display: 'flex',
    flexDirection: 'row',
-    alignItems: 'center',
    paddingBottom: 8,
  },
  nonametext: {
@ -258,7 +264,7 @@ export const styles = StyleSheet.create({
  save: {
    padding: 8,
    borderRadius: 4,
-    backgroundColor: Colors.error,
+    backgroundColor: Colors.primary,
    width: 72,
    display: 'flex',
    alignItems: 'center',
--- a/app/mobile/src/session/registry/Registry.jsx
+++ b/app/mobile/src/session/registry/Registry.jsx
@ -130,7 +130,7 @@ export function Registry({ closeRegistry, openContact }) {
        </>
      )}
      { !state.tabbed && (
-        <>
+        <SafeAreaView edges={['top', 'right', 'bottom']}>
          <View style={styles.searcharea}>
            <SafeAreaView edges={['right']}>
              <View style={styles.searchbar}>
@ -151,7 +151,6 @@ export function Registry({ closeRegistry, openContact }) {
              </View>
            </SafeAreaView>
          </View>
-          <SafeAreaView edges={['right']}>
          { state.accounts.length === 0 && state.searched && (
            <View style={style.empty}>
              <Text style={styles.emptyText}>No Contacts Found</Text>
@ -165,7 +164,6 @@ export function Registry({ closeRegistry, openContact }) {
            />
          )}
        </SafeAreaView>
-        </>
      )}
    </View>
  );
--- a/app/mobile/src/session/registry/Registry.styled.js
+++ b/app/mobile/src/session/registry/Registry.styled.js
@ -35,7 +35,7 @@ export const styles = StyleSheet.create({
  searchbar: {
    display: 'flex',
    flexDirection: 'row',
-    paddingTop: 16,
+    paddingTop: 8,
    paddingLeft: 8,
    paddingBottom: 8,
    alignItems: 'center',
--- a/app/mobile/src/session/useSession.hook.js
+++ b/app/mobile/src/session/useSession.hook.js
@ -8,8 +8,8 @@ export function useSession() {

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