Page MenuHomePhabricator
Differential D8207

[web] Change how margins / paddings are used in message result
ClosedPublic
Actions

Authored by inka on Jun 14 2023, 6:20 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 5:46 PM
Unknown Object (File)
Tue, Mar 4, 10:28 AM
Unknown Object (File)
Tue, Mar 4, 10:28 AM
Unknown Object (File)
Tue, Mar 4, 10:28 AM
Unknown Object (File)
Tue, Mar 4, 10:28 AM
Unknown Object (File)
Tue, Mar 4, 10:22 AM
Unknown Object (File)
Feb 15 2025, 3:57 PM
Unknown Object (File)
Feb 13 2025, 10:15 AM
View All Files
Subscribers
ashoat
tomek

Details

Reviewers
rohan
Commits
rCOMM52d4e6c1be59: [web] Change how margins / paddings are used in message result
Summary

I need to change how margins / paddings are used in message result, because I will be using this component with our SearchModal component that has some default margin. So I move the responsibility of setting the margins / paddings to the outer container.

Additionally the margin in TogglePinModal gets fixed: it seems to me from the designs that there should be a space between the message and the top text. @rohan please tell me if I'm misunderstanding

Test Plan

Before:

After:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

inka created this revision.Jun 14 2023, 6:20 AM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptJun 14 2023, 6:20 AM
inka edited the summary of this revision. (Show Details)Jun 14 2023, 6:24 AM
inka edited the test plan for this revision. (Show Details)
inka added 1 blocking reviewer(s): rohan.
Harbormaster completed remote builds in B20246: Diff 27738.Jun 14 2023, 6:49 AM
inka requested review of this revision.Jun 14 2023, 6:49 AM
rohan added a comment.EditedJun 14 2023, 10:29 AM

The code makes sense, but I can't actually see the screenshots since they seem to be restricted. Could you attach them please?

inka attached a referenced file: F586883: Screen Recording 2023-06-14 at 15.15.18.mov. (Show Details)Jun 15 2023, 3:47 AM
inka attached a referenced file: F586881: Screen Recording 2023-06-14 at 15.16.10.mov. (Show Details)

@rohan sorry, it should be fine now

inka added a child revision: D8240: [web] Add message search modal.Jun 16 2023, 7:17 AM
rohan accepted this revision.Jun 20 2023, 6:58 AM
This revision is now accepted and ready to land.Jun 20 2023, 6:58 AM
inka updated this revision to Diff 27993.Jun 22 2023, 7:10 AM
inka edited the summary of this revision. (Show Details)

Rebase

Harbormaster failed remote builds in B20419: Diff 27993!Jun 22 2023, 7:34 AM
Harbormaster completed remote builds in B20419: Diff 27993.Jun 26 2023, 6:33 AM
Closed by commit rCOMM52d4e6c1be59: [web] Change how margins / paddings are used in message result (authored by • InkaSokolowska). · Explain WhyJun 27 2023, 4:25 AM
This revision was automatically updated to reflect the committed changes.
• InkaSokolowska added a commit: rCOMM52d4e6c1be59: [web] Change how margins / paddings are used in message result.

Revision Contents
Changeset List

PathSize
web/
components/
1 line
modals/
chat/
6 lines
4 lines
12 lines

Diff 28151

View Options

web/components/message-result.css

  • This file was added.
// @flow
import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { userProfileUserInfoContainerHeight } from './user-profile-constants.js';
import UserAvatar from '../avatars/user-avatar.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';
import { UserProfileAvatarModalRouteName } from '../navigation/route-names.js';
// We need to set onAvatarLayout in order to allow .measure() to be on the ref
const onAvatarLayout = () => {};
type Props = {
userID: ?string,
};
function UserProfileAvatar(props: Props): React.Node {
const { userID } = props;
const { navigate } = useNavigation();
const route = useRoute();
const overlayContext = React.useContext(OverlayContext);
const avatarRef = React.useRef();
const onPressAvatar = React.useCallback(() => {
invariant(overlayContext, 'UserProfileAvatar should have OverlayContext');
overlayContext.setScrollBlockingModalStatus('open');
const currentAvatarRef = avatarRef.current;
if (!currentAvatarRef) {
return;
}
currentAvatarRef.measure((x, y, width, height, pageX, pageY) => {
const coordinates = {
x: pageX,
y: pageY,
width,
height,
};
const verticalBounds = {
height: userProfileUserInfoContainerHeight,
y: pageY,
};
navigate<'UserProfileAvatarModal'>({
name: UserProfileAvatarModalRouteName,
params: {
presentedFrom: route.key,
initialCoordinates: coordinates,
verticalBounds,
userID,
},
});
});
}, [navigate, overlayContext, route.key, userID]);
return (
<TouchableOpacity onPress={onPressAvatar}>
<View ref={avatarRef} onLayout={onAvatarLayout}>
<UserAvatar size="L" userID={userID} />
</View>
</TouchableOpacity>
);
}
export default UserProfileAvatar;
View Options

web/modals/chat/message-results-modal.css

  • This file was added.
// @flow
import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { userProfileUserInfoContainerHeight } from './user-profile-constants.js';
import UserAvatar from '../avatars/user-avatar.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';
import { UserProfileAvatarModalRouteName } from '../navigation/route-names.js';
// We need to set onAvatarLayout in order to allow .measure() to be on the ref
const onAvatarLayout = () => {};
type Props = {
userID: ?string,
};
function UserProfileAvatar(props: Props): React.Node {
const { userID } = props;
const { navigate } = useNavigation();
const route = useRoute();
const overlayContext = React.useContext(OverlayContext);
const avatarRef = React.useRef();
const onPressAvatar = React.useCallback(() => {
invariant(overlayContext, 'UserProfileAvatar should have OverlayContext');
overlayContext.setScrollBlockingModalStatus('open');
const currentAvatarRef = avatarRef.current;
if (!currentAvatarRef) {
return;
}
currentAvatarRef.measure((x, y, width, height, pageX, pageY) => {
const coordinates = {
x: pageX,
y: pageY,
width,
height,
};
const verticalBounds = {
height: userProfileUserInfoContainerHeight,
y: pageY,
};
navigate<'UserProfileAvatarModal'>({
name: UserProfileAvatarModalRouteName,
params: {
presentedFrom: route.key,
initialCoordinates: coordinates,
verticalBounds,
userID,
},
});
});
}, [navigate, overlayContext, route.key, userID]);
return (
<TouchableOpacity onPress={onPressAvatar}>
<View ref={avatarRef} onLayout={onAvatarLayout}>
<UserAvatar size="L" userID={userID} />
</View>
</TouchableOpacity>
);
}
export default UserProfileAvatar;
View Options

web/modals/chat/toggle-pin-modal.css

  • This file was added.
// @flow
import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { userProfileUserInfoContainerHeight } from './user-profile-constants.js';
import UserAvatar from '../avatars/user-avatar.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';
import { UserProfileAvatarModalRouteName } from '../navigation/route-names.js';
// We need to set onAvatarLayout in order to allow .measure() to be on the ref
const onAvatarLayout = () => {};
type Props = {
userID: ?string,
};
function UserProfileAvatar(props: Props): React.Node {
const { userID } = props;
const { navigate } = useNavigation();
const route = useRoute();
const overlayContext = React.useContext(OverlayContext);
const avatarRef = React.useRef();
const onPressAvatar = React.useCallback(() => {
invariant(overlayContext, 'UserProfileAvatar should have OverlayContext');
overlayContext.setScrollBlockingModalStatus('open');
const currentAvatarRef = avatarRef.current;
if (!currentAvatarRef) {
return;
}
currentAvatarRef.measure((x, y, width, height, pageX, pageY) => {
const coordinates = {
x: pageX,
y: pageY,
width,
height,
};
const verticalBounds = {
height: userProfileUserInfoContainerHeight,
y: pageY,
};
navigate<'UserProfileAvatarModal'>({
name: UserProfileAvatarModalRouteName,
params: {
presentedFrom: route.key,
initialCoordinates: coordinates,
verticalBounds,
userID,
},
});
});
}, [navigate, overlayContext, route.key, userID]);
return (
<TouchableOpacity onPress={onPressAvatar}>
<View ref={avatarRef} onLayout={onAvatarLayout}>
<UserAvatar size="L" userID={userID} />
</View>
</TouchableOpacity>
);
}
export default UserProfileAvatar;
View Options

web/modals/chat/toggle-pin-modal.react.js

  • This file was added.
// @flow
import { useNavigation, useRoute } from '@react-navigation/native';
import invariant from 'invariant';
import * as React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { userProfileUserInfoContainerHeight } from './user-profile-constants.js';
import UserAvatar from '../avatars/user-avatar.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';
import { UserProfileAvatarModalRouteName } from '../navigation/route-names.js';
// We need to set onAvatarLayout in order to allow .measure() to be on the ref
const onAvatarLayout = () => {};
type Props = {
userID: ?string,
};
function UserProfileAvatar(props: Props): React.Node {
const { userID } = props;
const { navigate } = useNavigation();
const route = useRoute();
const overlayContext = React.useContext(OverlayContext);
const avatarRef = React.useRef();
const onPressAvatar = React.useCallback(() => {
invariant(overlayContext, 'UserProfileAvatar should have OverlayContext');
overlayContext.setScrollBlockingModalStatus('open');
const currentAvatarRef = avatarRef.current;
if (!currentAvatarRef) {
return;
}
currentAvatarRef.measure((x, y, width, height, pageX, pageY) => {
const coordinates = {
x: pageX,
y: pageY,
width,
height,
};
const verticalBounds = {
height: userProfileUserInfoContainerHeight,
y: pageY,
};
navigate<'UserProfileAvatarModal'>({
name: UserProfileAvatarModalRouteName,
params: {
presentedFrom: route.key,
initialCoordinates: coordinates,
verticalBounds,
userID,
},
});
});
}, [navigate, overlayContext, route.key, userID]);
return (
<TouchableOpacity onPress={onPressAvatar}>
<View ref={avatarRef} onLayout={onAvatarLayout}>
<UserAvatar size="L" userID={userID} />
</View>
</TouchableOpacity>
);
}
export default UserProfileAvatar;