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
This commit is contained in:
parent
648a22637c
commit
691107263c
|
@ -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;
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue