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',
overlay: 'dark',
statusBar: 'dark-content',
tabBar: '#448866',
tabBar: '#888888',
activeTabIcon: '#448866',
idleTabIcon: '#888888',
activeBorder: '#338866',
@ -20,7 +20,8 @@ const LightColors = {
text: '#444444',
screenBase: '#cccccc',
drawerBase: '#bbbbbb',
areaBase: '#ffffff',
areaBase: '#dddddd',
contentBase: '#f0f0f0',
modalBase: '#ffffff',
modalBorder: '#555555',
modalOverlay: 'rgba(52,52,52,0.8)',
@ -35,7 +36,7 @@ const LightColors = {
dangerButtonText: '#ffffff',
closeButton: '#bbbbbb',
closeButtonText: '#444444',
inputBase: '#eeeeee',
inputBase: '#dddddd',
inputPlaceholder: '#888888',
inputText: '#444444',
statusText: '#ffffff',
@ -48,7 +49,7 @@ const LightColors = {
errorIndicator: '#ffaaaa',
horizontalDivider: '#bbbbbb',
verticalDivider: '#aaaaaa',
itemDivider: '#eeeeee',
itemDivider: '#cccccc',
unreadIndicator: '#00aa00',
enabledIndicator: '#8fbea7',
disabledIndicator: '#eeeeee',
@ -68,7 +69,7 @@ const DarkColors = {
theme: 'dark',
overlay: 'dark',
statusBar: 'light-content',
tabBar: '#118811',
tabBar: '#888888',
activeTabIcon: '#dddddd',
idleTabIcon: '#aaaaaa',
activeBorder: '#aaaaaa',
@ -85,6 +86,7 @@ const DarkColors = {
screenBase: '#222222',
drawerBase: '#333333',
areaBase: '#444444',
contentBase: '#000000',
modalBase: '#1b1b1b',
modalBorder: '#555555',
modalOverlay: 'rgba(88,88,88,0.8)',
@ -100,7 +102,7 @@ const DarkColors = {
closeButton: '#777777',
closeButtonText: '#ffffff',
inputBase: '#777777',
inputPlaceholder: '#aaaaaa',
inputPlaceholder: '#cccccc',
inputText: '#eeeeee',
statusText: '#ffffff',
connectedIndicator: '#00cc00',
@ -150,6 +152,7 @@ export const Colors = {
text: getColor('text'),
screenBase: getColor('screenBase'),
drawerBase: getColor('drawerBase'),
contentBase: getColor('contentBase'),
areaBase: getColor('areaBase'),
modalBorder: getColor('modalBorder'),
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 { Profile } from './profile/Profile';
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 { Contact } from './contact/Contact';
import { Details } from './details/Details';
@ -141,9 +141,6 @@ function ContactStackScreen({ addChannel }) {
const [handle, setHandle] = useState();
const [server, setServer] = useState();
const [filter, setFilter] = useState();
const [sort, setSort] = useState(false);
const openContact = (navigation, contact) => {
setContact(contact);
navigation.navigate('contact')
@ -159,10 +156,8 @@ function ContactStackScreen({ addChannel }) {
<SafeAreaView edges={['left', 'right']} style={styles.body}>
<ContactStack.Navigator screenOptions={({ route }) => (screenParams)} initialRouteName="cards">
<ContactStack.Screen name="cards" options={{ ...stackParams, cardStyle: {backgroundColor: Colors.screenBase}, headerTitle: (props) => (
<CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
)}}>
{(props) => <CardsBody filter={filter} sort={sort} openContact={(contact) => openContact(props.navigation, contact)} addChannel={addChannel} />}
<ContactStack.Screen name="cards" options={stackParams}>
{(props) => <Cards navigation={props.navigation} openContact={(contact) => openContact(props.navigation, contact)} openRegistry={openRegistry} addChannel={addChannel} />}
</ContactStack.Screen>
<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%',
width: '33%',
maxWidth: 500,
backgroundColor: Colors.screenBase,
borderRightWidth: 1,
borderColor: Colors.verticalDivider,
},
conversation: {
width: '67%',
backgroundColor: Colors.areaBase,
backgroundColor: Colors.contentBase,
},
drawer: {
width: '100%',
@ -95,7 +95,7 @@ export const styles = StyleSheet.create({
paddingTop: 8,
paddingLeft: 8,
paddingRight: 8,
backgroundColor: Colors.drawerBase,
backgroundColor: Colors.contentBase,
},
options: {
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 { styles } from './Cards.styled';
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 { Colors } from 'constants/Colors';
import { CardItem } from './cardItem/CardItem';
import { useNavigation } from '@react-navigation/native';
import { getLanguageStrings } from 'constants/Strings';
export function CardsHeader({ filter, setFilter, sort, setSort, openRegistry }) {
const navigation = useNavigation();
const strings = getLanguageStrings();
export function Cards({ navigation, openContact, openRegistry, addChannel }) {
const { state, actions } = useCards();
return (
<View style={styles.title}>
{ sort && (
<TouchableOpacity style={styles.sort} onPress={() => setSort(false)}>
<MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.text} />
</TouchableOpacity>
)}
{ !sort && (
<TouchableOpacity style={styles.sort} onPress={() => setSort(true)}>
<MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.unsetText} />
</TouchableOpacity>
)}
<View style={styles.inputwrapper}>
<AntIcons style={styles.icon} name="search1" size={16} color={Colors.inputPlaceholder} />
<TextInput placeholder={ strings.contactFilter } placeholderTextColor={Colors.inputPlaceholder} value={filter}
style={styles.inputfield} autoCapitalize={'none'} spellCheck={false} onChangeText={setFilter} />
<View style={styles.space} />
</View>
<TouchableOpacity style={styles.add} onPress={() => openRegistry(navigation)}>
<AntIcons name={'adduser'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
<Text style={styles.newtext}>{ strings.add }</Text>
</TouchableOpacity>
</View>
);
}
export function CardsBody({ filter, sort, openContact, addChannel }) {
const { state, actions } = useCards(filter, sort);
useEffect(() => {
if (navigation) {
navigation.setOptions({
headerTitle: () => (
<View style={styles.title}>
{ state.sort && (
<TouchableOpacity style={styles.sort} onPress={() => actions.setSort(false)}>
<MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.text} />
</TouchableOpacity>
)}
{ !state.sort && (
<TouchableOpacity style={styles.sort} onPress={() => actions.setSort(true)}>
<MatIcons style={styles.icon} name="sort-ascending" size={24} color={Colors.unsetText} />
</TouchableOpacity>
)}
<View style={styles.inputwrapper}>
<AntIcons style={styles.icon} name="search1" size={16} color={Colors.inputPlaceholder} />
<TextInput placeholder={ state.strings.contactFilter } placeholderTextColor={Colors.inputPlaceholder} value={state.filter}
style={styles.inputfield} autoCapitalize={'none'} spellCheck={false} onChangeText={actions.setFilter} />
<View style={styles.space} />
</View>
<TouchableOpacity style={styles.add} onPress={() => openRegistry(navigation)}>
<AntIcons name={'adduser'} size={16} color={Colors.primaryButtonText} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
<Text style={styles.newtext}>{ state.strings.add }</Text>
</TouchableOpacity>
</View>
),
});
}
}, [navigation]);
const call = async (contact) => {
try {
@ -57,7 +56,7 @@ export function CardsBody({ filter, sort, openContact, addChannel }) {
}
return (
<>
<View style={styles.container}>
{ state.cards.length == 0 && (
<View style={styles.notfound}>
<Text style={styles.notfoundtext}>{ state.strings.noContacts }</Text>
@ -72,20 +71,6 @@ export function CardsBody({ filter, sort, openContact, addChannel }) {
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>
);
}

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

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

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

@ -11,6 +11,8 @@ export function useCards(filter, sort) {
cards: [],
enableIce: false,
strings: getLanguageStrings(),
sort: false,
filter: null,
});
const profile = useContext(ProfileContext);
@ -105,6 +107,12 @@ export function useCards(filter, sort) {
const server = node ? node : profile.state.server;
await ring.actions.call(cardId, server, `${guid}.${token}`);
},
setFilter: (filter) => {
updateState({ filter });
},
setSort: (sort) => {
updateState({ sort });
},
};
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: () => (
<View style={styles.title}>
<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}
autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder={ state.strings.topics} />
autoCapitalize="none" placeholderTextColor={Colors.inputPlaceholder} placeholder={ state.strings.topics} />
</View>
<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>
</TouchableOpacity>
</View>

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

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

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

@ -125,7 +125,7 @@ export const styles = StyleSheet.create({
minHeight: 32,
borderTopRightRadius: 32,
borderTopLeftRadius: 32,
backgroundColor: Colors.screenBase,
backgroundColor: Colors.contentBase,
borderTopWidth: 1,
borderColor: Colors.areaBorder,
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 (
<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}>
{ !navigation && (
<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',
flexGrow: 1,
height: '100%',
backgroundColor: Colors.contentBase,
},
thread: {
display: 'flex',

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

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

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

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

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

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