From d237d02c03d8b7a29240acabade733693aeec96e Mon Sep 17 00:00:00 2001 From: Mike Pennisi Date: Fri, 3 Jul 2020 14:27:55 -0400 Subject: [PATCH] Highlight "Jump to Bottom" badge when appropriate This resolves https://github.com/vector-im/riot-web/issues/13135 Signed-off-by: Mike Pennisi --- res/css/views/rooms/_JumpToBottomButton.scss | 5 +++++ src/components/structures/RoomView.js | 1 + src/components/views/rooms/JumpToBottomButton.js | 7 ++++++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss index 63cf574596..23018df8da 100644 --- a/res/css/views/rooms/_JumpToBottomButton.scss +++ b/res/css/views/rooms/_JumpToBottomButton.scss @@ -41,6 +41,11 @@ limitations under the License. // with text-align in parent display: inline-block; padding: 0 4px; + color: $roomtile-badge-fg-color; + background-color: $roomtile-name-color; +} + +.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge { color: $secondary-accent-color; background-color: $warning-color; } diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 519c4c1f8e..a9f75ce632 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -2044,6 +2044,7 @@ export default createReactClass({ if (!this.state.atEndOfLiveTimeline && !this.state.searchResults) { const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton'); jumpToBottom = ( 0} numUnreadMessages={this.state.numUnreadMessages} onScrollToBottomClick={this.jumpToLiveTimeline} />); diff --git a/src/components/views/rooms/JumpToBottomButton.js b/src/components/views/rooms/JumpToBottomButton.js index d3305f498a..b6cefc1231 100644 --- a/src/components/views/rooms/JumpToBottomButton.js +++ b/src/components/views/rooms/JumpToBottomButton.js @@ -16,13 +16,18 @@ limitations under the License. import { _t } from '../../../languageHandler'; import AccessibleButton from '../elements/AccessibleButton'; +import classNames from 'classnames'; export default (props) => { + const className = classNames({ + 'mx_JumpToBottomButton': true, + 'mx_JumpToBottomButton_highlight': props.highlight, + }); let badge; if (props.numUnreadMessages) { badge = (
{props.numUnreadMessages}
); } - return (
+ return (