fedi/mastodon
1
0
Fork 1
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-29 16:27:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source 
* 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:
Mélanie Chauvel (ariasuni) 2018-05-31 15:16:31 +02:00 committed by Eugen Rochko
parent 648a22637c
commit 691107263c
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;

17
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 AutosuggestTextarea from '../../../components/autosuggest_textarea';
import UploadButtonContainer from '../containers/upload_button_container'; import UploadButtonContainer from '../containers/upload_button_container';
import { defineMessages, injectIntl } from 'react-intl'; import { defineMessages, injectIntl } from 'react-intl';
import Collapsable from '../../../components/collapsable';
import SpoilerButtonContainer from '../containers/spoiler_button_container'; import SpoilerButtonContainer from '../containers/spoiler_button_container';
import PrivacyDropdownContainer from '../containers/privacy_dropdown_container'; import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
import SensitiveButtonContainer from '../containers/sensitive_button_container'; import SensitiveButtonContainer from '../containers/sensitive_button_container';
@ -160,17 +159,15 @@ export default class ComposeForm extends ImmutablePureComponent {
<div className='compose-form'> <div className='compose-form'>
<WarningContainer /> <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 /> <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'> <div className='compose-form__autosuggest-wrapper'>
<AutosuggestTextarea <AutosuggestTextarea
ref={this.setAutosuggestTextarea} ref={this.setAutosuggestTextarea}

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

@ -298,6 +298,19 @@
position: relative; 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, .autosuggest-textarea__textarea,
.spoiler-input__input { .spoiler-input__input {
display: block; display: block;
@ -569,9 +582,9 @@
} }
.reply-indicator { .reply-indicator {
border-radius: 4px 4px 0 0; border-radius: 4px;
position: relative; position: relative;
bottom: -2px; bottom: 10px;
background: $ui-primary-color; background: $ui-primary-color;
padding: 10px; padding: 10px;
} }