diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx
index c9034af64..3d9109b21 100644
--- a/src/js/components/Ballot/PositionRowListCompressed.jsx
+++ b/src/js/components/Ballot/PositionRowListCompressed.jsx
@@ -3,6 +3,8 @@ import withStyles from '@mui/styles/withStyles';
import withTheme from '@mui/styles/withTheme';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
import styled from 'styled-components';
import FriendActions from '../../actions/FriendActions';
import OrganizationActions from '../../actions/OrganizationActions';
@@ -22,6 +24,8 @@ import VoterStore from '../../stores/VoterStore';
import LazyImage from '../../common/components/LazyImage';
import { avatarGeneric } from '../../utils/applicationUtils';
import speakerDisplayNameToInitials from '../../common/utils/speakerDisplayNameToInitials';
+import isMobileScreenSize from '../../common/utils/isMobileScreenSize';
+
const STARTING_NUMBER_OF_IMAGES_TO_DISPLAY = 10;
@@ -138,14 +142,14 @@ class PositionRowListCompressed extends Component {
onClickShowOrganizationModalWithPositions () {
const { ballotItemWeVoteId } = this.props;
-// console.log(ballotItemWeVoteId)
+ // console.log(ballotItemWeVoteId)
// console.log('onClickShowOrganizationModalWithPositions, ballotItemWeVoteId:', ballotItemWeVoteId);
AppObservableStore.setOrganizationModalBallotItemWeVoteId(ballotItemWeVoteId);
AppObservableStore.setShowOrganizationModal(true);
AppObservableStore.setHideOrganizationModalBallotItemInfo(true);
}
- onClickShowOrganizationModalWithBallotItemInfoAndPositions() {
+ onClickShowOrganizationModalWithBallotItemInfoAndPositions () {
const { ballotItemWeVoteId } = this.props;
AppObservableStore.setOrganizationModalBallotItemWeVoteId(ballotItemWeVoteId);
AppObservableStore.setShowOrganizationModal(true);
@@ -272,20 +276,53 @@ class PositionRowListCompressed extends Component {
numberOfNamesDisplayed += 1;
}
});
-//
const remainingCount = filteredPositionList.length - numberOfNamesDisplayed;
- if (remainingCount > 0) {
- talkingAboutText += ` and ${remainingCount} ${remainingCount === 1 ? 'other' : 'others'}`;
- }
-
- if (candidateName && numberOfNamesDisplayed === 1) {
- talkingAboutText += ` is talking about ${candidateName}`;
- }
- else {
- talkingAboutText += ` are talking about ${candidateName}`;
- }
- }
-
+ if (remainingCount > 0) {
+ talkingAboutText += ` and ${remainingCount} ${remainingCount === 1 ? 'other' : 'others'}`;
+ }
+ if (candidateName && numberOfNamesDisplayed === 1) {
+ talkingAboutText += ` is talking about ${candidateName}`;
+ } else {
+ talkingAboutText += ` are talking about ${candidateName}`;
+ }
+ }
+ let filteredPositionListTooltip = <>>;
+ let onePositionNameCount = 1;
+ const displayedSpeakerNames = new Set();
+ if (filteredPositionList) {
+ filteredPositionListTooltip = isMobileScreenSize() ? () : (
+
+
+ {filteredPositionList.length === 1 ? (
+ <>
+ See endorsement from
+ >
+ ) : (
+ <>
+ See endorsements from {filteredPositionList.length} advocates, like:
+ >
+ )}
+
+ {filteredPositionList.map((onePosition) => {
+ if (onePosition.speaker_display_name && onePositionNameCount <= 15 && !displayedSpeakerNames.has(onePosition.speaker_display_name)) {
+ onePositionNameCount += 1;
+ displayedSpeakerNames.add(onePosition.speaker_display_name);
+ return (
+
+ {onePosition.speaker_display_name}
+
+
+ );
+ } else {
+ return null;
+ }
+ })}
+
+
+ );
+ }
return (
@@ -330,18 +367,21 @@ class PositionRowListCompressed extends Component {
);
})}
- {
- if (filteredPositionList && filteredPositionList.length === 0) {
- this.onClickShowOrganizationModalWithBallotItemInfoAndPositions()
+
+ {
+ if (filteredPositionList && filteredPositionList.length === 0) {
+ this.onClickShowOrganizationModalWithBallotItemInfoAndPositions();
} else {
- this.onClickShowOrganizationModalWithPositions()
- }
- }} className="u-link-underline-on-hover"
- >
- {talkingAboutText}
- {!!(talkingAboutText) && <>…>}
-
+ this.onClickShowOrganizationModalWithPositions();
+ }
+ }}
+ className="u-link-underline-on-hover"
+ >
+ {talkingAboutText}
+ {!!(talkingAboutText) && <>…>}
+
+
);
@@ -415,4 +455,13 @@ const CandidateEndorsementsWrapper = styled('div')`
width: 275px;
`;
+const Tooltipstyle = styled(Tooltip)`
+ .tooltip-inner {
+ max-width: 475px;
+ }
+`;
+
+const OneOrganizationName = styled('span')`
+`;
+
export default withTheme(withStyles(styles)(PositionRowListCompressed));