Skip to content

Commit

Permalink
several layout improvements / more consistent implementation of layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@myxmaster
myxmaster committed Dec 19, 2024
1 parent c6ffab9 commit b49e5ea
Show file tree
Hide file tree
Showing 7 changed files with 730 additions and 699 deletions.
21 changes: 9 additions & 12 deletions components/Text.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react';
import { Text, TextStyle, TouchableOpacity } from 'react-native';
import { inject, observer } from 'mobx-react';
import { Row } from './layout/Row';

import { themeColor } from './../utils/ThemeUtils';

Expand Down Expand Up @@ -34,16 +33,14 @@ export default class ZeusText extends React.Component<TextProps, {}> {
const { toggleInfoModal } = ModalStore!;

const CoreText = () => (
<Row>
<Text
style={{
fontFamily: 'PPNeueMontreal-Book',
color: themeColor('text'),
...style
}}
>
{children}
</Text>
<Text
style={{
fontFamily: 'PPNeueMontreal-Book',
color: themeColor('text'),
...style
}}
>
{children}
{infoModalText && (
<Text
style={{
Expand All @@ -55,7 +52,7 @@ export default class ZeusText extends React.Component<TextProps, {}> {
{' ⓘ'}
</Text>
)}
</Row>
</Text>
);

if (infoModalText) {
Expand Down
345 changes: 201 additions & 144 deletions views/Receive.tsx
View file

Large diffs are not rendered by default.

251 changes: 99 additions & 152 deletions views/Settings/Display.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import { ScrollView, View } from 'react-native';
import { ListItem } from 'react-native-elements';
import { inject, observer } from 'mobx-react';
import { StackNavigationProp } from '@react-navigation/stack';
import SystemNavigationBar from 'react-native-system-navigation-bar';
Expand All @@ -12,6 +11,7 @@ import SettingsStore, {
import { localeString } from '../../utils/LocaleUtils';
import { isLightTheme, themeColor } from '../../utils/ThemeUtils';

import Text from '../../components/Text';
import DropdownSetting from '../../components/DropdownSetting';
import Header from '../../components/Header';
import Screen from '../../components/Screen';
Expand Down Expand Up @@ -115,7 +115,7 @@ export default class Display extends React.Component<
navigation={navigation}
/>
<ScrollView
style={{ flex: 1, padding: 15 }}
style={{ flex: 1, paddingHorizontal: 15, marginTop: 5 }}
keyboardShouldPersistTaps="handled"
>
<DropdownSetting
Expand Down Expand Up @@ -171,30 +171,21 @@ export default class Display extends React.Component<
values={DEFAULT_VIEW_KEYS}
/>

<ListItem
containerStyle={{
borderBottomWidth: 0,
backgroundColor: 'transparent'
}}
>
<ListItem.Title
style={{
color: themeColor('secondaryText'),
fontFamily: 'PPNeueMontreal-Book',
left: -10
}}
>
{localeString(
'views.Settings.Display.displayNickname'
)}
</ListItem.Title>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
}}
>
<View style={{ flexDirection: 'row', marginTop: 20 }}>
<View style={{ flex: 1 }}>
<Text
style={{
color: themeColor('secondaryText'),
fontSize: 17,
fontFamily: 'PPNeueMontreal-Book'
}}
>
{localeString(
'views.Settings.Display.displayNickname'
)}
</Text>
</View>
<View style={{ alignSelf: 'center', marginLeft: 5 }}>
<Switch
value={displayNickname}
onValueChange={async () => {
Expand All @@ -215,32 +206,23 @@ export default class Display extends React.Component<
}}
/>
</View>
</ListItem>
</View>

<ListItem
containerStyle={{
borderBottomWidth: 0,
backgroundColor: 'transparent'
}}
>
<ListItem.Title
style={{
color: themeColor('secondaryText'),
fontFamily: 'PPNeueMontreal-Book',
left: -10
}}
>
{localeString(
'views.Settings.Display.bigKeypadButtons'
)}
</ListItem.Title>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
}}
>
<View style={{ flexDirection: 'row', marginTop: 20 }}>
<View style={{ flex: 1 }}>
<Text
style={{
color: themeColor('secondaryText'),
fontSize: 17,
fontFamily: 'PPNeueMontreal-Book'
}}
>
{localeString(
'views.Settings.Display.bigKeypadButtons'
)}
</Text>
</View>
<View style={{ alignSelf: 'center', marginLeft: 5 }}>
<Switch
value={bigKeypadButtons}
onValueChange={async () => {
Expand All @@ -261,32 +243,23 @@ export default class Display extends React.Component<
}}
/>
</View>
</ListItem>
</View>

<ListItem
containerStyle={{
borderBottomWidth: 0,
backgroundColor: 'transparent'
}}
>
<ListItem.Title
style={{
color: themeColor('secondaryText'),
fontFamily: 'PPNeueMontreal-Book',
left: -10
}}
>
{localeString(
'views.Settings.Display.showAllDecimalPlaces'
)}
</ListItem.Title>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
}}
>
<View style={{ flexDirection: 'row', marginTop: 20 }}>
<View style={{ flex: 1 }}>
<Text
style={{
color: themeColor('secondaryText'),
fontSize: 17,
fontFamily: 'PPNeueMontreal-Book'
}}
>
{localeString(
'views.Settings.Display.showAllDecimalPlaces'
)}
</Text>
</View>
<View style={{ alignSelf: 'center', marginLeft: 5 }}>
<Switch
value={showAllDecimalPlaces}
onValueChange={async () => {
Expand All @@ -309,32 +282,23 @@ export default class Display extends React.Component<
}}
/>
</View>
</ListItem>
</View>

<ListItem
containerStyle={{
borderBottomWidth: 0,
backgroundColor: 'transparent'
}}
>
<ListItem.Title
style={{
color: themeColor('secondaryText'),
fontFamily: 'PPNeueMontreal-Book',
left: -10
}}
>
{localeString(
'views.Settings.Display.removeDecimalSpaces'
)}
</ListItem.Title>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
}}
>
<View style={{ flexDirection: 'row', marginTop: 20 }}>
<View style={{ flex: 1 }}>
<Text
style={{
color: themeColor('secondaryText'),
fontSize: 17,
fontFamily: 'PPNeueMontreal-Book'
}}
>
{localeString(
'views.Settings.Display.removeDecimalSpaces'
)}
</Text>
</View>
<View style={{ alignSelf: 'center', marginLeft: 5 }}>
<Switch
value={removeDecimalSpaces}
onValueChange={async () => {
Expand All @@ -357,32 +321,23 @@ export default class Display extends React.Component<
}}
/>
</View>
</ListItem>
</View>

<ListItem
containerStyle={{
borderBottomWidth: 0,
backgroundColor: 'transparent'
}}
>
<ListItem.Title
style={{
color: themeColor('secondaryText'),
fontFamily: 'PPNeueMontreal-Book',
left: -10
}}
>
{localeString(
'views.Settings.Display.showMillisatoshiAmounts'
)}
</ListItem.Title>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
}}
>
<View style={{ flexDirection: 'row', marginTop: 20 }}>
<View style={{ flex: 1 }}>
<Text
style={{
color: themeColor('secondaryText'),
fontSize: 17,
fontFamily: 'PPNeueMontreal-Book'
}}
>
{localeString(
'views.Settings.Display.showMillisatoshiAmounts'
)}
</Text>
</View>
<View style={{ alignSelf: 'center', marginLeft: 5 }}>
<Switch
value={showMillisatoshiAmounts}
onValueChange={async () => {
Expand All @@ -405,31 +360,23 @@ export default class Display extends React.Component<
}}
/>
</View>
</ListItem>
<ListItem
containerStyle={{
borderBottomWidth: 0,
backgroundColor: 'transparent'
}}
>
<ListItem.Title
style={{
color: themeColor('secondaryText'),
fontFamily: 'PPNeueMontreal-Book',
left: -10
}}
>
{localeString(
'views.Settings.Display.selectNodeOnStartup'
)}
</ListItem.Title>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end'
}}
>
</View>

<View style={{ flexDirection: 'row', marginTop: 20 }}>
<View style={{ flex: 1 }}>
<Text
style={{
color: themeColor('secondaryText'),
fontSize: 17,
fontFamily: 'PPNeueMontreal-Book'
}}
>
{localeString(
'views.Settings.Display.selectNodeOnStartup'
)}
</Text>
</View>
<View style={{ alignSelf: 'center', marginLeft: 5 }}>
<Switch
value={selectNodeOnStartup}
onValueChange={async () => {
Expand All @@ -444,7 +391,7 @@ export default class Display extends React.Component<
}}
/>
</View>
</ListItem>
</View>
</ScrollView>
</Screen>
);
Expand Down
Loading

0 comments on commit b49e5ea

Please sign in to comment.