From 088ac43b782a2791cc4fec8f8807fe314d92f297 Mon Sep 17 00:00:00 2001 From: Nouman Tahir Date: Tue, 22 Jun 2021 10:35:22 +0500 Subject: [PATCH 1/5] updated profile summary footer actions... 1. moved fav to dropdown 2. using text based follow/unfollow button 3. UI fine tuning --- src/components/profile/profileView.js | 2 - .../view/profileSummaryStyles.js | 22 ++++++--- .../profileSummary/view/profileSummaryView.js | 46 +++++++++---------- 3 files changed, 38 insertions(+), 32 deletions(-) diff --git a/src/components/profile/profileView.js b/src/components/profile/profileView.js index b38a926ce..1db4d5f8a 100644 --- a/src/components/profile/profileView.js +++ b/src/components/profile/profileView.js @@ -168,7 +168,6 @@ class ProfileView extends PureComponent { _contentWalletTab = () => { const { currencyRate, currencySymbol, selectedUser } = this.props; - const { isSummaryOpen, estimatedWalletValue } = this.state; return ( @@ -205,7 +204,6 @@ class ProfileView extends PureComponent { } = this.props; const { isSummaryOpen } = this.state; - const pageType = isOwnProfile ? 'ownProfile' : 'profile'; const tabs = (isOwnProfile ? ownProfileTabs : profileTabs) || getDefaultFilters(pageType); diff --git a/src/components/profileSummary/view/profileSummaryStyles.js b/src/components/profileSummary/view/profileSummaryStyles.js index 49db84c73..a0913c112 100644 --- a/src/components/profileSummary/view/profileSummaryStyles.js +++ b/src/components/profileSummary/view/profileSummaryStyles.js @@ -19,7 +19,7 @@ export default EStyleSheet.create({ backgroundColor: '#296CC0', }, footer: { - width: '$deviceWidth - 24', + width: '$deviceWidth - 14', flexDirection: 'row', justifyContent: 'space-between', marginVertical: 10, @@ -33,6 +33,7 @@ export default EStyleSheet.create({ rightIcons: { flexDirection: 'row', justifyContent: 'flex-end', + alignItems: 'center', }, insetIconStyle: { marginRight: 20, @@ -57,15 +58,24 @@ export default EStyleSheet.create({ color: '$primaryDarkGray', fontSize: 9, }, - // TODO: look at here dropdownIconStyle: { width: 25, height: 25, - left: -5, - marginBottom: 3, - color: '#c1c5c7', + color: '$primaryDarkGray', }, dropdownStyle: { - maxWidth: 150, + marginLeft: 12, + }, + followActionText: { + alignSelf: 'center', + fontWeight: 'bold', + color: '$primaryDarkGray', + }, + followActionWrapper: { + borderColor: '$primaryDarkGray', + borderWidth: 1, + borderRadius: 16, + padding: 4, + paddingHorizontal: 12, }, }); diff --git a/src/components/profileSummary/view/profileSummaryView.js b/src/components/profileSummary/view/profileSummaryView.js index ab9ea677c..f13d25ecd 100644 --- a/src/components/profileSummary/view/profileSummaryView.js +++ b/src/components/profileSummary/view/profileSummaryView.js @@ -19,6 +19,7 @@ import { getResizedImage } from '../../../utils/image'; // Styles import styles from './profileSummaryStyles'; +import { TextButton } from '../../buttons'; const DEVICE_WIDTH = Dimensions.get('window').width; @@ -45,12 +46,19 @@ class ProfileSummaryView extends PureComponent { }; _handleOnDropdownSelect = (index) => { - const { isMuted, handleMuteUnmuteUser } = this.props; + const { isMuted, isFavorite, handleMuteUnmuteUser, handleOnFavoritePress } = this.props; - // This funciton should have switch case but now only has one option therefor - // temporarily I created with if statments - if (index === 0 && handleMuteUnmuteUser) { - handleMuteUnmuteUser(!isMuted); + switch (index) { + case 0: + if (handleMuteUnmuteUser) { + handleMuteUnmuteUser(!isMuted); + } + break; + case 1: + if (handleOnFavoritePress) { + handleOnFavoritePress(isFavorite); + } + break; } }; @@ -62,7 +70,6 @@ class ProfileSummaryView extends PureComponent { followerCount, followingCount, handleFollowUnfollowUser, - handleOnFavoritePress, handleOnFollowsPress, handleOnPressProfileEdit, handleUIChange, @@ -97,7 +104,7 @@ class ProfileSummaryView extends PureComponent { (location ? location.length : 0) + (link ? link.length : 0) + (date ? date.length : 0); const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 7.3; - const followButtonIcon = !isFollowing ? 'account-plus' : 'account-minus'; + const followButtonText = !isFollowing ? 'Follow' : 'Unfollow'; let coverImageUrl = getResizedImage(get(about, 'cover_image'), 600); if (!coverImageUrl) { @@ -109,6 +116,7 @@ class ProfileSummaryView extends PureComponent { } dropdownOptions.push(!isMuted ? 'MUTE' : 'UNMUTE'); + dropdownOptions.push(isFavorite ? 'REMOVE FROM FAVOURITES' : 'ADD TO FAVOURITES'); return ( @@ -186,28 +194,18 @@ class ProfileSummaryView extends PureComponent { {isLoggedIn && !isOwnProfile ? ( - handleOnFavoritePress(isFavorite)} - /> - handleFollowUnfollowUser(!isFollowing)} - size={20} - /> + > + {followButtonText} + + {isProfileLoading ? ( ) : ( Date: Tue, 22 Jun 2021 10:45:34 +0500 Subject: [PATCH 2/5] making use of translations --- .../profileSummary/view/profileSummaryView.js | 38 +++++++++++++++---- src/config/locales/en-US.json | 6 ++- 2 files changed, 35 insertions(+), 9 deletions(-) diff --git a/src/components/profileSummary/view/profileSummaryView.js b/src/components/profileSummary/view/profileSummaryView.js index f13d25ecd..1c056b01a 100644 --- a/src/components/profileSummary/view/profileSummaryView.js +++ b/src/components/profileSummary/view/profileSummaryView.js @@ -1,5 +1,13 @@ import React, { PureComponent, Fragment } from 'react'; -import { View, Text, TouchableOpacity, Dimensions, ActivityIndicator, Linking } from 'react-native'; +import { + View, + Text, + TouchableOpacity, + Dimensions, + ActivityIndicator, + Linking, + Alert, +} from 'react-native'; import get from 'lodash/get'; // Constants @@ -50,14 +58,17 @@ class ProfileSummaryView extends PureComponent { switch (index) { case 0: + if (handleOnFavoritePress) { + handleOnFavoritePress(isFavorite); + } + break; + case 1: if (handleMuteUnmuteUser) { handleMuteUnmuteUser(!isMuted); } break; - case 1: - if (handleOnFavoritePress) { - handleOnFavoritePress(isFavorite); - } + default: + Alert.alert('Action not implemented'); break; } }; @@ -104,7 +115,9 @@ class ProfileSummaryView extends PureComponent { (location ? location.length : 0) + (link ? link.length : 0) + (date ? date.length : 0); const isColumn = rowLength && DEVICE_WIDTH / rowLength <= 7.3; - const followButtonText = !isFollowing ? 'Follow' : 'Unfollow'; + const followButtonText = intl.formatMessage({ + id: !isFollowing ? 'user.follow' : 'user.unfollow', + }); let coverImageUrl = getResizedImage(get(about, 'cover_image'), 600); if (!coverImageUrl) { @@ -115,8 +128,17 @@ class ProfileSummaryView extends PureComponent { coverImageUrl = { uri: coverImageUrl }; } - dropdownOptions.push(!isMuted ? 'MUTE' : 'UNMUTE'); - dropdownOptions.push(isFavorite ? 'REMOVE FROM FAVOURITES' : 'ADD TO FAVOURITES'); + //compile dropdown options + dropdownOptions.push( + intl.formatMessage({ + id: isFavorite ? 'user.remove_from_favourites' : 'user.add_to_favourites', + }), + ); + dropdownOptions.push( + intl.formatMessage({ + id: !isMuted ? 'user.mute' : 'user.unmute', + }), + ); return ( diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 406be9db7..e58fcea2b 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -630,7 +630,11 @@ }, "user": { "follow": "Follow", - "unfollow": "Unfollow" + "unfollow": "Unfollow", + "add_to_favourites": "ADD TO FAVOURITES", + "remove_from_favourites": "REMOVE FROM FAVOURITES", + "mute": "MUTE", + "unmute": "UNMUTE" }, "communities": { "joined": "Membership", From 62086a976f3b2b59c328f93c30cb1bc3990671ac Mon Sep 17 00:00:00 2001 From: Nouman Tahir Date: Tue, 22 Jun 2021 12:07:37 +0500 Subject: [PATCH 3/5] updated follow unfollow button appearence in empty feed suggestions --- .../view/userListItem/userListItem.tsx | 11 ++++++----- .../tabbedPosts/view/listEmptyView.tsx | 2 +- .../tabbedPosts/view/tabbedPostsStyles.tsx | 17 +++++++++++++++++ 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/components/basicUIElements/view/userListItem/userListItem.tsx b/src/components/basicUIElements/view/userListItem/userListItem.tsx index 02a164e24..29f5d5182 100644 --- a/src/components/basicUIElements/view/userListItem/userListItem.tsx +++ b/src/components/basicUIElements/view/userListItem/userListItem.tsx @@ -115,18 +115,19 @@ const UserListItem = ({ _handleRightButtonPress() }}> - {isFollowing ? ( - - ) : ( <> {rightText} {subRightText && {subRightText}} - )} Date: Tue, 22 Jun 2021 12:24:27 +0500 Subject: [PATCH 4/5] updated community join/leave button to match border button styling --- .../view/communityListItem/communityListItem.js | 8 +++++--- .../view/communityListItem/communityListItemStyles.js | 9 +++++++++ 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/components/basicUIElements/view/communityListItem/communityListItem.js b/src/components/basicUIElements/view/communityListItem/communityListItem.js index f0a7fc7a4..6e0309e41 100644 --- a/src/components/basicUIElements/view/communityListItem/communityListItem.js +++ b/src/components/basicUIElements/view/communityListItem/communityListItem.js @@ -46,8 +46,10 @@ const CommunityListItem = ({ ) : ( diff --git a/src/components/basicUIElements/view/communityListItem/communityListItemStyles.js b/src/components/basicUIElements/view/communityListItem/communityListItemStyles.js index 771ba597b..80c8d0188 100644 --- a/src/components/basicUIElements/view/communityListItem/communityListItemStyles.js +++ b/src/components/basicUIElements/view/communityListItem/communityListItemStyles.js @@ -55,6 +55,15 @@ export default EStyleSheet.create({ textAlign: 'center', color: '$primaryBlue', }, + unsubscribeButton: { + borderWidth: 1, + maxWidth: 75, + borderColor: '$primaryDarkGray', + }, + unsubscribeButtonText: { + textAlign: 'center', + color: '$primaryDarkGray', + }, header: { flexDirection: 'row', justifyContent: 'space-between', From 791c21f338a805cae39805d351a15b60ff0862ed Mon Sep 17 00:00:00 2001 From: Nouman Tahir Date: Tue, 22 Jun 2021 13:10:11 +0500 Subject: [PATCH 5/5] added color support borderedButtonBlue --- .../view/communityListItem/communityListItemStyles.js | 4 ++-- src/components/tabbedPosts/view/tabbedPostsStyles.tsx | 4 ++-- src/themes/darkTheme.js | 1 + src/themes/lightTheme.js | 1 + 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/basicUIElements/view/communityListItem/communityListItemStyles.js b/src/components/basicUIElements/view/communityListItem/communityListItemStyles.js index 80c8d0188..7808de79c 100644 --- a/src/components/basicUIElements/view/communityListItem/communityListItemStyles.js +++ b/src/components/basicUIElements/view/communityListItem/communityListItemStyles.js @@ -49,11 +49,11 @@ export default EStyleSheet.create({ subscribeButton: { borderWidth: 1, maxWidth: 75, - borderColor: '$primaryBlue', + borderColor: '$borderedButtonBlue', }, subscribeButtonText: { textAlign: 'center', - color: '$primaryBlue', + color: '$borderedButtonBlue', }, unsubscribeButton: { borderWidth: 1, diff --git a/src/components/tabbedPosts/view/tabbedPostsStyles.tsx b/src/components/tabbedPosts/view/tabbedPostsStyles.tsx index 3d4a9dc14..72f889a35 100644 --- a/src/components/tabbedPosts/view/tabbedPostsStyles.tsx +++ b/src/components/tabbedPosts/view/tabbedPostsStyles.tsx @@ -82,12 +82,12 @@ export default EStyleSheet.create({ marginTop:56 }, followText:{ - color: '$primaryBlue', + color: '$borderedButtonBlue', fontSize: 12, fontFamily: '$primaryFont', fontWeight: 'bold', - borderColor: '$primaryBlue', + borderColor: '$borderedButtonBlue', borderWidth: 1, borderRadius: 10, paddingVertical:2, diff --git a/src/themes/darkTheme.js b/src/themes/darkTheme.js index ce4d9bf14..b1922fabf 100644 --- a/src/themes/darkTheme.js +++ b/src/themes/darkTheme.js @@ -40,6 +40,7 @@ export default { $tableTrColor: '#2e3d51', $tableBorderColor: '#1e2835', $noConnectionColor: '#788187', + $borderedButtonBlue: '#5CCDFF', // Devices Sizes $deviceHeight: diff --git a/src/themes/lightTheme.js b/src/themes/lightTheme.js index 38818aa55..60fb12a2e 100644 --- a/src/themes/lightTheme.js +++ b/src/themes/lightTheme.js @@ -40,6 +40,7 @@ export default { $tableTrColor: '#f5f5f5', $tableBorderColor: '#FFFFFF', $noConnectionColor: '#788187', + $borderedButtonBlue: '#357ce6', // Devices Sizes $deviceHeight: