Browse Source

Replace TextIconButton for SensitiveButton to IconButton (#3759)

* Replace TextIconButton for SensitiveButton to IconButton

* line-height
master
Yamagishi Kazutoshi 7 years ago
committed by Eugen Rochko
parent
commit
eb832e88f4
2 changed files with 34 additions and 6 deletions
  1. +22
    -6
      app/javascript/mastodon/features/compose/containers/sensitive_button_container.js
  2. +12
    -0
      app/javascript/styles/components.scss

+ 22
- 6
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
- 0
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;
}

Loading…
Cancel
Save