jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use 1x icon in View-once bubbles, explanatory expired toasts

This commit is contained in:
Scott Nonnenberg 2020-01-10 08:29:51 -08:00 committed by Ken Powers
parent 14cc11d5de
commit 4f50c0b093
11 changed files with 96 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
_locales/en/messages.json
View File

@ -1547,13 +1547,17 @@
"message": "Unsupported message",
"description": "Shown in notifications and in the left pane when a message has features too new for this signal install."
},
"message--getDescription--disappearing-media": {
"message": "View-once Media",
"description": "Shown in notifications and in the left pane after view-once message is deleted."
},
"message--getDescription--disappearing-photo": {
"message": "Disappearing Photo",
"description": "Shown in notifications and in the left pane when a message is a disappearing photo."
"message": "View-once Photo",
"description": "Shown in notifications and in the left pane when a message is a view once photo."
},
"message--getDescription--disappearing-video": {
"message": "Disappearing Video",
"description": "Shown in notifications and in the left pane when a message is a disappearing video."
"message": "View-once Video",
"description": "Shown in notifications and in the left pane when a message is a view once video."
},
"stickers--toast--InstallFailed": {
"message": "Sticker pack could not be installed",
@ -1697,12 +1701,20 @@
"message": "Media",
"description": "Text shown on outgoing messages with with individual timers (inaccessble)"
},
"Message--tap-to-view--incoming--expired-toast": {
"message": "You already viewed this message.",
"description": "Shown when user clicks on an expired incoming view-once bubble"
},
"Message--tap-to-view--outgoing--expired-toast": {
"message": "View-once messages are not stored in your conversation history.",
"description": "Shown when user clicks on an expired outgoing view-once bubble"
},
"Message--tap-to-view--incoming": {
"message": "Photo",
"message": "View Photo",
"description": "Text shown on photo messages with with individual timers, before user has viewed it"
},
"Message--tap-to-view--incoming-video": {
"message": "Video",
"message": "View Video",
"description": "Text shown on video messages with with individual timers, before user has viewed it"
},
"Conversation--getDraftPreview--attachment": {

1
images/icons/v2/play-outline-20.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><title>play-outline-20</title><path d="M4.5,3.6,15.551,10,4.5,16.4V3.6M3.72,1.575c-.426,0-.72.339-.72.925v15c0,.586.294.925.72.925a1.168,1.168,0,0,0,.578-.177l12.949-7.5a.8.8,0,0,0,0-1.5L4.3,1.752a1.168,1.168,0,0,0-.578-.177Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 317 B

1
images/icons/v2/play-outline-24.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>play-outline-24</title><path d="M5.5,3.6,20.006,12,5.5,20.4V3.6M4.72,1.575c-.426,0-.72.339-.72.925v19c0,.586.294.925.72.925a1.168,1.168,0,0,0,.578-.177l16.4-9.5a.8.8,0,0,0,0-1.5L5.3,1.752a1.168,1.168,0,0,0-.578-.177Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 315 B

1
images/icons/v2/view-once-24.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>view-once-24</title><path d="M10.051,16H8.529V9.564H8.46a2.184,2.184,0,0,1-1.73.622V8.958A1.94,1.94,0,0,0,8.6,7.625h1.456Zm4.618-3.962,1.288-2.319h1.565L15.63,12.86,17.556,16H16l-1.328-2.261L13.352,16H11.781L13.7,12.86,11.83,9.719H13.4ZM22.239,16a11.009,11.009,0,1,0-2.448,3.755L19.5,21.5V23H21V17.5H15.5V19H17l1.7-.284A9.56,9.56,0,1,1,20.605,16Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 445 B

1
images/icons/v2/viewed-once-24.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>viewed-once-24</title><path d="M3.23,15.63l-1.39.58A10.94,10.94,0,0,1,1,12H2.5A9.34,9.34,0,0,0,3.23,15.63Zm0-7.26A9.36,9.36,0,0,1,5.29,5.29L4.22,4.22A11.11,11.11,0,0,0,1.84,7.79Zm17.54,7.26a9.36,9.36,0,0,1-2.06,3.08l1.07,1.07a11.11,11.11,0,0,0,2.38-3.57Zm0-7.26A9.34,9.34,0,0,1,21.5,12H23a10.94,10.94,0,0,0-.84-4.21ZM8.37,3.23A9.34,9.34,0,0,1,12,2.5V1a10.94,10.94,0,0,0-4.21.84Zm0,17.54a9.36,9.36,0,0,1-3.08-2.06L4.22,19.78a11.11,11.11,0,0,0,3.57,2.38Zm7.26,0A9.34,9.34,0,0,1,12,21.5V23a10.94,10.94,0,0,0,4.21-.84Zm0-17.54a9.36,9.36,0,0,1,3.08,2.06l1.07-1.07a11.22,11.22,0,0,0-3.57-2.38Zm-5.58,4.4H8.59A1.94,1.94,0,0,1,6.73,9v1.23a2.17,2.17,0,0,0,1.73-.63h.07V16h1.52ZM13.4,9.72H11.83l1.87,3.14L11.78,16h1.57l1.32-2.26L16,16h1.56l-1.93-3.14,1.89-3.14H16L14.67,12Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 862 B

2
js/models/messages.js
View File

@ -741,7 +741,7 @@
}
if (this.isTapToView()) {
if (this.isErased()) {
return i18n('mediaMessage');
return i18n('message--getDescription--disappearing-media');
}
const attachments = this.get('attachments');

22
js/views/conversation_view.js
View File

@ -90,6 +90,20 @@
return { toastMessage: i18n('conversationReturnedToInbox') };
},
});
Whisper.TapToViewExpiredIncomingToast = Whisper.ToastView.extend({
render_attributes() {
return {
toastMessage: i18n('Message--tap-to-view--incoming--expired-toast'),
};
},
});
Whisper.TapToViewExpiredOutgoingToast = Whisper.ToastView.extend({
render_attributes() {
return {
toastMessage: i18n('Message--tap-to-view--outgoing--expired-toast'),
};
},
});
Whisper.FileSavedToast = Whisper.ToastView.extend({
className: 'toast toast-clickable',
initialize(options) {
@ -459,6 +473,12 @@
const downloadNewVersion = () => {
this.downloadNewVersion();
};
const showExpiredIncomingTapToViewToast = () => {
this.showToast(Whisper.TapToViewExpiredIncomingToast);
};
const showExpiredOutgoingTapToViewToast = () => {
this.showToast(Whisper.TapToViewExpiredOutgoingToast);
};
const scrollToQuotedMessage = async options => {
const { author, sentAt } = options;
@ -623,6 +643,8 @@
showIdentity,
showMessageDetail,
showVisualAttachment,
showExpiredIncomingTapToViewToast,
showExpiredOutgoingTapToViewToast,
}),
});

30
stylesheets/_modules.scss
View File

@ -366,8 +366,6 @@
}
.module-message__container--with-tap-to-view-expired {
cursor: default;
@include light-theme {
border: 1px solid $color-gray-15;
background-color: $color-white;
@ -440,16 +438,16 @@
height: 20px;
@include light-theme {
@include color-svg('../images/icons/v2/play-solid-24.svg', $color-white);
@include color-svg('../images/icons/v2/view-once-24.svg', $color-white);
}
@include dark-theme {
@include color-svg('../images/icons/v2/play-solid-24.svg', $color-gray-05);
@include color-svg('../images/icons/v2/view-once-24.svg', $color-gray-05);
}
@include ios-theme {
@include color-svg('../images/icons/v2/play-solid-24.svg', $color-gray-90);
@include color-svg('../images/icons/v2/view-once-24.svg', $color-gray-90);
}
@include ios-dark-theme {
@include color-svg('../images/icons/v2/play-solid-24.svg', $color-gray-05);
@include color-svg('../images/icons/v2/view-once-24.svg', $color-gray-05);
}
}
.module-message__tap-to-view__icon--outgoing {
@ -465,28 +463,16 @@
}
.module-message__tap-to-view__icon--expired {
@include light-theme {
@include color-svg(
'../images/icons/v2/play-outline-24.svg',
$color-gray-75
);
@include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/play-outline-24.svg',
$color-gray-05
);
@include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-05);
}
@include ios-theme {
@include color-svg(
'../images/icons/v2/play-outline-24.svg',
$color-gray-75
);
@include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-75);
}
@include ios-dark-theme {
@include color-svg(
'../images/icons/v2/play-outline-24.svg',
$color-gray-05
);
@include color-svg('../images/icons/v2/viewed-once-24.svg', $color-gray-05);
}
}
.module-message__tap-to-view__text {

26
ts/components/conversation/Message.md
View File

@ -3681,6 +3681,32 @@ Sticker link previews are forced to use the small link preview form, no matter t
authorAvatarPath={util.gifObjectUrl}
/>
</div>
<div className="module-message-container">
<Message
direction="incoming"
timestamp={Date.now()}
authorColor="pink"
conversationType="direct"
authorPhoneNumber="(202) 555-0003"
isTapToViewExpired={false}
isTapToView={true}
text="This should not be shown"
attachments={[
{
url: util.gifObjectUrl,
contentType: 'video/mp4',
width: 320,
height: 240,
},
]}
i18n={util.i18n}
id="messageId1"
displayTapToViewMessage={(...args) =>
console.log('displayTapToViewMessage', args)
}
authorAvatarPath={util.gifObjectUrl}
/>
</div>
<div className="module-message-container">
<Message
direction="incoming"

20
ts/components/conversation/Message.tsx
View File

@ -129,6 +129,9 @@ export type PropsActions = {
openLink: (url: string) => void;
scrollToQuotedMessage: (options: { author: string; sentAt: number }) => void;
selectMessage?: (messageId: string, conversationId: string) => unknown;
showExpiredIncomingTapToViewToast: () => unknown;
showExpiredOutgoingTapToViewToast: () => unknown;
};
export type Props = PropsData & PropsHousekeeping & PropsActions;
@ -1311,7 +1314,7 @@ export class Message extends React.PureComponent<Props, State> {
);
}
// tslint:disable-next-line cyclomatic-complexity
// tslint:disable-next-line cyclomatic-complexity max-func-body-length
public handleOpen = (
event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent
) => {
@ -1319,19 +1322,32 @@ export class Message extends React.PureComponent<Props, State> {
attachments,
contact,
displayTapToViewMessage,
direction,
id,
isTapToView,
isTapToViewExpired,
openConversation,
showContactDetail,
showVisualAttachment,
showExpiredIncomingTapToViewToast,
showExpiredOutgoingTapToViewToast,
} = this.props;
const { imageBroken } = this.state;
const isAttachmentPending = this.isAttachmentPending();
if (isTapToView) {
if (!isTapToViewExpired && !isAttachmentPending) {
if (isAttachmentPending) {
return;
}
if (isTapToViewExpired) {
const action =
direction === 'outgoing'
? showExpiredOutgoingTapToViewToast
: showExpiredIncomingTapToViewToast;
action();
} else {
event.preventDefault();
event.stopPropagation();

2
ts/util/lint/exceptions.json
View File

@ -9234,7 +9234,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.tsx",
"line": " public focusRef: React.RefObject<HTMLDivElement> = React.createRef();",
"lineNumber": 150,
"lineNumber": 153,
"reasonCategory": "usageTrusted",
"updated": "2020-01-06T17:05:33.013Z",
"reasonDetail": "Used for setting focus only"