mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Scott Nonnenberg 2018-07-24 14:38:58 -07:00
parent 1a01e38d5c
commit e80857562a
7 changed files with 111 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
_locales/en/messages.json
View file

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

22
images/timer-disabled.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

6
js/models/messages.js
View file

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

4
stylesheets/_modules.scss
View file

@ -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;

4
stylesheets/_theme_dark.scss
View file

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

22
ts/components/conversation/TimerNotification.md
View file

@ -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>
```

36
ts/components/conversation/TimerNotification.tsx
View file

@ -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={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()}