treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Put the CW field between the toot we are replying to and the toot field (#7508) 

* Remove Collapsable and use CSS instead

* Put the CW field between the toot we are replying to and the toot field

* Use same spacing between all fields in the composing column
lolsob-rspec
Mélanie Chauvel (ariasuni) 2018-05-31 15:16:31 +02:00 committed by Eugen Rochko
parent 4c11c429ce
commit a6ddd1aba2
3 changed files with 22 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/javascript/mastodon/components/collapsable.js
View File

@ -1,22 +0,0 @@
import React from 'react';
import Motion from '../features/ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import PropTypes from 'prop-types';
const Collapsable = ({ fullHeight, isVisible, children }) => (
<Motion defaultStyle={{ opacity: !isVisible ? 0 : 100, height: isVisible ? fullHeight : 0 }} style={{ opacity: spring(!isVisible ? 0 : 100), height: spring(!isVisible ? 0 : fullHeight) }}>
{({ opacity, height }) => (
<div style={{ height: `${height}px`, overflow: 'hidden', opacity: opacity / 100, display: Math.floor(opacity) === 0 ? 'none' : 'block' }}>
{children}
</div>
)}
</Motion>
);
Collapsable.propTypes = {
fullHeight: PropTypes.number.isRequired,
isVisible: PropTypes.bool.isRequired,
children: PropTypes.node.isRequired,
};
export default Collapsable;

9
app/javascript/mastodon/features/compose/components/compose_form.js
View File

@ -7,7 +7,6 @@ import ReplyIndicatorContainer from '../containers/reply_indicator_container';
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
import UploadButtonContainer from '../containers/upload_button_container';
import { defineMessages, injectIntl } from 'react-intl';
import Collapsable from '../../../components/collapsable';
import SpoilerButtonContainer from '../containers/spoiler_button_container';
import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
import SensitiveButtonContainer from '../containers/sensitive_button_container';
@ -160,16 +159,14 @@ export default class ComposeForm extends ImmutablePureComponent {
<div className='compose-form'>
<WarningContainer />
<Collapsable isVisible={this.props.spoiler} fullHeight={50}>
<div className='spoiler-input'>
<ReplyIndicatorContainer />
<div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}>
<label>
<span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span>
<input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input' id='cw-spoiler-input' />
</label>
</div>
</Collapsable>
<ReplyIndicatorContainer />
<div className='compose-form__autosuggest-wrapper'>
<AutosuggestTextarea

17
app/javascript/styles/mastodon/components.scss
View File

@ -298,6 +298,19 @@
position: relative;
}
.spoiler-input {
height: 0;
transform-origin: bottom;
opacity: 0.0;
transition: all 0.4s ease;
&.spoiler-input--visible {
height: 47px;
opacity: 1.0;
transition: all 0.4s ease;
}
}
.autosuggest-textarea__textarea,
.spoiler-input__input {
display: block;
@ -569,9 +582,9 @@
}
.reply-indicator {
border-radius: 4px 4px 0 0;
border-radius: 4px;
position: relative;
bottom: -2px;
bottom: 10px;
background: $ui-primary-color;
padding: 10px;
}