Fix minor UI issues

This commit is contained in:
Fedor Indutny 2022-06-13 16:37:29 -07:00 committed by GitHub
parent 0b4121528a
commit f2af71f8b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 216 additions and 174 deletions

View file

@ -2,12 +2,11 @@
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import classNames from 'classnames';
import type { LocalizerType } from '../../types/Util';
export type Props = {
withNewMessages: boolean;
unreadCount?: number;
conversationId: string;
scrollDown: (conversationId: string) => void;
@ -17,26 +16,35 @@ export type Props = {
export const ScrollDownButton = ({
conversationId,
withNewMessages,
unreadCount,
i18n,
scrollDown,
}: Props): JSX.Element => {
const altText = withNewMessages ? i18n('messagesBelow') : i18n('scrollDown');
const altText = unreadCount ? i18n('messagesBelow') : i18n('scrollDown');
let badgeText: string | undefined;
if (unreadCount) {
if (unreadCount < 100) {
badgeText = unreadCount.toString();
} else {
badgeText = '99+';
}
}
return (
<div className="module-scroll-down">
<div className="ScrollDownButton">
<button
type="button"
className={classNames(
'module-scroll-down__button',
withNewMessages ? 'module-scroll-down__button--new-messages' : null
)}
className="ScrollDownButton__button"
onClick={() => {
scrollDown(conversationId);
}}
title={altText}
>
<div className="module-scroll-down__icon" />
{badgeText ? (
<div className="ScrollDownButton__button__badge">{badgeText}</div>
) : null}
<div className="ScrollDownButton__button__icon" />
</button>
</div>
);