3g0st
/
mastodon-docker-playground
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move character counter to the options box to match upstream styling

signup-info-prompt
Thibaut Girka 2019-08-19 21:41:41 +02:00
parent ed4317b549
commit a334cbcb20
3 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/javascript/flavours/glitch/features/compose/components/compose_form.js
View File

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

2
app/javascript/flavours/glitch/features/compose/components/publisher.js
View File

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

15
app/javascript/flavours/glitch/styles/components/composer.scss
View File

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