From ad98ad617d78c7b68ffc37327f21a8769fcaab57 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 14:49:58 -0400 Subject: Fix styling, Cleanup imports --- .../moments/IndividualMomentTitleBar.tsx | 53 ---------------------- src/components/moments/MomentPost.tsx | 5 +- src/components/moments/index.ts | 1 - 3 files changed, 1 insertion(+), 58 deletions(-) delete mode 100644 src/components/moments/IndividualMomentTitleBar.tsx (limited to 'src/components') diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx deleted file mode 100644 index c6bf1423..00000000 --- a/src/components/moments/IndividualMomentTitleBar.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import {StyleSheet, Text, View, ViewProps} from 'react-native'; -import {normalize, SCREEN_WIDTH} from '../../utils'; - -interface IndividualMomentTitleBarProps extends ViewProps { - title: string; -} -const IndividualMomentTitleBar: React.FC = ({ - title, -}) => { - return ( - - - 18 ? normalize(14) : normalize(16), - }, - ]}> - {title} - - - - ); -}; - -const styles = StyleSheet.create({ - title: { - textAlign: 'center', - color: 'white', - fontSize: normalize(18), - fontWeight: '700', - lineHeight: normalize(21.48), - letterSpacing: normalize(1.3), - }, - titleContainer: { - width: '80%', - position: 'absolute', - left: '10%', - right: '10%', - height: normalize(70), - }, - mainContainer: { - flex: 1, - width: SCREEN_WIDTH * 0.6, - flexDirection: 'row', - justifyContent: 'flex-end', - marginVertical: '2%', - }, -}); - -export default IndividualMomentTitleBar; diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 921f7693..2257f8ac 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -134,10 +134,7 @@ const MomentPost: React.FC = ({ useEffect( () => navigation.setOptions({ - ...headerBarOptions('white', ''), - headerTitle: () => ( - - ), + ...headerBarOptions('white', moment.moment_category), }), [moment.moment_id], ); diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts index 3f33ec53..4c1c509e 100644 --- a/src/components/moments/index.ts +++ b/src/components/moments/index.ts @@ -1,4 +1,3 @@ -export {default as IndividualMomentTitleBar} from './IndividualMomentTitleBar'; export {default as CaptionScreenHeader} from './CaptionScreenHeader'; export {default as Moment} from './Moment'; export {default as TagFriendsFooter} from './TagFriendsFoooter'; -- cgit v1.2.3-70-g09d2 From fbaa7d6ee05d1486152175471ef21e8b4638754d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 14:52:02 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 2257f8ac..123ee5f4 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -43,7 +43,6 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import CommentsCount from '../comments/CommentsCount'; import {GradientProgressBar, MomentTags} from '../common'; import {MomentMoreInfoDrawer, TaggAvatar} from '../profile'; -import IndividualMomentTitleBar from './IndividualMomentTitleBar'; interface MomentPostProps { moment: MomentPostType; userXId: string | undefined; -- cgit v1.2.3-70-g09d2 From 4cd0910e9b20b10b0a5ef46945b139e711eec252 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:02:59 -0400 Subject: Fix header styling --- src/components/moments/MomentPost.tsx | 36 +++++++++++++++++++++++++++++++++-- src/routes/main/MainStackScreen.tsx | 3 +++ 2 files changed, 37 insertions(+), 2 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 123ee5f4..ecd2e66f 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -34,6 +34,7 @@ import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, + isIPhoneX, navigateToProfile, normalize, SCREEN_HEIGHT, @@ -133,7 +134,22 @@ const MomentPost: React.FC = ({ useEffect( () => navigation.setOptions({ - ...headerBarOptions('white', moment.moment_category), + ...headerBarOptions('white', ''), + headerTitle: () => ( + 18 + ? normalize(14) + : normalize(16), + }, + ]}> + {moment.moment_category} + + ), }), [moment.moment_id], ); @@ -499,7 +515,23 @@ const styles = StyleSheet.create({ position: 'absolute', top: -2.5, }, - profilePreviewContainer: {paddingHorizontal: '3%'}, + progressBaContainer: { + position: 'absolute', + top: isIPhoneX() ? 75 : 70, + }, + profilePreviewContainer: { + paddingHorizontal: '3%', + }, + multilineHeaderTitle: { + width: SCREEN_WIDTH * 0.7, + height: normalize(70), + marginTop: normalize(90) / 2, + textAlign: 'center', + lineHeight: normalize(21.48), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'white', + }, }); export default MomentPost; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index ccfc4cbd..35e1f8e0 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -382,6 +382,7 @@ export const headerBarOptions: ( ), headerTitle: () => ( Date: Thu, 29 Jul 2021 14:05:41 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 14 -------------- 1 file changed, 14 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index ecd2e66f..19d25739 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -505,20 +505,6 @@ const styles = StyleSheet.create({ height: 3, marginHorizontal: 2, }, - progressDot: { - backgroundColor: '#fff', - width: 10, - height: 10, - borderRadius: 10, - borderWidth: 0.3, - borderColor: TAGG_PURPLE, - position: 'absolute', - top: -2.5, - }, - progressBaContainer: { - position: 'absolute', - top: isIPhoneX() ? 75 : 70, - }, profilePreviewContainer: { paddingHorizontal: '3%', }, -- cgit v1.2.3-70-g09d2 From 2947fb74da4f990ac9c15cb352ef254592a3c6ab Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:09:34 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 19d25739..eae95fe2 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -25,7 +25,6 @@ import Video from 'react-native-video'; import {useDispatch, useSelector, useStore} from 'react-redux'; import {TaggedUsersDrawer} from '.'; import PauseIcon from '../../assets/icons/pause-icon.svg'; -import {TAGG_PURPLE} from '../../constants/constants'; import {headerBarOptions} from '../../routes'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; @@ -34,7 +33,6 @@ import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, - isIPhoneX, navigateToProfile, normalize, SCREEN_HEIGHT, -- cgit v1.2.3-70-g09d2 From 7c33718ecf68982b362f0756fe3df793ce97f6fd Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:27:45 -0400 Subject: Cleaned up logic, Add logic to check if long title --- src/components/moments/MomentPost.tsx | 42 +++++++++-------------------------- src/routes/main/MainStackScreen.tsx | 27 ++++++++++++++++++++++ 2 files changed, 38 insertions(+), 31 deletions(-) (limited to 'src/components') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index eae95fe2..d95d6f3a 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -25,7 +25,7 @@ import Video from 'react-native-video'; import {useDispatch, useSelector, useStore} from 'react-redux'; import {TaggedUsersDrawer} from '.'; import PauseIcon from '../../assets/icons/pause-icon.svg'; -import {headerBarOptions} from '../../routes'; +import {headerBarOptions, multilineHeaderTitle} from '../../routes'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; import {loadUserMoments} from '../../store/actions'; @@ -129,28 +129,18 @@ const MomentPost: React.FC = ({ } }; - useEffect( - () => + useEffect(() => { + if (moment.moment_category.length > 20) { navigation.setOptions({ ...headerBarOptions('white', ''), - headerTitle: () => ( - 18 - ? normalize(14) - : normalize(16), - }, - ]}> - {moment.moment_category} - - ), - }), - [moment.moment_id], - ); + ...multilineHeaderTitle(moment.moment_category), + }); + } else { + navigation.setOptions({ + ...headerBarOptions('white', moment.moment_category), + }); + } + }, [moment.moment_id]); /* * Determines if an image is 9:16 to set aspect ratio of current image and @@ -506,16 +496,6 @@ const styles = StyleSheet.create({ profilePreviewContainer: { paddingHorizontal: '3%', }, - multilineHeaderTitle: { - width: SCREEN_WIDTH * 0.7, - height: normalize(70), - marginTop: normalize(90) / 2, - textAlign: 'center', - lineHeight: normalize(21.48), - letterSpacing: normalize(1.3), - fontWeight: '700', - color: 'white', - }, }); export default MomentPost; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 35e1f8e0..64060554 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -393,6 +393,23 @@ export const headerBarOptions: ( ), }); +export const multilineHeaderTitle: (title: string) => StackNavigationOptions = ( + title, +) => ({ + headerTitle: () => ( + 18 ? normalize(14) : normalize(16), + }, + ]}> + {title} + + ), +}); + export const modalStyle: StackNavigationOptions = { cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'}, gestureDirection: 'vertical', @@ -424,6 +441,16 @@ const styles = StyleSheet.create({ letterSpacing: normalize(1.3), fontWeight: '700', }, + multilineHeaderTitle: { + width: SCREEN_WIDTH * 0.7, + height: normalize(70), + marginTop: normalize(90) / 2, + textAlign: 'center', + lineHeight: normalize(21.48), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'white', + }, }); export default MainStackScreen; -- cgit v1.2.3-70-g09d2