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

styling for android

Browse Source
This commit is contained in:
Roland Osborne 2023-10-05 13:35:06 -07:00
parent 4c838361ff
commit 43d7c4f5ec
14 changed files with 71 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/mobile/src/constants/Colors.js
View File

@ -4,7 +4,7 @@ const LightColors = {
theme: 'light', theme: 'light',
overlay: 'dark', overlay: 'dark',
statusBar: 'dark-content', statusBar: 'dark-content',
tabBar: '#448866', tabBar: '#888888',
activeTabIcon: '#448866', activeTabIcon: '#448866',
idleTabIcon: '#888888', idleTabIcon: '#888888',
activeBorder: '#338866', activeBorder: '#338866',
@ -20,7 +20,8 @@ const LightColors = {
text: '#444444', text: '#444444',
screenBase: '#cccccc', screenBase: '#cccccc',
drawerBase: '#bbbbbb', drawerBase: '#bbbbbb',
areaBase: '#ffffff', areaBase: '#dddddd',
contentBase: '#f0f0f0',
modalBase: '#ffffff', modalBase: '#ffffff',
modalBorder: '#555555', modalBorder: '#555555',
modalOverlay: 'rgba(52,52,52,0.8)', modalOverlay: 'rgba(52,52,52,0.8)',
@ -35,7 +36,7 @@ const LightColors = {
dangerButtonText: '#ffffff', dangerButtonText: '#ffffff',
closeButton: '#bbbbbb', closeButton: '#bbbbbb',
closeButtonText: '#444444', closeButtonText: '#444444',
inputBase: '#eeeeee', inputBase: '#dddddd',
inputPlaceholder: '#888888', inputPlaceholder: '#888888',
inputText: '#444444', inputText: '#444444',
statusText: '#ffffff', statusText: '#ffffff',
@ -48,7 +49,7 @@ const LightColors = {
errorIndicator: '#ffaaaa', errorIndicator: '#ffaaaa',
horizontalDivider: '#bbbbbb', horizontalDivider: '#bbbbbb',
verticalDivider: '#aaaaaa', verticalDivider: '#aaaaaa',
itemDivider: '#eeeeee', itemDivider: '#cccccc',
unreadIndicator: '#00aa00', unreadIndicator: '#00aa00',
enabledIndicator: '#8fbea7', enabledIndicator: '#8fbea7',
disabledIndicator: '#eeeeee', disabledIndicator: '#eeeeee',
@ -68,7 +69,7 @@ const DarkColors = {
theme: 'dark', theme: 'dark',
overlay: 'dark', overlay: 'dark',
statusBar: 'light-content', statusBar: 'light-content',
tabBar: '#118811', tabBar: '#888888',
activeTabIcon: '#dddddd', activeTabIcon: '#dddddd',
idleTabIcon: '#aaaaaa', idleTabIcon: '#aaaaaa',
activeBorder: '#aaaaaa', activeBorder: '#aaaaaa',
@ -85,6 +86,7 @@ const DarkColors = {
screenBase: '#222222', screenBase: '#222222',
drawerBase: '#333333', drawerBase: '#333333',
areaBase: '#444444', areaBase: '#444444',
contentBase: '#000000',
modalBase: '#1b1b1b', modalBase: '#1b1b1b',
modalBorder: '#555555', modalBorder: '#555555',
modalOverlay: 'rgba(88,88,88,0.8)', modalOverlay: 'rgba(88,88,88,0.8)',
@ -100,7 +102,7 @@ const DarkColors = {
closeButton: '#777777', closeButton: '#777777',
closeButtonText: '#ffffff', closeButtonText: '#ffffff',
inputBase: '#777777', inputBase: '#777777',
inputPlaceholder: '#aaaaaa', inputPlaceholder: '#cccccc',
inputText: '#eeeeee', inputText: '#eeeeee',
statusText: '#ffffff', statusText: '#ffffff',
connectedIndicator: '#00cc00', connectedIndicator: '#00cc00',
@ -150,6 +152,7 @@ export const Colors = {
text: getColor('text'), text: getColor('text'),
screenBase: getColor('screenBase'), screenBase: getColor('screenBase'),
drawerBase: getColor('drawerBase'), drawerBase: getColor('drawerBase'),
contentBase: getColor('contentBase'),
areaBase: getColor('areaBase'), areaBase: getColor('areaBase'),
modalBorder: getColor('modalBorder'), modalBorder: getColor('modalBorder'),
modalOverlay: getColor('modalOverlay'), modalOverlay: getColor('modalOverlay'),

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

@ -12,7 +12,7 @@ import { styles } from './Session.styled';
import Colors from 'constants/Colors'; import Colors from 'constants/Colors';
import { Profile } from './profile/Profile'; import { Profile } from './profile/Profile';
import { ProfileSettings } from './profileSettings/ProfileSettings'; import { ProfileSettings } from './profileSettings/ProfileSettings';
import { CardsHeader, CardsBody, Cards } from './cards/Cards'; import { Cards } from './cards/Cards';
import { RegistryHeader, RegistryBody, Registry } from './registry/Registry'; import { RegistryHeader, RegistryBody, Registry } from './registry/Registry';
import { Contact } from './contact/Contact'; import { Contact } from './contact/Contact';
import { Details } from './details/Details'; import { Details } from './details/Details';
@ -141,9 +141,6 @@ function ContactStackScreen({ addChannel }) {
const [handle, setHandle] = useState(); const [handle, setHandle] = useState();
const [server, setServer] = useState(); const [server, setServer] = useState();
const [filter, setFilter] = useState();
const [sort, setSort] = useState(false);
const openContact = (navigation, contact) => { const openContact = (navigation, contact) => {
setContact(contact); setContact(contact);
navigation.navigate('contact') navigation.navigate('contact')
@ -159,10 +156,8 @@ function ContactStackScreen({ addChannel }) {
<SafeAreaView edges={['left', 'right']} style={styles.body}> <SafeAreaView edges={['left', 'right']} style={styles.body}>
<ContactStack.Navigator screenOptions={({ route }) => (screenParams)} initialRouteName="cards"> <ContactStack.Navigator screenOptions={({ route }) => (screenParams)} initialRouteName="cards">
<ContactStack.Screen name="cards" options={{ ...stackParams, cardStyle: {backgroundColor: Colors.screenBase}, headerTitle: (props) => ( <ContactStack.Screen name="cards" options={stackParams}>
<CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} /> {(props) => <Cards navigation={props.navigation} openContact={(contact) => openContact(props.navigation, contact)} openRegistry={openRegistry} addChannel={addChannel} />}
)}}>
{(props) => <CardsBody filter={filter} sort={sort} openContact={(contact) => openContact(props.navigation, contact)} addChannel={addChannel} />}
</ContactStack.Screen> </ContactStack.Screen>
<ContactStack.Screen name="contact" options={{ headerShown: false }}> <ContactStack.Screen name="contact" options={{ headerShown: false }}>

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

@ -82,12 +82,12 @@ export const styles = StyleSheet.create({
height: '100%', height: '100%',
width: '33%', width: '33%',
maxWidth: 500, maxWidth: 500,
backgroundColor: Colors.screenBase, borderRightWidth: 1,
borderColor: Colors.verticalDivider, borderColor: Colors.verticalDivider,
}, },
conversation: { conversation: {
width: '67%', width: '67%',
backgroundColor: Colors.areaBase, backgroundColor: Colors.contentBase,
}, },
drawer: { drawer: {
width: '100%', width: '100%',
@ -95,7 +95,7 @@ export const styles = StyleSheet.create({
paddingTop: 8, paddingTop: 8,
paddingLeft: 8, paddingLeft: 8,
paddingRight: 8, paddingRight: 8,
backgroundColor: Colors.drawerBase, backgroundColor: Colors.contentBase,
}, },
options: { options: {
display: 'flex', display: 'flex',

83
app/mobile/src/session/cards/Cards.jsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react'; import { useState, useEffect } from 'react';
import { Alert, FlatList, ScrollView, View, TextInput, TouchableOpacity, Text } from 'react-native'; import { Alert, FlatList, ScrollView, View, TextInput, TouchableOpacity, Text } from 'react-native';
import { styles } from './Cards.styled'; import { styles } from './Cards.styled';
import { useCards } from './useCards.hook'; import { useCards } from './useCards.hook';
@ -7,41 +7,40 @@ import AntIcons from 'react-native-vector-icons/AntDesign';
import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { Colors } from 'constants/Colors'; import { Colors } from 'constants/Colors';
import { CardItem } from './cardItem/CardItem'; import { CardItem } from './cardItem/CardItem';
import { useNavigation } from '@react-navigation/native';
import { getLanguageStrings } from 'constants/Strings';
export function CardsHeader({ filter, setFilter, sort, setSort, openRegistry }) { export function Cards({ navigation, openContact, openRegistry, addChannel }) {
const navigation = useNavigation(); const { state, actions } = useCards();
const strings = getLanguageStrings();
return ( useEffect(() => {
<View style={styles.title}> if (navigation) {
{ sort && ( navigation.setOptions({
<TouchableOpacity style={styles.sort} onPress={() => setSort(false)}> headerTitle: () => (
<MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.text} /> <View style={styles.title}>
</TouchableOpacity> { state.sort && (
)} <TouchableOpacity style={styles.sort} onPress={() => actions.setSort(false)}>
{ !sort && ( <MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.text} />
<TouchableOpacity style={styles.sort} onPress={() => setSort(true)}> </TouchableOpacity>
<MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.unsetText} /> )}
</TouchableOpacity> { !state.sort && (
)} <TouchableOpacity style={styles.sort} onPress={() => actions.setSort(true)}>
<View style={styles.inputwrapper}> <MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.unsetText} />
<AntIcons style={styles.icon} name="search1" size={16} color={Colors.inputPlaceholder} /> </TouchableOpacity>
<TextInput placeholder={ strings.contactFilter } placeholderTextColor={Colors.inputPlaceholder} value={filter} )}
style={styles.inputfield} autoCapitalize={'none'} spellCheck={false} onChangeText={setFilter} /> <View style={styles.inputwrapper}>
<View style={styles.space} /> <AntIcons style={styles.icon} name="search1" size={16} color={Colors.inputPlaceholder} />
</View> <TextInput placeholder={ state.strings.contactFilter } placeholderTextColor={Colors.inputPlaceholder} value={state.filter}
<TouchableOpacity style={styles.add} onPress={() => openRegistry(navigation)}> style={styles.inputfield} autoCapitalize={'none'} spellCheck={false} onChangeText={actions.setFilter} />
<AntIcons name={'adduser'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/> <View style={styles.space} />
<Text style={styles.newtext}>{ strings.add }</Text> </View>
</TouchableOpacity> <TouchableOpacity style={styles.add} onPress={() => openRegistry(navigation)}>
</View> <AntIcons name={'adduser'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
); <Text style={styles.newtext}>{ state.strings.add }</Text>
} </TouchableOpacity>
</View>
export function CardsBody({ filter, sort, openContact, addChannel }) { ),
const { state, actions } = useCards(filter, sort); });
}
}, [navigation]);
const call = async (contact) => { const call = async (contact) => {
try { try {
@ -57,7 +56,7 @@ export function CardsBody({ filter, sort, openContact, addChannel }) {
} }
return ( return (
<> <View style={styles.container}>
{ state.cards.length == 0 && ( { state.cards.length == 0 && (
<View style={styles.notfound}> <View style={styles.notfound}>
<Text style={styles.notfoundtext}>{ state.strings.noContacts }</Text> <Text style={styles.notfoundtext}>{ state.strings.noContacts }</Text>
@ -72,20 +71,6 @@ export function CardsBody({ filter, sort, openContact, addChannel }) {
keyExtractor={item => item.cardId} keyExtractor={item => item.cardId}
/> />
)} )}
</>
);
}
export function Cards({ openRegistry, openContact, addChannel }) {
const [filter, setFilter] = useState();
const [sort, setSort] = useState(false);
return (
<View>
<View style={styles.header}>
<CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
</View>
<CardsBody filter={filter} sort={sort} openContact={openContact} addChannel={addChannel} />
</View> </View>
); );
} }

2
app/mobile/src/session/cards/Cards.styled.js
View File

@ -7,7 +7,7 @@ export const styles = StyleSheet.create({
height: '100%', height: '100%',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
backgroundColor: Colors.screenBase, backgroundColor: Colors.contentBase,
}, },
drawer: { drawer: {
flexGrow: 1, flexGrow: 1,

8
app/mobile/src/session/cards/useCards.hook.js
View File

@ -11,6 +11,8 @@ export function useCards(filter, sort) {
cards: [], cards: [],
enableIce: false, enableIce: false,
strings: getLanguageStrings(), strings: getLanguageStrings(),
sort: false,
filter: null,
}); });
const profile = useContext(ProfileContext); const profile = useContext(ProfileContext);
@ -105,6 +107,12 @@ export function useCards(filter, sort) {
const server = node ? node : profile.state.server; const server = node ? node : profile.state.server;
await ring.actions.call(cardId, server, `${guid}.${token}`); await ring.actions.call(cardId, server, `${guid}.${token}`);
}, },
setFilter: (filter) => {
updateState({ filter });
},
setSort: (sort) => {
updateState({ sort });
},
}; };
return { state, actions }; return { state, actions };

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

@ -46,12 +46,12 @@ export function Channels({ cardId, channelId, navigation, openConversation, dmCh
headerTitle: () => ( headerTitle: () => (
<View style={styles.title}> <View style={styles.title}>
<View style={styles.inputwrapper}> <View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} /> <Ionicons style={styles.icon} name="search1" size={16} color={Colors.inputPlaceholder} />
<TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter} <TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder={ state.strings.topics} /> autoCapitalize="none" placeholderTextColor={Colors.inputPlaceholder} placeholder={ state.strings.topics} />
</View> </View>
<TouchableOpacity style={styles.addtop} onPress={actions.showAdding}> <TouchableOpacity style={styles.addtop} onPress={actions.showAdding}>
<Ionicons name={'message1'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/> <Ionicons name={'message1'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
<Text style={styles.addtext}>{ state.strings.new }</Text> <Text style={styles.addtext}>{ state.strings.new }</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>

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

@ -7,7 +7,7 @@ export const styles = StyleSheet.create({
height: '100%', height: '100%',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
backgroundColor: Colors.screenBase, backgroundColor: Colors.contentBase,
}, },
title: { title: {
display: 'flex', display: 'flex',

2
app/mobile/src/session/contact/Contact.styled.js
View File

@ -125,7 +125,7 @@ export const styles = StyleSheet.create({
minHeight: 32, minHeight: 32,
borderTopRightRadius: 32, borderTopRightRadius: 32,
borderTopLeftRadius: 32, borderTopLeftRadius: 32,
backgroundColor: Colors.screenBase, backgroundColor: Colors.contentBase,
borderTopWidth: 1, borderTopWidth: 1,
borderColor: Colors.areaBorder, borderColor: Colors.areaBorder,
borderLeftWidth: 0.2, borderLeftWidth: 0.2,

2
app/mobile/src/session/conversation/Conversation.jsx
View File

@ -67,7 +67,7 @@ export function Conversation({ navigation, cardId, channelId, closeConversation,
return ( return (
<KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={72}> <KeyboardAvoidingView style={styles.modalBase} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View style={styles.container}> <View style={styles.container}>
{ !navigation && ( { !navigation && (
<View style={styles.header}> <View style={styles.header}>

1
app/mobile/src/session/conversation/Conversation.styled.js
View File

@ -52,6 +52,7 @@ export const styles = StyleSheet.create({
flexDirection: 'column', flexDirection: 'column',
flexGrow: 1, flexGrow: 1,
height: '100%', height: '100%',
backgroundColor: Colors.contentBase,
}, },
thread: { thread: {
display: 'flex', display: 'flex',

6
app/mobile/src/session/profile/Profile.styled.js
View File

@ -106,7 +106,7 @@ export const styles = StyleSheet.create({
details: { details: {
borderTopRightRadius: 32, borderTopRightRadius: 32,
borderTopLeftRadius: 32, borderTopLeftRadius: 32,
backgroundColor: Colors.screenBase, backgroundColor: Colors.contentBase,
borderTopWidth: 1, borderTopWidth: 1,
borderColor: Colors.areaBorder, borderColor: Colors.areaBorder,
borderLeftWidth: 0.2, borderLeftWidth: 0.2,
@ -126,7 +126,7 @@ export const styles = StyleSheet.create({
edit: { edit: {
borderTopLeftRadius: 8, borderTopLeftRadius: 8,
borderTopRightRadius: 8, borderTopRightRadius: 8,
backgroundColor: Colors.screenBase, backgroundColor: Colors.contentBase,
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16, paddingRight: 16,
paddingTop: 2, paddingTop: 2,
@ -190,7 +190,7 @@ export const styles = StyleSheet.create({
divider: { divider: {
width: '100%', width: '100%',
height: 3, height: 3,
backgroundColor: Colors.screenBase, backgroundColor: Colors.contentBase,
}, },
entry: { entry: {
width: '100%', width: '100%',

2
app/mobile/src/session/profileSettings/ProfileSettings.styled.js
View File

@ -5,7 +5,7 @@ export const styles = StyleSheet.create({
drawer: { drawer: {
width: '100%', width: '100%',
height: '100%', height: '100%',
backgroundColor: Colors.drawerBase, backgroundColor: Colors.contentBase,
}, },
container: { container: {
display: 'flex', display: 'flex',

4
app/mobile/src/session/settings/Settings.styled.js
View File

@ -22,7 +22,7 @@ export const styles = StyleSheet.create({
paddingLeft: 16, paddingLeft: 16,
paddingRight: 16, paddingRight: 16,
paddingTop: 8, paddingTop: 8,
backgroundColor: Colors.screenBase, backgroundColor: Colors.contentBase,
}, },
label: { label: {
color: Colors.labelText, color: Colors.labelText,
@ -66,7 +66,7 @@ export const styles = StyleSheet.create({
divider: { divider: {
width: '100%', width: '100%',
height: 3, height: 3,
backgroundColor: Colors.screenBase, backgroundColor: Colors.contentBase,
}, },
entry: { entry: {
width: '100%', width: '100%',