Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-22 22:49:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

change some buttons to pressable

Browse Source
This commit is contained in:
ammarahm-ed
2020-09-08 22:22:33 +05:00
parent fa7273ac2c
commit e98144059f
6 changed files with 118 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/mobile/.vscode/launch.json vendored Normal file
View File

@@ -0,0 +1,28 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Debug Android",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "android"
},
{
"name": "Debug iOS",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "launch",
"platform": "ios"
},
{
"name": "Attach to packager",
"cwd": "${workspaceFolder}",
"type": "reactnative",
"request": "attach"
}
]
}

32
apps/mobile/src/components/Container/ContainerBottomButton.js
View File

@@ -1,10 +1,16 @@
import React, { useEffect, useState } from 'react'; import React, {useEffect, useState} from 'react';
import { Keyboard, Text, TouchableOpacity, View } from 'react-native'; import {Keyboard, Text, TouchableOpacity, View, Pressable} from 'react-native';
import { useSafeArea } from 'react-native-safe-area-context'; import {useSafeArea} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { pv, SIZE, WEIGHT } from '../../common/common'; import {pv, SIZE, WEIGHT} from '../../common/common';
import { useTracked } from '../../provider'; import {useTracked} from '../../provider';
import { DDS, getElevation } from '../../utils/utils'; import {
DDS,
getElevation,
hexToRGBA,
RGB_Linear_Shade,
} from '../../utils/utils';
import {PressableButton} from '../PressableButton';
export const ContainerBottomButton = ({root}) => { export const ContainerBottomButton = ({root}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
@@ -58,9 +64,10 @@ export const ContainerBottomButton = ({root}) => {
}, },
], ],
}}> }}>
<TouchableOpacity <PressableButton
activeOpacity={0.8} color={colors.accent}
onPress={containerBottomButton.bottomButtonOnPress}> selectedColor={colors.accent}
onPress={() => {}}>
<View <View
style={{ style={{
...getElevation(5), ...getElevation(5),
@@ -69,11 +76,8 @@ export const ContainerBottomButton = ({root}) => {
flexDirection: 'row', flexDirection: 'row',
width: '100%', width: '100%',
padding: pv, padding: pv,
borderRadius:5, borderRadius: 5,
paddingVertical: pv + 5, paddingVertical: pv + 5,
backgroundColor: containerBottomButton.color
? containerBottomButton.color
: colors.accent
}}> }}>
<Icon <Icon
name={ name={
@@ -94,7 +98,7 @@ export const ContainerBottomButton = ({root}) => {
{' ' + containerBottomButton.bottomButtonText} {' ' + containerBottomButton.bottomButtonText}
</Text> </Text>
</View> </View>
</TouchableOpacity> </PressableButton>
</View> </View>
); );
}; };

22
apps/mobile/src/components/Menu/MenuListItem.js
View File

@@ -7,6 +7,7 @@ import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager'; import {eSendEvent} from '../../services/eventManager';
import {eClearSearch} from '../../services/events'; import {eClearSearch} from '../../services/events';
import {sideMenuRef} from '../../utils/refs'; import {sideMenuRef} from '../../utils/refs';
import {PressableButton} from '../PressableButton';
export const MenuListItem = ({item, index, noTextMode, ignore}) => { export const MenuListItem = ({item, index, noTextMode, ignore}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
@@ -30,19 +31,22 @@ export const MenuListItem = ({item, index, noTextMode, ignore}) => {
}; };
return ( return (
<TouchableOpacity <PressableButton
key={item.name + index} key={item.name + index}
activeOpacity={opacity / 2}
onPress={_onPress} onPress={_onPress}
style={{ color={
currentScreen === item.name.toLowerCase() ? colors.shade : 'transparent'
}
selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.02}
opacity={0.12}
customStyle={{
width: '100%', width: '100%',
backgroundColor:
item.name.toLowerCase() === currentScreen
? colors.shade
: 'transparent',
alignSelf: 'center', alignSelf: 'center',
borderRadius: 0,
flexDirection: 'row', flexDirection: 'row',
paddingHorizontal: noTextMode ? 0 : 12, paddingHorizontal: noTextMode ? 0 : 8,
justifyContent: noTextMode ? 'center' : 'space-between', justifyContent: noTextMode ? 'center' : 'space-between',
alignItems: 'center', alignItems: 'center',
paddingBottom: noTextMode ? pv + 2 : normalize(15), paddingBottom: noTextMode ? pv + 2 : normalize(15),
@@ -82,6 +86,6 @@ export const MenuListItem = ({item, index, noTextMode, ignore}) => {
name={item.on ? 'toggle-switch' : 'toggle-switch-off'} name={item.on ? 'toggle-switch' : 'toggle-switch-off'}
/> />
) : undefined} ) : undefined}
</TouchableOpacity> </PressableButton>
); );
}; };

45
apps/mobile/src/components/Menu/UserSection.js
View File

@@ -1,19 +1,26 @@
import React, { useEffect } from 'react'; import React, {useEffect} from 'react';
import { ActivityIndicator, Platform, Text, TouchableOpacity, View } from 'react-native'; import {
ActivityIndicator,
Platform,
Text,
TouchableOpacity,
View,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { opacity, pv, SIZE, WEIGHT } from '../../common/common'; import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
import { useTracked } from '../../provider'; import {useTracked} from '../../provider';
import { ACTIONS } from '../../provider/actions'; import {ACTIONS} from '../../provider/actions';
import { eSendEvent } from '../../services/eventManager'; import {eSendEvent} from '../../services/eventManager';
import { eOpenLoginDialog } from '../../services/events'; import {eOpenLoginDialog} from '../../services/events';
import NavigationService from '../../services/NavigationService'; import NavigationService from '../../services/NavigationService';
import { db, DDS, hexToRGBA, ToastEvent } from '../../utils/utils'; import {db, DDS, hexToRGBA, ToastEvent} from '../../utils/utils';
import { TimeSince } from './TimeSince'; import {TimeSince} from './TimeSince';
import { sideMenuRef } from '../../utils/refs'; import {sideMenuRef} from '../../utils/refs';
import {PressableButton} from '../PressableButton';
export const UserSection = ({noTextMode}) => { export const UserSection = ({noTextMode}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
const {colors, syncing,user} = state; const {colors, syncing, user} = state;
useEffect(() => { useEffect(() => {
dispatch({type: ACTIONS.TAGS}); dispatch({type: ACTIONS.TAGS});
@@ -131,17 +138,20 @@ export const UserSection = ({noTextMode}) => {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) : ( ) : (
<TouchableOpacity <PressableButton
onPress={() => { onPress={() => {
DDS.isTab DDS.isTab
? eSendEvent(eOpenLoginDialog) ? eSendEvent(eOpenLoginDialog)
: NavigationService.navigate('Login',{ : NavigationService.navigate('Login', {
root:true root: true,
}); });
sideMenuRef.current?.closeDrawer(); sideMenuRef.current?.closeDrawer();
}} }}
activeOpacity={opacity / 2} color={colors.shade}
style={{ selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.1}
opacity={0.12}
customStyle={{
paddingVertical: 12, paddingVertical: 12,
marginVertical: 5, marginVertical: 5,
marginTop: pv + 5, marginTop: pv + 5,
@@ -150,7 +160,6 @@ export const UserSection = ({noTextMode}) => {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: noTextMode ? 'center' : 'flex-start', justifyContent: noTextMode ? 'center' : 'flex-start',
backgroundColor: noTextMode ? 'transparent' : colors.shade,
paddingHorizontal: noTextMode ? 0 : 12, paddingHorizontal: noTextMode ? 0 : 12,
}}> }}>
<View <View
@@ -194,6 +203,6 @@ export const UserSection = ({noTextMode}) => {
</Text> </Text>
</View> </View>
)} )}
</TouchableOpacity> </PressableButton>
); );
}; };

15
apps/mobile/src/components/PressableButton/index.js
View File

@@ -1,6 +1,7 @@
import React from 'react'; import React, { useState } from 'react';
import {Platform, Pressable} from 'react-native'; import {Platform, Pressable} from 'react-native';
import {br, opacity} from '../../common/common'; import {br, opacity} from '../../common/common';
import { RGB_Linear_Shade, hexToRGBA } from '../../utils/utils';
export const PressableButton = ({ export const PressableButton = ({
color, color,
@@ -9,21 +10,19 @@ export const PressableButton = ({
radius, radius,
children, children,
onPress, onPress,
customStyle customStyle,alpha=-0.1,
opacity=1
}) => { }) => {
return ( return (
<Pressable <Pressable
activeOpacity={opacity} activeOpacity={opacity}
android_ripple={{
radius: radius,
color: selectedColor,
borderless: borderless,
}}
onPress={onPress} onPress={onPress}
style={({pressed}) => [ style={({pressed}) => [
{ {
backgroundColor: backgroundColor:
pressed && Platform.OS === 'ios' ? selectedColor : color, pressed && Platform.OS === 'ios' ? RGB_Linear_Shade(alpha, hexToRGBA(selectedColor, opacity)) : color,
width: '100%', width: '100%',
alignSelf: 'center', alignSelf: 'center',
borderRadius: br, borderRadius: br,

33
apps/mobile/src/views/Settings/index.js
View File

@@ -34,8 +34,9 @@ import {ACTIONS} from '../../provider/actions';
import {eSendEvent} from '../../services/eventManager'; import {eSendEvent} from '../../services/eventManager';
import {eOpenLoginDialog, eResetApp} from '../../services/events'; import {eOpenLoginDialog, eResetApp} from '../../services/events';
import NavigationService from '../../services/NavigationService'; import NavigationService from '../../services/NavigationService';
import {db, DDS, setSetting, ToastEvent, w} from '../../utils/utils'; import {db, DDS, setSetting, ToastEvent, w, RGB_Linear_Shade, hexToRGBA} from '../../utils/utils';
import {MMKV} from '../../utils/storage'; import {MMKV} from '../../utils/storage';
import {PressableButton} from '../../components/PressableButton';
export const Settings = ({route, navigation}) => { export const Settings = ({route, navigation}) => {
const [state, dispatch] = useTracked(); const [state, dispatch] = useTracked();
@@ -381,7 +382,11 @@ export const Settings = ({route, navigation}) => {
</> </>
) : ( ) : (
<> <>
<TouchableOpacity <PressableButton
color={colors.shade}
selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.1}
opacity={0.12}
onPress={() => { onPress={() => {
DDS.isTab DDS.isTab
? eSendEvent(eOpenLoginDialog) ? eSendEvent(eOpenLoginDialog)
@@ -390,13 +395,13 @@ export const Settings = ({route, navigation}) => {
}); });
}} }}
activeOpacity={opacity / 2} activeOpacity={opacity / 2}
style={{ customStyle={{
paddingVertical: pv + 5, paddingVertical: pv + 5,
marginBottom: pv + 5, marginBottom: pv + 5,
width: '100%', width: '100%',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
backgroundColor: colors.shade, justifyContent: 'flex-start',
borderRadius: 5, borderRadius: 5,
paddingHorizontal: 6, paddingHorizontal: 6,
}}> }}>
@@ -447,7 +452,7 @@ export const Settings = ({route, navigation}) => {
size={SIZE.lg} size={SIZE.lg}
/> />
</View> </View>
</TouchableOpacity> </PressableButton>
</> </>
)} )}
<Text <Text
@@ -502,34 +507,38 @@ export const Settings = ({route, navigation}) => {
'#bcf60c', '#bcf60c',
'#fabebe', '#fabebe',
].map((item) => ( ].map((item) => (
<TouchableOpacity <PressableButton
key={item} key={item}
color={colors.accent === item? RGB_Linear_Shade(!colors.night? -0.2 : 0.2, hexToRGBA(item, 1)) : item}
selectedColor={item}
alpha={!colors.night ? -0.1 : 0.1}
opacity={1}
onPress={() => { onPress={() => {
changeAccentColor(item); changeAccentColor(item);
MMKV.setStringAsync('accentColor', item); MMKV.setStringAsync('accentColor', item);
}} }}
style={{ customStyle={{
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
marginHorizontal: 5, marginHorizontal: 5,
marginVertical: 5, marginVertical: 5,
}}>
<View
style={{
width: w / 5 - 35, width: w / 5 - 35,
height: w / 5 - 35, height: w / 5 - 35,
backgroundColor: item,
borderRadius: 100, borderRadius: 100,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}}>
<View
style={{
}}> }}>
{colors.accent === item ? ( {colors.accent === item ? (
<Icon size={SIZE.lg} color="white" name="check" /> <Icon size={SIZE.lg} color="white" name="check" />
) : null} ) : null}
</View> </View>
</TouchableOpacity> </PressableButton>
))} ))}
</View> </View>