Merge pull request #1022 from vincentbavitz/notifications-icon-numeration

Notifications icon numeration

_locales/en/messages.json

@@ -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": {

stylesheets/_session.scss

@@ -460,22 +460,43 @@ $session_message-container-border-radius: 5px;
 
   .notification-count {
     position: absolute;
-    font-size: $session-font-xs;
-    font-family: $session-font-family;
-    top: 20px;
-    right: 20px;
-    width: 20px;
-    height: 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%;
+      position: absolute;
+    }
+  }
+
+  &.hover {
+    transition: $session-transition-duration;
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(80%);
+    }
+  }
+}
+
 .session-icon {
   fill: $session-color-white;
 }

stylesheets/_session_left_pane.scss

@@ -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 {

ts/components/session/ActionsPanel.tsx

@@ -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() {

ts/components/session/LeftPaneSectionHeader.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
 import { SessionButton } from './SessionButton';
+import {
+  NotificationCountSize,
+  SessionNotificationCount,
+} from './SessionNotificationCount';
 
 const Tab = ({
   isSelected,
@@ -89,8 +93,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 +101,20 @@ export class LeftPaneSectionHeader extends React.Component<Props, State> {
             key="compose"
             disabled={false}
           />
-          <div
-            className="contact-notification-count-bubble"
+          <SessionNotificationCount
+            count={notificationCount}
+            size={NotificationCountSize.ON_HEADER}
             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}
+          size={NotificationCountSize.ON_HEADER}
           onClick={this.props.buttonClicked}
-          role="button"
-        >
-          {shortenedNotificationCount}
-        </div>
+        />
       );
     }
 

ts/components/session/SessionNotificationCount.tsx

@@ -0,0 +1,77 @@
+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: 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 MAX_SINGLE_DIGIT = 9;
+    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`,
+      height: `${size}px`,
+    };
+
+    const countStyle = {
+      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={classNames('notification-count', hasHover && 'hover')}
+            onClick={onClick}
+            style={bubbleStyle}
+            role="button"
+          >
+            <span style={countStyle}>{countElement}</span>
+          </div>
+        )}
+      </>
+    );
+  }
+}

ts/components/session/icon/SessionIconButton.tsx

@@ -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,7 @@ export class SessionIconButton extends React.PureComponent<SProps> {
           iconColor={iconColor}
           iconRotation={iconRotation}
         />
-        {notificationCount !== undefined && (
-          <span className="notification-count">{notificationCount}</span>
-        )}
+        <SessionNotificationCount count={notificationCount} />
       </div>
     );
   }