From 74734ecde9d26e0d08a62574f41dc7174572467d Mon Sep 17 00:00:00 2001 From: George Rusu Date: Thu, 20 May 2021 12:18:16 -0700 Subject: Fix styling for tip,container --- src/components/common/Draggable.tsx | 2 + src/components/taggs/TaggDraggable.tsx | 119 ++++++++++++++++++--------------- src/screens/profile/CaptionScreen.tsx | 30 +++++++-- 3 files changed, 92 insertions(+), 59 deletions(-) (limited to 'src') diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx index 347d2121..409ca6de 100644 --- a/src/components/common/Draggable.tsx +++ b/src/components/common/Draggable.tsx @@ -211,12 +211,14 @@ export default function Draggable(props: IProps) { const positionCss: StyleProp = React.useMemo(() => { const Window = Dimensions.get('window'); + return { position: 'absolute', top: 0, left: 0, width: Window.width, height: Window.height, + zIndex: z, }; }, []); diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index 6a93aee5..bb9949e4 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -8,12 +8,15 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {ScreenType, UserType} from '../../types'; +import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {normalize} from '../../utils'; -import TaggAvatar from '../profile/TaggAvatar'; +import Avatar from '../../components/common/Avatar'; +import {navigateToProfile} from '../../utils/users'; +import {useDispatch, useSelector} from 'react-redux'; +import {RootState} from 'src/store/rootReducer'; interface TaggDraggableProps { - taggedUser: UserType; + taggedUser: ProfilePreviewType; editingView: boolean; deleteFromList: () => void; setStart: Function; @@ -33,10 +36,13 @@ const TaggDraggable: React.FC = ( }; const {taggedUser, editingView, deleteFromList, setStart} = props; + const state = useSelector((rs: RootState) => rs); + + const dispatch = useDispatch(); let uriX = require('../../assets/images/draggableX.png'); + let uriTip = require('../../assets/images/Tagg-Triangle.png'); const draggableRef = useRef(null); - useEffect(() => { draggableRef.current.measure((fx, fy, width, height, px, py) => { console.log('Drag Component width is: ' + width); @@ -49,31 +55,49 @@ const TaggDraggable: React.FC = ( }); }, []); + const user: UserType = { + userId: taggedUser.id, + username: taggedUser.username, + }; + return ( - - gotoTaggedProfile(taggedUser.userId)} - disabled={editingView} - style={[styles.button]} - ref={draggableRef}> - - - @{taggedUser.username} - - {editingView && ( - deleteFromList()}> - - - )} - + + + + + navigateToProfile( + state, + dispatch, + navigation, + ScreenType.Profile, + user, + ) + } + disabled={editingView} + style={[styles.button]} + ref={draggableRef}> + + + @{taggedUser.username} + + {editingView && ( + deleteFromList()}> + + + )} + + ); @@ -81,24 +105,13 @@ const TaggDraggable: React.FC = ( const styles = StyleSheet.create({ container: { - color: 'red', + borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', - height: normalize(42), - marginBottom: '5%', - }, - bodyContainer: { - color: 'blue', - flexDirection: 'column', - height: normalize(42), - justifyContent: 'space-around', - }, - label: { - fontWeight: '500', - fontSize: normalize(14), }, buttonTitle: { + borderWidth: 1, color: 'white', fontSize: normalize(11), fontWeight: '700', @@ -116,37 +129,33 @@ const styles = StyleSheet.create({ marginRight: '-10%', }, avatar: { + borderWidth: 1, + borderRadius: 100 / 2, + overflow: 'hidden', marginLeft: '4%', marginRight: '-1%', flex: 0.45, aspectRatio: 1, }, - inviteButton: { - backgroundColor: 'transparent', - }, - imageRectangle: { - backgroundColor: 'black', - borderWidth: 2, - borderRadius: 2, - }, imageX: { + borderWidth: 1, width: normalize(15), height: normalize(15), - marginRight: '-15%', }, - pendingButtonTitle: { - color: 'white', + imageTip: { + borderWidth: 1, + bottom: -5, + width: normalize(15), + height: normalize(15), }, button: { + borderWidth: 1, paddingTop: 3, paddingBottom: 3, - // justifyContent: 'space-evenly', - alignSelf: 'flex-start', + justifyContent: 'space-evenly', alignItems: 'center', - borderWidth: 1.5, borderRadius: 20, flexDirection: 'row', - flexWrap: 'wrap', backgroundColor: 'rgba(0, 0, 0, 0.8)', }, }); diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index f77a2d23..1f49f917 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -59,9 +59,28 @@ const CaptionScreen: React.FC = ({route, navigation}) => { const dispatch = useDispatch(); const [caption, setCaption] = useState(''); const [loading, setLoading] = useState(false); + const [isTop, setIsTop] = useState(false); + const zIndex = [0, 999]; // created a state variable to keep track of every tag // idea is that each element in the list - const [taggList, setTaggList] = useState([]); + const [taggList, setTaggList] = useState([ + { + first_name: 'Ivan', + id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58', + last_name: 'Chen', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg', + username: 'ivan.tagg', + }, + { + first_name: 'Ankit', + id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3', + last_name: 'Thanekar', + thumbnail_url: + 'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg', + username: 'ankit.thanekar', + }, + ]); const imageRef = useRef(null); const [offset, setOffset] = useState([0, 0]); const [curStart, setCurStart] = useState([0, 0]); @@ -163,12 +182,15 @@ const CaptionScreen: React.FC = ({route, navigation}) => { + maxX={imageDimensions[0] + offset[0]} + maxY={imageDimensions[1] + offset[1]} + onPressIn={() => setIsTop(true)} + onPressOut={() => setIsTop(false)}> console.log('Hello world')} setStart={setCurStart} -- cgit v1.2.3-70-g09d2