diff options
author | Yamagishi Kazutoshi <ykzts@desire.sh> | 2017-06-21 02:43:09 +0900 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-06-20 19:43:09 +0200 |
commit | eb832e88f44d661a504a091defc051e052eb1252 (patch) | |
tree | 15d08d2757ac31855db4c2c677ad18487821d3fc /app/javascript/mastodon | |
parent | b16b69350eb4ded2e1011931433b51dac5e34b53 (diff) |
Replace TextIconButton for SensitiveButton to IconButton (#3759)
* Replace TextIconButton for SensitiveButton to IconButton * line-height
Diffstat (limited to 'app/javascript/mastodon')
-rw-r--r-- | app/javascript/mastodon/features/compose/containers/sensitive_button_container.js | 28 |
1 files changed, 22 insertions, 6 deletions
diff --git a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js index 761ae8c08..63c0e8ae4 100644 --- a/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js +++ b/app/javascript/mastodon/features/compose/containers/sensitive_button_container.js @@ -1,7 +1,8 @@ import React from 'react'; import { connect } from 'react-redux'; 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 Motion from 'react-motion/lib/Motion'; import spring from 'react-motion/lib/spring'; @@ -38,11 +39,26 @@ class SensitiveButton extends React.PureComponent { return ( <Motion defaultStyle={{ scale: 0.87 }} style={{ scale: spring(visible ? 1 : 0.87, { stiffness: 200, damping: 3 }) }}> - {({ scale }) => - <div style={{ display: visible ? 'block' : 'none', transform: `translateZ(0) scale(${scale})` }}> - <TextIconButton onClick={onClick} label='NSFW' title={intl.formatMessage(messages.title)} active={active} /> - </div> - } + {({ scale }) => { + const icon = active ? 'eye-slash' : 'eye'; + 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> + ); + }} </Motion> ); } |