fractional centering
This commit is contained in:
parent
0a26e09217
commit
85c9576b45
|
@ -2518,7 +2518,7 @@
|
|||
"description": "Indicates that a friend request is pending"
|
||||
},
|
||||
"notFriends": {
|
||||
"message": "not friends",
|
||||
"message": "Not Friends",
|
||||
"description": "Indicates that a conversation is not friends with us"
|
||||
},
|
||||
"emptyGroupNameError": {
|
||||
|
|
|
@ -459,30 +459,42 @@ $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;
|
||||
top: $session-margin-lg;
|
||||
right: $session-margin-lg;
|
||||
padding: 3px;
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
background: red;
|
||||
color: $session-color-white;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-count {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: $session-font-family;
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
background: $session-color-danger;
|
||||
color: $session-color-white;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
|
||||
sup {
|
||||
font-size: 130%;
|
||||
margin-top: 1px;
|
||||
margin-left: -1px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.hover {
|
||||
transition: $session-transition-duration;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.session-icon {
|
||||
|
|
|
@ -466,27 +466,6 @@ $session-compose-margin: 20px;
|
|||
}
|
||||
}
|
||||
|
||||
.contact-notification-count-bubble {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $session-color-danger;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: $session-font-xs;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: $session-transition-duration;
|
||||
|
||||
color: $session-color-white;
|
||||
&:hover {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
}
|
||||
|
||||
.left-pane-contact {
|
||||
&-section,
|
||||
&-content {
|
||||
|
|
|
@ -106,26 +106,16 @@ export class ActionsPanel extends React.Component<Props, State> {
|
|||
default:
|
||||
iconType = SessionIconType.Moon;
|
||||
}
|
||||
if (!isSelected) {
|
||||
return (
|
||||
<SessionIconButton
|
||||
iconSize={SessionIconSize.Medium}
|
||||
iconType={iconType}
|
||||
notificationCount={notificationCount}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<SessionIconButton
|
||||
iconSize={SessionIconSize.Medium}
|
||||
iconType={iconType}
|
||||
notificationCount={notificationCount}
|
||||
onClick={handleClick}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SessionIconButton
|
||||
iconSize={SessionIconSize.Medium}
|
||||
iconType={iconType}
|
||||
notificationCount={notificationCount}
|
||||
onClick={handleClick}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
public editProfileHandle() {
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { SessionButton } from './SessionButton';
|
||||
import { SessionNotificationCount } from './SessionNotificationCount';
|
||||
import {
|
||||
NotificationCountSize,
|
||||
SessionNotificationCount,
|
||||
} from './SessionNotificationCount';
|
||||
|
||||
const Tab = ({
|
||||
isSelected,
|
||||
|
@ -100,6 +103,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
|
|||
/>
|
||||
<SessionNotificationCount
|
||||
count={notificationCount}
|
||||
size={NotificationCountSize.ON_HEADER}
|
||||
onClick={this.props.buttonClicked}
|
||||
/>
|
||||
</div>
|
||||
|
@ -108,6 +112,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
|
|||
children.push(
|
||||
<SessionNotificationCount
|
||||
count={notificationCount}
|
||||
size={NotificationCountSize.ON_HEADER}
|
||||
onClick={this.props.buttonClicked}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -1,15 +1,21 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export enum NotificationCountSize {
|
||||
// Size in px
|
||||
ON_ICON = 20,
|
||||
ON_HEADER = 24,
|
||||
}
|
||||
|
||||
interface Props {
|
||||
count?: number;
|
||||
// Size in px
|
||||
size?: number;
|
||||
count: number;
|
||||
size: number;
|
||||
onClick?: any;
|
||||
}
|
||||
|
||||
export class SessionNotificationCount extends React.Component<Props> {
|
||||
public static defaultProps = {
|
||||
size: 20,
|
||||
size: NotificationCountSize.ON_ICON,
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
|
@ -19,11 +25,13 @@ export class SessionNotificationCount extends React.Component<Props> {
|
|||
public render() {
|
||||
const { count, size, onClick } = this.props;
|
||||
|
||||
const hasHover = !!onClick;
|
||||
|
||||
const MAX_SINGLE_DIGIT = 9;
|
||||
const overflow = count > MAX_SINGLE_DIGIT;
|
||||
const countElement: JSX.Element = overflow
|
||||
? <>{MAX_SINGLE_DIGIT}<sup>+</sup></>
|
||||
: <>{count}</>;
|
||||
const overflow = typeof count === 'number' && count > MAX_SINGLE_DIGIT;
|
||||
|
||||
const fontSizeVal = overflow ? size / 2 : size / 2 + 2;
|
||||
const fontSize = `${fontSizeVal}px`;
|
||||
|
||||
const bubbleStyle = {
|
||||
width: `${size}px`,
|
||||
|
@ -31,25 +39,37 @@ export class SessionNotificationCount extends React.Component<Props> {
|
|||
};
|
||||
|
||||
const countStyle = {
|
||||
marginTop: overflow ? '-4px' : '0px',
|
||||
marginLeft: overflow ? '2px' : '0px',
|
||||
fontSize,
|
||||
marginTop: overflow ? `${size / 8}px` : '0px',
|
||||
marginLeft: overflow ? `-${size / 4}px` : '0px',
|
||||
};
|
||||
|
||||
|
||||
const supStyle = {
|
||||
top: `-${size * (3 / 8)}px`,
|
||||
};
|
||||
|
||||
const countElement: JSX.Element = overflow ? (
|
||||
<>
|
||||
{MAX_SINGLE_DIGIT}
|
||||
<sup style={supStyle}>+</sup>
|
||||
</>
|
||||
) : (
|
||||
<>{count}</>
|
||||
);
|
||||
|
||||
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>
|
||||
{shouldRender && (
|
||||
<div
|
||||
className={classNames('notification-count', hasHover && 'hover')}
|
||||
onClick={onClick}
|
||||
style={bubbleStyle}
|
||||
role="button"
|
||||
>
|
||||
<span style={countStyle}>{countElement}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue