From e80857562ad839d6783e68d722a6348ec7165bc3 Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Tue, 24 Jul 2018 14:38:58 -0700 Subject: [PATCH] Disappearing messages: show 'disabled' instead of 'set to off' --- _locales/en/messages.json | 22 +++++++++- images/timer-disabled.svg | 22 ++++++++++ js/models/messages.js | 6 +++ stylesheets/_modules.scss | 4 ++ stylesheets/_theme_dark.scss | 4 ++ .../conversation/TimerNotification.md | 22 ++++++++++ .../conversation/TimerNotification.tsx | 42 ++++++++++++++----- 7 files changed, 111 insertions(+), 11 deletions(-) create mode 100644 images/timer-disabled.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c2934e0ae..afdfed74a 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 000000000..85110fb8b --- /dev/null +++ b/images/timer-disabled.svg @@ -0,0 +1,22 @@ + + + + Timer/timer-disabled-24 + Created with Sketch. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/js/models/messages.js b/js/models/messages.js index 539855851..31f89dcb4 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 ba72710fa..e8de8da2f 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 0a7b51140..bc99a9f93 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 a468031e1..a69c4db3b 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 019be28b1..6298eca85 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()}