From 458b01324dcf9ce8fdfdbf9999986390e506e23a Mon Sep 17 00:00:00 2001 From: George Rusu Date: Tue, 18 May 2021 14:13:40 -0700 Subject: add draggable component for tagging --- src/assets/images/tagg-rectangle.png | Bin 0 -> 521 bytes src/assets/images/tagg-tip.png | Bin 0 -> 233 bytes src/assets/images/tagg-x-button.png | Bin 0 -> 549 bytes 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/images/tagg-rectangle.png create mode 100644 src/assets/images/tagg-tip.png create mode 100644 src/assets/images/tagg-x-button.png (limited to 'src/assets/images') diff --git a/src/assets/images/tagg-rectangle.png b/src/assets/images/tagg-rectangle.png new file mode 100644 index 00000000..24bfd67e Binary files /dev/null and b/src/assets/images/tagg-rectangle.png differ diff --git a/src/assets/images/tagg-tip.png b/src/assets/images/tagg-tip.png new file mode 100644 index 00000000..eb3c5bad Binary files /dev/null and b/src/assets/images/tagg-tip.png differ diff --git a/src/assets/images/tagg-x-button.png b/src/assets/images/tagg-x-button.png new file mode 100644 index 00000000..5ce3846d Binary files /dev/null and b/src/assets/images/tagg-x-button.png differ -- cgit v1.2.3-70-g09d2 From 9c61216d0a64a259fc6a0180627c322b4f26ffea Mon Sep 17 00:00:00 2001 From: George Rusu Date: Wed, 19 May 2021 12:44:43 -0700 Subject: Create basic component and styling --- src/assets/images/draggableX.png | Bin 0 -> 1780 bytes src/components/taggs/TaggDraggable.tsx | 143 +++++++++++++++------------------ src/screens/profile/CaptionScreen.tsx | 29 ++++--- 3 files changed, 84 insertions(+), 88 deletions(-) create mode 100644 src/assets/images/draggableX.png (limited to 'src/assets/images') diff --git a/src/assets/images/draggableX.png b/src/assets/images/draggableX.png new file mode 100644 index 00000000..b99c5dfc Binary files /dev/null and b/src/assets/images/draggableX.png differ diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 2c7ae2ce..afd2a212 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -1,6 +1,13 @@ import {useNavigation} from '@react-navigation/native'; import React, {useState} from 'react'; -import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; +import { + Image, + StyleSheet, + Text, + TouchableOpacity, + TouchableWithoutFeedback, + View, +} from 'react-native'; import Draggable from 'react-native-draggable'; import {ScreenType, UserType} from '../../types'; import { @@ -12,6 +19,9 @@ import { import TaggAvatar from '../profile/TaggAvatar'; import {RootState} from '../../store/rootReducer'; import {useStore, useDispatch} from 'react-redux'; +import {Button} from 'react-native-share'; +import {userBlockFetched} from 'src/store/reducers'; +import {color} from 'react-native-reanimated'; interface TaggDraggableProps { draggable?: boolean; @@ -43,94 +53,31 @@ const TaggDraggable: React.FC = ( deleteFromList, } = props; let uriTip = require('../../assets/images/tagg-tip.png'); - let uriX = require('../../assets/images/tagg-x-button.png'); - - // + let uriX = require('../../assets/images/draggableX.png'); - /** - * This function returns x,y pairing for each tagg. - */ - // const getCoords = () => { - // return [xCoord, yCoord]; - // }; - const renderTagg = () => { - return ( + return ( + - {/* user profile pic */} - + - {/* @username */} - - navigateToProfile( - state, - dispatch, - navigation, - ScreenType.Profile, - taggedUser, - ) - }> - {taggedUser.userId} - - {/* x button */} - - deleteFromList()}> + @{taggedUser.username} + - ); - }; - if (redirect) { - if (draggable) { - return ( - - {console.log("this guy's userid is: " + taggedUser.userId)} - { - setXcoord(gestureState.moveX); - setYcoord(gestureState.moveY); - }}> - - - {taggedUser.userId} - - deleteFromList()}> - - - - - - {taggedUser.userId} - - deleteFromList()}> - - - - - ); - } else { - return renderTagg(); - } - } else { - return renderTagg(); - } + + ); }; const styles = StyleSheet.create({ container: { + color: 'red', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', @@ -138,16 +85,39 @@ const styles = StyleSheet.create({ marginBottom: '5%', }, bodyContainer: { + color: 'blue', flexDirection: 'column', height: normalize(42), justifyContent: 'space-around', }, + label: { + fontWeight: '500', + fontSize: normalize(14), + }, + rectangle: { + width: 100 * 2, + height: 100, + borderRadius: 25, + paddingLeft: 10, + paddingBottom: 0, + paddingTop: 10, + }, + buttonTitle: { + color: 'white', + fontSize: normalize(11), + fontWeight: '700', + lineHeight: normalize(13.13), + letterSpacing: normalize(0.6), + paddingHorizontal: '3.8%', + }, + avatar: { + flex: 0.45, + aspectRatio: 1, + }, inviteButton: { backgroundColor: 'transparent', }, imageRectangle: { - width: '100%', - height: '100%', backgroundColor: 'black', borderWidth: 2, borderRadius: 2, @@ -156,8 +126,25 @@ const styles = StyleSheet.create({ backgroundColor: 'black', }, imageX: { - width: '100%', - height: '100%', + width: normalize(15), + height: normalize(15), + }, + pendingButtonTitle: { + color: 'white', + }, + button: { + paddingLeft: 1, + paddingTop: 3, + paddingBottom: 3, + justifyContent: 'space-evenly', + alignSelf: 'flex-start', + alignItems: 'center', + borderWidth: 1.5, + borderRadius: 20, + flexDirection: 'row', + flexWrap: 'wrap', + borderColor: 'black', + backgroundColor: 'rgba(0, 0, 0, 0.8)', }, }); diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 3fd2e7ef..bfe9a0e4 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -30,6 +30,7 @@ import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; import TaggDraggable from '../../components/taggs/TaggDraggable'; +import Draggable from 'react-native-draggable'; /** * Upload Screen to allow users to upload posts to Tagg @@ -53,6 +54,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); + const [taggList, setTaggList] = useState([]); const navigateToProfile = () => { //Since the logged In User is navigating to own profile, useXId is not required @@ -62,6 +64,11 @@ const CaptionScreen: React.FC = ({route, navigation}) => { }); }; + /** + * need a handler to take care of creating a tagged user object, append that object to the taggList state variable. + * @returns + */ + const handleShare = async () => { setLoading(true); if (!image.filename) { @@ -121,16 +128,18 @@ const CaptionScreen: React.FC = ({route, navigation}) => { onChange={setCaption} partTypes={mentionPartTypes('blue')} /> - console.log('Hello world')} - /> + + console.log('Hello world')} + /> + -- cgit v1.2.3-70-g09d2 From afc117ccaf5127c68e6dd3088bbf11238de615f3 Mon Sep 17 00:00:00 2001 From: George Rusu Date: Wed, 19 May 2021 18:06:53 -0700 Subject: Add proper bounds, need tip --- src/assets/images/Tagg-Triangle.png | Bin 0 -> 561 bytes src/components/taggs/TaggDraggable.tsx | 66 ++++++++++----------------------- src/screens/profile/CaptionScreen.tsx | 38 ++++++------------- 3 files changed, 32 insertions(+), 72 deletions(-) create mode 100644 src/assets/images/Tagg-Triangle.png (limited to 'src/assets/images') diff --git a/src/assets/images/Tagg-Triangle.png b/src/assets/images/Tagg-Triangle.png new file mode 100644 index 00000000..dfe97282 Binary files /dev/null and b/src/assets/images/Tagg-Triangle.png differ diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 06185bd1..6a93aee5 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -1,5 +1,5 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useState, useEffect, useRef} from 'react'; +import React, {useEffect, useRef} from 'react'; import { Image, StyleSheet, @@ -8,21 +8,13 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {useDispatch, useStore} from 'react-redux'; -import {RootState} from '../../store/rootReducer'; import {ScreenType, UserType} from '../../types'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {normalize} from '../../utils'; import TaggAvatar from '../profile/TaggAvatar'; -import {RefObject} from 'react'; interface TaggDraggableProps { - draggable?: boolean; - minX: number; - minY: number; - maxX: number; - maxY: number; taggedUser: UserType; - redirect: boolean; + editingView: boolean; deleteFromList: () => void; setStart: Function; } @@ -30,11 +22,7 @@ interface TaggDraggableProps { const TaggDraggable: React.FC = ( props: TaggDraggableProps, ) => { - const [xCoord, setXcoord] = useState(SCREEN_HEIGHT / 2); - const [yCoord, setYcoord] = useState(SCREEN_WIDTH / 2); - const dispatch = useDispatch(); const navigation = useNavigation(); - const state: RootState = useStore().getState(); const gotoTaggedProfile = (userID: string) => { //Since the logged In User is navigating to own profile, useXId is not required @@ -44,18 +32,7 @@ const TaggDraggable: React.FC = ( }); }; - const { - draggable, - minX, - minY, - maxX, - maxY, - taggedUser, - redirect, - deleteFromList, - setStart, - } = props; - let uriTip = require('../../assets/images/tagg-tip.png'); + const {taggedUser, editingView, deleteFromList, setStart} = props; let uriX = require('../../assets/images/draggableX.png'); const draggableRef = useRef(null); @@ -74,12 +51,10 @@ const TaggDraggable: React.FC = ( return ( - console.log(event.nativeEvent.layout)}> + gotoTaggedProfile(taggedUser.userId)} - disabled={redirect} + disabled={editingView} style={[styles.button]} ref={draggableRef}> = ( editable={false} userXId={taggedUser.userId} /> - @{taggedUser.username} - {redirect && ( + + @{taggedUser.username} + + {editingView && ( deleteFromList()}> @@ -121,21 +98,22 @@ const styles = StyleSheet.create({ fontWeight: '500', fontSize: normalize(14), }, - rectangle: { - width: 100 * 2, - height: 100, - borderRadius: 25, - paddingLeft: 10, - paddingBottom: 0, - paddingTop: 10, - }, buttonTitle: { color: 'white', fontSize: normalize(11), fontWeight: '700', lineHeight: normalize(13.13), letterSpacing: normalize(0.6), - paddingHorizontal: '1.5%', + paddingHorizontal: '1%', + }, + buttonTitleX: { + color: 'white', + fontSize: normalize(11), + fontWeight: '700', + lineHeight: normalize(13.13), + letterSpacing: normalize(0.6), + paddingHorizontal: '1%', + marginRight: '-10%', }, avatar: { marginLeft: '4%', @@ -151,9 +129,6 @@ const styles = StyleSheet.create({ borderWidth: 2, borderRadius: 2, }, - imageTip: { - backgroundColor: 'black', - }, imageX: { width: normalize(15), height: normalize(15), @@ -163,7 +138,6 @@ const styles = StyleSheet.create({ color: 'white', }, button: { - paddingLeft: 1, paddingTop: 3, paddingBottom: 3, // justifyContent: 'space-evenly', diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index f72b1165..f77a2d23 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -14,9 +14,12 @@ import { import {MentionInput} from 'react-native-controlled-mentions'; import {Button} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; +import {UserType} from 'src/types'; import {SearchBackground} from '../../components'; import {CaptionScreenHeader} from '../../components/'; +import Draggable from '../../components/common/Draggable'; import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator'; +import TaggDraggable from '../../components/taggs/TaggDraggable'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings'; import {MainStackParams} from '../../routes'; @@ -26,18 +29,9 @@ import { updateProfileCompletionStage, } from '../../store/actions'; import {RootState} from '../../store/rootReducer'; -import { - normalize, - SCREEN_HEIGHT, - SCREEN_WIDTH, - StatusBarHeight, -} from '../../utils'; +import {SCREEN_WIDTH, StatusBarHeight} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; -import TaggDraggable from '../../components/taggs/TaggDraggable'; -import Draggable from '../../components/common/Draggable'; -import {UserType} from 'src/types'; - /** * Upload Screen to allow users to upload posts to Tagg */ @@ -59,7 +53,6 @@ interface momentTag { const CaptionScreen: React.FC = ({route, navigation}) => { const {title, image, screenType} = route.params; - const {user} = useSelector((state: RootState) => state.user); const { user: {userId}, } = useSelector((state: RootState) => state.user); @@ -70,14 +63,12 @@ const CaptionScreen: React.FC = ({route, navigation}) => { // idea is that each element in the list const [taggList, setTaggList] = useState([]); const imageRef = useRef(null); - const [tagInitCoords, setTagInitCoords] = useState([]); const [offset, setOffset] = useState([0, 0]); - const [curStart, setCurStart] = useState([0, 0]); - const [dim, setDim] = useState([0, 0]); + const [imageDimensions, setImageDimensions] = useState([0, 0]); + // created a test user - BUG - failed to register a profile visit - const testUser: UserType = { - // userId: '1216bbb4-f778-4ef3-b7f8-a55bde1ab1a1', userId: 'ID-1234-567', username: 'dragonofthewest', }; @@ -104,7 +95,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { console.log('X offset to page: ' + px); console.log('Y offset to page: ' + py); setOffset([px, py]); - setDim([width, height]); + setImageDimensions([width, height]); }); }, []); @@ -170,20 +161,15 @@ const CaptionScreen: React.FC = ({route, navigation}) => { partTypes={mentionPartTypes('blue')} /> + maxX={imageDimensions[0] + offset[0] + curStart[0] / 3} + maxY={imageDimensions[1] + offset[1] + curStart[1]}> console.log('Hello world')} setStart={setCurStart} /> -- cgit v1.2.3-70-g09d2