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

implemented styled channels list

Browse Source
This commit is contained in:
balzack 2023-09-24 11:09:37 -07:00
parent 5b5db51ad3
commit 8735eff6ba
8 changed files with 178 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/mobile/src/constants/Strings.js
View File

@ -119,6 +119,15 @@ const Strings = [
messageContact: 'Message Contact', messageContact: 'Message Contact',
callContact: 'Call Contact', callContact: 'Call Contact',
noContacts: 'No Contacts Found', 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', visibleRegistry: 'Visible dans le Registre',
@ -235,6 +244,15 @@ const Strings = [
messageContact: 'Envoyer un Message', messageContact: 'Envoyer un Message',
callContact: 'Appeler le Contact', callContact: 'Appeler le Contact',
noContacts: 'Aucun Contact Trouvé', 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', visibleRegistry: 'Visible en el Registro',
@ -351,6 +369,15 @@ const Strings = [
messageContact: 'Enviar Mensaje', messageContact: 'Enviar Mensaje',
callContact: 'Llamar Contacto', callContact: 'Llamar Contacto',
noContacts: 'No Encontraron Contactos', 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', visibleRegistry: 'Sichtbar in der Registrierung',
@ -467,6 +494,15 @@ const Strings = [
messageContact: 'Nachricht Senden', messageContact: 'Nachricht Senden',
callContact: 'Kontakt Anrufen', callContact: 'Kontakt Anrufen',
noContacts: 'Keine Kontakte Gefunden', noContacts: 'Keine Kontakte Gefunden',
// channels list
profile: 'Profil',
contacts: 'Kontakte',
topics: 'Themen',
subject: 'Titel (optional)',
create: 'Erstellen',
sealed: 'Gesichert',
newTopic: 'Neues Thema',
} }
]; ];

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

@ -43,8 +43,8 @@ const RegistryDrawer = createDrawerNavigator();
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShareIntent }) { function ConversationStackScreen({ dmChannel, shareChannel, shareIntent, setShareIntent }) {
const stackParams = { headerStyle: { backgroundColor: Colors.areaBase }, headerBackTitleVisible: false }; const stackParams = { headerStyle: { backgroundColor: Colors.screenBase }, headerBackTitleVisible: false };
const screenParams = { headerShown: true }; const screenParams = { headerShown: true, headerTintColor: Colors.primary };
const conversation = useContext(ConversationContext); const conversation = useContext(ConversationContext);
const [cardId, setCardId] = useState(); const [cardId, setCardId] = useState();
@ -223,11 +223,11 @@ function HomeScreen({ navParams }) {
<SafeAreaView edges={['top', 'bottom', 'left']} style={styles.sidebar}> <SafeAreaView edges={['top', 'bottom', 'left']} style={styles.sidebar}>
<View edges={['left']} style={styles.options}> <View edges={['left']} style={styles.options}>
<TouchableOpacity style={styles.option} onPress={openProfile}> <TouchableOpacity style={styles.option} onPress={openProfile}>
<ProfileIcon color={Colors.text} size={20} /> <ProfileIcon color={Colors.text} size={24} />
<Text style={styles.profileLabel}>Profile</Text> <Text style={styles.profileLabel}>Profile</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={styles.option} onPress={openCards}> <TouchableOpacity style={styles.option} onPress={openCards}>
<CardsIcon color={Colors.text} size={20} /> <CardsIcon color={Colors.text} size={24} />
<Text style={styles.profileLabel}>Contacts</Text> <Text style={styles.profileLabel}>Contacts</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>

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

@ -82,7 +82,7 @@ export const styles = StyleSheet.create({
height: '100%', height: '100%',
width: '33%', width: '33%',
maxWidth: 500, maxWidth: 500,
borderRightWidth: 1, backgroundColor: Colors.screenBase,
borderColor: Colors.verticalDivider, borderColor: Colors.verticalDivider,
}, },
conversation: { conversation: {
@ -135,6 +135,7 @@ export const styles = StyleSheet.create({
}, },
profileLabel: { profileLabel: {
paddingLeft: 8, paddingLeft: 8,
color: Colors.text,
}, },
headertext: { headertext: {
fontSize: 18, fontSize: 18,

126
app/mobile/src/session/channels/Channels.jsx
View File

@ -6,6 +6,8 @@ import { useChannels } from './useChannels.hook';
import { Colors } from 'constants/Colors'; import { Colors } from 'constants/Colors';
import { ChannelItem } from './channelItem/ChannelItem'; import { ChannelItem } from './channelItem/ChannelItem';
import { AddMember } from './addMember/AddMember'; 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 }) { export function Channels({ cardId, channelId, navigation, openConversation, dmChannel, shareChannel }) {
@ -69,25 +71,25 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
</View> </View>
</View> </View>
)} )}
{ state.channels.length == 0 && ( { state.channels.length == 0 && (
<View style={styles.notfound}> <View style={styles.notfound}>
<Text style={styles.notfoundtext}>No Topics Found</Text> <Text style={styles.notfoundtext}>No Topics Found</Text>
</View> </View>
)} )}
{ state.channels.length != 0 && ( { state.channels.length != 0 && (
<FlatList <FlatList
style={styles.content} style={styles.content}
data={state.channels} data={state.channels}
initialNumToRender={25} initialNumToRender={25}
renderItem={({ item }) => <ChannelItem cardId={cardId} channelId={channelId} item={item} openConversation={openConversation} />} renderItem={({ item }) => <ChannelItem cardId={cardId} channelId={channelId} item={item} openConversation={openConversation} />}
keyExtractor={item => (`${item.cardId}:${item.channelId}`)} keyExtractor={item => (`${item.cardId}:${item.channelId}`)}
/> />
)} )}
{ !navigation && ( { !navigation && (
<View style={styles.columnbottom}> <View style={styles.columnbottom}>
<TouchableOpacity style={styles.addbottom} onPress={actions.showAdding}> <TouchableOpacity style={styles.addbottom} onPress={actions.showAdding}>
<Ionicons name={'message1'} size={16} color={Colors.white} /> <Ionicons name={'message1'} size={16} color={Colors.white} />
<Text style={styles.addtext}>New Topic</Text> <Text style={styles.addtext}>{ state.strings.newTopic }</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
)} )}
@ -98,51 +100,61 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
supportedOrientations={['portrait', 'landscape']} supportedOrientations={['portrait', 'landscape']}
onRequestClose={actions.hideAdding} onRequestClose={actions.hideAdding}
> >
<KeyboardAvoidingView behavior="height" style={styles.addWrapper}> <View style={styles.modalOverlay}>
<View style={styles.addContainer}> <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<Text style={styles.addHeader}>New Topic:</Text> <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.addField}>
<TextInput style={styles.input} value={state.addSubject} onChangeText={actions.setAddSubject} <View style={styles.modalContainer}>
autoCapitalize="words" placeholder="Subject (optional)" placeholderTextColor={Colors.grey} /> <Text style={styles.addHeader}>{ state.strings.newTopic }</Text>
</View>
<Text style={styles.label}>Members:</Text> <InputField
{ state.contacts.length == 0 && ( label={state.strings.subject}
<View style={styles.emptyMembers}> value={state.addSubject}
<Text style={styles.empty}>No Connected Contacts</Text> autoCapitalize={'words'}
</View> spellCheck={false}
)} style={styles.field}
{ state.contacts.length > 0 && ( onChangeText={actions.setAddSubject}
<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}> <Text style={styles.label}>Members:</Text>
<View style={styles.sealed}> { state.contacts.length == 0 && (
{ state.sealable && ( <View style={styles.emptyMembers}>
<> <Text style={styles.empty}>No Connected Contacts</Text>
<Switch style={styles.switch} trackColor={styles.track} </View>
value={state.sealed} onValueChange={actions.setSealed} /> )}
<Text>Sealed</Text> { 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> </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>
</View> </KeyboardAvoidingView>
</KeyboardAvoidingView> </View>
</Modal> </Modal>
</View> </View>
); );

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

@ -7,6 +7,7 @@ export const styles = StyleSheet.create({
height: '100%', height: '100%',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
backgroundColor: Colors.screenBase,
}, },
title: { title: {
display: 'flex', display: 'flex',
@ -18,10 +19,11 @@ export const styles = StyleSheet.create({
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
borderRadius: 4, borderRadius: 4,
backgroundColor: Colors.white, backgroundColor: Colors.inputBase,
alignItems: 'center', alignItems: 'center',
flexGrow: 1, flexGrow: 1,
flexShrink: 1, flexShrink: 1,
marginRight: 8,
paddingTop: 4, paddingTop: 4,
paddingBottom: 4, paddingBottom: 4,
}, },
@ -30,7 +32,7 @@ export const styles = StyleSheet.create({
flexGrow: 1, flexGrow: 1,
textAlign: 'center', textAlign: 'center',
padding: 4, padding: 4,
color: Colors.text, color: Colors.inputText,
fontSize: 14, fontSize: 14,
}, },
addField: { addField: {
@ -113,15 +115,10 @@ export const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
backgroundColor: 'rgba(52, 52, 52, 0.8)' backgroundColor: 'rgba(52, 52, 52, 0.8)'
}, },
addContainer: {
backgroundColor: Colors.formBackground,
padding: 16,
width: '80%',
maxWidth: 400,
},
addHeader: { addHeader: {
fontSize: 18, fontSize: 18,
paddingBottom: 16, paddingBottom: 8,
color: Colors.text,
}, },
addMembers: { addMembers: {
width: '100%', width: '100%',
@ -168,10 +165,16 @@ export const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
}, },
saveText: { saveText: {
color: Colors.white, color: Colors.primaryButtonText,
paddingRight: 4, paddingRight: 4,
paddingLeft: 4, paddingLeft: 4,
}, },
cancelText: {
color: Colors.cancelButtonText,
},
sealedText: {
color: Colors.text,
},
addControls: { addControls: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
@ -192,5 +195,51 @@ export const styles = StyleSheet.create({
switch: { switch: {
transform: [{ scaleX: .7 }, { scaleY: .7 }], 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%',
},
},
}); });

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

@ -11,7 +11,7 @@ export function ChannelItem({ cardId, channelId, item, openConversation }) {
return ( return (
<TouchableOpacity style={container} activeOpacity={1} onPress={() => openConversation(item.cardId, item.channelId, item.revision)}> <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.detail}>
<View style={styles.subject}> <View style={styles.subject}>
{ item.locked && !item.unlocked && ( { item.locked && !item.unlocked && (

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

@ -6,7 +6,7 @@ export const styles = StyleSheet.create({
width: '100%', width: '100%',
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
height: 48, height: 64,
alignItems: 'center', alignItems: 'center',
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.itemDivider, borderColor: Colors.itemDivider,
@ -17,13 +17,13 @@ export const styles = StyleSheet.create({
width: '100%', width: '100%',
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
height: 48, height: 64,
alignItems: 'center', alignItems: 'center',
borderBottomWidth: 1, borderBottomWidth: 1,
borderColor: Colors.itemDivider, borderColor: Colors.itemDivider,
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16, paddingRight: 16,
backgroundColor: Colors.formFocus, backgroundColor: Colors.areaBase,
}, },
detail: { detail: {
paddingLeft: 12, paddingLeft: 12,
@ -42,11 +42,11 @@ export const styles = StyleSheet.create({
}, },
subjectText: { subjectText: {
color: Colors.text, color: Colors.text,
fontSize: 14, fontSize: 16,
}, },
message: { message: {
color: Colors.disabled, color: Colors.disabled,
fontSize: 12, fontSize: 14,
}, },
dot: { dot: {
width: 8, width: 8,

2
app/mobile/src/session/channels/useChannels.hook.js
View File

@ -7,9 +7,11 @@ import { ProfileContext } from 'context/ProfileContext';
import { getChannelSeals, isUnsealed, getContentKey, encryptChannelSubject, decryptChannelSubject, decryptTopicSubject } from 'context/sealUtil'; import { getChannelSeals, isUnsealed, getContentKey, encryptChannelSubject, decryptChannelSubject, decryptTopicSubject } from 'context/sealUtil';
import { getCardByGuid } from 'context/cardUtil'; import { getCardByGuid } from 'context/cardUtil';
import { getChannelSubjectLogo } from 'context/channelUtil'; import { getChannelSubjectLogo } from 'context/channelUtil';
import { getLanguageStrings } from 'constants/Strings';
export function useChannels() { export function useChannels() {
const [state, setState] = useState({ const [state, setState] = useState({
strings: getLanguageStrings(),
filter: null, filter: null,
channels: [], channels: [],
adding: false, adding: false,