Disappearing messages: show 'disabled' instead of 'set to off'

_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",

images/timer-disabled.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51 (57462) - http://www.bohemiancoding.com/sketch -->
+    <title>Timer/timer-disabled-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M21.858998,18.8467957 C19.053119,22.8866962 13.9186786,24.9374228 8.89417112,23.5911101 C2.49257788,21.8758083 -1.30641199,15.2957648 0.408889745,8.8941716 C0.596993805,8.19215769 0.843600451,7.52144226 1.14205881,6.8858652 L0.241669751,6.3660254 L1.24166975,4.6339746 L23.7583302,17.6339746 L22.7583302,19.3660254 L21.858998,18.8467957 Z M2.88184096,7.89032891 C2.66430211,8.37455812 2.48256725,8.88250838 2.3407414,9.41180969 C0.911323282,14.7464707 4.07714818,20.2298403 9.41180921,21.6592584 C13.5418599,22.7659021 17.7610424,21.1182818 20.1191983,17.8423219 L2.88184138,7.8903292 Z M23.5326632,15.3164189 L21.7368136,14.2795846 C21.9158036,13.5170203 22.0020037,12.7530775 22.0024796,12 L22,12 C22,11.2717071 21.9221447,10.5615983 21.774303,9.87754233 C21.5529413,8.86216458 21.1750101,7.89158451 20.6602539,7.00000043 L20.6616964,6.99916755 C18.9333112,4.01196843 15.7039844,2.00181488 12.0050103,2.00000123 L12.0050103,9.50002686e-07 C17.7562426,0.0023509102 22.5615395,4.05060308 23.7291551,9.45301142 C24.1238587,11.2634725 24.1037523,13.1926202 23.5911096,15.1058287 C23.5722155,15.1763425 23.5527311,15.2465405 23.5326632,15.3164189 Z M3.35963731,3.66951691 C4.38333833,2.60965722 5.59187966,1.74982675 6.9171957,1.12932318 L7.91587604,2.87167583 L7.89093592,2.88289296 L10.8378215,7.9870486 L7.37371993,5.98704859 L6.15888511,3.88289296 C5.80800002,4.13508167 5.47295537,4.41020428 5.15627282,4.70680491 L3.35963731,3.66951691 Z" id="path-1"></path>
+        <rect id="path-3" x="0" y="0" width="24" height="24"></rect>
+    </defs>
+    <g id="Timer/timer-disabled-24" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Combined-Shape"></g>
+        <g id="Primitives/Color/Black" mask="url(#mask-2)">
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="fill" fill="#000000" fill-rule="evenodd" xlink:href="#path-3"></use>
+        </g>
+    </g>
+</svg>

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) {

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;

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 {

ts/components/conversation/TimerNotification.md

@@ -9,6 +9,14 @@
     timespan="1 hour"
     i18n={util.i18n}
   />
+  <TimerNotification
+    type="fromOther"
+    phoneNumber="(202) 555-1000"
+    profileName="Mr. Fire"
+    disabled={true}
+    timespan="1 hour"
+    i18n={util.i18n}
+  />
 </util.ConversationContext>
 ```
 
@@ -22,6 +30,13 @@
     timespan="1 hour"
     i18n={util.i18n}
   />
+  <TimerNotification
+    type="fromMe"
+    phoneNumber="(202) 555-1000"
+    disabled={true}
+    timespan="1 hour"
+    i18n={util.i18n}
+  />
 </util.ConversationContext>
 ```
 
@@ -35,5 +50,12 @@
     timespan="1 hour"
     i18n={util.i18n}
   />
+  <TimerNotification
+    type="fromSync"
+    phoneNumber="(202) 555-1000"
+    disabled={true}
+    timespan="1 hour"
+    i18n={util.i18n}
+  />
 </util.ConversationContext>
 ```

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<Props> {
   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 (
           <Intl
             i18n={i18n}
-            id="theyChangedTheTimer"
+            id={
+              disabled ? 'disabledDisappearingMessages' : 'theyChangedTheTimer'
+            }
             components={[
               <ContactName
                 i18n={i18n}
@@ -39,24 +50,35 @@ export class TimerNotification extends React.Component<Props> {
           />
         );
       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 (
       <div className="module-timer-notification">
         <div className="module-timer-notification__icon-container">
-          <div className="module-timer-notification__icon" />
-          <div className="module-timer-notification__icon-label">
-            {timespan}
-          </div>
+          <div
+            className={classNames(
+              'module-timer-notification__icon',
+              disabled ? 'module-timer-notification__icon--disabled' : null
+            )}
+          />
+          {disabled ? null : (
+            <div className="module-timer-notification__icon-label">
+              {timespan}
+            </div>
+          )}
         </div>
         <div className="module-timer-notification__message">
           {this.renderContents()}