display only error or typing indicator at one time

This commit is contained in:
KDSBrowne 2019-08-14 14:38:26 +00:00
parent e35f1e4a8d
commit bb5463881c
2 changed files with 8 additions and 4 deletions

View File

@ -285,7 +285,7 @@ class MessageForm extends PureComponent {
className={styles.input}
id="message-input"
innerRef={(ref) => { this.textarea = ref; return this.textarea; }}
placeholder={error || intl.formatMessage(messages.inputPlaceholder, { 0: chatName })}
placeholder={intl.formatMessage(messages.inputPlaceholder, { 0: chatName })}
aria-controls={chatAreaId}
aria-label={intl.formatMessage(messages.inputLabel, { 0: chatTitle })}
aria-invalid={hasErrors ? 'true' : 'false'}
@ -311,10 +311,10 @@ class MessageForm extends PureComponent {
onClick={() => {}}
/>
</div>
<div className={styles.info}>
<div className={error ? styles.error : styles.info}>
<span>
<span>{renderIsTypingString()}</span>
{renderIsTypingString() ? <span className={styles.connectingAnimation} /> : null}
<span>{error || renderIsTypingString()}</span>
{!error && renderIsTypingString() ? <span className={styles.connectingAnimation} /> : null}
</span>
</div>
</form>

View File

@ -100,6 +100,7 @@
}
}
.error,
.info {
font-size: calc(var(--font-size-base) * .75);
color: var(--color-gray-dark);
@ -115,6 +116,9 @@
}
}
.error {
color: var(--color-danger);
}
.connectingAnimation {
margin: auto;