From 85c9576b459037ff6526e3c04d1186169d754fb4 Mon Sep 17 00:00:00 2001 From: Vincent Date: Mon, 30 Mar 2020 07:38:43 +1100 Subject: [PATCH] fractional centering --- _locales/en/messages.json | 2 +- stylesheets/_session.scss | 42 +++++++----- stylesheets/_session_left_pane.scss | 21 ------ ts/components/session/ActionsPanel.tsx | 30 +++------ .../session/LeftPaneSectionHeader.tsx | 7 +- .../session/SessionNotificationCount.tsx | 64 ++++++++++++------- 6 files changed, 86 insertions(+), 80 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index bacb6883e..d8fb923c3 100644 --- a/_locales/en/messages.json +++ b/_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": { diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index f08493b74..69418530a 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -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 { diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss index b7a402f01..851a4f5d6 100644 --- a/stylesheets/_session_left_pane.scss +++ b/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 { diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index add26cefd..2f8f9c10d 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -106,26 +106,16 @@ export class ActionsPanel extends React.Component { default: iconType = SessionIconType.Moon; } - if (!isSelected) { - return ( - - ); - } else { - return ( - - ); - } + + return ( + + ); }; public editProfileHandle() { diff --git a/ts/components/session/LeftPaneSectionHeader.tsx b/ts/components/session/LeftPaneSectionHeader.tsx index 64fb33cc5..6a8d60bd6 100644 --- a/ts/components/session/LeftPaneSectionHeader.tsx +++ b/ts/components/session/LeftPaneSectionHeader.tsx @@ -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 { /> @@ -108,6 +112,7 @@ export class LeftPaneSectionHeader extends React.Component { children.push( ); diff --git a/ts/components/session/SessionNotificationCount.tsx b/ts/components/session/SessionNotificationCount.tsx index 7547ae24b..e23540daa 100644 --- a/ts/components/session/SessionNotificationCount.tsx +++ b/ts/components/session/SessionNotificationCount.tsx @@ -1,15 +1,21 @@ import React from 'react'; +import classNames from 'classnames'; -interface Props { - count?: number; +export enum NotificationCountSize { // Size in px - size?: number; + ON_ICON = 20, + ON_HEADER = 24, +} + +interface Props { + count: number; + size: number; onClick?: any; } export class SessionNotificationCount extends React.Component { public static defaultProps = { - size: 20, + size: NotificationCountSize.ON_ICON, }; constructor(props: any) { @@ -19,11 +25,13 @@ export class SessionNotificationCount extends React.Component { 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}+ - : <>{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 { }; 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} + + + + ) : ( + <>{count} + ); + const shouldRender = typeof count === 'number' && count > 0; return ( <> - {shouldRender && ( -
- - {countElement} - -
+ {shouldRender && ( +
+ {countElement} +
)} );