@@ -146,7 +146,7 @@ const ComposeForm = React.createClass({ | |||
<div style={{ padding: '10px' }}> | |||
<Collapsable isVisible={this.props.spoiler} fullHeight={50}> | |||
<div className="spoiler-input"> | |||
<input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} type="text" className="spoiler-input__input" /> | |||
<input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type="text" className="spoiler-input__input" /> | |||
</div> | |||
</Collapsable> | |||
@@ -176,7 +176,7 @@ const ComposeForm = React.createClass({ | |||
<UploadFormContainer /> | |||
</div> | |||
<div style={{ display: 'flex' }}> | |||
<div style={{ display: 'flex', justifyContent: 'space-between' }}> | |||
<div className='compose-form__buttons'> | |||
<UploadButtonContainer /> | |||
<PrivacyDropdownContainer /> | |||
@@ -184,8 +184,10 @@ const ComposeForm = React.createClass({ | |||
<SpoilerButtonContainer /> | |||
</div> | |||
<div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={[this.props.spoiler_text, this.props.text].join('')} /></div> | |||
<div style={{ paddingTop: '10px' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled} /></div> | |||
<div style={{ display: 'flex' }}> | |||
<div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={[this.props.spoiler_text, this.props.text].join('')} /></div> | |||
<div style={{ paddingTop: '10px' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled} /></div> | |||
</div> | |||
</div> | |||
</div> | |||
); | |||
@@ -4,15 +4,20 @@ import IconButton from '../../../components/icon_button'; | |||
const messages = defineMessages({ | |||
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, | |||
public_long: { id: 'privacy.public.long', defaultMessage: 'Post to Public Timelines' }, | |||
public_long: { id: 'privacy.public.long', defaultMessage: 'Post to public timelines' }, | |||
unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, | |||
unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not show in public timelines' }, | |||
private_short: { id: 'privacy.private.short', defaultMessage: 'Private' }, | |||
private_long: { id: 'privacy.private.long', defaultMessage: 'Post to followers only, cannot be boosted' }, | |||
private_long: { id: 'privacy.private.long', defaultMessage: 'Post to followers only' }, | |||
direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, | |||
direct_long: { id: 'privacy.direct.long', defaultMessage: 'Post to mentioned users only' } | |||
}); | |||
const iconStyle = { | |||
lineHeight: '27px', | |||
height: null | |||
}; | |||
const PrivacyDropdown = React.createClass({ | |||
propTypes: { | |||
@@ -67,14 +72,14 @@ const PrivacyDropdown = React.createClass({ | |||
{ icon: 'globe', value: 'public', shortText: intl.formatMessage(messages.public_short), longText: intl.formatMessage(messages.public_long) }, | |||
{ icon: 'unlock-alt', value: 'unlisted', shortText: intl.formatMessage(messages.unlisted_short), longText: intl.formatMessage(messages.unlisted_long) }, | |||
{ icon: 'lock', value: 'private', shortText: intl.formatMessage(messages.private_short), longText: intl.formatMessage(messages.private_long) }, | |||
{ icon: 'paper-plane', value: 'direct', shortText: intl.formatMessage(messages.direct_short), longText: intl.formatMessage(messages.direct_long) } | |||
{ icon: 'envelope', value: 'direct', shortText: intl.formatMessage(messages.direct_short), longText: intl.formatMessage(messages.direct_long) } | |||
]; | |||
const valueOption = options.find(item => item.value === value); | |||
return ( | |||
<div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> | |||
<div className='privacy-dropdown__value'><IconButton icon={valueOption.icon} size={22} active={open} inverted onClick={this.handleToggle} /></div> | |||
<div className='privacy-dropdown__value'><IconButton icon={valueOption.icon} size={18} active={open} inverted onClick={this.handleToggle} style={iconStyle} /></div> | |||
<div className='privacy-dropdown__dropdown'> | |||
{options.map(item => | |||
<div key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}> | |||
@@ -6,6 +6,11 @@ const messages = defineMessages({ | |||
upload: { id: 'upload_button.label', defaultMessage: 'Add media' } | |||
}); | |||
const iconStyle = { | |||
lineHeight: '27px', | |||
height: null | |||
}; | |||
const UploadButton = React.createClass({ | |||
propTypes: { | |||
@@ -37,7 +42,7 @@ const UploadButton = React.createClass({ | |||
return ( | |||
<div style={this.props.style}> | |||
<IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} size={22} inverted /> | |||
<IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} style={iconStyle} size={18} inverted /> | |||
<input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} /> | |||
</div> | |||
); | |||
@@ -25,7 +25,7 @@ const en = { | |||
"getting_started.heading": "Getting started", | |||
"getting_started.about_addressing": "You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the search form.", | |||
"getting_started.about_shortcuts": "If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.", | |||
"getting_started.open_source_notice": "Mastodon is open source software. You can contribute or report issues on github at {github}. Various apps are available.", | |||
"getting_started.open_source_notice": "Mastodon is open source software. You can contribute or report issues on github at {github}. {apps}.", | |||
"column.home": "Home", | |||
"column.community": "Local timeline", | |||
"column.public": "Federated timeline", | |||
@@ -94,19 +94,19 @@ | |||
} | |||
.text-icon-button { | |||
color: lighten($color1, 26%); | |||
color: lighten($color1, 33%); | |||
border: none; | |||
background: transparent; | |||
cursor: pointer; | |||
font-weight: 600; | |||
font-size: 12px; | |||
font-size: 11px; | |||
padding: 0 3px; | |||
line-height: 27px; | |||
outline: 0; | |||
transition: all 100ms ease-in; | |||
&:hover { | |||
color: lighten($color1, 33%); | |||
color: lighten($color1, 26%); | |||
transition: all 200ms ease-out; | |||
} | |||
@@ -177,8 +177,6 @@ | |||
background: darken($color5, 8%); | |||
box-shadow: inset 0 5px 5px rgba($color8, 0.05); | |||
border-radius: 0 0 4px 4px; | |||
flex: 1 1 auto; | |||
margin-right: 16px; | |||
display: flex; | |||
.icon-button { | |||
@@ -734,7 +732,7 @@ a.status__content__spoiler-link { | |||
} | |||
.drawer { | |||
width: 330px; | |||
width: 300px; | |||
box-sizing: border-box; | |||
display: flex; | |||
flex-direction: column; | |||
@@ -1663,7 +1661,7 @@ button.active i.fa-retweet { | |||
position: absolute; | |||
left: 0; | |||
top: 24px; | |||
width: 180px; | |||
width: 230px; | |||
background: $color5; | |||
border-radius: 0 4px 4px 4px; | |||
z-index: 2; | |||