Commit 69110726 authored by Mélanie Chauvel (ariasuni)'s avatar Mélanie Chauvel (ariasuni) Committed by Eugen Rochko
Browse files

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
parent 648a2263
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;
......@@ -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,17 +159,15 @@ export default class ComposeForm extends ImmutablePureComponent {
<div className='compose-form'>
<WarningContainer />
<Collapsable isVisible={this.props.spoiler} fullHeight={50}>
<div className='spoiler-input'>
<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={`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>
<div className='compose-form__autosuggest-wrapper'>
<AutosuggestTextarea
ref={this.setAutosuggestTextarea}
......
......@@ -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;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment