preparing details screen

2025-02-11 19:19:16 +00:00 · 2023-09-25 13:06:44 -07:00 · 2023-09-25 13:06:44 -07:00 · 408a16f018
commit 408a16f018
parent 8735eff6ba
7 changed files with 171 additions and 53 deletions
--- a/app/mobile/src/constants/Strings.js
+++ b/app/mobile/src/constants/Strings.js
@ -128,6 +128,15 @@ const Strings = [
    create: 'Create',
    sealed: 'Sealed',
    newTopic: 'New Topic',
+
+    // details
+    topic: 'Topic',
+    host: 'host',
+    guest: 'guest',
+    leave: 'Leave',
+    members: 'Members',
+    editSubject: 'Edit Subject',
+    topicMembers: 'Topic Members',
  },
  {
    visibleRegistry: 'Visible dans le Registre',
@ -253,6 +262,15 @@ const Strings = [
    create: 'Créer',
    sealed: 'Protégé', 
    newTopic: 'Nourveau Sujet',
+
+    // details
+    topic: 'Sujet',
+    host: 'Hôte',
+    guest: 'Invité',
+    leave: 'Partir',
+    members: 'Membres',
+    editSubject: 'Modifier le Title',
+    topicMembers: 'Membres du Sujet',
  },
  {
    visibleRegistry: 'Visible en el Registro',
@ -378,6 +396,15 @@ const Strings = [
    create: 'Crear',
    sealed: 'Protegida',
    newTopic: 'Nuevo Tema',
+
+    // details
+    topic: 'Tema',
+    host: 'Anfitrión',
+    guest: 'Invitado',
+    leave: 'Dejar',
+    members: 'Miembros',
+    editSubject: 'Editar Título',
+    topicMembers: 'Miembros del Tema',
  },
  {
    visibleRegistry: 'Sichtbar in der Registrierung',
@ -503,6 +530,15 @@ const Strings = [
    create: 'Erstellen',
    sealed: 'Gesichert',
    newTopic: 'Neues Thema',
+
+    // details
+    topic: 'Thema',
+    host: 'Gastgeber',
+    guest: 'Gast',
+    leave: 'Verlassen',
+    members: 'Mitglieder',
+    editSubject: 'Titel bearbeiten',
+    topicMembers: 'Themenmitglieder',
  }
 ];

--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@ -87,7 +87,7 @@ function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShar
        </ConversationStack.Screen>

        <ConversationStack.Screen name="details" options={{ ...stackParams, headerTitle: (props) => (
-            <Text style={styles.headertext}>Details</Text>
+            <Text style={styles.headertext}></Text>
        )}}>
          {(props) => <Details clearConversation={() => clearConversation(props.navigation)} />}
        </ConversationStack.Screen>
--- a/app/mobile/src/session/channels/Channels.jsx
+++ b/app/mobile/src/session/channels/Channels.jsx
@ -22,9 +22,9 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
    catch (err) {
      console.log(err);
      Alert.alert(
-        'Failed to Add Topic',
-        'Please try again.'
-      )
+        state.strings.error,
+        state.strings.tryAgain,
+      );
    }
  };

--- a/app/mobile/src/session/channels/Channels.styled.js
+++ b/app/mobile/src/session/channels/Channels.styled.js
@ -122,10 +122,10 @@ export const styles = StyleSheet.create({
  },
  addMembers: {
    width: '100%',
-    borderWidth: 1,
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
    borderColor: Colors.lightgrey,
-    borderRadius: 4,
-    marginBottom: 8,
+    marginBottom: 16,
    height: 200,
  },
  emptyMembers: {
--- a/app/mobile/src/session/details/Details.jsx
+++ b/app/mobile/src/session/details/Details.jsx
@ -6,6 +6,8 @@ import AntIcons from 'react-native-vector-icons/AntDesign';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Colors from 'constants/Colors';
 import { MemberItem } from './memberItem/MemberItem';
+import { BlurView } from '@react-native-community/blur';
+import { InputField } from 'utils/InputField';

 export function Details({ channel, clearConversation }) {

@ -23,8 +25,8 @@ export function Details({ channel, clearConversation }) {
    catch (err) {
      console.log(err);
      Alert.alert(
-        'Failed to Update Membership',
-        'Please try again.'
+        state.strings.error,
+        state.strings.tryAgain,
      );
    }
  };
@ -37,9 +39,9 @@ export function Details({ channel, clearConversation }) {
    catch (err) {
      console.log(err);
      Alert.alert(
-        'Failed to Save Subject',
-        'Please try again.'
-      )
+        state.strings.error,
+        state.strings.tryAgain,
+      );
    }
  }

@ -50,9 +52,9 @@ export function Details({ channel, clearConversation }) {
    catch (err) {
      console.log(err);
      Alert.alert(
-        'Failed to Update Notifications',
-        'Please try again.',
-      )
+        state.strings.error,
+        state.strings.tryAgain,
+      );
    }
  }

@ -157,7 +159,7 @@ export function Details({ channel, clearConversation }) {
            )}
          </View>
          <Text style={styles.created}>{ state.timestamp }</Text>
-          <Text style={styles.mode}>{ state.hostId ? 'guest' : 'host' }</Text>
+          <Text style={styles.mode}>{ state.hostId ? state.strings.guest : state.strings.host }</Text>
        </View>  
      </View>

@ -203,7 +205,7 @@ export function Details({ channel, clearConversation }) {

        <View style={styles.notify}>
          <TouchableOpacity onPress={() => setNotifications(!state.notification)} activeOpacity={1}>
-            <Text style={styles.notifyText}>Enable Notifications</Text>
+            <Text style={styles.notifyText}>{ state.strings.enableNotifications }</Text>
          </TouchableOpacity>
          { state.notification != null && (
            <Switch style={styles.switch} value={state.notification} onValueChange={setNotifications} trackColor={styles.track}/>
@ -213,7 +215,7 @@ export function Details({ channel, clearConversation }) {
      </View>

      <View style={styles.members}>
-        <Text style={styles.membersLabel}>Members:</Text>
+        <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>
        )}
@ -232,23 +234,32 @@ export function Details({ channel, clearConversation }) {
        supportedOrientations={['portrait', 'landscape']}
        onRequestClose={actions.hideEditSubject}
      >
-        <KeyboardAvoidingView behavior="height" style={styles.editWrapper}>
-          <View style={styles.editContainer}>
-            <Text style={styles.editHeader}>Edit Subject:</Text>
-            <View style={styles.inputField}>
-              <TextInput style={styles.input} value={state.subjectUpdate} onChangeText={actions.setSubjectUpdate}
-                  autoCapitalize="words" placeholder="Subject" placeholderTextColor={Colors.grey} />
+        <View style={styles.modalOverlay}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+          <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+            <View style={styles.modalContainer}>
+              <Text style={styles.editHeader}>{ state.strings.editSubject }</Text>
+
+              <InputField
+                label={state.strings.subject}
+                value={state.subjectUpdate}
+                autoCapitalize={'words'}
+                spellCheck={false}
+                style={styles.field}
+                onChangeText={actions.setSubjectUpdate}
+              />
+
+              <View style={styles.editControls}>
+                <TouchableOpacity style={styles.close} onPress={actions.hideEditSubject}>
+                  <Text style={styles.closeText}>Cancel</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.save} onPress={saveSubject}>
+                  <Text style={styles.saveText}>Save</Text>
+                </TouchableOpacity>
+              </View>
            </View>
-            <View style={styles.editControls}>
-              <TouchableOpacity style={styles.cancel} onPress={actions.hideEditSubject}>
-                <Text>Cancel</Text>
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.save} onPress={saveSubject}>
-                <Text style={styles.saveText}>Save</Text>
-              </TouchableOpacity>
-            </View>
-          </View>
-        </KeyboardAvoidingView>
+          </KeyboardAvoidingView>
+        </View>
      </Modal>

      <Modal
@ -258,21 +269,24 @@ export function Details({ channel, clearConversation }) {
        supportedOrientations={['portrait', 'landscape']}
        onRequestClose={actions.hideEditMembers}
      >
-        <KeyboardAvoidingView behavior="height" style={styles.editWrapper}>
-          <View style={styles.editContainer}>
-            <Text style={styles.editHeader}>Channel Members:</Text>
-            <FlatList style={styles.editMembers}
-              data={state.connected}
-              renderItem={({ item }) => <MemberItem item={item} toggle={toggle} />}
-              keyExtractor={item => item.cardId}
-            />
-            <View style={styles.editControls}>
-              <TouchableOpacity style={styles.cancel} onPress={actions.hideEditMembers}>
-                <Text>Done</Text>
-              </TouchableOpacity>
+        <View style={styles.modalOverlay}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+          <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+            <View style={styles.modalContainer}>
+              <Text style={styles.editHeader}>{ state.strings.topicMembers }</Text>
+              <FlatList style={styles.editMembers}
+                data={state.connected}
+                renderItem={({ item }) => <MemberItem item={item} toggle={toggle} />}
+                keyExtractor={item => item.cardId}
+              />
+              <View style={styles.editControls}>
+                <TouchableOpacity style={styles.close} onPress={actions.hideEditMembers}>
+                  <Text style={styles.closeText}>{ state.strings.close }</Text>
+                </TouchableOpacity>
+              </View>
            </View>
-          </View>
-        </KeyboardAvoidingView>
+          </KeyboardAvoidingView>
+        </View>
      </Modal>

    </View>
--- a/app/mobile/src/session/details/Details.styled.js
+++ b/app/mobile/src/session/details/Details.styled.js
@ -6,6 +6,8 @@ export const styles = StyleSheet.create({
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
+    backgroundColor: Colors.screenBase,
+    height: '100%',
  },
  details: {
    display: 'flex',
@ -64,13 +66,13 @@ export const styles = StyleSheet.create({
    justifyContent: 'center',
    width: 128,
    height: 28,
-    backgroundColor: Colors.primary,
+    backgroundColor: Colors.primaryButton,
    borderRadius: 4,
    margin: 8,
    padding: 2,
  },
  buttonText: {
-    color: Colors.white,
+    color: Colors.primaryButtonText,
    padding: 4,
  },
  members: {
@ -81,9 +83,11 @@ export const styles = StyleSheet.create({
    borderColor: Colors.divider,
    display: 'flex',
    flexDirection: 'row',
+    backgroundColor: Colors.screenBase,
  },
  membersLabel: {
    paddingLeft: 16,
+    color: Colors.text,
  },
  unknown: {
    color: Colors.grey,
@ -91,6 +95,7 @@ export const styles = StyleSheet.create({
  },
  cards: {
    width: '100%',
+    backgroundColor: Colors.screenBase,
  },
  save: {
    padding: 8,
@ -138,6 +143,7 @@ export const styles = StyleSheet.create({
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-end',
+    paddingTop: 16,
  },
  editWrapper: {
    display: 'flex',
@ -148,19 +154,20 @@ export const styles = StyleSheet.create({
    backgroundColor: 'rgba(52, 52, 52, 0.8)'
  },
  editContainer: {
-    backgroundColor: Colors.formBackground,
+    backgroundColor: Colors.screenBase,
    padding: 16,
    width: '80%',
    maxWidth: 400,
  },
  editHeader: {
    fontSize: 18,
-    paddingBottom: 16,
+    paddingBottom: 8,
+    color: Colors.text,
  },
  editMembers: {
    width: '100%',
    borderWidth: 1,
-    borderColor: Colors.lightgrey,
+    borderColor: Colors.itemDivider,
    borderRadius: 4,
    marginBottom: 8,
    height: 250,
@ -183,4 +190,63 @@ export const styles = StyleSheet.create({
  switch: {
    transform: [{ scaleX: .7 }, { scaleY: .7 }],
  },
+  modalOverlay: {
+    width: '100%',
+    height: '100%',
+  },
+  modalBase: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  modalContainer: {
+    backgroundColor: Colors.modalBase,
+    width: '80%',
+    maxWidth: 400,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: 8,
+    padding: 16,
+  },
+  close: {
+    borderWidth: 1,
+    borderColor: Colors.lightgrey,
+    borderRadius: 4,
+    padding: 8,
+    marginRight: 8,
+    width: 72,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  closeText: {
+    color: Colors.cancelButtonText,
+  }, 
+  field: {
+    input: {
+      backgroundColor: Colors.inputBase,
+      borderRadius: 8,
+      minHeight: 48,
+      maxHeight: 128,
+      paddingLeft: 8,
+    },
+    inputText: {
+      color: Colors.inputText,
+    },
+    label: {
+      height: 16,
+      paddingLeft: 8,
+    },
+    labelText: {
+      color: Colors.inputPlaceholder,
+      fontSize: 12,
+    },
+    container: {
+      width: '100%',
+    },
+  },
 })
--- a/app/mobile/src/session/details/useDetails.hook.js
+++ b/app/mobile/src/session/details/useDetails.hook.js
@ -7,11 +7,13 @@ import { ProfileContext } from 'context/ProfileContext';
 import { getChannelSubjectLogo } from 'context/channelUtil';
 import { getCardByGuid } from 'context/cardUtil';
 import { getChannelSeals, isUnsealed, getContentKey, updateChannelSubject } from 'context/sealUtil';
+import { getLanguageStrings } from 'constants/Strings';
 import moment from 'moment';

 export function useDetails() {

  const [state, setState] = useState({
+    strings: getLanguageStrings(),
    subject: null,
    timestamp: null,
    logo: null,