Emojification now all done with react via a few new components

Three locations were changed:
  1. a group update, which lists a set of contacts
  2. the contact name in the left pane
  3. the conversation title

Three new components were added to window.Signal.Components to support
these scenarios, respectively:
  1. Emojify
  2. ContactName
  3. ConversationTitle

Note that there are a number of other places in the app that should be
emojified, but never have been before. Essentially any place that a
contact name might be shown. A non-exhaustive list:
  - Show group members
  - Show safety number
  - Verified change notification
  - Disappearing timer change notification
  - Contact verification notification
  - Quote contact name
This commit is contained in:
Scott Nonnenberg 2018-05-18 16:57:26 -07:00
parent d9e5338dff
commit 548c8e69cf
10 changed files with 152 additions and 73 deletions

View file

@ -2,7 +2,6 @@
/* global i18n: false */
/* global textsecure: false */
/* global _: false */
/* global emoji_util: false */
/* global Mustache: false */
/* global $: false */
/* global storage: false */
@ -279,24 +278,30 @@
if (this.avatarView) {
this.avatarView.remove();
}
if (this.bodyView) {
this.bodyView.remove();
}
if (this.contactView) {
this.contactView.remove();
}
if (this.controlView) {
this.controlView.remove();
}
if (this.errorIconView) {
this.errorIconView.remove();
}
if (this.networkErrorView) {
this.networkErrorView.remove();
}
if (this.quoteView) {
this.quoteView.remove();
}
if (this.someFailedView) {
this.someFailedView.remove();
}
if (this.timeStampView) {
this.timeStampView.remove();
}
if (this.quoteView) {
this.quoteView.remove();
}
if (this.contactView) {
this.contactView.remove();
}
// NOTE: We have to do this in the background (`then` instead of `await`)
// as our tests rely on `onUnload` synchronously removing the view from
@ -406,8 +411,20 @@
renderControl() {
if (this.model.isEndSession() || this.model.isGroupUpdate()) {
this.$el.addClass('control');
const content = this.$('.content');
content.text(this.model.getDescription());
if (this.controlView) {
this.controlView.remove();
this.controlView = null;
}
this.controlView = new Whisper.ReactWrapperView({
className: 'content-wrapper',
Component: window.Signal.Components.Emojify,
props: {
text: this.model.getDescription(),
},
});
this.$('.content').prepend(this.controlView.el);
} else {
this.$el.removeClass('control');
}