cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases 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

28
app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
View file

@ -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>
);
}

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

@ -306,6 +306,18 @@
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 {
overflow: hidden;
}