michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Add isMuted prop in room selector

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-03-15 12:45:42 +05:30
parent 807c240f22
commit 1dace08b23
2 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/app/molecules/room-selector/RoomSelector.jsx
View file

@ -11,13 +11,16 @@ import NotificationBadge from '../../atoms/badge/NotificationBadge';
import { blurOnBubbling } from '../../atoms/button/script'; import { blurOnBubbling } from '../../atoms/button/script';
function RoomSelectorWrapper({ function RoomSelectorWrapper({
isSelected, isUnread, onClick, isSelected, isMuted, isUnread, onClick,
content, options, onContextMenu, content, options, onContextMenu,
}) { }) {
let myClass = isUnread ? ' room-selector--unread' : ''; const classes = ['room-selector'];
myClass += isSelected ? ' room-selector--selected' : ''; if (isMuted) classes.push('room-selector--muted');
if (isUnread) classes.push('room-selector--unread');
if (isSelected) classes.push('room-selector--selected');
return ( return (
<div className={`room-selector${myClass}`}> <div className={classes.join(' ')}>
<button <button
className="room-selector__content" className="room-selector__content"
type="button" type="button"
@ -32,11 +35,13 @@ function RoomSelectorWrapper({
); );
} }
RoomSelectorWrapper.defaultProps = { RoomSelectorWrapper.defaultProps = {
isMuted: false,
options: null, options: null,
onContextMenu: null, onContextMenu: null,
}; };
RoomSelectorWrapper.propTypes = { RoomSelectorWrapper.propTypes = {
isSelected: PropTypes.bool.isRequired, isSelected: PropTypes.bool.isRequired,
isMuted: PropTypes.bool,
isUnread: PropTypes.bool.isRequired, isUnread: PropTypes.bool.isRequired,
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
content: PropTypes.node.isRequired, content: PropTypes.node.isRequired,
@ -46,12 +51,13 @@ RoomSelectorWrapper.propTypes = {
function RoomSelector({ function RoomSelector({
name, parentName, roomId, imageSrc, iconSrc, name, parentName, roomId, imageSrc, iconSrc,
isSelected, isUnread, notificationCount, isAlert, isSelected, isMuted, isUnread, notificationCount, isAlert,
options, onClick, onContextMenu, options, onClick, onContextMenu,
}) { }) {
return ( return (
<RoomSelectorWrapper <RoomSelectorWrapper
isSelected={isSelected} isSelected={isSelected}
isMuted={isMuted}
isUnread={isUnread} isUnread={isUnread}
content={( content={(
<> <>
@ -91,6 +97,7 @@ RoomSelector.defaultProps = {
isSelected: false, isSelected: false,
imageSrc: null, imageSrc: null,
iconSrc: null, iconSrc: null,
isMuted: false,
options: null, options: null,
onContextMenu: null, onContextMenu: null,
}; };
@ -101,6 +108,7 @@ RoomSelector.propTypes = {
imageSrc: PropTypes.string, imageSrc: PropTypes.string,
iconSrc: PropTypes.string, iconSrc: PropTypes.string,
isSelected: PropTypes.bool, isSelected: PropTypes.bool,
isMuted: PropTypes.bool,
isUnread: PropTypes.bool.isRequired, isUnread: PropTypes.bool.isRequired,
notificationCount: PropTypes.oneOfType([ notificationCount: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,

4
src/app/molecules/room-selector/RoomSelector.scss
View file

@ -9,6 +9,10 @@
border-radius: var(--bo-radius); border-radius: var(--bo-radius);
cursor: pointer; cursor: pointer;
&--muted {
opacity: 0.6;
}
&--unread { &--unread {
.room-selector__content > .text { .room-selector__content > .text {
color: var(--tc-surface-high); color: var(--tc-surface-high);