nostr/nostros
1
0
Fork 0
mirror of https://github.com/KoalaSat/nostros.git synced 2024-09-29 06:30:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid fixed height in bottom sheets

Browse Source 
-Fix paddings to fit style guidelines.
-Set height to 'auto' so bottom sheets get child height.
-3 elements per row in ProfileCard actions.
-Fix FAB position in NotePage.
This commit is contained in:
Pablo Carballeda 2023-01-28 02:26:30 +01:00
parent 10eaf95b5a
commit debd4111bb
13 changed files with 101 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/Components/LnPayment/index.tsx
View File

@ -74,9 +74,28 @@ export const LnPayment: React.FC<TextContentProps> = ({ open, setOpen, event, us
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
const rbSheetQrCustomStyles = React.useMemo(() => {
return {
container: {
backgroundColor: theme.colors.background,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto'
},
}
}, [])
@ -86,12 +105,11 @@ export const LnPayment: React.FC<TextContentProps> = ({ open, setOpen, event, us
<RBSheet
ref={bottomSheetLnPaymentRef}
closeOnDragDown={true}
height={380}
customStyles={rbSheetCustomStyles}
onClose={() => setOpen(false)}
>
<View style={styles.drawerBottom}>
<View style={styles.montoSelection}>
<View style={[styles.montoSelection, styles.spacer]}>
<Button style={styles.montoButton} mode='outlined' onPress={() => setMonto('1000')}>
<Text>1k {getSatoshiSymbol(15)}</Text>
</Button>
@ -103,18 +121,21 @@ export const LnPayment: React.FC<TextContentProps> = ({ open, setOpen, event, us
</Button>
</View>
<TextInput
style={styles.spacer}
mode='outlined'
label={t('lnPayment.monto') ?? ''}
onChangeText={setMonto}
value={monto}
/>
<TextInput
style={styles.spacer}
mode='outlined'
label={t('lnPayment.comment') ?? ''}
onChangeText={setComment}
value={comment}
/>
<Button
style={styles.spacer}
mode='contained'
disabled={loading || monto === ''}
onPress={() => generateInvoice()}
@ -129,8 +150,8 @@ export const LnPayment: React.FC<TextContentProps> = ({ open, setOpen, event, us
<RBSheet
ref={bottomSheetInvoiceRef}
closeOnDragDown={true}
height={630}
customStyles={rbSheetCustomStyles}
// height={630}
customStyles={rbSheetQrCustomStyles}
onClose={() => setOpen(false)}
>
<Card style={styles.qrContainer}>
@ -168,11 +189,12 @@ export const LnPayment: React.FC<TextContentProps> = ({ open, setOpen, event, us
const styles = StyleSheet.create({
drawerBottom: {
height: '90%',
justifyContent: 'space-between',
},
spacer: {
marginBottom: 16,
},
qrContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
@ -181,11 +203,6 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'center',
},
rbsheetContainer: {
padding: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
},
satoshi: {
fontFamily: 'Satoshi-Symbol',
fontSize: 20,

6
frontend/Components/ProfileCard/index.tsx
View File

@ -227,8 +227,9 @@ const styles = StyleSheet.create({
},
mainLayout: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
justifyContent: 'space-around',
justifyContent: 'flex-start',
},
about: {
maxHeight: 50,
@ -249,7 +250,8 @@ const styles = StyleSheet.create({
actionButton: {
justifyContent: 'center',
alignItems: 'center',
minWidth: 58,
flexBasis: '33.333333%',
marginBottom: 4,
},
list: {
padding: 16,

7
frontend/Pages/ConfigPage/index.tsx
View File

@ -46,9 +46,13 @@ export const ConfigPage: React.FC = () => {
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -75,7 +79,6 @@ export const ConfigPage: React.FC = () => {
<RBSheet
ref={bottomSheetRef}
closeOnDragDown={true}
height={160}
customStyles={bottomSheetStyles}
>
<FlatList

5
frontend/Pages/ContactsFeed/index.tsx
View File

@ -197,11 +197,13 @@ export const ContactsFeed: React.FC = () => {
return {
container: {
backgroundColor: theme.colors.background,
paddingLeft: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -349,7 +351,6 @@ export const ContactsFeed: React.FC = () => {
<RBSheet
ref={bottomSheetAddContactRef}
closeOnDragDown={true}
height={280}
customStyles={bottomSheetStyles}
onClose={() => setContactInput('')}
>

9
frontend/Pages/ConversationsFeed/index.tsx
View File

@ -146,9 +146,13 @@ export const ConversationsFeed: React.FC = () => {
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -258,7 +262,6 @@ export const ConversationsFeed: React.FC = () => {
<RBSheet
ref={bottomSheetCreateRef}
closeOnDragDown={true}
height={190}
customStyles={bottomSheetStyles}
>
<ScrollView horizontal={false}>
@ -283,7 +286,6 @@ export const ConversationsFeed: React.FC = () => {
<RBSheet
ref={bottomSheetUserListRef}
closeOnDragDown={true}
height={620}
customStyles={bottomSheetStyles}
>
<ScrollView horizontal={false}>
@ -293,7 +295,6 @@ export const ConversationsFeed: React.FC = () => {
<RBSheet
ref={bottomSheetPubKeyRef}
closeOnDragDown={true}
height={220}
customStyles={bottomSheetStyles}
>
<View>

8
frontend/Pages/FeedNavigator/index.tsx
View File

@ -34,9 +34,13 @@ export const HomeNavigator: React.FC = () => {
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -111,7 +115,6 @@ export const HomeNavigator: React.FC = () => {
<RBSheet
ref={bottomSheetProfileRef}
closeOnDragDown={true}
height={280}
customStyles={bottomSheetStyles}
>
<ProfileCard userPubKey={showProfile ?? ''} bottomSheetRef={bottomSheetProfileRef} />
@ -119,7 +122,6 @@ export const HomeNavigator: React.FC = () => {
<RBSheet
ref={bottomSheetRef}
closeOnDragDown={true}
height={620}
customStyles={bottomSheetStyles}
>
<View>

7
frontend/Pages/HomeFeed/index.tsx
View File

@ -42,9 +42,13 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ navigation }) => {
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -131,7 +135,6 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ navigation }) => {
<RBSheet
ref={bottomSheetProfileRef}
closeOnDragDown={true}
height={280}
customStyles={bottomSheetStyles}
>
<ProfileCard

14
frontend/Pages/HomeNavigator/index.tsx
View File

@ -114,13 +114,16 @@ export const HomeNavigator: React.FC = () => {
<RBSheet
ref={bottomSheetKeysRef}
closeOnDragDown={true}
height={430}
customStyles={{
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}}
>
@ -129,13 +132,16 @@ export const HomeNavigator: React.FC = () => {
<RBSheet
ref={bottomSheetRelaysRef}
closeOnDragDown={true}
height={680}
customStyles={{
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}}
>

11
frontend/Pages/NotePage/index.tsx
View File

@ -120,9 +120,13 @@ export const NotePage: React.FC<NotePageProps> = ({ route }) => {
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -153,7 +157,7 @@ export const NotePage: React.FC<NotePageProps> = ({ route }) => {
</ScrollView>
{privateKey && (
<AnimatedFAB
style={[styles.fabSend, { top: Dimensions.get('window').height - 140 }]}
style={[styles.fabSend, { top: Dimensions.get('window').height - 160 }]}
icon='message-plus-outline'
label='Label'
onPress={() => {
@ -165,7 +169,7 @@ export const NotePage: React.FC<NotePageProps> = ({ route }) => {
/>
)}
<AnimatedFAB
style={[styles.fabHome, { top: Dimensions.get('window').height - 220 }]}
style={[styles.fabHome, { top: Dimensions.get('window').height - 230 }]}
icon='home-outline'
label='Label'
onPress={() => {
@ -178,7 +182,6 @@ export const NotePage: React.FC<NotePageProps> = ({ route }) => {
<RBSheet
ref={bottomSheetProfileRef}
closeOnDragDown={true}
height={280}
customStyles={bottomSheetStyles}
>
<ProfileCard userPubKey={profileCardPubkey ?? ''} bottomSheetRef={bottomSheetProfileRef} />

7
frontend/Pages/NotificationsFeed/index.tsx
View File

@ -149,9 +149,13 @@ export const NotificationsFeed: React.FC = () => {
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -190,7 +194,6 @@ export const NotificationsFeed: React.FC = () => {
<RBSheet
ref={bottomSheetProfileRef}
closeOnDragDown={true}
height={280}
customStyles={bottomSheetStyles}
>
<ProfileCard userPubKey={profileCardPubkey ?? ''} bottomSheetRef={bottomSheetProfileRef} />

24
frontend/Pages/ProfileConfigPage/index.tsx
View File

@ -210,9 +210,13 @@ export const ProfileConfigPage: React.FC = () => {
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -357,7 +361,6 @@ export const ProfileConfigPage: React.FC = () => {
<RBSheet
ref={bottomSheetPictureRef}
closeOnDragDown={true}
height={230}
customStyles={rbSheetCustomStyles}
>
<View style={styles.bottomDrawer}>
@ -389,13 +392,13 @@ export const ProfileConfigPage: React.FC = () => {
<RBSheet
ref={bottomSheetDirectoryRef}
closeOnDragDown={true}
height={480}
customStyles={rbSheetCustomStyles}
>
<View style={styles.bottomDrawer}>
<Text variant='titleLarge'>{t('profileConfigPage.directoryTitle')}</Text>
<Text variant='bodyMedium'>{t('profileConfigPage.directoryDescription')}</Text>
<Text style={styles.spacer} variant='bodyMedium'>{t('profileConfigPage.directoryDescription')}</Text>
<Button
style={styles.spacer}
mode='contained'
onPress={async () => await Linking.openURL('https://www.nostr.directory')}
loading={isPublishingProfile}
@ -410,12 +413,11 @@ export const ProfileConfigPage: React.FC = () => {
<RBSheet
ref={bottomSheetNip05Ref}
closeOnDragDown={true}
height={230}
customStyles={rbSheetCustomStyles}
>
<View style={styles.bottomDrawer}>
<Text variant='titleLarge'>{t('profileConfigPage.nip05Title')}</Text>
<Text variant='bodyMedium'>
<Text style={styles.spacer} variant='bodyMedium'>
{t('profileConfigPage.nip05Description')}
<Text
style={styles.link}
@ -427,6 +429,7 @@ export const ProfileConfigPage: React.FC = () => {
</Text>
</Text>
<TextInput
style={styles.spacer}
mode='outlined'
label={t('profileConfigPage.nip05') ?? ''}
onChangeText={setNip05}
@ -452,13 +455,13 @@ export const ProfileConfigPage: React.FC = () => {
<RBSheet
ref={bottomSheetLud06Ref}
closeOnDragDown={true}
height={240}
customStyles={rbSheetCustomStyles}
>
<View style={styles.bottomDrawer}>
<Text variant='titleLarge'>{t('profileConfigPage.lud06Title')}</Text>
<Text variant='bodyMedium'>{t('profileConfigPage.lud06Description')}</Text>
<Text style={styles.spacer} variant='bodyMedium'>{t('profileConfigPage.lud06Description')}</Text>
<TextInput
style={styles.spacer}
mode='outlined'
multiline
numberOfLines={5}
@ -499,9 +502,8 @@ export const ProfileConfigPage: React.FC = () => {
}
const styles = StyleSheet.create({
bottomDrawer: {
height: '90%',
justifyContent: 'space-between',
spacer: {
marginBottom: 16,
},
container: {
padding: 16,

7
frontend/Pages/ProfilePage/index.tsx
View File

@ -181,9 +181,13 @@ export const ProfilePage: React.FC<ProfilePageProps> = ({ route }) => {
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -288,7 +292,6 @@ export const ProfilePage: React.FC<ProfilePageProps> = ({ route }) => {
<RBSheet
ref={bottomSheetProfileRef}
closeOnDragDown={true}
height={280}
customStyles={bottomSheetStyles}
>
<ProfileCard

8
frontend/Pages/RelaysPage/index.tsx
View File

@ -75,9 +75,13 @@ export const RelaysPage: React.FC = () => {
return {
container: {
backgroundColor: theme.colors.background,
padding: 16,
paddingTop: 16,
paddingRight: 16,
paddingBottom: 32,
paddingLeft: 16,
borderTopRightRadius: 28,
borderTopLeftRadius: 28,
height: 'auto',
},
}
}, [])
@ -164,7 +168,6 @@ export const RelaysPage: React.FC = () => {
<RBSheet
ref={bottomSheetAddRef}
closeOnDragDown={true}
height={260}
customStyles={rbSheetCustomStyles}
>
<View style={styles.addRelay}>
@ -191,7 +194,6 @@ export const RelaysPage: React.FC = () => {
<RBSheet
ref={bottomSheetEditRef}
closeOnDragDown={true}
height={260}
customStyles={rbSheetCustomStyles}
>
<View>