diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index c2934e0ae75..afdfed74a34 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1367,10 +1367,30 @@
"description":
"Very short format indicating current timer setting in the conversation header"
},
+ "disappearingMessagesDisabled": {
+ "message": "Disappearing messages disabled",
+ "description": "Displayed in the left pane when the timer is turned off"
+ },
+ "disabledDisappearingMessages": {
+ "message": "$name$ disabled disappearing messages",
+ "description":
+ "Displayed in the conversation list when the timer is turned off",
+ "placeholders": {
+ "name": {
+ "content": "$1",
+ "example": "John"
+ }
+ }
+ },
+ "youDisabledDisappearingMessages": {
+ "message": "You disabled disappearing messages",
+ "description":
+ "Displayed in the conversation list when the timer is turned off"
+ },
"timerSetTo": {
"message": "Timer set to $time$",
"description":
- "Displayed in the conversation list when the timer is updated by some automatic action.",
+ "Displayed in the conversation list when the timer is updated by some automatic action, or in the left pane",
"placeholders": {
"time": {
"content": "$1",
diff --git a/images/timer-disabled.svg b/images/timer-disabled.svg
new file mode 100644
index 00000000000..85110fb8b5e
--- /dev/null
+++ b/images/timer-disabled.svg
@@ -0,0 +1,22 @@
+
+
\ No newline at end of file
diff --git a/js/models/messages.js b/js/models/messages.js
index 5398558515c..31f89dcb44a 100644
--- a/js/models/messages.js
+++ b/js/models/messages.js
@@ -199,6 +199,10 @@
}
if (this.isExpirationTimerUpdate()) {
const { expireTimer } = this.get('expirationTimerUpdate');
+ if (!expireTimer) {
+ return i18n('disappearingMessagesDisabled');
+ }
+
return i18n(
'timerSetTo',
Whisper.ExpirationTimerOptions.getAbbreviated(expireTimer || 0)
@@ -308,11 +312,13 @@
'expirationTimerUpdate'
);
const timespan = Whisper.ExpirationTimerOptions.getName(expireTimer || 0);
+ const disabled = !expireTimer;
const basicProps = {
type: 'fromOther',
...this.findAndFormatContact(source),
timespan,
+ disabled,
};
if (source === this.OUR_NUMBER) {
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index ba72710fa6b..e8de8da2f73 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1255,6 +1255,10 @@
@include color-svg('../images/timer.svg', $color-light-60);
}
+.module-timer-notification__icon--disabled {
+ @include color-svg('../images/timer-disabled.svg', $color-light-60);
+}
+
.module-timer-notification__icon-label {
font-size: 11px;
line-height: 16px;
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 0a7b5114099..bc99a9f9352 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -1071,6 +1071,10 @@ body.dark-theme {
@include color-svg('../images/timer.svg', $color-dark-30);
}
+ .module-timer-notification__icon--disabled {
+ @include color-svg('../images/timer-disabled.svg', $color-dark-30);
+ }
+
// Module: Contact List Item
.module-contact-list-item {
diff --git a/ts/components/conversation/TimerNotification.md b/ts/components/conversation/TimerNotification.md
index a468031e173..a69c4db3b0b 100644
--- a/ts/components/conversation/TimerNotification.md
+++ b/ts/components/conversation/TimerNotification.md
@@ -9,6 +9,14 @@
timespan="1 hour"
i18n={util.i18n}
/>
+
```
@@ -22,6 +30,13 @@
timespan="1 hour"
i18n={util.i18n}
/>
+
```
@@ -35,5 +50,12 @@
timespan="1 hour"
i18n={util.i18n}
/>
+
```
diff --git a/ts/components/conversation/TimerNotification.tsx b/ts/components/conversation/TimerNotification.tsx
index 019be28b185..6298eca8519 100644
--- a/ts/components/conversation/TimerNotification.tsx
+++ b/ts/components/conversation/TimerNotification.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-// import classNames from 'classnames';
+import classNames from 'classnames';
import { ContactName } from './ContactName';
import { Intl } from '../Intl';
@@ -12,20 +12,31 @@ interface Props {
phoneNumber: string;
profileName?: string;
name?: string;
+ disabled: boolean;
timespan: string;
i18n: Localizer;
}
export class TimerNotification extends React.Component {
public renderContents() {
- const { i18n, name, phoneNumber, profileName, timespan, type } = this.props;
+ const {
+ i18n,
+ name,
+ phoneNumber,
+ profileName,
+ timespan,
+ type,
+ disabled,
+ } = this.props;
switch (type) {
case 'fromOther':
return (
{
/>
);
case 'fromMe':
- return i18n('youChangedTheTimer', [timespan]);
+ return disabled
+ ? i18n('youDisabledDisappearingMessages')
+ : i18n('youChangedTheTimer', [timespan]);
case 'fromSync':
- return i18n('timerSetOnSync', [timespan]);
+ return disabled
+ ? i18n('disappearingMessagesDisabled')
+ : i18n('timerSetOnSync', [timespan]);
default:
throw missingCaseError(type);
}
}
public render() {
- const { timespan } = this.props;
+ const { timespan, disabled } = this.props;
return (
-
-
- {timespan}
-
+
+ {disabled ? null : (
+
+ {timespan}
+
+ )}
{this.renderContents()}