make SessioNotificationCount a styled component

pull/1381/head
Audric Ackermann 4 years ago
parent 35fe5d66ce
commit cb2f90f7f7
No known key found for this signature in database
GPG Key ID: 999F434D76324AD4

@ -878,7 +878,9 @@
font-size: 16px;
line-height: 24px;
font-weight: 300;
color: $color-gray-90;
@include themify($themes) {
color: themed('textColor');
}
// width of avatar (28px) and our 6px left margin
max-width: calc(100% - 34px);

@ -281,46 +281,6 @@ textarea {
&.no-opacity {
opacity: 1;
}
.notification-count {
position: absolute;
top: $session-margin-lg;
right: $session-margin-lg;
padding: 3px;
opacity: 1;
}
}
.notification-count {
display: flex;
align-items: center;
justify-content: center;
font-family: $session-font-default;
border-radius: 50%;
font-weight: 700;
background: $session-color-danger;
color: $session-color-white;
text-align: center;
div {
position: relative;
sup {
position: absolute;
font-size: 1.3em;
top: -0.5em;
margin-inline-start: -0.125em;
}
}
&.hover {
transition: $session-transition-duration;
cursor: pointer;
&:hover {
filter: brightness(80%);
}
}
}
/* CONVERSATION AND MESSAGES */
@ -466,6 +426,7 @@ label {
box-sizing: border-box;
max-height: 70vh;
max-width: 70vw;
font-family: $session-font-default;
@include themify($themes) {
background-color: themed('modalBackground');
color: themed('textColor');
@ -484,7 +445,7 @@ label {
padding: $session-margin-lg;
font-family: $session-font-accent;
font-family: $session-font-default;
text-align: center;
line-height: 18px;
font-size: $session-font-md;
@ -522,9 +483,9 @@ label {
&__body {
padding: 0px $session-margin-lg $session-margin-lg $session-margin-lg;
font-family: $session-font-accent;
font-family: $session-font-default;
line-height: $session-font-md;
font-size: $session-font-sm;
font-size: $session-font-md;
overflow-y: auto;
overflow-x: hidden;

@ -65,8 +65,7 @@ export class LeftPane extends React.Component<Props> {
onTabSelected?: any,
buttonLabel?: string,
buttonIcon?: SessionIconType,
buttonClicked?: any,
notificationCount?: number
buttonClicked?: any
): JSX.Element {
return (
<LeftPaneSectionHeader
@ -76,7 +75,6 @@ export class LeftPane extends React.Component<Props> {
buttonLabel={buttonLabel}
buttonIcon={buttonIcon}
buttonClicked={buttonClicked}
notificationCount={notificationCount}
theme={theme}
/>
);

@ -64,7 +64,6 @@ export class LeftPaneContactSection extends React.Component<Props, State> {
null,
undefined,
undefined,
undefined,
undefined
);
}

@ -2,10 +2,6 @@ import React from 'react';
import classNames from 'classnames';
import { SessionButton } from './SessionButton';
import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
import {
NotificationCountSize,
SessionNotificationCount,
} from './SessionNotificationCount';
import { inversedTheme } from '../../state/ducks/SessionTheme';
import { DefaultTheme } from 'styled-components';
@ -44,7 +40,6 @@ interface Props {
onTabSelected: any;
selectedTab: number;
labels: Array<string>;
notificationCount?: number;
buttonLabel?: string;
buttonIcon?: SessionIconType;
buttonClicked?: any;
@ -63,13 +58,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
public render() {
const { selectedTab } = this.state;
const {
labels,
buttonLabel,
buttonIcon,
buttonClicked,
notificationCount,
} = this.props;
const { labels, buttonLabel, buttonIcon, buttonClicked } = this.props;
const hasButton = buttonLabel || buttonIcon;
@ -87,7 +76,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
);
}
if (hasButton && !notificationCount) {
if (hasButton) {
const buttonContent = buttonIcon ? (
<SessionIcon
iconType={buttonIcon}
@ -101,7 +90,6 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
<SessionButton
onClick={buttonClicked}
key="compose"
disabled={false}
theme={inversedTheme(this.props.theme)}
>
{buttonContent}
@ -109,34 +97,7 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
);
children.push(button);
} else if (buttonLabel && notificationCount && notificationCount > 0) {
children.push(
<div className="contact-notification-section">
<SessionButton
text={buttonLabel}
onClick={buttonClicked}
key="compose"
disabled={false}
/>
<SessionNotificationCount
count={notificationCount}
size={NotificationCountSize.ON_HEADER}
onClick={this.props.buttonClicked}
key="notification-count" // we can only have one of those here
/>
</div>
);
} else if (notificationCount && notificationCount > 0) {
children.push(
<SessionNotificationCount
count={notificationCount}
size={NotificationCountSize.ON_HEADER}
onClick={this.props.buttonClicked}
key="notificationCount"
/>
);
}
// Create the parent and add the children
return <div className="module-left-pane__header">{children}</div>;
}

@ -55,7 +55,6 @@ export class LeftPaneSettingSection extends React.Component<Props, State> {
null,
undefined,
undefined,
undefined,
undefined
);
}

@ -1,73 +1,65 @@
import React from 'react';
import classNames from 'classnames';
import styled from 'styled-components';
export enum NotificationCountSize {
// Size in px
ON_ICON = 20,
ON_HEADER = 24,
}
interface Props {
type Props = {
count?: number;
size: number;
onClick?: any;
}
export class SessionNotificationCount extends React.Component<Props> {
public static defaultProps = {
size: NotificationCountSize.ON_ICON,
};
constructor(props: any) {
super(props);
}
public render() {
const { count, size, onClick } = this.props;
};
const hasHover = !!onClick;
const StyledCountContainer = styled.div<{ shouldRender: boolean }>`
position: absolute;
width: 20px;
height: 20px;
font-size: 20px;
top: ${props => props.theme.common.margins.lg};
right: ${props => props.theme.common.margins.lg};
padding: 3px;
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
font-family: ${props => props.theme.common.fonts.sessionFontDefault};
border-radius: 50%;
font-weight: 700;
background: ${props => props.theme.colors.destructive};
transition: ${props => props.theme.common.animations.defaultDuration};
opacity: ${props => (props.shouldRender ? 1 : 0)};
text-align: center;
color: white;
/* cursor: */
`;
const MAX_SINGLE_DIGIT = 9;
const overflow = typeof count === 'number' && count > MAX_SINGLE_DIGIT;
const StyledCount = styled.div<{ overflow: boolean }>`
position: relative;
font-size: ${props => (props.overflow ? '0.5em' : '0.6em')};
margin-top: ${props => (props.overflow ? '0.35em' : '0em')};
margin-left: ${props => (props.overflow ? '-0.45em' : '0em')};
`;
const bubbleStyle = {
width: `${size}px`,
height: `${size}px`,
fontSize: `${size}px`,
};
const fontSize = overflow ? '0.5em' : '0.6em';
const countStyle = {
fontSize,
marginTop: overflow ? '0.35em' : '0em',
marginLeft: overflow ? '-0.45em' : '0em',
};
const countElement: JSX.Element = overflow ? (
<>
{MAX_SINGLE_DIGIT}
<sup>+</sup>
</>
) : (
<>{count}</>
);
const StyledCountSup = styled.div`
position: absolute;
font-size: 1.3em;
top: -0.5em;
margin-inline-start: 0.375em;
`;
const shouldRender = typeof count === 'number' && count > 0;
export const SessionNotificationCount = (props: Props) => {
const { count } = props;
const overflow = Boolean(count && count > 9);
const shouldRender = Boolean(count && count > 0);
if (overflow) {
return (
<>
{shouldRender && (
<div
className={classNames('notification-count', hasHover && 'hover')}
onClick={onClick}
style={bubbleStyle}
role="button"
>
<div style={countStyle}>{countElement}</div>
</div>
)}
</>
<StyledCountContainer shouldRender={shouldRender}>
<StyledCount overflow={overflow}>
{9}
<StyledCountSup>+</StyledCountSup>
</StyledCount>
</StyledCountContainer>
);
}
}
return (
<StyledCountContainer shouldRender={shouldRender}>
<StyledCount overflow={overflow}>{count}</StyledCount>
</StyledCountContainer>
);
};

Loading…
Cancel
Save