Move character counter to the options box to match upstream styling

This commit is contained in:
Thibaut Girka 2019-08-19 21:41:41 +02:00
parent ed4317b549
commit a334cbcb20
3 changed files with 33 additions and 15 deletions

View file

@ -15,6 +15,8 @@ import { countableText } from 'flavours/glitch/util/counter';
import OptionsContainer from '../containers/options_container';
import Publisher from './publisher';
import TextareaIcons from './textarea_icons';
import { maxChars } from 'flavours/glitch/util/initial_state';
import CharacterCounter from './character_counter';
const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@ -298,6 +300,8 @@ class ComposeForm extends ImmutablePureComponent {
let disabledButton = isSubmitting || isUploading || isChangingUpload || (!text.trim().length && !anyMedia);
const countText = `${spoilerText}${countableText(text)}${advancedOptions && advancedOptions.get('do_not_federate') ? ' 👁️' : ''}`;
return (
<div className='composer'>
<WarningContainer />
@ -347,19 +351,24 @@ class ComposeForm extends ImmutablePureComponent {
</div>
</AutosuggestTextarea>
<OptionsContainer
advancedOptions={advancedOptions}
disabled={isSubmitting}
onChangeVisibility={onChangeVisibility}
onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
onUpload={onPaste}
privacy={privacy}
sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
/>
<div className='composer--options-wrapper'>
<OptionsContainer
advancedOptions={advancedOptions}
disabled={isSubmitting}
onChangeVisibility={onChangeVisibility}
onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
onUpload={onPaste}
privacy={privacy}
sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
/>
<div className='compose--counter-wrapper'>
<CharacterCounter text={countText} max={maxChars} />
</div>
</div>
<Publisher
countText={`${spoilerText}${countableText(text)}${advancedOptions && advancedOptions.get('do_not_federate') ? ' 👁️' : ''}`}
countText={countText}
disabled={disabledButton}
onSecondarySubmit={handleSecondarySubmit}
onSubmit={handleSubmit}

View file

@ -9,7 +9,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
// Components.
import Button from 'flavours/glitch/components/button';
import Icon from 'flavours/glitch/components/icon';
import CharacterCounter from './character_counter';
// Utils.
import { maxChars } from 'flavours/glitch/util/initial_state';
@ -50,7 +49,6 @@ class Publisher extends ImmutablePureComponent {
return (
<div className={computedClass}>
<CharacterCounter text={countText} max={maxChars} />
{sideArm && sideArm !== 'none' ? (
<Button
className='side_arm'

View file

@ -501,12 +501,18 @@
background: $simple-background-color;
}
.composer--options {
.composer--options-wrapper {
padding: 10px;
background: darken($simple-background-color, 8%);
box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
border-radius: 0 0 4px 4px;
height: 27px;
display: flex;
justify-content: space-between;
flex: 0 0 auto;
}
.composer--options {
display: flex;
flex: 0 0 auto;
& > * {
@ -531,6 +537,11 @@
}
}
.compose--counter-wrapper {
align-self: center;
margin-right: 4px;
}
.composer--options--dropdown {
&.open {
& > .value {