Styling adjustments to timeline notifications
This commit is contained in:
Evan Hahn
GitHub
parent
4bed918cf8
commit
7f34bedd87
|
|
@ -2060,7 +2060,6 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
|
||||
.module-inline-notification-wrapper {
|
||||
outline: none;
|
||||
padding: 5px;
|
||||
|
||||
&:focus {
|
||||
@include keyboard-mode {
|
||||
|
|
@ -2074,11 +2073,6 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
|
|||
|
||||
// Module: Group Notification
|
||||
|
||||
.module-group-notification__change {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.module-group-notification__contact {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,6 +160,14 @@
|
|||
&--system-message {
|
||||
@include rounded-corners;
|
||||
|
||||
&.module-Button--small {
|
||||
padding: {
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@include light-theme {
|
||||
$color: $color-ultramarine;
|
||||
$background-color: $color-gray-02;
|
||||
|
|
|
|||
|
|
@ -16,245 +16,259 @@
|
|||
@include font-body-2;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 16px;
|
||||
|
||||
@include light-theme {
|
||||
color: $color-black;
|
||||
color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
|
||||
&--multiline {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__line {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
&__contents {
|
||||
max-width: 400px;
|
||||
}
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
||||
&__icon {
|
||||
height: 16px;
|
||||
flex: 0 0 16px;
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
vertical-align: middle;
|
||||
p {
|
||||
display: block;
|
||||
margin: {
|
||||
block: {
|
||||
start: 0;
|
||||
end: 4px;
|
||||
}
|
||||
inline: {
|
||||
start: 0;
|
||||
end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-black;
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-25;
|
||||
&:first-child {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--audio-incoming {
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
width: 16px;
|
||||
vertical-align: middle;
|
||||
|
||||
@include light-theme {
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
@include dark-theme {
|
||||
background-color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
|
||||
&--icon-audio-incoming::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/phone-incoming-16.svg',
|
||||
'../images/icons/v2/phone-incoming-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--audio-missed {
|
||||
&--icon-audio-missed::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/phone-x-16.svg',
|
||||
'../images/icons/v2/phone-x-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--audio-outgoing {
|
||||
&--icon-audio-outgoing::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/phone-outgoing-16.svg',
|
||||
'../images/icons/v2/phone-outgoing-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group {
|
||||
&--icon-group::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/group-outline-24.svg',
|
||||
'../images/icons/v2/group-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-access {
|
||||
&--icon-group-access::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/megaphone-16.svg',
|
||||
'../images/icons/v2/megaphone-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-add {
|
||||
&--icon-group-add::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/member-added-16.svg',
|
||||
'../images/icons/v2/member-added-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-approved {
|
||||
&--icon-group-approved::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/member-accepted-16.svg',
|
||||
'../images/icons/v2/member-accepted-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-avatar {
|
||||
&--icon-group-avatar::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/photo-16.svg',
|
||||
'../images/icons/v2/photo-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-decline {
|
||||
&--icon-group-decline::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/member-declined-16.svg',
|
||||
'../images/icons/v2/member-declined-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-edit {
|
||||
&--icon-group-edit::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/edit-16.svg',
|
||||
'../images/icons/v2/edit-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-leave {
|
||||
&--icon-group-leave::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/leave-16.svg',
|
||||
'../images/icons/v2/leave-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--group-remove {
|
||||
&--icon-group-remove::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/member-remove-16.svg',
|
||||
'../images/icons/v2/member-remove-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--info {
|
||||
&--icon-info::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/info-16.svg',
|
||||
'../images/icons/v2/info-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--phone {
|
||||
&--icon-phone::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/phone-right-outline-24.svg',
|
||||
'../images/icons/v2/phone-right-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--profile {
|
||||
&--icon-profile::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/profile-outline-20.svg',
|
||||
'../images/icons/v2/profile-outline-20.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--safety-number {
|
||||
&--icon-safety-number::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/safety-number-outline-24.svg',
|
||||
'../images/icons/v2/safety-number-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--session-refresh {
|
||||
&--icon-session-refresh::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/refresh-16.svg',
|
||||
'../images/icons/v2/refresh-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--timer {
|
||||
&--icon-timer::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/timer-outline-24.svg',
|
||||
'../images/icons/v2/timer-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--timer-disabled {
|
||||
&--icon-timer-disabled::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/timer-disabled-outline-24.svg',
|
||||
'../images/icons/v2/timer-disabled-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--unsupported {
|
||||
&--icon-unsupported::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/error-outline-24.svg',
|
||||
'../images/icons/v2/error-solid-24.svg'
|
||||
);
|
||||
|
||||
&--can-process {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/check-circle-outline-24.svg',
|
||||
'../images/icons/v2/check-circle-solid-24.svg'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
&--unsynced {
|
||||
&--icon-unsupported--can-process::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/check-circle-outline-24.svg',
|
||||
'../images/icons/v2/check-circle-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--icon-unsynced::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/info-outline-24.svg',
|
||||
'../images/icons/v2/info-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--verified {
|
||||
&--icon-verified::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/check-24.svg',
|
||||
'../images/icons/v2/check-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--verified-not {
|
||||
&--icon-verified-not::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/safety-number-outline-24.svg',
|
||||
'../images/icons/v2/safety-number-solid-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--video {
|
||||
&--icon-video::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/video-outline-24.svg',
|
||||
'../images/icons/v2/video-outline-24.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--video-incoming {
|
||||
&--icon-video-incoming::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/video-incoming-16.svg',
|
||||
'../images/icons/v2/video-incoming-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--video-missed {
|
||||
&--icon-video-missed::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/video-x-16.svg',
|
||||
'../images/icons/v2/video-x-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--video-outgoing {
|
||||
&--icon-video-outgoing::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/video-outgoing-16.svg',
|
||||
'../images/icons/v2/video-outgoing-solid-16.svg'
|
||||
);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
&--icon-warning::before {
|
||||
@include system-message-icon(
|
||||
'../images/icons/v2/error-outline-12.svg',
|
||||
'../images/icons/v2/error-outline-12.svg'
|
||||
|
|
@ -265,13 +279,12 @@
|
|||
&--error {
|
||||
color: $color-accent-red;
|
||||
|
||||
.SystemMessage__icon {
|
||||
.SystemMessage__contents::before {
|
||||
background: $color-accent-red;
|
||||
}
|
||||
}
|
||||
|
||||
img.emoji {
|
||||
// The negative bottom margin offset doesn't play well with align-items center
|
||||
margin-bottom: 0;
|
||||
&__button-container {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Measure from 'react-measure';
|
||||
import { noop } from 'lodash';
|
||||
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { Button, ButtonSize, ButtonVariant } from '../Button';
|
||||
import { Timestamp } from './Timestamp';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
|
|
@ -86,17 +86,12 @@ export const CallingNotification: React.FC<PropsType> = React.memo(props => {
|
|||
}}
|
||||
>
|
||||
{({ measureRef }) => (
|
||||
<div
|
||||
className={classNames('SystemMessage', 'SystemMessage--multiline', {
|
||||
'SystemMessage--error': wasMissed,
|
||||
})}
|
||||
ref={measureRef}
|
||||
>
|
||||
<div className="SystemMessage__line">
|
||||
<div
|
||||
className={`SystemMessage__icon SystemMessage__icon--${icon}`}
|
||||
/>
|
||||
<div>
|
||||
<SystemMessage
|
||||
button={
|
||||
hasButton ? <CallingNotificationButton {...props} /> : undefined
|
||||
}
|
||||
contents={
|
||||
<>
|
||||
{getCallingNotificationText(props, i18n)} ·{' '}
|
||||
<Timestamp
|
||||
direction="outgoing"
|
||||
|
|
@ -107,14 +102,12 @@ export const CallingNotification: React.FC<PropsType> = React.memo(props => {
|
|||
withSticker={false}
|
||||
withTapToViewExpired={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{hasButton ? (
|
||||
<div className="SystemMessage__line">
|
||||
<CallingNotificationButton {...props} />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
icon={icon}
|
||||
isError={wasMissed}
|
||||
ref={measureRef}
|
||||
/>
|
||||
)}
|
||||
</Measure>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
|
||||
|
||||
import { ChangeNumberNotification } from './ChangeNumberNotification';
|
||||
|
||||
const story = storiesOf(
|
||||
'Components/Conversation/ChangeNumberNotification',
|
||||
module
|
||||
);
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
story.add('Default', () => (
|
||||
<ChangeNumberNotification
|
||||
sender={getDefaultConversation()}
|
||||
timestamp={1618894800000}
|
||||
i18n={i18n}
|
||||
/>
|
||||
));
|
||||
|
||||
story.add('Long name', () => (
|
||||
<ChangeNumberNotification
|
||||
sender={getDefaultConversation({
|
||||
firstName: '💅😇🖋'.repeat(50),
|
||||
})}
|
||||
timestamp={1618894800000}
|
||||
i18n={i18n}
|
||||
/>
|
||||
));
|
||||
|
|
@ -7,6 +7,7 @@ import { ConversationType } from '../../state/ducks/conversations';
|
|||
import { LocalizerType } from '../../types/Util';
|
||||
import { Intl } from '../Intl';
|
||||
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { Timestamp } from './Timestamp';
|
||||
import { Emojify } from './Emojify';
|
||||
|
||||
|
|
@ -25,17 +26,21 @@ export const ChangeNumberNotification: React.FC<Props> = props => {
|
|||
const { i18n, sender, timestamp } = props;
|
||||
|
||||
return (
|
||||
<div className="SystemMessage">
|
||||
<span className="SystemMessage__icon SystemMessage__icon--phone" />
|
||||
<Intl
|
||||
id="ChangeNumber--notification"
|
||||
components={{
|
||||
sender: <Emojify text={sender.firstName || sender.title} />,
|
||||
}}
|
||||
i18n={i18n}
|
||||
/>
|
||||
·
|
||||
<Timestamp i18n={i18n} timestamp={timestamp} />
|
||||
</div>
|
||||
<SystemMessage
|
||||
contents={
|
||||
<>
|
||||
<Intl
|
||||
id="ChangeNumber--notification"
|
||||
components={{
|
||||
sender: <Emojify text={sender.firstName || sender.title} />,
|
||||
}}
|
||||
i18n={i18n}
|
||||
/>
|
||||
·
|
||||
<Timestamp i18n={i18n} timestamp={timestamp} />
|
||||
</>
|
||||
}
|
||||
icon="phone"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import React, { useCallback, useState, ReactElement } from 'react';
|
|||
import { LocalizerType } from '../../types/Util';
|
||||
|
||||
import { Button, ButtonSize, ButtonVariant } from '../Button';
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { ChatSessionRefreshedDialog } from './ChatSessionRefreshedDialog';
|
||||
|
||||
type PropsHousekeepingType = {
|
||||
|
|
@ -37,20 +38,20 @@ export function ChatSessionRefreshedNotification(
|
|||
}, [contactSupport, setIsDialogOpen]);
|
||||
|
||||
return (
|
||||
<div className="SystemMessage SystemMessage--multiline">
|
||||
<div className="SystemMessage__line">
|
||||
<span className="SystemMessage__icon SystemMessage__icon--session-refresh" />
|
||||
{i18n('ChatRefresh--notification')}
|
||||
</div>
|
||||
<div className="SystemMessage__line">
|
||||
<Button
|
||||
onClick={openDialog}
|
||||
size={ButtonSize.Small}
|
||||
variant={ButtonVariant.SystemMessage}
|
||||
>
|
||||
{i18n('ChatRefresh--learnMore')}
|
||||
</Button>
|
||||
</div>
|
||||
<>
|
||||
<SystemMessage
|
||||
contents={i18n('ChatRefresh--notification')}
|
||||
button={
|
||||
<Button
|
||||
onClick={openDialog}
|
||||
size={ButtonSize.Small}
|
||||
variant={ButtonVariant.SystemMessage}
|
||||
>
|
||||
{i18n('ChatRefresh--learnMore')}
|
||||
</Button>
|
||||
}
|
||||
icon="session-refresh"
|
||||
/>
|
||||
{isDialogOpen ? (
|
||||
<ChatSessionRefreshedDialog
|
||||
onClose={closeDialog}
|
||||
|
|
@ -58,6 +59,6 @@ export function ChatSessionRefreshedNotification(
|
|||
i18n={i18n}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import React, { useCallback, useState, ReactElement } from 'react';
|
||||
|
||||
import { Button, ButtonSize, ButtonVariant } from '../Button';
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { ConversationType } from '../../state/ducks/conversations';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import { Intl } from '../Intl';
|
||||
|
|
@ -46,10 +47,9 @@ export function DeliveryIssueNotification(
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="SystemMessage SystemMessage--multiline">
|
||||
<div className="SystemMessage__line">
|
||||
<span className="SystemMessage__icon SystemMessage__icon--info" />
|
||||
<span>
|
||||
<>
|
||||
<SystemMessage
|
||||
contents={
|
||||
<Intl
|
||||
id="DeliveryIssue--notification"
|
||||
components={{
|
||||
|
|
@ -57,17 +57,18 @@ export function DeliveryIssueNotification(
|
|||
}}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="SystemMessage__line">
|
||||
<Button
|
||||
onClick={openDialog}
|
||||
size={ButtonSize.Small}
|
||||
variant={ButtonVariant.SystemMessage}
|
||||
>
|
||||
{i18n('DeliveryIssue--learnMore')}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
icon="info"
|
||||
button={
|
||||
<Button
|
||||
onClick={openDialog}
|
||||
size={ButtonSize.Small}
|
||||
variant={ButtonVariant.SystemMessage}
|
||||
>
|
||||
{i18n('DeliveryIssue--learnMore')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{isDialogOpen ? (
|
||||
<DeliveryIssueDialog
|
||||
i18n={i18n}
|
||||
|
|
@ -77,6 +78,6 @@ export function DeliveryIssueNotification(
|
|||
onClose={closeDialog}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
// Copyright 2018-2020 Signal Messenger, LLC
|
||||
// Copyright 2018-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { compact, flatten } from 'lodash';
|
||||
|
||||
import { ContactName } from './ContactName';
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { Intl } from '../Intl';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
|
||||
|
|
@ -133,12 +134,15 @@ export class GroupNotification extends React.Component<Props> {
|
|||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
const { changes, i18n, from } = this.props;
|
||||
const { changes: rawChanges, i18n, from } = this.props;
|
||||
|
||||
// This check is just to be extra careful, and can probably be removed.
|
||||
const changes: Array<Change> = Array.isArray(rawChanges) ? rawChanges : [];
|
||||
|
||||
// Leave messages are always from the person leaving, so we omit the fromLabel if
|
||||
// the change is a 'leave.'
|
||||
const isLeftOnly =
|
||||
changes && changes.length === 1 && changes[0].type === 'remove';
|
||||
const firstChange: undefined | Change = changes[0];
|
||||
const isLeftOnly = changes.length === 1 && firstChange?.type === 'remove';
|
||||
|
||||
const fromContact = (
|
||||
<ContactName
|
||||
|
|
@ -156,23 +160,23 @@ export class GroupNotification extends React.Component<Props> {
|
|||
<Intl i18n={i18n} id="updatedTheGroup" components={[fromContact]} />
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="SystemMessage">
|
||||
<div>
|
||||
{isLeftOnly ? null : (
|
||||
<>
|
||||
{fromLabel}
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
{(changes || []).map((change, i) => (
|
||||
let contents: ReactNode;
|
||||
if (isLeftOnly) {
|
||||
contents = this.renderChange(firstChange, from);
|
||||
} else {
|
||||
contents = (
|
||||
<>
|
||||
<p>{fromLabel}</p>
|
||||
{changes.map((change, i) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<div key={i} className="module-group-notification__change">
|
||||
<p key={i} className="module-group-notification__change">
|
||||
{this.renderChange(change, from)}
|
||||
</div>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return <SystemMessage contents={contents} icon="group" />;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// Copyright 2020-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import { Button, ButtonSize, ButtonVariant } from '../Button';
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import { ConversationType } from '../../state/ducks/conversations';
|
||||
import { Intl } from '../Intl';
|
||||
|
|
@ -35,40 +36,42 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
|
|||
}, [setShowingDialog]);
|
||||
|
||||
return (
|
||||
<div className="SystemMessage SystemMessage--multiline">
|
||||
<div className="SystemMessage__line">
|
||||
<div className="SystemMessage__icon SystemMessage__icon--group" />
|
||||
<div>
|
||||
<div>{i18n('GroupV1--Migration--was-upgraded')}</div>
|
||||
<div>
|
||||
{areWeInvited ? (
|
||||
i18n('GroupV1--Migration--invited--you')
|
||||
) : (
|
||||
<>
|
||||
{renderUsers(
|
||||
invitedMembers,
|
||||
i18n,
|
||||
'GroupV1--Migration--invited'
|
||||
)}
|
||||
{renderUsers(
|
||||
droppedMembers,
|
||||
i18n,
|
||||
'GroupV1--Migration--removed'
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="SystemMessage__line">
|
||||
<Button
|
||||
onClick={showDialog}
|
||||
size={ButtonSize.Small}
|
||||
variant={ButtonVariant.SystemMessage}
|
||||
>
|
||||
{i18n('GroupV1--Migration--learn-more')}
|
||||
</Button>
|
||||
</div>
|
||||
<>
|
||||
<SystemMessage
|
||||
icon="group"
|
||||
contents={
|
||||
<>
|
||||
<p>{i18n('GroupV1--Migration--was-upgraded')}</p>
|
||||
<p>
|
||||
{areWeInvited ? (
|
||||
i18n('GroupV1--Migration--invited--you')
|
||||
) : (
|
||||
<>
|
||||
{renderUsers(
|
||||
invitedMembers,
|
||||
i18n,
|
||||
'GroupV1--Migration--invited'
|
||||
)}
|
||||
{renderUsers(
|
||||
droppedMembers,
|
||||
i18n,
|
||||
'GroupV1--Migration--removed'
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
button={
|
||||
<Button
|
||||
onClick={showDialog}
|
||||
size={ButtonSize.Small}
|
||||
variant={ButtonVariant.SystemMessage}
|
||||
>
|
||||
{i18n('GroupV1--Migration--learn-more')}
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{showingDialog ? (
|
||||
<GroupV1MigrationDialog
|
||||
areWeInvited={areWeInvited}
|
||||
|
|
@ -82,7 +85,7 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
|
|||
onClose={dismissDialog}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -95,23 +98,17 @@ function renderUsers(
|
|||
return null;
|
||||
}
|
||||
|
||||
const className = 'module-group-v1-migration--text';
|
||||
|
||||
if (members.length === 1) {
|
||||
return (
|
||||
<div className={className}>
|
||||
<p>
|
||||
<Intl
|
||||
i18n={i18n}
|
||||
id={`${keyPrefix}--one`}
|
||||
components={[<ContactName title={members[0].title} i18n={i18n} />]}
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{i18n(`${keyPrefix}--many`, [members.length.toString()])}
|
||||
</div>
|
||||
);
|
||||
return <p>{i18n(`${keyPrefix}--many`, [members.length.toString()])}</p>;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { ReactElement, useState } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { get } from 'lodash';
|
||||
|
||||
import { ReplacementValuesType } from '../../types/I18N';
|
||||
|
|
@ -10,6 +9,7 @@ import { FullJSXType, Intl } from '../Intl';
|
|||
import { LocalizerType } from '../../types/Util';
|
||||
import { GroupDescriptionText } from '../GroupDescriptionText';
|
||||
import { Button, ButtonSize, ButtonVariant } from '../Button';
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
|
||||
import { GroupV2ChangeType, GroupV2ChangeDetailType } from '../../groups';
|
||||
|
||||
|
|
@ -110,17 +110,11 @@ function GroupV2Detail({
|
|||
detail.type === 'description' && get(detail, 'description');
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('SystemMessage', {
|
||||
'SystemMessage--multiline': Boolean(newGroupDescription),
|
||||
})}
|
||||
>
|
||||
<div className="SystemMessage__line">
|
||||
<div className={`SystemMessage__icon SystemMessage__icon--${icon}`} />
|
||||
<div className="SystemMessage__text">{text}</div>
|
||||
</div>
|
||||
{newGroupDescription ? (
|
||||
<div className="SystemMessage__line">
|
||||
<SystemMessage
|
||||
icon={icon}
|
||||
contents={text}
|
||||
button={
|
||||
newGroupDescription ? (
|
||||
<Button
|
||||
onClick={() => onButtonClick(newGroupDescription)}
|
||||
size={ButtonSize.Small}
|
||||
|
|
@ -128,9 +122,9 @@ function GroupV2Detail({
|
|||
>
|
||||
{i18n('view')}
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import { setup as setupI18n } from '../../../js/modules/i18n';
|
||||
import enMessages from '../../../_locales/en/messages.json';
|
||||
|
||||
import { LinkNotification } from './LinkNotification';
|
||||
|
||||
const story = storiesOf('Components/Conversation/LinkNotification', module);
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
story.add('Default', () => <LinkNotification i18n={i18n} />);
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
|
||||
export const LinkNotification = ({
|
||||
i18n,
|
||||
}: Readonly<{ i18n: LocalizerType }>): JSX.Element => (
|
||||
<SystemMessage icon="unsynced" contents={i18n('messageHistoryUnsynced')} />
|
||||
);
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// Copyright 2020-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import { ConversationType } from '../../state/ducks/conversations';
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { Emojify } from './Emojify';
|
||||
import {
|
||||
getStringForProfileChange,
|
||||
|
|
@ -21,12 +22,5 @@ export function ProfileChangeNotification(props: PropsType): JSX.Element {
|
|||
const { change, changedContact, i18n } = props;
|
||||
const message = getStringForProfileChange(change, changedContact, i18n);
|
||||
|
||||
return (
|
||||
<div className="SystemMessage">
|
||||
<div className="SystemMessage__icon SystemMessage__icon--profile" />
|
||||
<span>
|
||||
<Emojify text={message} />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
return <SystemMessage icon="profile" contents={<Emojify text={message} />} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
// Copyright 2018-2020 Signal Messenger, LLC
|
||||
// Copyright 2018-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
|
||||
export type Props = {
|
||||
i18n: LocalizerType;
|
||||
};
|
||||
|
||||
export const ResetSessionNotification = ({ i18n }: Props): JSX.Element => (
|
||||
<div className="SystemMessage">{i18n('sessionEnded')}</div>
|
||||
<SystemMessage contents={i18n('sessionEnded')} icon="session-refresh" />
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
// Copyright 2018-2020 Signal Messenger, LLC
|
||||
// Copyright 2018-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { Button, ButtonSize, ButtonVariant } from '../Button';
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { ContactName } from './ContactName';
|
||||
import { Intl } from '../Intl';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
|
|
@ -42,32 +43,30 @@ export const SafetyNumberNotification = ({
|
|||
: 'safetyNumberChanged';
|
||||
|
||||
return (
|
||||
<div className="SystemMessage SystemMessage--multiline">
|
||||
<div className="SystemMessage__line">
|
||||
<div className="SystemMessage__icon SystemMessage__icon--safety-number" />
|
||||
<span>
|
||||
<Intl
|
||||
id={changeKey}
|
||||
components={[
|
||||
<span
|
||||
key="external-1"
|
||||
className="module-safety-number-notification__contact"
|
||||
>
|
||||
<ContactName
|
||||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
title={contact.title}
|
||||
module="module-safety-number-notification__contact"
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>,
|
||||
]}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="SystemMessage__line">
|
||||
<SystemMessage
|
||||
icon="safety-number"
|
||||
contents={
|
||||
<Intl
|
||||
id={changeKey}
|
||||
components={[
|
||||
<span
|
||||
key="external-1"
|
||||
className="module-safety-number-notification__contact"
|
||||
>
|
||||
<ContactName
|
||||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
title={contact.title}
|
||||
module="module-safety-number-notification__contact"
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>,
|
||||
]}
|
||||
i18n={i18n}
|
||||
/>
|
||||
}
|
||||
button={
|
||||
<Button
|
||||
onClick={() => {
|
||||
showIdentity(contact.id);
|
||||
|
|
@ -77,7 +76,7 @@ export const SafetyNumberNotification = ({
|
|||
>
|
||||
{i18n('verifyNewNumber')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { ReactNode, forwardRef } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
type PropsType = {
|
||||
icon: string;
|
||||
contents: ReactNode;
|
||||
button?: ReactNode;
|
||||
isError?: boolean;
|
||||
};
|
||||
|
||||
export const SystemMessage = forwardRef<HTMLDivElement, PropsType>(
|
||||
({ icon, contents, button, isError }, ref) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'SystemMessage',
|
||||
isError && 'SystemMessage--error'
|
||||
)}
|
||||
ref={ref}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
'SystemMessage__contents',
|
||||
`SystemMessage__contents--icon-${icon}`
|
||||
)}
|
||||
>
|
||||
{contents}
|
||||
</div>
|
||||
{button && (
|
||||
<div className="SystemMessage__button-container">{button}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
@ -26,6 +26,7 @@ import {
|
|||
PropsActionsType as DeliveryIssueActionProps,
|
||||
PropsDataType as DeliveryIssueProps,
|
||||
} from './DeliveryIssueNotification';
|
||||
import { LinkNotification } from './LinkNotification';
|
||||
import {
|
||||
ChangeNumberNotification,
|
||||
PropsData as ChangeNumberNotificationProps,
|
||||
|
|
@ -245,12 +246,7 @@ export class TimelineItem extends React.PureComponent<PropsType> {
|
|||
<DeliveryIssueNotification {...item.data} {...this.props} i18n={i18n} />
|
||||
);
|
||||
} else if (item.type === 'linkNotification') {
|
||||
notification = (
|
||||
<div className="SystemMessage">
|
||||
<div className="SystemMessage__icon SystemMessage__icon--unsynced" />
|
||||
{i18n('messageHistoryUnsynced')}
|
||||
</div>
|
||||
);
|
||||
notification = <LinkNotification i18n={i18n} />;
|
||||
} else if (item.type === 'timerNotification') {
|
||||
notification = (
|
||||
<TimerNotification {...this.props} {...item.data} i18n={i18n} />
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { FunctionComponent, ReactNode } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { ContactName } from './ContactName';
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { Intl } from '../Intl';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import * as expirationTimer from '../../util/expirationTimer';
|
||||
|
|
@ -94,16 +94,7 @@ export const TimerNotification: FunctionComponent<Props> = props => {
|
|||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="SystemMessage">
|
||||
<div
|
||||
className={classNames(
|
||||
'SystemMessage__icon',
|
||||
'SystemMessage__icon--timer',
|
||||
disabled ? 'SystemMessage__icon--timer-disabled' : null
|
||||
)}
|
||||
/>
|
||||
<div>{message}</div>
|
||||
</div>
|
||||
);
|
||||
const icon = disabled ? 'timer-disabled' : 'timer';
|
||||
|
||||
return <SystemMessage icon={icon} contents={message} />;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
import * as expirationTimer from '../../util/expirationTimer';
|
||||
|
||||
|
|
@ -21,15 +22,11 @@ export const UniversalTimerNotification: React.FC<Props> = props => {
|
|||
const timeValue = expirationTimer.format(i18n, expireTimer);
|
||||
|
||||
return (
|
||||
<div className="SystemMessage">
|
||||
<div className="SystemMessage__icon SystemMessage__icon--timer" />
|
||||
<div className="SystemMessage__text">
|
||||
<div>
|
||||
{i18n('UniversalTimerNotification__text', {
|
||||
timeValue,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SystemMessage
|
||||
icon="timer"
|
||||
contents={i18n('UniversalTimerNotification__text', {
|
||||
timeValue,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// Copyright 2019-2020 Signal Messenger, LLC
|
||||
// Copyright 2019-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { Button, ButtonSize, ButtonVariant } from '../Button';
|
||||
import { ContactName } from './ContactName';
|
||||
import { Intl } from '../Intl';
|
||||
|
|
@ -48,54 +48,47 @@ export const UnsupportedMessage = ({
|
|||
? 'Message--from-me-unsupported-message-ask-to-resend'
|
||||
: 'Message--from-me-unsupported-message';
|
||||
const stringId = isMe ? meStringId : otherStringId;
|
||||
const icon = canProcessNow ? 'unsupported--can-process' : 'unsupported';
|
||||
|
||||
return (
|
||||
<div className="SystemMessage SystemMessage--multiline">
|
||||
<div className="SystemMessage__line SystemMessage__text">
|
||||
<div
|
||||
className={classNames(
|
||||
'SystemMessage__icon',
|
||||
'SystemMessage__icon--unsupported',
|
||||
{
|
||||
'SystemMessage__icon--unsupported--can-process': canProcessNow,
|
||||
}
|
||||
)}
|
||||
<SystemMessage
|
||||
icon={icon}
|
||||
contents={
|
||||
<Intl
|
||||
id={stringId}
|
||||
components={[
|
||||
<span
|
||||
key="external-1"
|
||||
className="module-unsupported-message__contact"
|
||||
>
|
||||
<ContactName
|
||||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
title={contact.title}
|
||||
module="module-unsupported-message__contact"
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>,
|
||||
]}
|
||||
i18n={i18n}
|
||||
/>
|
||||
<span>
|
||||
<Intl
|
||||
id={stringId}
|
||||
components={[
|
||||
<span
|
||||
key="external-1"
|
||||
className="module-unsupported-message__contact"
|
||||
>
|
||||
<ContactName
|
||||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
title={contact.title}
|
||||
module="module-unsupported-message__contact"
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>,
|
||||
]}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
{canProcessNow ? null : (
|
||||
<div className="SystemMessage__line">
|
||||
<Button
|
||||
onClick={() => {
|
||||
downloadNewVersion();
|
||||
}}
|
||||
size={ButtonSize.Small}
|
||||
variant={ButtonVariant.SystemMessage}
|
||||
>
|
||||
{i18n('Message--update-signal')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
button={
|
||||
canProcessNow ? undefined : (
|
||||
<div className="SystemMessage__line">
|
||||
<Button
|
||||
onClick={() => {
|
||||
downloadNewVersion();
|
||||
}}
|
||||
size={ButtonSize.Small}
|
||||
variant={ButtonVariant.SystemMessage}
|
||||
>
|
||||
{i18n('Message--update-signal')}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
// Copyright 2018-2020 Signal Messenger, LLC
|
||||
// Copyright 2018-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
// import classNames from 'classnames';
|
||||
|
||||
import { SystemMessage } from './SystemMessage';
|
||||
import { ContactName } from './ContactName';
|
||||
import { Intl } from '../Intl';
|
||||
import { LocalizerType } from '../../types/Util';
|
||||
|
|
@ -52,35 +52,28 @@ export class VerificationNotification extends React.Component<Props> {
|
|||
const id = this.getStringId();
|
||||
|
||||
return (
|
||||
<div className="SystemMessage__text">
|
||||
<Intl
|
||||
id={id}
|
||||
components={[
|
||||
<ContactName
|
||||
key="external-1"
|
||||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
title={contact.title}
|
||||
module="module-verification-notification__contact"
|
||||
i18n={i18n}
|
||||
/>,
|
||||
]}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
<Intl
|
||||
id={id}
|
||||
components={[
|
||||
<ContactName
|
||||
key="external-1"
|
||||
name={contact.name}
|
||||
profileName={contact.profileName}
|
||||
phoneNumber={contact.phoneNumber}
|
||||
title={contact.title}
|
||||
module="module-verification-notification__contact"
|
||||
i18n={i18n}
|
||||
/>,
|
||||
]}
|
||||
i18n={i18n}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
const { type } = this.props;
|
||||
const suffix = type === 'markVerified' ? 'verified' : 'verified-not';
|
||||
const icon = type === 'markVerified' ? 'verified' : 'verified-not';
|
||||
|
||||
return (
|
||||
<div className="SystemMessage">
|
||||
<div className={`SystemMessage__icon SystemMessage__icon--${suffix}`} />
|
||||
{this.renderContents()}
|
||||
</div>
|
||||
);
|
||||
return <SystemMessage icon={icon} contents={this.renderContents()} />;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue