kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
ComposeForm: add back original character counter, commented out for now
rodzic
18ef49aec9
commit
e16a5ac9f9
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import CharacterCounter from './character_counter';
|
||||
// import TextCharacterCounter from './text_character_counter';
|
||||
import VisualCharacterCounter from './visual_character_counter';
|
||||
import Button from '../../../components/button';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
@ -351,7 +352,12 @@ export default class ComposeForm extends ImmutablePureComponent {
|
|||
<SpoilerButtonContainer />
|
||||
<MarkdownButtonContainer />
|
||||
</div>
|
||||
{maxTootChars && <div className='character-counter__wrapper'><CharacterCounter max={maxTootChars} text={text} /></div>}
|
||||
{maxTootChars && (
|
||||
<div className='compose-form__counter'>
|
||||
{/* <TextCharacterCounter max={maxTootChars} text={text} /> */}
|
||||
<VisualCharacterCounter max={maxTootChars} text={text} />
|
||||
</div>
|
||||
)}
|
||||
<div className='compose-form__publish'>
|
||||
<div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { length } from 'stringz';
|
||||
|
||||
export default class TextCharacterCounter extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
text: PropTypes.string.isRequired,
|
||||
max: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
checkRemainingText(diff) {
|
||||
if (diff < 0) {
|
||||
return <span className='character-counter character-counter--over'>{diff}</span>;
|
||||
}
|
||||
|
||||
return <span className='character-counter'>{diff}</span>;
|
||||
}
|
||||
|
||||
render() {
|
||||
const diff = this.props.max - length(this.props.text);
|
||||
return this.checkRemainingText(diff);
|
||||
}
|
||||
|
||||
}
|
|
@ -13,7 +13,7 @@ const messages = defineMessages({
|
|||
* @param {string} props.text - text to use to measure
|
||||
* @param {number} props.max - max text allowed
|
||||
*/
|
||||
class CharacterCounter extends React.PureComponent {
|
||||
class VisualCharacterCounter extends React.PureComponent {
|
||||
|
||||
render() {
|
||||
const { intl, text, max } = this.props;
|
||||
|
@ -22,21 +22,23 @@ class CharacterCounter extends React.PureComponent {
|
|||
const progress = textLength / max;
|
||||
|
||||
return (
|
||||
<ProgressCircle
|
||||
title={intl.formatMessage(messages.title, { chars: textLength, maxChars: max })}
|
||||
progress={progress}
|
||||
radius={10}
|
||||
stroke={3}
|
||||
/>
|
||||
<div className='visual-character-counter'>
|
||||
<ProgressCircle
|
||||
title={intl.formatMessage(messages.title, { chars: textLength, maxChars: max })}
|
||||
progress={progress}
|
||||
radius={10}
|
||||
stroke={3}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
CharacterCounter.propTypes = {
|
||||
VisualCharacterCounter.propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
text: PropTypes.string.isRequired,
|
||||
max: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(CharacterCounter);
|
||||
export default injectIntl(VisualCharacterCounter);
|
|
@ -27,7 +27,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.compose-form__warning {
|
||||
&__warning {
|
||||
color: var(--primary-text-color);
|
||||
margin-bottom: 10px;
|
||||
background: var(--brand-color--faint);
|
||||
|
@ -66,7 +66,7 @@
|
|||
right: 5px;
|
||||
}
|
||||
|
||||
.compose-form__autosuggest-wrapper {
|
||||
&__autosuggest-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
@ -195,7 +195,7 @@
|
|||
color: var(--primary-text-color--faint);
|
||||
}
|
||||
|
||||
.compose-form__modifiers {
|
||||
&__modifiers {
|
||||
color: var(--primary-text-color);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
|
@ -327,7 +327,7 @@
|
|||
}
|
||||
} // end .compose-form .compose-form__modifiers
|
||||
|
||||
.compose-form__buttons-wrapper {
|
||||
&__buttons-wrapper {
|
||||
padding: 10px;
|
||||
background: var(--background-color);
|
||||
display: flex;
|
||||
|
@ -380,13 +380,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
.character-counter__wrapper {
|
||||
align-self: center;
|
||||
margin: 0 10px 0 auto;
|
||||
.character-counter {
|
||||
display: block;
|
||||
cursor: default;
|
||||
font-family: var(--font-sans-serif), sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-text-color--faint);
|
||||
&.character-counter--over { color: $warning-red; }
|
||||
}
|
||||
|
||||
.character-counter,
|
||||
.visual-character-counter {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__publish {
|
||||
&__publish {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-width: 0;
|
||||
|
@ -396,6 +406,13 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
} // end .compose-form
|
||||
|
||||
// Icon tweaks
|
||||
|
|
Ładowanie…
Reference in New Issue