From a8e12d0771ba4b363bd5edf80f562f50a235e203 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Fri, 28 Sep 2018 17:42:13 -0700
Subject: [PATCH] Add user's avatar to the top left of the screen

---
 background.html              |  4 +---
 js/modules/signal.js         |  2 ++
 js/views/inbox_view.js       | 13 ++++++++++
 stylesheets/_global.scss     | 17 -------------
 stylesheets/_modules.scss    | 19 +++++++++++++++
 stylesheets/_theme_dark.scss | 10 ++++----
 ts/components/MainHeader.md  | 11 +++++++++
 ts/components/MainHeader.tsx | 46 ++++++++++++++++++++++++++++++++++++
 8 files changed, 98 insertions(+), 24 deletions(-)
 create mode 100644 ts/components/MainHeader.md
 create mode 100644 ts/components/MainHeader.tsx

diff --git a/background.html b/background.html
index 8d2db706c..4c3f3759a 100644
--- a/background.html
+++ b/background.html
@@ -51,9 +51,7 @@
   <script type='text/x-tmpl-mustache' id='two-column'>
     <div class='gutter'>
       <div class='network-status-container'></div>
-      <div class='title-bar active'>
-        <div class='logo'>Signal</div>
-      </div>
+      <div class='main-header-placeholder'></div>
       <div class='tool-bar clearfix'>
         <input type='search' class='search' placeholder='{{ searchForPeopleOrGroups }}' dir='auto'>
         <span class='search-icon'></span>
diff --git a/js/modules/signal.js b/js/modules/signal.js
index 082862b1b..fcc4d022d 100644
--- a/js/modules/signal.js
+++ b/js/modules/signal.js
@@ -36,6 +36,7 @@ const { LightboxGallery } = require('../../ts/components/LightboxGallery');
 const {
   MediaGallery,
 } = require('../../ts/components/conversation/media-gallery/MediaGallery');
+const { MainHeader } = require('../../ts/components/MainHeader');
 const { Message } = require('../../ts/components/conversation/Message');
 const { MessageBody } = require('../../ts/components/conversation/MessageBody');
 const {
@@ -178,6 +179,7 @@ exports.setup = (options = {}) => {
     GroupNotification,
     Lightbox,
     LightboxGallery,
+    MainHeader,
     MediaGallery,
     Message,
     MessageBody,
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 6064c23ab..df7d48b62 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -3,6 +3,8 @@
 /* global getInboxCollection: false */
 /* global i18n: false */
 /* global Whisper: false */
+/* global textsecure: false */
+/* global Signal: false */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -93,6 +95,17 @@
       // eslint-disable-next-line no-new
       new Whisper.FontSizeView({ el: this.$el });
 
+      const ourNumber = textsecure.storage.user.getNumber();
+      const me = ConversationController.get(ourNumber);
+      this.mainHeaderView = new Whisper.ReactWrapperView({
+        className: 'main-header-wrapper',
+        Component: Signal.Components.MainHeader,
+        props: me.format(),
+      });
+      const update = () => this.mainHeaderView.update(me.format());
+      this.listenTo(me, 'change', update);
+      this.$('.main-header-placeholder').append(this.mainHeaderView.el);
+
       this.conversation_stack = new Whisper.ConversationStack({
         el: this.$('.conversation-stack'),
         model: { window: options.window },
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 4bba6c9bf..43397f7ce 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -62,23 +62,6 @@ body {
   display: none;
 }
 
-.title-bar {
-  color: $color-light-90;
-
-  height: $header-height;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.logo {
-  margin-left: 16px;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 300;
-  color: $color-light-90;
-}
-
 button {
   cursor: pointer;
   font-size: inherit;
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 8b2219ba0..61125ff0e 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -2045,6 +2045,25 @@
   background-color: $color-conversation-blue_grey;
 }
 
+// Module: Main Header
+
+.module-main-header {
+  height: $header-height;
+  margin-left: 16px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.module-main-header__app-name {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 300;
+  margin-left: 32px;
+  color: $color-light-90;
+}
+
 // Third-party module: react-contextmenu
 
 .react-contextmenu {
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 274016ccc..f116be2f7 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -207,10 +207,6 @@ body.dark-theme {
     color: $color-dark-05;
   }
 
-  .logo {
-    color: $color-dark-05;
-  }
-
   button.grey {
     border: solid 1px #ccc;
     color: $grey;
@@ -1363,6 +1359,12 @@ body.dark-theme {
     background-color: $color-conversation-blue_grey-shade;
   }
 
+  // Module: Main Header
+
+  .module-main-header__app-name {
+    color: $color-dark-05;
+  }
+
   // Third-party module: react-contextmenu
 
   .react-contextmenu {
diff --git a/ts/components/MainHeader.md b/ts/components/MainHeader.md
new file mode 100644
index 000000000..fa6101898
--- /dev/null
+++ b/ts/components/MainHeader.md
@@ -0,0 +1,11 @@
+#### With image
+
+```jsx
+<MainHeader avatarPath={util.gifObjectUrl} i18n={util.i18n} />
+```
+
+#### Just name
+
+```jsx
+<MainHeader name="John Smith" color="purple" i18n={util.i18n} />
+```
diff --git a/ts/components/MainHeader.tsx b/ts/components/MainHeader.tsx
new file mode 100644
index 000000000..596fd04f0
--- /dev/null
+++ b/ts/components/MainHeader.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { Avatar } from './Avatar';
+
+import { Localizer } from '../types/Util';
+
+interface Props {
+  phoneNumber: string;
+  isMe?: boolean;
+  name?: string;
+  color?: string;
+  verified: boolean;
+  profileName?: string;
+  avatarPath?: string;
+  i18n: Localizer;
+  onClick?: () => void;
+}
+
+export class MainHeader extends React.Component<Props> {
+  public render() {
+    const {
+      avatarPath,
+      i18n,
+      color,
+      name,
+      phoneNumber,
+      profileName,
+    } = this.props;
+
+    return (
+      <div className="module-main-header">
+        <Avatar
+          avatarPath={avatarPath}
+          color={color}
+          conversationType="direct"
+          i18n={i18n}
+          name={name}
+          phoneNumber={phoneNumber}
+          profileName={profileName}
+          size={28}
+        />
+        <div className="module-main-header__app-name">Signal</div>
+      </div>
+    );
+  }
+}