Added unread highlight in RoomSelector

This commit is contained in:
unknown 2021-09-09 17:35:39 +05:30
parent 42f68f61c6
commit 652f8227b5
2 changed files with 15 additions and 3 deletions

View file

@ -10,10 +10,12 @@ import NotificationBadge from '../../atoms/badge/NotificationBadge';
import { blurOnBubbling } from '../../atoms/button/script'; import { blurOnBubbling } from '../../atoms/button/script';
function RoomSelectorWrapper({ function RoomSelectorWrapper({
isSelected, onClick, content, options, isSelected, isUnread, onClick, content, options,
}) { }) {
let myClass = isUnread ? ' room-selector--unread' : '';
myClass += isSelected ? ' room-selector--selected' : '';
return ( return (
<div className={`room-selector${isSelected ? ' room-selector--selected' : ''}`}> <div className={`room-selector${myClass}`}>
<button <button
className="room-selector__content" className="room-selector__content"
type="button" type="button"
@ -31,6 +33,7 @@ RoomSelectorWrapper.defaultProps = {
}; };
RoomSelectorWrapper.propTypes = { RoomSelectorWrapper.propTypes = {
isSelected: PropTypes.bool.isRequired, isSelected: PropTypes.bool.isRequired,
isUnread: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
content: PropTypes.node.isRequired, content: PropTypes.node.isRequired,
options: PropTypes.node, options: PropTypes.node,
@ -44,6 +47,7 @@ function RoomSelector({
return ( return (
<RoomSelectorWrapper <RoomSelectorWrapper
isSelected={isSelected} isSelected={isSelected}
isUnread={isUnread}
content={( content={(
<> <>
<Avatar <Avatar
@ -68,6 +72,7 @@ function RoomSelector({
); );
} }
RoomSelector.defaultProps = { RoomSelector.defaultProps = {
isSelected: false,
imageSrc: null, imageSrc: null,
iconSrc: null, iconSrc: null,
options: null, options: null,
@ -77,7 +82,7 @@ RoomSelector.propTypes = {
roomId: PropTypes.string.isRequired, roomId: PropTypes.string.isRequired,
imageSrc: PropTypes.string, imageSrc: PropTypes.string,
iconSrc: PropTypes.string, iconSrc: PropTypes.string,
isSelected: PropTypes.bool.isRequired, isSelected: PropTypes.bool,
isUnread: PropTypes.bool.isRequired, isUnread: PropTypes.bool.isRequired,
notificationCount: PropTypes.number.isRequired, notificationCount: PropTypes.number.isRequired,
isAlert: PropTypes.bool.isRequired, isAlert: PropTypes.bool.isRequired,

View file

@ -15,6 +15,13 @@
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
cursor: pointer; cursor: pointer;
&--unread {
.room-selector__content > .text {
font-weight: 500;
color: var(--tc-surface-high);
}
}
&--selected { &--selected {
background-color: var(--bg-surface); background-color: var(--bg-surface);
border-color: var(--bg-surface-border); border-color: var(--bg-surface-border);