ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compose form layout fixes

rebase/4.0.0rc2
Eugen Rochko 2017-03-26 13:08:15 +02:00
parent 874d91126c
commit 6ec6fe259a
5 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/components/features/compose/components/compose_form.jsx
View File

@ -146,7 +146,7 @@ const ComposeForm = React.createClass({
<div style={{ padding: '10px' }}> <div style={{ padding: '10px' }}>
<Collapsable isVisible={this.props.spoiler} fullHeight={50}> <Collapsable isVisible={this.props.spoiler} fullHeight={50}>
<div className="spoiler-input"> <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> </div>
</Collapsable> </Collapsable>
@ -176,7 +176,7 @@ const ComposeForm = React.createClass({
<UploadFormContainer /> <UploadFormContainer />
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div className='compose-form__buttons'> <div className='compose-form__buttons'>
<UploadButtonContainer /> <UploadButtonContainer />
<PrivacyDropdownContainer /> <PrivacyDropdownContainer />
@ -184,8 +184,10 @@ const ComposeForm = React.createClass({
<SpoilerButtonContainer /> <SpoilerButtonContainer />
</div> </div>
<div style={{ paddingTop: '10px', marginRight: '16px', lineHeight: '36px' }}><CharacterCounter max={500} text={[this.props.spoiler_text, this.props.text].join('')} /></div> <div style={{ display: 'flex' }}>
<div style={{ paddingTop: '10px' }}><Button text={publishText} onClick={this.handleSubmit} disabled={disabled} /></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>
</div> </div>
</div> </div>
); );

13
app/assets/javascripts/components/features/compose/components/privacy_dropdown.jsx
View File

@ -4,15 +4,20 @@ import IconButton from '../../../components/icon_button';
const messages = defineMessages({ const messages = defineMessages({
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' }, 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_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not show in public timelines' }, unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not show in public timelines' },
private_short: { id: 'privacy.private.short', defaultMessage: 'Private' }, 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_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
direct_long: { id: 'privacy.direct.long', defaultMessage: 'Post to mentioned users only' } direct_long: { id: 'privacy.direct.long', defaultMessage: 'Post to mentioned users only' }
}); });
const iconStyle = {
lineHeight: '27px',
height: null
};
const PrivacyDropdown = React.createClass({ const PrivacyDropdown = React.createClass({
propTypes: { 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: '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: '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: '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); const valueOption = options.find(item => item.value === value);
return ( return (
<div ref={this.setRef} className={`privacy-dropdown ${open ? 'active' : ''}`}> <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'> <div className='privacy-dropdown__dropdown'>
{options.map(item => {options.map(item =>
<div key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}> <div key={item.value} onClick={this.handleClick.bind(this, item.value)} className={`privacy-dropdown__option ${item.value === value ? 'active' : ''}`}>

7
app/assets/javascripts/components/features/compose/components/upload_button.jsx
View File

@ -6,6 +6,11 @@ const messages = defineMessages({
upload: { id: 'upload_button.label', defaultMessage: 'Add media' } upload: { id: 'upload_button.label', defaultMessage: 'Add media' }
}); });
const iconStyle = {
lineHeight: '27px',
height: null
};
const UploadButton = React.createClass({ const UploadButton = React.createClass({
propTypes: { propTypes: {
@ -37,7 +42,7 @@ const UploadButton = React.createClass({
return ( return (
<div style={this.props.style}> <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' }} /> <input key={resetFileKey} ref={this.setRef} type='file' multiple={false} onChange={this.handleChange} disabled={disabled} style={{ display: 'none' }} />
</div> </div>
); );

2
app/assets/javascripts/components/locales/en.jsx
View File

@ -25,7 +25,7 @@ const en = {
"getting_started.heading": "Getting started", "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_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.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.home": "Home",
"column.community": "Local timeline", "column.community": "Local timeline",
"column.public": "Federated timeline", "column.public": "Federated timeline",

12
app/assets/stylesheets/components.scss
View File

@ -94,19 +94,19 @@
} }
.text-icon-button { .text-icon-button {
color: lighten($color1, 26%); color: lighten($color1, 33%);
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 11px;
padding: 0 3px; padding: 0 3px;
line-height: 27px; line-height: 27px;
outline: 0; outline: 0;
transition: all 100ms ease-in; transition: all 100ms ease-in;
&:hover { &:hover {
color: lighten($color1, 33%); color: lighten($color1, 26%);
transition: all 200ms ease-out; transition: all 200ms ease-out;
} }
@ -177,8 +177,6 @@
background: darken($color5, 8%); background: darken($color5, 8%);
box-shadow: inset 0 5px 5px rgba($color8, 0.05); box-shadow: inset 0 5px 5px rgba($color8, 0.05);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
flex: 1 1 auto;
margin-right: 16px;
display: flex; display: flex;
.icon-button { .icon-button {
@ -734,7 +732,7 @@ a.status__content__spoiler-link {
} }
.drawer { .drawer {
width: 330px; width: 300px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1663,7 +1661,7 @@ button.active i.fa-retweet {
position: absolute; position: absolute;
left: 0; left: 0;
top: 24px; top: 24px;
width: 180px; width: 230px;
background: $color5; background: $color5;
border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px 4px;
z-index: 2; z-index: 2;