Page MenuHomePhabricator
Differential D8810

[web] show which reactions the viewer has already selected in the inline engagement
ClosedPublic
Actions

Authored by ginsu on Aug 14 2023, 10:50 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Mar 23, 11:35 PM
Unknown Object (File)
Fri, Mar 21, 7:20 AM
Unknown Object (File)
Mon, Mar 17, 4:46 PM
Unknown Object (File)
Mon, Mar 17, 4:46 PM
Unknown Object (File)
Mon, Mar 17, 4:46 PM
Unknown Object (File)
Mon, Mar 17, 4:45 PM
Unknown Object (File)
Mon, Mar 17, 4:24 PM
Unknown Object (File)
Mon, Mar 3, 8:31 AM
View All 95 Files
Subscribers
ashoat
tomek

Details

Reviewers
atul
kamil
Commits
rCOMMc327e4a6e712: [web] show which reactions the viewer has already selected in the inline…
Summary

To improve the user experience of the inline engagement, we should show/indicate to the user which reactions they have already selected. We indicate this to the user by adding a border to the reaction pill.

Depends on D8808

Test Plan

Confirmed the width/height of the reaction pills are all the same regardless if it has been selected by the viewer or not

Screenshot 2023-08-14 at 1.49.01 PM.png (2×3 px, 1 MB)

Screenshot 2023-08-14 at 1.49.07 PM.png (2×3 px, 1 MB)

Please watch the demo video below:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu created this revision.Aug 14 2023, 10:50 AM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptAug 14 2023, 10:50 AM
ginsu edited the summary of this revision. (Show Details)Aug 14 2023, 10:54 AM
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, kamil.
ginsu attached a referenced file: F688556: Screen Recording 2023-08-14 at 1.49.35 PM.mov. (Show Details)
ginsu attached a referenced file: F688554: Screenshot 2023-08-14 at 1.49.07 PM.png. (Show Details)
ginsu attached a referenced file: F688555: Screenshot 2023-08-14 at 1.49.01 PM.png. (Show Details)
ginsu added inline comments.
web/chat/inline-engagement.css
46–47 ↗(On Diff #29868)

We use 7 and 3 here because the border will add 1px so the total will match the original reaction pill height/width

Harbormaster completed remote builds in B21734: Diff 29868.Aug 14 2023, 11:08 AM
ginsu requested review of this revision.Aug 14 2023, 11:08 AM
ginsu added a child revision: D8819: [web] introduce ReactionPill component.Aug 15 2023, 10:20 AM
ginsu edited the summary of this revision. (Show Details)Aug 15 2023, 11:33 PM
ginsu added a parent revision: D8808: [web] introduce functionality to send a reaction by clicking on the reaction pill.
kamil accepted this revision.Aug 16 2023, 2:18 AM
This revision is now accepted and ready to land.Aug 16 2023, 2:18 AM
ginsu updated this revision to Diff 30371.Aug 27 2023, 7:53 PM

rebase before landing

Harbormaster completed remote builds in B22135: Diff 30371.Aug 27 2023, 8:15 PM
Closed by commit rCOMMc327e4a6e712: [web] show which reactions the viewer has already selected in the inline… (authored by ginsu). · Explain WhyAug 27 2023, 8:34 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMc327e4a6e712: [web] show which reactions the viewer has already selected in the inline….

Revision Contents
Changeset List

PathSize
web/
chat/
5 lines
10 lines

Diff 30381

View Options

web/chat/inline-engagement.css

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import Animated from 'react-native-reanimated'; import Animated from 'react-native-reanimated';
import { localIDPrefix } from 'lib/shared/message-utils.js'; import { useNextLocalID } from 'lib/shared/message-utils.js';
import { import {
useViewerAlreadySelectedMessageReactions, useViewerAlreadySelectedMessageReactions,
useCanCreateReactionFromMessage, useCanCreateReactionFromMessage,
} from 'lib/shared/reaction-utils.js'; } from 'lib/shared/reaction-utils.js';
import { TooltipInlineEngagement } from './inline-engagement.react.js'; import { TooltipInlineEngagement } from './inline-engagement.react.js';
import { InnerRobotextMessage } from './inner-robotext-message.react.js'; import { InnerRobotextMessage } from './inner-robotext-message.react.js';
import { useSendReaction } from './reaction-message-utils.js'; import { useSendReaction } from './reaction-message-utils.js';
▲ Show 20 Lines • Show All 66 Lines • ▼ Show 20 Lines return (
progress={progress} progress={progress}
windowWidth={windowWidth} windowWidth={windowWidth}
initialCoordinates={initialCoordinates} initialCoordinates={initialCoordinates}
/> />
); );
}, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
const { messageInfo, threadInfo, reactions } = item; const { messageInfo, threadInfo, reactions } = item;
const nextLocalID = useSelector(state => state.nextLocalID); const localID = useNextLocalID();
const localID = `${localIDPrefix}${nextLocalID}`;
const canCreateReactionFromMessage = useCanCreateReactionFromMessage( const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
threadInfo, threadInfo,
messageInfo, messageInfo,
); );
const sendReaction = useSendReaction( const sendReaction = useSendReaction(
messageInfo.id, messageInfo.id,
▲ Show 20 Lines • Show All 71 Lines • Show Last 20 Lines
View Options

web/chat/inline-engagement.react.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import Animated from 'react-native-reanimated'; import Animated from 'react-native-reanimated';
import { localIDPrefix } from 'lib/shared/message-utils.js'; import { useNextLocalID } from 'lib/shared/message-utils.js';
import { import {
useViewerAlreadySelectedMessageReactions, useViewerAlreadySelectedMessageReactions,
useCanCreateReactionFromMessage, useCanCreateReactionFromMessage,
} from 'lib/shared/reaction-utils.js'; } from 'lib/shared/reaction-utils.js';
import { TooltipInlineEngagement } from './inline-engagement.react.js'; import { TooltipInlineEngagement } from './inline-engagement.react.js';
import { InnerRobotextMessage } from './inner-robotext-message.react.js'; import { InnerRobotextMessage } from './inner-robotext-message.react.js';
import { useSendReaction } from './reaction-message-utils.js'; import { useSendReaction } from './reaction-message-utils.js';
▲ Show 20 Lines • Show All 66 Lines • ▼ Show 20 Lines return (
progress={progress} progress={progress}
windowWidth={windowWidth} windowWidth={windowWidth}
initialCoordinates={initialCoordinates} initialCoordinates={initialCoordinates}
/> />
); );
}, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]);
const { messageInfo, threadInfo, reactions } = item; const { messageInfo, threadInfo, reactions } = item;
const nextLocalID = useSelector(state => state.nextLocalID); const localID = useNextLocalID();
const localID = `${localIDPrefix}${nextLocalID}`;
const canCreateReactionFromMessage = useCanCreateReactionFromMessage( const canCreateReactionFromMessage = useCanCreateReactionFromMessage(
threadInfo, threadInfo,
messageInfo, messageInfo,
); );
const sendReaction = useSendReaction( const sendReaction = useSendReaction(
messageInfo.id, messageInfo.id,
▲ Show 20 Lines • Show All 71 Lines • Show Last 20 Lines