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

2018-07-24 14:38:58 -07:00 · 2018-07-24 14:38:58 -07:00 · e80857562a
parent 1a01e38d5c
commit e80857562a
7 changed files with 111 additions and 11 deletions
--- 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",
--- a/images/timer-disabled.svg
+++ b/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>
--- 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) {
--- 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;
--- 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 {
--- a/ts/components/conversation/TimerNotification.md
+++ b/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>
 ```
--- 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<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()}