Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2025-09-08 13:44:53 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(collapsed-participants): Resize in correct scenarios

Browse source
This commit is contained in:
Ben Gotow 2016-04-05 14:13:09 -07:00
parent 52486957bc
commit 34201ff644
4 changed files with 24 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
internal_packages/composer/lib/account-contact-field.jsx
View file

@ -44,7 +44,7 @@ export default class AccountContactField extends React.Component {
_renderAccountSpan = (label) => { _renderAccountSpan = (label) => {
return ( return (
<span className="from-picker" style={{position: "relative", top: 13, left: "0.5em"}}> <span style={{position: "relative", top: 13, left: "0.5em"}}>
{label} {label}
</span> </span>
); );

33
internal_packages/composer/lib/collapsed-participants.jsx
View file

@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
import {Utils} from 'nylas-exports'; import {Utils} from 'nylas-exports';
import {InjectedComponentSet} from 'nylas-component-kit'; import {InjectedComponentSet} from 'nylas-component-kit';
const NUM_TO_DISPLAY_MAX = 999;
export default class CollapsedParticipants extends React.Component { export default class CollapsedParticipants extends React.Component {
static displayName = "CollapsedParticipants"; static displayName = "CollapsedParticipants";
@ -21,9 +23,8 @@ export default class CollapsedParticipants extends React.Component {
constructor(props = {}) { constructor(props = {}) {
super(props); super(props);
this._keyPrefix = Utils.generateTempId();
this.state = { this.state = {
numToDisplay: 999, numToDisplay: NUM_TO_DISPLAY_MAX,
numRemaining: 0, numRemaining: 0,
numBccRemaining: 0, numBccRemaining: 0,
} }
@ -33,13 +34,15 @@ export default class CollapsedParticipants extends React.Component {
this._setNumHiddenParticipants(); this._setNumHiddenParticipants();
} }
componentWillReceiveProps() { componentWillReceiveProps(nextProps) {
// Always re-evaluate the hidden participant count when the participant set changes if (!Utils.isEqualReact(nextProps, this.props)) {
this.setState({ // Always re-evaluate the hidden participant count when the participant set changes
numToDisplay: 999, this.setState({
numRemaining: 0, numToDisplay: NUM_TO_DISPLAY_MAX,
numBccRemaining: 0, numRemaining: 0,
}); numBccRemaining: 0,
});
}
} }
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
@ -47,11 +50,13 @@ export default class CollapsedParticipants extends React.Component {
} }
componentDidUpdate() { componentDidUpdate() {
this._setNumHiddenParticipants(); if (this.state.numToDisplay === NUM_TO_DISPLAY_MAX) {
this._setNumHiddenParticipants();
}
} }
_setNumHiddenParticipants() { _setNumHiddenParticipants() {
const $wrap = ReactDOM.findDOMNode(this.refs.participantsWrap) const $wrap = ReactDOM.findDOMNode(this.refs.participantsWrap);
const $regulars = Array.from($wrap.getElementsByClassName("regular-contact")); const $regulars = Array.from($wrap.getElementsByClassName("regular-contact"));
const $bccs = Array.from($wrap.getElementsByClassName("bcc-contact")); const $bccs = Array.from($wrap.getElementsByClassName("bcc-contact"));
@ -104,7 +109,7 @@ export default class CollapsedParticipants extends React.Component {
_collapsedContact = (contact) => { _collapsedContact = (contact) => {
const name = contact.displayName(); const name = contact.displayName();
const key = this._keyPrefix + contact.email + contact.name; const key = contact.email + contact.name;
return ( return (
<span <span
@ -123,7 +128,7 @@ export default class CollapsedParticipants extends React.Component {
_collapsedBccContact = (contact, i) => { _collapsedBccContact = (contact, i) => {
let name = contact.displayName(); let name = contact.displayName();
const key = this._keyPrefix + contact.email + contact.name; const key = contact.email + contact.name;
if (i === 0) { if (i === 0) {
name = `Bcc: ${name}`; name = `Bcc: ${name}`;
} }
@ -137,7 +142,7 @@ export default class CollapsedParticipants extends React.Component {
const bcc = this.props.bcc.map(this._collapsedBccContact); const bcc = this.props.bcc.map(this._collapsedBccContact);
let toDisplay = contacts.concat(bcc); let toDisplay = contacts.concat(bcc);
toDisplay = toDisplay.splice(0, this.state.numToDisplay - 1); toDisplay = toDisplay.splice(0, this.state.numToDisplay);
if (toDisplay.length === 0) { if (toDisplay.length === 0) {
toDisplay = "Recipients"; toDisplay = "Recipients";
} }

11
internal_packages/composer/stylesheets/composer.less
View file

@ -194,7 +194,7 @@ body.platform-win32 {
.num-remaining-wrap { .num-remaining-wrap {
position: absolute; position: absolute;
right: 0; right: -3px;
z-index: 2; z-index: 2;
top: 6px; top: 6px;
.show-more-fade { .show-more-fade {
@ -308,12 +308,6 @@ body.platform-win32 {
min-height: @line-height-computed; min-height: @line-height-computed;
} }
} }
.from-picker {
&:hover {
cursor: default;
}
}
} }
// Overrides for the composer in a message-list // Overrides for the composer in a message-list
@ -362,6 +356,9 @@ body.platform-win32 {
padding-top: 11px; padding-top: 11px;
vertical-align: -webkit-baseline-middle; vertical-align: -webkit-baseline-middle;
.primary-item, .only-item {
line-height: 2em;
}
&:hover { &:hover {
.primary-item, .primary-item,
.only-item { .only-item {

1
static/components/button-dropdown.less
View file

@ -49,7 +49,6 @@
.btn(); .btn();
cursor: default; cursor: default;
color: @btn-default-text-color; color: @btn-default-text-color;
line-height: 2em;
} }
.primary-item { .primary-item {
border-radius: @border-radius-base 0 0 @border-radius-base; border-radius: @border-radius-base 0 0 @border-radius-base;