Fix minor UI issues
This commit is contained in:
parent
0b4121528a
commit
f2af71f8b5
14 changed files with 216 additions and 174 deletions
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue