9+ on icons
This commit is contained in:
parent
71caa49a84
commit
0a26e09217
|
@ -459,13 +459,14 @@ $session_message-container-border-radius: 5px;
|
|||
}
|
||||
|
||||
.notification-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
font-size: $session-font-xs;
|
||||
font-family: $session-font-family;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 3px;
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
|
@ -473,7 +474,15 @@ $session_message-container-border-radius: 5px;
|
|||
color: $session-color-white;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
|
||||
sup {
|
||||
font-size: 130%;
|
||||
margin-top: 1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.session-icon {
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { SessionButton } from './SessionButton';
|
||||
import { SessionNotificationCount } from './SessionNotificationCount';
|
||||
|
||||
const Tab = ({
|
||||
isSelected,
|
||||
|
@ -89,8 +90,6 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
|
|||
/>
|
||||
);
|
||||
} else if (buttonLabel && notificationCount && notificationCount > 0) {
|
||||
const shortenedNotificationCount =
|
||||
notificationCount > 9 ? 9 : notificationCount;
|
||||
children.push(
|
||||
<div className="contact-notification-section">
|
||||
<SessionButton
|
||||
|
@ -99,26 +98,18 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
|
|||
key="compose"
|
||||
disabled={false}
|
||||
/>
|
||||
<div
|
||||
className="contact-notification-count-bubble"
|
||||
<SessionNotificationCount
|
||||
count={notificationCount}
|
||||
onClick={this.props.buttonClicked}
|
||||
role="button"
|
||||
>
|
||||
{shortenedNotificationCount}
|
||||
</div>
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
} else if (notificationCount && notificationCount > 0) {
|
||||
const shortenedNotificationCount =
|
||||
notificationCount > 9 ? 9 : notificationCount;
|
||||
children.push(
|
||||
<div
|
||||
className="contact-notification-count-bubble"
|
||||
<SessionNotificationCount
|
||||
count={notificationCount}
|
||||
onClick={this.props.buttonClicked}
|
||||
role="button"
|
||||
>
|
||||
{shortenedNotificationCount}
|
||||
</div>
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,57 @@
|
|||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
count?: number;
|
||||
// Size in px
|
||||
size?: number;
|
||||
onClick?: any;
|
||||
}
|
||||
|
||||
export class SessionNotificationCount extends React.Component<Props> {
|
||||
public static defaultProps = {
|
||||
size: 20,
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { count, size, onClick } = this.props;
|
||||
|
||||
const MAX_SINGLE_DIGIT = 9;
|
||||
const overflow = count > MAX_SINGLE_DIGIT;
|
||||
const countElement: JSX.Element = overflow
|
||||
? <>{MAX_SINGLE_DIGIT}<sup>+</sup></>
|
||||
: <>{count}</>;
|
||||
|
||||
const bubbleStyle = {
|
||||
width: `${size}px`,
|
||||
height: `${size}px`,
|
||||
};
|
||||
|
||||
const countStyle = {
|
||||
marginTop: overflow ? '-4px' : '0px',
|
||||
marginLeft: overflow ? '2px' : '0px',
|
||||
};
|
||||
|
||||
const shouldRender = typeof count === 'number' && count > 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
{shouldRender && (
|
||||
<div
|
||||
className="notification-count"
|
||||
onClick={onClick}
|
||||
style={bubbleStyle}
|
||||
role="button"
|
||||
>
|
||||
<span style={countStyle}>
|
||||
{countElement}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,11 +1,12 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Props, SessionIcon } from '../icon';
|
||||
|
||||
import { SessionNotificationCount } from '../SessionNotificationCount';
|
||||
|
||||
interface SProps extends Props {
|
||||
onClick: any;
|
||||
notificationCount: number | undefined;
|
||||
notificationCount?: number;
|
||||
isSelected: boolean;
|
||||
}
|
||||
|
||||
|
@ -35,13 +36,7 @@ export class SessionIconButton extends React.PureComponent<SProps> {
|
|||
isSelected,
|
||||
} = this.props;
|
||||
|
||||
let { notificationCount } = this.props;
|
||||
|
||||
if (notificationCount === 0) {
|
||||
notificationCount = undefined;
|
||||
} else if (notificationCount !== undefined && notificationCount > 9) {
|
||||
notificationCount = 9;
|
||||
}
|
||||
const { notificationCount } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -62,9 +57,9 @@ export class SessionIconButton extends React.PureComponent<SProps> {
|
|||
iconColor={iconColor}
|
||||
iconRotation={iconRotation}
|
||||
/>
|
||||
{notificationCount !== undefined && (
|
||||
<span className="notification-count">{notificationCount}</span>
|
||||
)}
|
||||
<SessionNotificationCount
|
||||
count={notificationCount}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue