Page MenuHomePhabricator
Differential D4863

[web] Replace `sidebar` and `reply` icon `MessageTooltip` with `CommIcon`
ClosedPublic
Actions

Authored by atul on Aug 17 2022, 10:35 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 9, 1:15 AM
Unknown Object (File)
Wed, Apr 9, 12:04 AM
Unknown Object (File)
Tue, Apr 8, 10:13 PM
Unknown Object (File)
Tue, Apr 8, 9:33 PM
Unknown Object (File)
Tue, Apr 8, 8:46 PM
Unknown Object (File)
Tue, Apr 8, 8:38 PM
Unknown Object (File)
Fri, Apr 4, 6:13 PM
Unknown Object (File)
Sun, Mar 23, 8:43 PM
View All Files
Subscribers
ashoat

Details

Reviewers
• abosh
varun
• jacek
tomek
Commits
rCOMM2819731c742c: [web] Replace `sidebar` and `reply` icon `MessageTooltip` with `CommIcon`
Summary

Searched through codebase for usages of message-circle-lines and reply-arrow and replaced them with sidebar-filled and reply-filled respectively.

Swapped out the SWMansion components for CommIcon components.

Test Plan
WARNING: Using the "filled" style of the sidebar and reply icon to match what we're doing on native.

Before:

Screen Shot 2022-08-17 at 1.35.53 PM.png (208×412 px, 14 KB)

After:

Screen Shot 2022-08-17 at 1.29.46 PM.png (278×1 px, 187 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Aug 17 2022, 10:35 AM
Herald added a subscriber: ashoat. · View Herald TranscriptAug 17 2022, 10:35 AM
atul edited the test plan for this revision. (Show Details)Aug 17 2022, 10:36 AM
Harbormaster completed remote builds in B11427: Diff 15722.Aug 17 2022, 10:45 AM
atul requested review of this revision.Aug 17 2022, 10:45 AM
• abosh accepted this revision.Aug 17 2022, 10:47 AM

The filled versions look better in my opinion, so that’s awesome!

This revision is now accepted and ready to land.Aug 17 2022, 10:47 AM
atul added 1 blocking reviewer(s): varun.Aug 17 2022, 11:42 AM
This revision now requires review to proceed.Aug 17 2022, 11:42 AM
atul added a comment.Aug 17 2022, 11:44 AM

(cc @ashoat: not sure if it makes sense to add you as reviewer here, but just to make sure you see/sign off on the decision to match the icons on native)

varun accepted this revision.Aug 17 2022, 1:05 PM
This revision is now accepted and ready to land.Aug 17 2022, 1:05 PM
atul updated this revision to Diff 15738.Aug 18 2022, 8:21 AM

rebase before landing

This revision was landed with ongoing or failed builds.Aug 18 2022, 8:23 AM
Closed by commit rCOMM2819731c742c: [web] Replace `sidebar` and `reply` icon `MessageTooltip` with `CommIcon` (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM2819731c742c: [web] Replace `sidebar` and `reply` icon `MessageTooltip` with `CommIcon`.
Harbormaster completed remote builds in B11443: Diff 15738.Aug 18 2022, 8:31 AM

Revision Contents
Changeset List

Diff 15740

View Options

web/chat/message-reply-button.react.js

Show All 10 Lines
} from 'react-native'; } from 'react-native';
import { import {
removeUsersFromThreadActionTypes, removeUsersFromThreadActionTypes,
changeThreadMemberRolesActionTypes, changeThreadMemberRolesActionTypes,
} from 'lib/actions/thread-actions.js'; } from 'lib/actions/thread-actions.js';
import { useENSNames } from 'lib/hooks/ens-cache.js'; import { useENSNames } from 'lib/hooks/ens-cache.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { import { getAvailableThreadMemberActions } from 'lib/shared/thread-utils.js';
memberIsAdmin,
memberHasAdminPowers,
getAvailableThreadMemberActions,
} from 'lib/shared/thread-utils.js';
import { stringForUser } from 'lib/shared/user-utils.js'; import { stringForUser } from 'lib/shared/user-utils.js';
import type { LoadingStatus } from 'lib/types/loading-types.js'; import type { LoadingStatus } from 'lib/types/loading-types.js';
import { import {
type ThreadInfo, type ThreadInfo,
type RelativeMemberInfo, type RelativeMemberInfo,
} from 'lib/types/thread-types.js'; } from 'lib/types/thread-types.js';
import type { ThreadSettingsNavigate } from './thread-settings.react.js'; import type { ThreadSettingsNavigate } from './thread-settings.react.js';
▲ Show 20 Lines • Show All 93 Lines • ▼ Show 20 Lines ) {
> >
<View onLayout={this.onEditButtonLayout} ref={this.editButtonRef}> <View onLayout={this.onEditButtonLayout} ref={this.editButtonRef}>
<PencilIcon /> <PencilIcon />
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
} }
let roleInfo = null; const roleName =
if (memberIsAdmin(this.props.memberInfo, this.props.threadInfo)) { this.props.memberInfo.role &&
roleInfo = ( this.props.threadInfo.roles[this.props.memberInfo.role].name;
<View style={this.props.styles.row}>
<Text style={this.props.styles.role} numberOfLines={1}> const roleInfo = (
admin
</Text>
</View>
);
} else if (memberHasAdminPowers(this.props.memberInfo)) {
roleInfo = (
<View style={this.props.styles.row}> <View style={this.props.styles.row}>
<Text style={this.props.styles.role} numberOfLines={1}> <Text style={this.props.styles.role} numberOfLines={1}>
parent admin {roleName}
</Text> </Text>
</View> </View>
); );
}
const firstItem = this.props.firstListItem const firstItem = this.props.firstListItem
? null ? null
: this.props.styles.topBorder; : this.props.styles.topBorder;
const lastItem = this.props.lastListItem const lastItem = this.props.lastListItem
? this.props.styles.lastInnerContainer ? this.props.styles.lastInnerContainer
: null; : null;
return ( return (
▲ Show 20 Lines • Show All 157 Lines • Show Last 20 Lines
View Options

web/chat/message-tooltip.react.js

Show All 10 Lines
} from 'react-native'; } from 'react-native';
import { import {
removeUsersFromThreadActionTypes, removeUsersFromThreadActionTypes,
changeThreadMemberRolesActionTypes, changeThreadMemberRolesActionTypes,
} from 'lib/actions/thread-actions.js'; } from 'lib/actions/thread-actions.js';
import { useENSNames } from 'lib/hooks/ens-cache.js'; import { useENSNames } from 'lib/hooks/ens-cache.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
import { import { getAvailableThreadMemberActions } from 'lib/shared/thread-utils.js';
memberIsAdmin,
memberHasAdminPowers,
getAvailableThreadMemberActions,
} from 'lib/shared/thread-utils.js';
import { stringForUser } from 'lib/shared/user-utils.js'; import { stringForUser } from 'lib/shared/user-utils.js';
import type { LoadingStatus } from 'lib/types/loading-types.js'; import type { LoadingStatus } from 'lib/types/loading-types.js';
import { import {
type ThreadInfo, type ThreadInfo,
type RelativeMemberInfo, type RelativeMemberInfo,
} from 'lib/types/thread-types.js'; } from 'lib/types/thread-types.js';
import type { ThreadSettingsNavigate } from './thread-settings.react.js'; import type { ThreadSettingsNavigate } from './thread-settings.react.js';
▲ Show 20 Lines • Show All 93 Lines • ▼ Show 20 Lines ) {
> >
<View onLayout={this.onEditButtonLayout} ref={this.editButtonRef}> <View onLayout={this.onEditButtonLayout} ref={this.editButtonRef}>
<PencilIcon /> <PencilIcon />
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
} }
let roleInfo = null; const roleName =
if (memberIsAdmin(this.props.memberInfo, this.props.threadInfo)) { this.props.memberInfo.role &&
roleInfo = ( this.props.threadInfo.roles[this.props.memberInfo.role].name;
<View style={this.props.styles.row}>
<Text style={this.props.styles.role} numberOfLines={1}> const roleInfo = (
admin
</Text>
</View>
);
} else if (memberHasAdminPowers(this.props.memberInfo)) {
roleInfo = (
<View style={this.props.styles.row}> <View style={this.props.styles.row}>
<Text style={this.props.styles.role} numberOfLines={1}> <Text style={this.props.styles.role} numberOfLines={1}>
parent admin {roleName}
</Text> </Text>
</View> </View>
); );
}
const firstItem = this.props.firstListItem const firstItem = this.props.firstListItem
? null ? null
: this.props.styles.topBorder; : this.props.styles.topBorder;
const lastItem = this.props.lastListItem const lastItem = this.props.lastListItem
? this.props.styles.lastInnerContainer ? this.props.styles.lastInnerContainer
: null; : null;
return ( return (
▲ Show 20 Lines • Show All 157 Lines • Show Last 20 Lines