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

rendering color mode for registy

Browse Source
This commit is contained in:
balzack 2023-09-23 10:26:08 -07:00
parent 76237d6d1e
commit 5b5db51ad3
11 changed files with 78 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,7 +129,7 @@ function ProfileStackScreen() {
function ContactStackScreen({ addChannel }) {
const stackParams = { headerStyle: { backgroundColor: Colors.screenBase }, headerBackTitleVisible: false };
const screenParams = { headerShown: true };
const screenParams = { headerShown: true, headerTintColor: Colors.primary };
const profile = useContext(ProfileContext);

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

@ -95,7 +95,7 @@ export const styles = StyleSheet.create({
paddingTop: 8,
paddingLeft: 8,
paddingRight: 8,
backgroundColor: Colors.drawerBase,
backgroundColor: Colors.screenBase,
},
options: {
display: 'flex',

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

@ -18,20 +18,18 @@ export function CardsHeader({ filter, setFilter, sort, setSort, openRegistry })
<View style={styles.title}>
{ sort && (
<TouchableOpacity style={styles.sort} onPress={() => setSort(false)}>
<MatIcons style={styles.icon} name="sort-ascending" size={18} color={Colors.text} />
<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={18} color={Colors.unsetText} />
<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)}>
@ -84,7 +82,9 @@ export function Cards({ openRegistry, openContact, addChannel }) {
return (
<View>
<CardsHeader filter={filter} setFilter={setFilter} sort={sort} setSort={setSort} openRegistry={openRegistry} />
<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>
);

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

@ -18,6 +18,12 @@ export const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
header: {
width: '100%',
paddingBottom: 8,
borderBottomWidth: 1,
borderColor: Colors.itemDivider,
},
topbar: {
borderTopWidth: 1,
borderBottomWidth: 1,
@ -75,6 +81,7 @@ export const styles = StyleSheet.create({
width: '100%',
paddingLeft: 16,
paddingRight: 16,
paddingTop: 8,
backgroundColor: Colors.screenBase,
},
addbottom: {

50
app/mobile/src/session/cards/cardItem/CardItem.jsx
View File

@ -20,47 +20,53 @@ export function CardItem({ item, openContact, enableIce, call, message }) {
<View>
{ item.cardId && (
<View style={styles.container}>
<View style={styles.profile}>
<TouchableOpacity style={styles.profile} activeOpacity={1} onPress={select}>
<Logo src={item.logo} width={48} height={48} radius={6} />
<View style={styles.detail}>
<Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.name }</Text>
<Text style={styles.handle} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.username }</Text>
</View>
</View>
</TouchableOpacity>
{ item.status === 'connected' && (
<Menu>
<MenuTrigger customStyles={styles.trigger}>
{ item.status === 'connected' && item.offsync && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.offysnc} />
)}
{ item.status === 'connected' && !item.offsync && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.connected} />
)}
<View style={styles.more}>
{ item.status === 'connected' && item.offsync && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.offsync} />
)}
{ item.status === 'connected' && !item.offsync && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.connected} />
)}
</View>
</MenuTrigger>
<MenuOptions optionsContainerStyle={{ width: 'auto' }} style={styles.options}>
<MenuOption onSelect={() => {}}>
<MenuOption onSelect={select}>
<Text style={styles.option}>{ strings.viewProfile }</Text>
</MenuOption>
<MenuOption onSelect={() => {}}>
<MenuOption onSelect={message}>
<Text style={styles.option}>{ strings.messageContact }</Text>
</MenuOption>
<MenuOption onSelect={() => {}}>
<MenuOption onSelect={call}>
<Text style={styles.option}>{ strings.callContact }</Text>
</MenuOption>
</MenuOptions>
</Menu>
)}
{ item.status === 'requested' && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.requested} />
)}
{ item.status === 'connecting' && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.connecting} />
)}
{ item.status === 'pending' && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.pending} />
)}
{ item.status === 'confirmed' && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.confirmed} />
{ item.status !== 'connected' && (
<TouchableOpacity style={styles.more} onPress={select}>
{ item.status === 'requested' && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.requested} />
)}
{ item.status === 'connecting' && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.connecting} />
)}
{ item.status === 'pending' && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.pending} />
)}
{ item.status === 'confirmed' && (
<MatIcons name={'dots-horizontal'} size={32} color={Colors.confirmed} />
)}
</TouchableOpacity>
)}
</View>
)}

3
app/mobile/src/session/cards/cardItem/CardItem.styled.js
View File

@ -25,6 +25,9 @@ export const styles = StyleSheet.create({
flexShrink: 1,
flexGrow: 1,
},
more: {
paddingLeft: 16,
},
space: {
height: 64,
},

6
app/mobile/src/session/registry/Registry.jsx
View File

@ -37,7 +37,7 @@ export function RegistryBody({ search, handle, server, openContact }) {
<View style={styles.accounts}>
{ state.searching && (
<View style={styles.empty}>
<ActivityIndicator size={'large'} color={Colors.backgrougd} />
<ActivityIndicator size={'large'} color={Colors.text} />
</View>
)}
{ !state.searching && state.accounts.length === 0 && (
@ -70,7 +70,9 @@ export function Registry({ closeRegistry, openContact }) {
return (
<View>
<RegistryHeader search={search} setSearch={setSearch} handle={handle} setHandle={setHandle} server={server} setServer={setServer} />
<View style={styles.header}>
<RegistryHeader search={search} setSearch={setSearch} handle={handle} setHandle={setHandle} server={server} setServer={setServer} />
</View>
<RegistryBody search={search} handle={handle} server={server} openContact={openContact} />
</View>
);

31
app/mobile/src/session/registry/Registry.styled.js
View File

@ -7,7 +7,7 @@ export const styles = StyleSheet.create({
height: '100%',
display: 'flex',
flexDirection: 'column',
backgroundColor: Colors.formBackground,
backgroundColor: Colors.screenBase,
paddingLeft: 16,
paddingRight: 16,
paddingTop: 8,
@ -18,10 +18,16 @@ export const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
header: {
width: '100%',
paddingBottom: 8,
borderBottomWidth: 1,
borderColor: Colors.itemDivider,
},
topbar: {
borderTopWidth: 1,
borderBottomWidth: 1,
borderColor: Colors.divider,
borderColor: Colors.itemDivider,
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 16,
@ -33,7 +39,7 @@ export const styles = StyleSheet.create({
},
searcharea: {
borderBottomWidth: 1,
borderColor: Colors.divider,
borderColor: Colors.itemDivider,
},
searchbar: {
display: 'flex',
@ -47,7 +53,7 @@ export const styles = StyleSheet.create({
display: 'flex',
flexDirection: 'row',
borderRadius: 4,
backgroundColor: Colors.white,
backgroundColor: Colors.inputBase,
alignItems: 'center',
paddingTop: 4,
paddingBottom: 4,
@ -57,20 +63,20 @@ 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,
marginLeft: 8,
paddingTop: 4,
paddingBottom: 4,
marginLeft: 8,
},
inputfield: {
flex: 1,
textAlign: 'center',
padding: 4,
color: Colors.text,
color: Colors.inputText,
fontSize: 14,
},
icon: {
@ -82,6 +88,7 @@ export const styles = StyleSheet.create({
width: '100%',
paddingLeft: 16,
minHeight: 0,
backgroundColor: Colors.screenBase,
},
empty: {
flexGrow: 1,
@ -92,7 +99,7 @@ export const styles = StyleSheet.create({
marginTop: 32,
},
emptyText: {
color: Colors.grey,
color: Colors.unsetText,
fontSize: 18,
},
addbottom: {
@ -105,11 +112,11 @@ export const styles = StyleSheet.create({
borderRadius: 4,
},
bottomText: {
color: Colors.primary,
color: Colors.primaryButtonText,
paddingLeft: 8,
},
search: {
backgroundColor: Colors.primary,
backgroundColor: Colors.primaryButton,
marginLeft: 8,
display: 'flex',
flexDirection: 'row',
@ -125,10 +132,10 @@ export const styles = StyleSheet.create({
padding: 8,
borderRadius: 4,
paddingLeft: 8,
color: Colors.white,
color: Colors.text,
},
findarea: {
borderTopWidth: 1,
borderColor: Colors.divider,
borderColor: Colors.itemDivider,
}
})

6
app/mobile/src/session/registry/registryItem/RegistryItem.jsx
View File

@ -18,10 +18,10 @@ export function RegistryItem({ item, openContact }) {
<View>
{ item.guid && (
<TouchableOpacity style={styles.container} activeOpacity={1} onPress={select}>
<Logo src={item.logo} width={32} height={32} radius={6} />
<Logo src={item.logo} width={48} height={48} radius={6} />
<View style={styles.detail}>
<Text style={styles.name} numberOfLines={1} ellipsizeMode={'tail'}>{ item.name }</Text>
<Text style={styles.handle} numberOfLines={1} ellipsizeMode={'tail'}>{ handle }</Text>
<Text style={styles.name} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.name }</Text>
<Text style={styles.handle} numberOfLines={1} adjustsFontSizeToFit={true}>{ item.username }</Text>
</View>
</TouchableOpacity>
)}

38
app/mobile/src/session/registry/registryItem/RegistryItem.styled.js
View File

@ -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,
@ -24,41 +24,13 @@ export const styles = StyleSheet.create({
},
name: {
color: Colors.text,
fontSize: 14,
fontSize: 18,
flexShrink: 1,
},
handle: {
color: Colors.text,
fontSize: 12,
},
connected: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.connected,
},
requested: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.requested,
},
connecting: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.connecting,
},
pending: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.pending,
},
confirmed: {
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: Colors.confirmed,
fontSize: 16,
flexShrink: 1,
},
})

3
app/mobile/src/session/registry/useRegistry.hook.js
View File

@ -47,7 +47,8 @@ export function useRegistry(search, handle, server) {
const { guid, name, handle, node, location, description, imageSet } = item;
const server = node ? node : profile.state.server;
const logo = imageSet ? getListingImageUrl(server, guid) : 'avatar';
return { guid, name, handle, node: server, location, description, guid, imageSet, logo };
const username = `${handle}/${node}`;
return { guid, name, handle, username, node: server, location, description, guid, imageSet, logo };
};
const actions = {};