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

ui: improvements

Browse Source
This commit is contained in:
ammarahm-ed
2020-01-22 02:50:25 +05:00
parent 6ba4642dc8
commit 4f191a8c6b
4 changed files with 95 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
apps/mobile/src/components/Container/index.js
View File

@@ -13,6 +13,7 @@ import Icon from 'react-native-vector-icons/Feather';
import {br, opacity, pv, SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';
import {getElevation, w} from '../../utils/utils';
import {DDS} from '../../../App';
export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
SafeAreaView,
);
@@ -65,6 +66,7 @@ export const Container = ({
duration={300}
style={{
height: '100%',
backgroundColor: colors.night ? colors.bg : colors.bg,
}}>
<KeyboardAvoidingView
@@ -76,52 +78,59 @@ export const Container = ({
{children}
{noBottomButton ? null : (
<AnimatedTouchableOpacity
<Animatable.View
transition={['translateY', 'opacity']}
useNativeDriver={true}
duration={250}
onPress={bottomButtonOnPress}
activeOpacity={opacity}
style={{
...getElevation(5),
width: '95%',
alignSelf: 'center',
borderRadius: br,
backgroundColor: colors.accent,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 0,
width: '100%',
opacity: buttonHide ? 0 : 1,
position: 'absolute',
paddingHorizontal: 12,
zIndex: 10,
bottom: 10,
opacity: buttonHide ? 0 : 1,
transform: [
{
translateY: buttonHide ? 200 : 0,
},
],
}}>
<View
<AnimatedTouchableOpacity
onPress={bottomButtonOnPress}
activeOpacity={opacity}
style={{
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
...getElevation(5),
width: '100%',
padding: pv,
paddingVertical: pv + 5,
alignSelf: 'center',
borderRadius: br,
backgroundColor: colors.accent,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 0,
}}>
<Icon name="plus" color="white" size={SIZE.xl} />
<Text
<View
style={{
fontSize: SIZE.md,
color: 'white',
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
width: '100%',
padding: pv,
paddingVertical: pv + 5,
}}>
{' ' + bottomButtonText}
</Text>
</View>
</AnimatedTouchableOpacity>
<Icon name="plus" color="white" size={SIZE.xl} />
<Text
style={{
fontSize: SIZE.md,
color: 'white',
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
}}>
{' ' + bottomButtonText}
</Text>
</View>
</AnimatedTouchableOpacity>
</Animatable.View>
)}
</KeyboardAvoidingView>
</AnimatedSafeAreaView>