details for tablet layout

2025-02-11 19:19:16 +00:00 · 2023-09-25 16:42:46 -07:00 · 2023-09-25 16:42:46 -07:00 · 35453fc678
commit 35453fc678
parent fa2927d5ba
9 changed files with 31 additions and 101 deletions
--- a/app/mobile/src/constants/Colors.js
+++ b/app/mobile/src/constants/Colors.js
@ -9,6 +9,7 @@ const LightColors = {
  activeBorder: '#338866',
  idleBorder: '#dddddd',
  activeFill: '#66aa88',
+  idleFill: '#888888',
  linkText: '#338866',
  dangerText: '#ff8888',
  labelText: '#555555',
@ -69,6 +70,7 @@ const DarkColors = {
  activeBorder: '#aaaaaa',
  idleBorder: '#eeeeee',
  activeFill: '#559955',
+  idleFill: '#888888',
  linkText: '#88eecc',
  dangerText: '#ffaaaa',
  labelText: '#eeeeee',
@ -132,6 +134,7 @@ export const Colors = {
  idleBorder: getColor('idleBorder'),
  activeBorder: getColor('activeBorder'),
  activeFill: getColor('activeFill'),
+  idleFill: getColor('idleFill'),
  linkText: getColor('linkText'),
  dangerText: getColor('dangerText'),
  labelText: getColor('labelText'),
--- a/app/mobile/src/constants/Strings.js
+++ b/app/mobile/src/constants/Strings.js
@ -142,6 +142,7 @@ const Strings = [
    deleteTopic: 'Delete Topic',
    blockTopic: 'Block Topic',
    reportTopic: 'Report Topic',
+    unknown: 'unknown',
  },
  {
    visibleRegistry: 'Visible dans le Registre',
@ -280,6 +281,7 @@ const Strings = [
    deleteTopic: 'Supprimer le Sujet',
    blockTopic: 'Bloquer le Sujet',
    reportTopic: 'Signaler le Sujet',
+    unknown: 'Inconnu',
  },
  {
    visibleRegistry: 'Visible en el Registro',
@ -418,6 +420,7 @@ const Strings = [
    deleteTopic: 'Borrar el Tema',
    blockTopic: 'Bloquer el Tema',
    reportTopic: 'Reportar el Tema',
+    unknown: 'Desconocido',
  },
  {
    visibleRegistry: 'Sichtbar in der Registrierung',
@ -556,6 +559,7 @@ const Strings = [
    deleteTopic: 'Das Thema Löschen',
    blockTopic: 'Blockiere das Thema',
    reportTopic: 'Das Thema Melden',
+    unknown: 'Unbekannt',
  }
 ];

--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@ -30,6 +30,7 @@ import { Call } from './call/Call';
 import { Sharing } from './sharing/Sharing';
 import splash from 'images/session.png';
 import { useNavigate } from 'react-router-dom';
+import { getLanguageStrings } from 'constants/Strings';

 const ConversationStack = createStackNavigator();
 const ProfileStack = createStackNavigator();
@ -180,6 +181,7 @@ function ContactStackScreen({ addChannel }) {

 function HomeScreen({ navParams }) {

+  const strings = getLanguageStrings();
  const drawerParams = { drawerPosition: 'right', headerShown: false, swipeEnabled: false, drawerType: 'front' };
  const conversation = useContext(ConversationContext);
  const [channel, setChannel] = useState(false);
@ -222,13 +224,13 @@ function HomeScreen({ navParams }) {
    <View style={styles.home}>
      <SafeAreaView edges={['top', 'bottom', 'left']} style={styles.sidebar}>
        <View edges={['left']} style={styles.options}>
-          <TouchableOpacity style={styles.option} onPress={openProfile}>
+          <TouchableOpacity style={styles.option} onPress={openProfile} activeOpacity={1}>
            <ProfileIcon color={Colors.text} size={24} />
-            <Text style={styles.profileLabel}>Profile</Text>
+            <Text style={styles.profileLabel}>{ strings.account }</Text>
          </TouchableOpacity>
-          <TouchableOpacity style={styles.option} onPress={openCards}>
+          <TouchableOpacity style={styles.option} onPress={openCards} activeOpacity={1}>
            <CardsIcon color={Colors.text} size={24} />
-            <Text style={styles.profileLabel}>Contacts</Text>
+            <Text style={styles.profileLabel}>{ strings.contacts }</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.channels}>
--- a/app/mobile/src/session/cards/cardItem/CardItem.styled.js
+++ b/app/mobile/src/session/cards/cardItem/CardItem.styled.js
@ -80,6 +80,7 @@ export const styles = StyleSheet.create({
  trigger: {
    triggerTouchable: {
      activeOpacity: 70,
+      underlayColor: Colors.screenBase,
    },
  },
  options: {
--- a/app/mobile/src/session/details/Details.jsx
+++ b/app/mobile/src/session/details/Details.jsx
@ -81,91 +81,10 @@ export function Details({ channel, clearConversation }) {
    });
  }

-  const remove = () => {
-    Alert.alert(
-      "Removing Topic",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Remove",
-          onPress: async () => {
-            try {
-              await actions.remove(); 
-              clearConversation();
-            }
-            catch (err) {
-              console.log(err);
-              Alert.alert(
-                'Failed to Delete Topic',
-                'Please try again.'
-              )
-            }
-          },
-        }
-      ]
-    );
-  }
-
-  const block = () => {
-    Alert.alert(
-      "Blocking Topic",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Block",
-          onPress: async () => {
-            try {
-              await actions.block();
-              clearConversation();
-            }
-            catch (err) {
-              console.log(err);
-              Alert.alert(
-                'Failed to Block Topic',
-                'Please try again.'
-              )
-            }
-          },
-        }
-      ]
-    );
-  }
-
-
-  const report = () => {
-    Alert.alert(
-      "Report Topic",
-      "Confirm?",
-      [
-        { text: "Cancel",
-          onPress: () => {},
-        },
-        { text: "Report",
-          onPress: async () => {
-            try {
-              await actions.report();
-            }
-            catch (err) {
-              console.log(err);
-              Alert.alert(
-                'Failed to Report Topic',
-                'Please try again.'
-              )
-            }
-          },
-        }
-      ]
-    );
-  }
-
  return (
    <View style={styles.body}>
      <View style={styles.details}>
-        <Logo src={state.logo} width={72} height={72} radius={8} />
+        <Logo src={state.logo} width={92} height={92} radius={8} />
        <View style={styles.info}>
          <View style={styles.subject}>
            { state.locked && !state.unlocked && (
@ -192,7 +111,8 @@ export function Details({ channel, clearConversation }) {
            <Text style={styles.notifyText}>{ state.strings.enableNotifications }</Text>
          </TouchableOpacity>
          { state.notification != null && (
-            <Switch style={styles.switch} value={state.notification} onValueChange={setNotifications} trackColor={styles.track}/>
+            <Switch value={state.notification} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip}
+                ios_backgroundColor={Colors.idleFill} trackColor={styles.track} onValueChange={setNotifications} />
          )}
        </View>
      </View>
@ -236,7 +156,7 @@ export function Details({ channel, clearConversation }) {
      <View style={styles.members}>
        <Text style={styles.membersLabel}>{ state.strings.members }</Text>
        { state.count - state.members.length > 0 && (
-          <Text style={styles.unknown}> (+ {state.count - state.contacts.length} unknown)</Text>
+          <Text style={styles.unknown}> (+ {state.count - state.contacts.length}) { state.strings.unknown }</Text>
        )}
      </View>

--- a/app/mobile/src/session/details/Details.styled.js
+++ b/app/mobile/src/session/details/Details.styled.js
@ -80,7 +80,7 @@ export const styles = StyleSheet.create({
    paddingTop: 24,
    width: '100%',
    borderBottomWidth: 1,
-    borderColor: Colors.divider,
+    borderColor: Colors.itemDivider,
    display: 'flex',
    flexDirection: 'row',
    backgroundColor: Colors.screenBase,
@ -183,13 +183,6 @@ export const styles = StyleSheet.create({
    fontSize: 16,
    color: Colors.text,
  },
-  track: {
-    false: Colors.grey,
-    true: Colors.background,
-  },
-  switch: {
-    transform: [{ scaleX: .7 }, { scaleY: .7 }],
-  },
  modalOverlay: {
    width: '100%',
    height: '100%',
@ -215,7 +208,7 @@ export const styles = StyleSheet.create({
  },
  close: {
    borderWidth: 1,
-    borderColor: Colors.lightgrey,
+    borderColor: Colors.closeButton,
    borderRadius: 4,
    padding: 8,
    marginRight: 8,
@ -224,7 +217,7 @@ export const styles = StyleSheet.create({
    alignItems: 'center',
  },
  closeText: {
-    color: Colors.cancelButtonText,
+    color: Colors.closeButtonText,
  }, 
  field: {
    input: {
@ -283,4 +276,11 @@ export const styles = StyleSheet.create({
    color: Colors.linkText,
    fontSize: 10,
  },
+  track: {
+    false: Colors.idleFill,
+    true: Colors.activeFill,
+  },
+  visibleSwitch: {
+    transform: [{ scaleX: .6 }, { scaleY: .6 }],
+  },
 })
--- a/app/mobile/src/session/details/useDetails.hook.js
+++ b/app/mobile/src/session/details/useDetails.hook.js
@ -50,7 +50,7 @@ export function useDetails(clear) {
      const notification = await conversation.actions.getNotifications();
      updateState({ notification });
    })();
-  }, []);
+  }, [conversation.state.card, conversation.state.channel]);

  useEffect(() => {
    let locked;
--- a/app/mobile/src/session/profile/Profile.jsx
+++ b/app/mobile/src/session/profile/Profile.jsx
@ -121,7 +121,7 @@ export function Profile({ drawer }) {
              <Text style={styles.visibleLabel}>{ state.strings.visibleRegistry }</Text>
            </TouchableOpacity>
            <Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip}
-                ios_backgroundColor={Colors.disabledIndicator} trackColor={styles.track} onValueChange={setVisible} />
+                ios_backgroundColor={Colors.idleFill} trackColor={styles.track} onValueChange={setVisible} />
          </TouchableOpacity>
        </View>
      )}
--- a/app/mobile/src/session/settings/Settings.jsx
+++ b/app/mobile/src/session/settings/Settings.jsx
@ -173,7 +173,7 @@ export function Settings({ drawer }) {
              <TouchableOpacity activeOpacity={1} onPress={() => setNotifications(!state.pushEnabled)}>
                <Text style={styles.optionText}>{ state.strings.enableNotifications }</Text>
              </TouchableOpacity>
-              <Switch value={state.pushEnabled} style={Platform.OS==='ios' ? styles.notifications : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
+              <Switch value={state.pushEnabled} style={Platform.OS==='ios' ? styles.notifications : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.idleFill}
                  trackColor={styles.track} onValueChange={setNotifications} />
            </View>
          </TouchableOpacity>