Use a checkbox for the “Mark media as sensitive” composer button
Fixes #1039
This commit is contained in:
parent
0bb3ba2406
commit
46b5085ced
2 changed files with 42 additions and 7 deletions
|
@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { changeComposeSensitivity } from 'flavours/glitch/actions/compose';
|
import { changeComposeSensitivity } from 'flavours/glitch/actions/compose';
|
||||||
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
|
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
|
||||||
import Icon from 'flavours/glitch/components/icon';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
|
marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
|
||||||
|
@ -42,9 +41,19 @@ class SensitiveButton extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='compose-form__sensitive-button'>
|
<div className='compose-form__sensitive-button'>
|
||||||
<button className={classNames('icon-button', { active })} onClick={onClick} disabled={disabled} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
|
<label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
|
||||||
<Icon icon='eye-slash' /> <FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
|
<input
|
||||||
</button>
|
name='mark-sensitive'
|
||||||
|
type='checkbox'
|
||||||
|
checked={active}
|
||||||
|
onChange={onClick}
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span className={classNames('checkbox', { active })} />
|
||||||
|
|
||||||
|
<FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -61,9 +61,35 @@
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
|
|
||||||
.icon-button {
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: $highlight-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid $ui-primary-color;
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 10px;
|
||||||
|
top: -1px;
|
||||||
|
border-radius: 4px;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-color: $highlight-text-color;
|
||||||
|
background: $highlight-text-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue