kosmos/mastodon
kosmos/mastodon
8
0
Fork 0
Code Pull Requests Activity

Replace TextIconButton for SensitiveButton to IconButton (#3759)

Browse Source 
* Replace TextIconButton for SensitiveButton to IconButton

* line-height
This commit is contained in:
Yamagishi Kazutoshi 2017-06-21 02:43:09 +09:00 committed by Eugen Rochko
parent b16b69350e
commit eb832e88f4
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
View File

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import TextIconButton from '../components/text_icon_button'; import classNames from 'classnames';
import IconButton from '../../../components/icon_button';
import { changeComposeSensitivity } from '../../../actions/compose'; import { changeComposeSensitivity } from '../../../actions/compose';
import Motion from 'react-motion/lib/Motion'; import Motion from 'react-motion/lib/Motion';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
@ -38,11 +39,26 @@ class SensitiveButton extends React.PureComponent {
return ( return (
<Motion defaultStyle={{ scale: 0.87 }} style={{ scale: spring(visible ? 1 : 0.87, { stiffness: 200, damping: 3 }) }}> <Motion defaultStyle={{ scale: 0.87 }} style={{ scale: spring(visible ? 1 : 0.87, { stiffness: 200, damping: 3 }) }}>
{({ scale }) => {({ scale }) => {
<div style={{ display: visible ? 'block' : 'none', transform: `translateZ(0) scale(${scale})` }}> const icon = active ? 'eye-slash' : 'eye';
<TextIconButton onClick={onClick} label='NSFW' title={intl.formatMessage(messages.title)} active={active} /> const className = classNames('compose-form__sensitive-button', {
'compose-form__sensitive-button--visible': visible,
});
return (
<div className={className} style={{ transform: `translateZ(0) scale(${scale})` }}>
<IconButton
className='compose-form__sensitive-button__icon'
title={intl.formatMessage(messages.title)}
icon={icon}
onClick={onClick}
size={18}
active={active}
style={{ lineHeight: null, height: null }}
inverted
/>
</div> </div>
} );
}}
</Motion> </Motion>
); );
} }

12
app/javascript/styles/components.scss
View File

@ -306,6 +306,18 @@
line-height: 27px; line-height: 27px;
} }
.compose-form__sensitive-button {
display: none;
&.compose-form__sensitive-button--visible {
display: block;
}
.compose-form__sensitive-button__icon {
line-height: 27px;
}
}
.compose-form__upload-wrapper { .compose-form__upload-wrapper {
overflow: hidden; overflow: hidden;
} }