From 581b841098c6f62f0c3d1d3d6153d121f6839636 Mon Sep 17 00:00:00 2001 From: Josh Perez <60019601+josh-signal@users.noreply.github.com> Date: Wed, 20 Jul 2022 19:06:15 -0400 Subject: [PATCH] Add unread count to the stories badge --- stylesheets/_modules.scss | 23 ++++- ts/components/MainHeader.stories.tsx | 136 +++++++++++++++------------ ts/components/MainHeader.tsx | 10 +- ts/state/selectors/stories.ts | 8 ++ ts/state/smart/MainHeader.tsx | 2 + 5 files changed, 116 insertions(+), 63 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 755881742..6b226dcd2 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -2614,6 +2614,24 @@ button.ConversationDetails__action-button { } } + &__stories-badge { + @include rounded-corners; + align-items: center; + background-color: $color-accent-red; + color: $color-white; + display: flex; + height: 16px; + justify-content: center; + min-width: 16px; + overflow: hidden; + padding: 0 2px; + position: absolute; + right: -6px; + top: -6px; + user-select: none; + z-index: $z-index-base; + } + &__stories-icon { -webkit-app-region: no-drag; align-items: center; @@ -2623,9 +2641,10 @@ button.ConversationDetails__action-button { display: inline-flex; height: 32px; justify-content: center; - padding: 2px; - width: 32px; margin-right: 20px; + padding: 2px; + position: relative; + width: 32px; .module-left-pane--width-narrow & { display: none; diff --git a/ts/components/MainHeader.stories.tsx b/ts/components/MainHeader.stories.tsx index 8a234a80f..ce2a25128 100644 --- a/ts/components/MainHeader.stories.tsx +++ b/ts/components/MainHeader.stories.tsx @@ -1,77 +1,93 @@ // Copyright 2021-2022 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only -import * as React from 'react'; -import { text } from '@storybook/addon-knobs'; -import { action } from '@storybook/addon-actions'; +import type { Meta, Story } from '@storybook/react'; +import React from 'react'; -import { setupI18n } from '../util/setupI18n'; -import enMessages from '../../_locales/en/messages.json'; import type { PropsType } from './MainHeader'; +import enMessages from '../../_locales/en/messages.json'; import { MainHeader } from './MainHeader'; import { ThemeType } from '../types/Util'; +import { setupI18n } from '../util/setupI18n'; +import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation'; const i18n = setupI18n('en', enMessages); export default { title: 'Components/MainHeader', + component: MainHeader, + argTypes: { + areStoriesEnabled: { + defaultValue: false, + }, + avatarPath: { + defaultValue: undefined, + }, + hasPendingUpdate: { + defaultValue: false, + }, + i18n: { + defaultValue: i18n, + }, + name: { + defaultValue: undefined, + }, + phoneNumber: { + defaultValue: undefined, + }, + showArchivedConversations: { action: true }, + startComposing: { action: true }, + startUpdate: { action: true }, + theme: { + defaultValue: ThemeType.light, + }, + title: { + defaultValue: '', + }, + toggleProfileEditor: { action: true }, + toggleStoriesView: { action: true }, + unreadStoriesCount: { + defaultValue: 0, + }, + }, +} as Meta; + +const Template: Story = args => ; + +export const Basic = Template.bind({}); +Basic.args = {}; + +export const Name = Template.bind({}); +{ + const { name, title } = getDefaultConversation(); + Name.args = { + name, + title, + }; +} + +export const PhoneNumber = Template.bind({}); +{ + const { name, e164: phoneNumber } = getDefaultConversation(); + PhoneNumber.args = { + name, + phoneNumber, + }; +} + +export const UpdateAvailable = Template.bind({}); +UpdateAvailable.args = { + hasPendingUpdate: true, }; -const requiredText = (name: string, value: string | undefined) => - text(name, value || ''); -const optionalText = (name: string, value: string | undefined) => - text(name, value || '') || undefined; - -const createProps = (overrideProps: Partial = {}): PropsType => ({ - areStoriesEnabled: false, - theme: ThemeType.light, - - phoneNumber: optionalText('phoneNumber', overrideProps.phoneNumber), - title: requiredText('title', overrideProps.title), - name: optionalText('name', overrideProps.name), - avatarPath: optionalText('avatarPath', overrideProps.avatarPath), - hasPendingUpdate: Boolean(overrideProps.hasPendingUpdate), - - i18n, - - startUpdate: action('startUpdate'), - - showArchivedConversations: action('showArchivedConversations'), - startComposing: action('startComposing'), - toggleProfileEditor: action('toggleProfileEditor'), - toggleStoriesView: action('toggleStoriesView'), -}); - -export const Basic = (): JSX.Element => { - const props = createProps({}); - - return ; +export const Stories = Template.bind({}); +Stories.args = { + areStoriesEnabled: true, + unreadStoriesCount: 6, }; -export const Name = (): JSX.Element => { - const props = createProps({ - name: 'John Smith', - title: 'John Smith', - }); - - return ; +export const StoriesOverflow = Template.bind({}); +StoriesOverflow.args = { + areStoriesEnabled: true, + unreadStoriesCount: 69, }; - -export const PhoneNumber = (): JSX.Element => { - const props = createProps({ - name: 'John Smith', - phoneNumber: '+15553004000', - }); - - return ; -}; - -export const UpdateAvailable = (): JSX.Element => { - const props = createProps({ hasPendingUpdate: true }); - - return ; -}; - -export const Stories = (): JSX.Element => ( - -); diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx index 69f0ce7a0..bf1563b21 100644 --- a/ts/components/MainHeader.tsx +++ b/ts/components/MainHeader.tsx @@ -26,6 +26,7 @@ export type PropsType = { profileName?: string; theme: ThemeType; title: string; + unreadStoriesCount: number; showArchivedConversations: () => void; startComposing: () => void; @@ -132,6 +133,7 @@ export class MainHeader extends React.Component { title, toggleProfileEditor, toggleStoriesView, + unreadStoriesCount, } = this.props; const { showingAvatarPopup, popperRoot } = this.state; @@ -222,7 +224,13 @@ export class MainHeader extends React.Component { onClick={toggleStoriesView} title={i18n('stories')} type="button" - /> + > + {unreadStoriesCount ? ( + + {unreadStoriesCount} + + ) : undefined} + )}