Skip to content

Commit

Permalink
Merge pull request #1439 from DaleMcGrew/dale_WebApp_apr5
Browse files Browse the repository at this point in the history 
Altered the way a voter can open and close an office. Removed some "Cheetah" terminology. Updated our toTitleCase function.
  • Loading branch information
@DaleMcGrew
DaleMcGrew authored Apr 6, 2018
2 parents f79eba5 + 56c1a5e commit 0a0cfd1
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 420 deletions.
98 changes: 64 additions & 34 deletions src/js/components/Ballot/OfficeItemCompressedRaccoon.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import { OverlayTrigger, Popover } from "react-bootstrap";
import { Link } from "react-router";
import TextTruncate from "react-text-truncate";
import { capitalizeString } from "../../utils/textFormat";
import { capitalizeString, toTitleCase } from "../../utils/textFormat";
import BallotSideBarLink from "../Navigation/BallotSideBarLink";
import BookmarkToggle from "../Bookmarks/BookmarkToggle";
import CandidateActions from "../../actions/CandidateActions";
Expand Down Expand Up @@ -57,7 +57,7 @@ export default class OfficeItemCompressedRaccoon extends Component {
this.goToOfficeLink = this.goToOfficeLink.bind(this);
this.openCandidateModal = this.openCandidateModal.bind(this);
this.toggleDisplayAllCandidates = this.toggleDisplayAllCandidates.bind(this);
this.toggleExpandCheetahDetails = this.toggleExpandCheetahDetails.bind(this);
this.toggleExpandDetails = this.toggleExpandDetails.bind(this);
}

componentDidMount () {
Expand Down Expand Up @@ -148,7 +148,7 @@ export default class OfficeItemCompressedRaccoon extends Component {
this.setState({ display_all_candidates_flag: !this.state.display_all_candidates_flag });
}

toggleExpandCheetahDetails () {
toggleExpandDetails () {
const { we_vote_id, updateOfficeDisplayUnfurledTracker } = this.props;
this.setState({ display_office_unfurled: !this.state.display_office_unfurled });
if (this.props.allBallotItemsCount && this.props.allBallotItemsCount <= 3) {
Expand Down Expand Up @@ -212,7 +212,7 @@ export default class OfficeItemCompressedRaccoon extends Component {
renderLog(__filename);
let { ballot_item_display_name, we_vote_id } = this.props;

ballot_item_display_name = capitalizeString(ballot_item_display_name);
ballot_item_display_name = toTitleCase(ballot_item_display_name);

let candidate_list_to_display = this.props.candidate_list;
let total_number_of_candidates_to_display = this.props.candidate_list.length;
Expand All @@ -223,20 +223,6 @@ export default class OfficeItemCompressedRaccoon extends Component {
remaining_candidates_to_display_count = this.props.candidate_list.length - NUMBER_OF_CANDIDATES_TO_DISPLAY;
}

let ballot_item_display_name_raccoon = this.state.display_office_unfurled ?
<Link onClick={this.toggleExpandCheetahDetails}>
<TextTruncate line={1}
truncateText="…"
text={ballot_item_display_name}
textTruncateChild={null} />
</Link> :
<Link onClick={this.toggleExpandCheetahDetails}>
<TextTruncate line={1}
truncateText="…"
text={ballot_item_display_name}
textTruncateChild={null} />
</Link>;

// Ready to Vote code
let array_of_candidates_voter_supports = [];
let candidate_with_most_support_from_network = null;
Expand Down Expand Up @@ -315,20 +301,62 @@ export default class OfficeItemCompressedRaccoon extends Component {
<span className="hidden-xs">
<BookmarkToggle we_vote_id={we_vote_id} type="OFFICE" />
<span className="hidden-print pull-right u-push--lg">
<Link className="BallotItem__learn-more" onClick={this.goToOfficeLink}>learn more</Link>
{ this.state.display_office_unfurled ?
<Link onClick={this.toggleExpandDetails}>
<span className="BallotItem__view-more u-items-center u-no-break hidden-print">
show less</span>
</Link> :
<Link onClick={this.toggleExpandDetails}>
<span className="BallotItem__view-more u-items-center u-no-break hidden-print">
show more
</span>
</Link>
}
</span>
</span>
{/* Mobile */}
<span className="visible-xs">
{ this.state.display_office_unfurled ?
<span className="BallotItem__learn-more hidden-print pull-right">
<Link className="BallotItem__learn-more" onClick={this.goToOfficeLink}>learn more</Link>
</span> :
null
}
<span className="hidden-print pull-right u-push--xs">
{ this.state.display_office_unfurled ?
<Link onClick={this.toggleExpandDetails}>
<span className="BallotItem__view-more u-items-center u-no-break hidden-print">
show less</span>
</Link> :
<Link onClick={this.toggleExpandDetails}>
<span className="BallotItem__view-more u-items-center u-no-break hidden-print">
show more
</span>
</Link>
}
</span>
</span>

<h2 className="u-f3 card-main__ballot-name u-stack--sm">{ballot_item_display_name_raccoon}</h2>
<h2 className="u-f3 card-main__ballot-name u-gray-dark u-stack--sm">
{/* Desktop */}
<span className="hidden-xs" onClick={this.toggleExpandDetails}>
{ this.state.display_office_unfurled ?
<span className="glyphicon glyphicon-triangle-bottom u-font-size6 hidden-print u-push--xs"/> :
<span className="glyphicon glyphicon-triangle-right u-font-size6 hidden-print u-push--xs"/>
}
{ballot_item_display_name}
</span>

{/* Mobile */}
<span className="visible-xs">
<span onClick={this.toggleExpandDetails}>
<TextTruncate line={1}
truncateText="…"
text={ballot_item_display_name}
textTruncateChild={null} />
</span>
</span>

{/* Print */}
<span className="u-f3 visible-print">
{ballot_item_display_name}
</span>

</h2>

{/* Only show the candidates if the Office is "unfurled" */}
{/* TODO: Note that this next block of code could be replaced with CandidateItemCompressed */}
Expand Down Expand Up @@ -403,11 +431,13 @@ export default class OfficeItemCompressedRaccoon extends Component {
{/* If the office is "rolled up", show some details */}
{ !this.state.display_office_unfurled ?
<div>
<IssuesFollowedByBallotItemDisplayList ballot_item_display_name={this.props.ballot_item_display_name}
ballotItemWeVoteId={this.props.we_vote_id}
overlayTriggerOnClickOnly
placement={"bottom"}
/>
<span className="hidden-print">
<IssuesFollowedByBallotItemDisplayList ballot_item_display_name={this.props.ballot_item_display_name}
ballotItemWeVoteId={this.props.we_vote_id}
overlayTriggerOnClickOnly
placement={"bottom"}
/>
</span>
{ candidate_list_to_display.map( (one_candidate) => {

const yourNetworkSupportsPopover =
Expand All @@ -429,7 +459,7 @@ export default class OfficeItemCompressedRaccoon extends Component {
under those issues. <strong>{one_candidate.ballot_item_display_name}</strong> has
the most support from these
organizations.<br />
<Link onClick={this.toggleExpandCheetahDetails}> learn more</Link>
<Link onClick={this.toggleExpandDetails}> learn more</Link>
</Popover>;

const voter_supports_this_candidate = SupportStore.get(one_candidate.we_vote_id) && SupportStore.get(one_candidate.we_vote_id).is_support;
Expand Down Expand Up @@ -543,11 +573,11 @@ export default class OfficeItemCompressedRaccoon extends Component {
onClick={this.toggleDisplayAllCandidates} /> : null
}
{ this.state.display_office_unfurled ?
<Link onClick={this.toggleExpandCheetahDetails}>
<Link onClick={this.toggleExpandDetails}>
<div className="BallotItem__view-more u-items-center u-no-break hidden-print">
Show less...</div>
</Link> :
<Link onClick={this.toggleExpandCheetahDetails}>
<Link onClick={this.toggleExpandDetails}>
<div className="BallotItem__view-more u-items-center u-no-break hidden-print">
{ total_number_of_candidates_to_display > 1 ?
<span>View all {total_number_of_candidates_to_display} candidates...</span> :
Expand Down
14 changes: 7 additions & 7 deletions src/js/components/VoterGuide/VoterGuideOfficeItemCompressed.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default class VoterGuideOfficeItemCompressed extends Component {
this.goToOfficeLink = this.goToOfficeLink.bind(this);
this.openCandidateModal = this.openCandidateModal.bind(this);
this.toggleDisplayAllCandidates = this.toggleDisplayAllCandidates.bind(this);
this.toggleExpandCheetahDetails = this.toggleExpandCheetahDetails.bind(this);
this.toggleExpandDetails = this.toggleExpandDetails.bind(this);
}

componentDidMount () {
Expand Down Expand Up @@ -113,7 +113,7 @@ export default class VoterGuideOfficeItemCompressed extends Component {
this.setState({ display_all_candidates_flag: !this.state.display_all_candidates_flag });
}

toggleExpandCheetahDetails () {
toggleExpandDetails () {
this.setState({ display_raccoon_details_flag: !this.state.display_raccoon_details_flag });
}

Expand Down Expand Up @@ -177,13 +177,13 @@ export default class VoterGuideOfficeItemCompressed extends Component {
}

let ballot_item_display_name_raccoon = this.state.display_raccoon_details_flag ?
<Link onClick={this.toggleExpandCheetahDetails}>
<Link onClick={this.toggleExpandDetails}>
<TextTruncate line={1}
truncateText="…"
text={ballot_item_display_name}
textTruncateChild={null} />
</Link> :
<Link onClick={this.toggleExpandCheetahDetails}>
<Link onClick={this.toggleExpandDetails}>
<TextTruncate line={1}
truncateText="…"
text={ballot_item_display_name}
Expand Down Expand Up @@ -276,7 +276,7 @@ export default class VoterGuideOfficeItemCompressed extends Component {
let candidate_text = candidate_party_text + candidate_description_text;

let candidate_photo_raccoon = this.state.display_raccoon_details_flag ?
<div className="hidden-xs" onClick={this.props.link_to_ballot_item_page ? this.toggleExpandCheetahDetails : null}>
<div className="hidden-xs" onClick={this.props.link_to_ballot_item_page ? this.toggleExpandDetails : null}>
<ImageHandler className="card-main__avatar-compressed o-media-object__anchor u-cursor--pointer u-self-start u-push--sm"
sizeClassName="icon-candidate-small u-push--sm "
imageUrl={one_candidate.candidate_photo_url_large}
Expand Down Expand Up @@ -451,11 +451,11 @@ export default class VoterGuideOfficeItemCompressed extends Component {
onClick={this.toggleDisplayAllCandidates} /> : null
}
{ this.state.display_raccoon_details_flag ?
<Link onClick={this.toggleExpandCheetahDetails}>
<Link onClick={this.toggleExpandDetails}>
<div className="BallotItem__view-more u-items-center u-no-break hidden-print">
Show less...</div>
</Link> :
<Link onClick={this.toggleExpandCheetahDetails}>
<Link onClick={this.toggleExpandDetails}>
<div className="BallotItem__view-more u-items-center u-no-break hidden-print">
{ total_number_of_candidates_to_display > 1 ?
<span>View all {total_number_of_candidates_to_display} candidates...</span> :
Expand Down
Loading

0 comments on commit 0a0cfd1

Please sign in to comment.