implemented styled channels list

2025-02-11 19:19:16 +00:00 · 2023-09-24 11:09:37 -07:00 · 2023-09-24 11:09:37 -07:00 · 8735eff6ba
commit 8735eff6ba
parent 5b5db51ad3
8 changed files with 178 additions and 78 deletions
--- a/app/mobile/src/constants/Strings.js
+++ b/app/mobile/src/constants/Strings.js
@ -119,6 +119,15 @@ const Strings = [
    messageContact: 'Message Contact',
    callContact: 'Call Contact',
    noContacts: 'No Contacts Found',
+
+    // channels list
+    profile: 'Profile',
+    contacts: 'Contacts',
+    topics: 'Topics',
+    subject: 'Subject (optional)',
+    create: 'Create',
+    sealed: 'Sealed',
+    newTopic: 'New Topic',
  },
  {
    visibleRegistry: 'Visible dans le Registre',
@ -235,6 +244,15 @@ const Strings = [
    messageContact: 'Envoyer un Message',
    callContact: 'Appeler le Contact',
    noContacts: 'Aucun Contact Trouvé',
+
+    // channels list
+    profile: 'Profil',
+    contacts: 'Contacts',
+    topics: 'Sujets',
+    subject: 'Titre (optionnel)',
+    create: 'Créer',
+    sealed: 'Protégé', 
+    newTopic: 'Nourveau Sujet',
  },
  {
    visibleRegistry: 'Visible en el Registro',
@ -351,6 +369,15 @@ const Strings = [
    messageContact: 'Enviar Mensaje',
    callContact: 'Llamar Contacto',
    noContacts: 'No Encontraron Contactos',
+
+    // channels list
+    profile: 'Perfil',
+    contacts: 'Contactos',
+    topics: 'Temas',
+    subject: 'Título (opcional)',
+    create: 'Crear',
+    sealed: 'Protegida',
+    newTopic: 'Nuevo Tema',
  },
  {
    visibleRegistry: 'Sichtbar in der Registrierung',
@ -467,6 +494,15 @@ const Strings = [
    messageContact: 'Nachricht Senden',
    callContact: 'Kontakt Anrufen',
    noContacts: 'Keine Kontakte Gefunden',
+    
+    // channels list
+    profile: 'Profil',
+    contacts: 'Kontakte',
+    topics: 'Themen',
+    subject: 'Titel (optional)',
+    create: 'Erstellen',
+    sealed: 'Gesichert',
+    newTopic: 'Neues Thema',
  }
 ];

--- a/app/mobile/src/session/Session.jsx
+++ b/app/mobile/src/session/Session.jsx
@ -43,8 +43,8 @@ const RegistryDrawer = createDrawerNavigator();
 const Tab = createBottomTabNavigator();

 function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShareIntent }) {
-  const stackParams = { headerStyle: { backgroundColor: Colors.areaBase }, headerBackTitleVisible: false };
-  const screenParams = { headerShown: true };
+  const stackParams = { headerStyle: { backgroundColor: Colors.screenBase }, headerBackTitleVisible: false };
+  const screenParams = { headerShown: true, headerTintColor: Colors.primary };

  const conversation = useContext(ConversationContext);
  const [cardId, setCardId] = useState();
@ -223,11 +223,11 @@ function HomeScreen({ navParams }) {
      <SafeAreaView edges={['top', 'bottom', 'left']} style={styles.sidebar}>
        <View edges={['left']} style={styles.options}>
          <TouchableOpacity style={styles.option} onPress={openProfile}>
-            <ProfileIcon color={Colors.text} size={20} />
+            <ProfileIcon color={Colors.text} size={24} />
            <Text style={styles.profileLabel}>Profile</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.option} onPress={openCards}>
-            <CardsIcon color={Colors.text} size={20} />
+            <CardsIcon color={Colors.text} size={24} />
            <Text style={styles.profileLabel}>Contacts</Text>
          </TouchableOpacity>
        </View>
--- a/app/mobile/src/session/Session.styled.js
+++ b/app/mobile/src/session/Session.styled.js
@ -82,7 +82,7 @@ export const styles = StyleSheet.create({
    height: '100%',
    width: '33%',
    maxWidth: 500,
-    borderRightWidth: 1,
+    backgroundColor: Colors.screenBase,
    borderColor: Colors.verticalDivider,
  },
  conversation: {
@ -135,6 +135,7 @@ export const styles = StyleSheet.create({
  },
  profileLabel: {
    paddingLeft: 8,
+    color: Colors.text,
  },
  headertext: {
    fontSize: 18,
--- a/app/mobile/src/session/channels/Channels.jsx
+++ b/app/mobile/src/session/channels/Channels.jsx
@ -6,6 +6,8 @@ import { useChannels } from './useChannels.hook';
 import { Colors } from 'constants/Colors';
 import { ChannelItem } from './channelItem/ChannelItem';
 import { AddMember } from './addMember/AddMember';
+import { BlurView } from '@react-native-community/blur';
+import { InputField } from 'utils/InputField';

 export function Channels({ cardId, channelId, navigation, openConversation, dmChannel, shareChannel }) {

@ -69,25 +71,25 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
          </View>
        </View>
      )}
-        { state.channels.length == 0 && (
-          <View style={styles.notfound}>
-            <Text style={styles.notfoundtext}>No Topics Found</Text>
-          </View>
-        )}
-        { state.channels.length != 0 && (
-          <FlatList 
-            style={styles.content}
-            data={state.channels}
-            initialNumToRender={25}
-            renderItem={({ item }) => <ChannelItem cardId={cardId} channelId={channelId} item={item} openConversation={openConversation} />}
-            keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
-          />
-        )}
+      { state.channels.length == 0 && (
+        <View style={styles.notfound}>
+          <Text style={styles.notfoundtext}>No Topics Found</Text>
+        </View>
+      )}
+      { state.channels.length != 0 && (
+        <FlatList 
+          style={styles.content}
+          data={state.channels}
+          initialNumToRender={25}
+          renderItem={({ item }) => <ChannelItem cardId={cardId} channelId={channelId} item={item} openConversation={openConversation} />}
+          keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
+        />
+      )}
      { !navigation && (
        <View style={styles.columnbottom}>
          <TouchableOpacity style={styles.addbottom} onPress={actions.showAdding}>
            <Ionicons name={'message1'} size={16} color={Colors.white} />
-            <Text style={styles.addtext}>New Topic</Text>
+            <Text style={styles.addtext}>{ state.strings.newTopic }</Text>
          </TouchableOpacity>
        </View>
      )}
@ -98,51 +100,61 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
          supportedOrientations={['portrait', 'landscape']}
          onRequestClose={actions.hideAdding}
        >
-        <KeyboardAvoidingView behavior="height" style={styles.addWrapper}>
-          <View style={styles.addContainer}>
-            <Text style={styles.addHeader}>New Topic:</Text>
-            <View style={styles.addField}>
-              <TextInput style={styles.input} value={state.addSubject} onChangeText={actions.setAddSubject}
-                  autoCapitalize="words" placeholder="Subject (optional)" placeholderTextColor={Colors.grey} />
-            </View>
-            <Text style={styles.label}>Members:</Text>
-            { state.contacts.length == 0 && (
-              <View style={styles.emptyMembers}>
-                <Text style={styles.empty}>No Connected Contacts</Text>
-              </View>
-            )}
-            { state.contacts.length > 0 && (
-              <FlatList style={styles.addMembers}
-                data={state.contacts}
-                renderItem={({ item }) => <AddMember members={state.addMembers} item={item}
-                    setCard={actions.setAddMember} clearCard={actions.clearAddMember} />}
-                keyExtractor={item => item.cardId}
+        <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.addHeader}>{ state.strings.newTopic }</Text>
+
+              <InputField
+                label={state.strings.subject}
+                value={state.addSubject}
+                autoCapitalize={'words'}
+                spellCheck={false}
+                style={styles.field}
+                onChangeText={actions.setAddSubject}
              />
-            )}
-            <View style={styles.addControls}>
-              <View style={styles.sealed}>
-                { state.sealable && (
-                  <>
-                    <Switch style={styles.switch} trackColor={styles.track}
-                      value={state.sealed} onValueChange={actions.setSealed} />
-                    <Text>Sealed</Text>
-                  </>
-                )}
+
+              <Text style={styles.label}>Members:</Text>
+              { state.contacts.length == 0 && (
+                <View style={styles.emptyMembers}>
+                  <Text style={styles.empty}>No Connected Contacts</Text>
+                </View>
+              )}
+              { state.contacts.length > 0 && (
+                <FlatList style={styles.addMembers}
+                  data={state.contacts}
+                  renderItem={({ item }) => <AddMember members={state.addMembers} item={item}
+                      setCard={actions.setAddMember} clearCard={actions.clearAddMember} />}
+                  keyExtractor={item => item.cardId}
+                />
+              )}
+              <View style={styles.addControls}>
+                <View style={styles.sealed}>
+                  { state.sealable && (
+                    <>
+                      <Switch style={styles.switch} trackColor={styles.track}
+                        value={state.sealed} onValueChange={actions.setSealed} />
+                      <Text style={styles.sealedText}>{ state.strings.sealed }</Text>
+                    </>
+                  )}
+                </View>
+                <TouchableOpacity style={styles.cancel} onPress={actions.hideAdding}>
+                  <Text style={styles.cancelText}>{ state.strings.cancel }</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.save} onPress={addChannel}>
+                  { state.busy && (
+                    <ActivityIndicator color={Colors.text} />
+                  )}
+                  { !state.busy && (
+                    <Text style={styles.saveText}>{ state.strings.create }</Text>
+                  )}
+                </TouchableOpacity>
              </View>
-              <TouchableOpacity style={styles.cancel} onPress={actions.hideAdding}>
-                <Text>Cancel</Text>
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.save} onPress={addChannel}>
-                { state.busy && (
-                  <ActivityIndicator color={Colors.white} />
-                )}
-                { !state.busy && (
-                  <Text style={styles.saveText}>Create</Text>
-                )}
-              </TouchableOpacity>
            </View>
-          </View>
-        </KeyboardAvoidingView>
+          </KeyboardAvoidingView>
+        </View>
      </Modal>
    </View>
  );
--- a/app/mobile/src/session/channels/Channels.styled.js
+++ b/app/mobile/src/session/channels/Channels.styled.js
@ -7,6 +7,7 @@ export const styles = StyleSheet.create({
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
+    backgroundColor: Colors.screenBase,
  },
  title: {
    display: 'flex',
@ -18,10 +19,11 @@ export const styles = StyleSheet.create({
    display: 'flex',
    flexDirection: 'row',
    borderRadius: 4,
-    backgroundColor: Colors.white,
+    backgroundColor: Colors.inputBase,
    alignItems: 'center',
    flexGrow: 1,
    flexShrink: 1,
+    marginRight: 8,
    paddingTop: 4,
    paddingBottom: 4,
  },
@ -30,7 +32,7 @@ export const styles = StyleSheet.create({
    flexGrow: 1,
    textAlign: 'center',
    padding: 4,
-    color: Colors.text,
+    color: Colors.inputText,
    fontSize: 14,
  },
  addField: {
@ -113,15 +115,10 @@ export const styles = StyleSheet.create({
    justifyContent: 'center',
    backgroundColor: 'rgba(52, 52, 52, 0.8)'
  },
-  addContainer: {
-    backgroundColor: Colors.formBackground,
-    padding: 16,
-    width: '80%',
-    maxWidth: 400,
-  },
  addHeader: {
    fontSize: 18,
-    paddingBottom: 16,
+    paddingBottom: 8,
+    color: Colors.text,
  },
  addMembers: {
    width: '100%',
@ -168,10 +165,16 @@ export const styles = StyleSheet.create({
    justifyContent: 'center',
  },
  saveText: {
-    color: Colors.white,
+    color: Colors.primaryButtonText,
    paddingRight: 4,
    paddingLeft: 4,
  },
+  cancelText: {
+    color: Colors.cancelButtonText,
+  },
+  sealedText: {
+    color: Colors.text,
+  },
  addControls: {
    display: 'flex',
    flexDirection: 'row',
@ -192,5 +195,51 @@ 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,
+  },
+  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/channels/channelItem/ChannelItem.jsx
+++ b/app/mobile/src/session/channels/channelItem/ChannelItem.jsx
@ -11,7 +11,7 @@ export function ChannelItem({ cardId, channelId, item, openConversation }) {

  return (
    <TouchableOpacity style={container} activeOpacity={1} onPress={() => openConversation(item.cardId, item.channelId, item.revision)}>
-      <Logo src={item.logo} width={32} height={32} radius={3} />
+      <Logo src={item.logo} width={48} height={48} radius={6} />
      <View style={styles.detail}>
        <View style={styles.subject}>
          { item.locked && !item.unlocked && (
--- a/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
+++ b/app/mobile/src/session/channels/channelItem/ChannelItem.styled.js
@ -6,7 +6,7 @@ export const styles = StyleSheet.create({
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
-    height: 48,
+    height: 64,
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: Colors.itemDivider,
@ -17,13 +17,13 @@ export const styles = StyleSheet.create({
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
-    height: 48,
+    height: 64,
    alignItems: 'center',
    borderBottomWidth: 1,
    borderColor: Colors.itemDivider,
    paddingLeft: 16,
    paddingRight: 16,
-    backgroundColor: Colors.formFocus,
+    backgroundColor: Colors.areaBase,
  },
  detail: {
    paddingLeft: 12,
@ -42,11 +42,11 @@ export const styles = StyleSheet.create({
  },
  subjectText: {
    color: Colors.text,
-    fontSize: 14,
+    fontSize: 16,
  },
  message: {
    color: Colors.disabled,
-    fontSize: 12,
+    fontSize: 14,
  },
  dot: {
    width: 8,
--- a/app/mobile/src/session/channels/useChannels.hook.js
+++ b/app/mobile/src/session/channels/useChannels.hook.js
@ -7,9 +7,11 @@ import { ProfileContext } from 'context/ProfileContext';
 import { getChannelSeals, isUnsealed, getContentKey, encryptChannelSubject, decryptChannelSubject, decryptTopicSubject } from 'context/sealUtil';
 import { getCardByGuid } from 'context/cardUtil';
 import { getChannelSubjectLogo } from 'context/channelUtil';
+import { getLanguageStrings } from 'constants/Strings';

 export function useChannels() {
  const [state, setState] = useState({
+    strings: getLanguageStrings(),
    filter: null,
    channels: [],
    adding: false,