Add header options.

_locales/en/messages.json

@@ -1656,5 +1656,18 @@
   "editProfileDisplayNameWarning": {
     "message": "Note: Your display name will be visible to your contacts",
     "description": "Shown to the user as a warning about setting display name"
+  },
+
+  "copyPublicKey": {
+    "message": "Copy public key",
+    "description": "Button action that the user can click to copy their public keys"
+  },
+  "copiedPublicKey": {
+    "message": "Copied public key",
+    "description": "A toast message telling the user that the key was copied"
+  },
+  "editDisplayName": {
+    "message": "Edit display name",
+    "description": "Button action that the user can click to edit their display name"
   }
 }

background.html

@@ -91,7 +91,11 @@
     <div class='main-header-title-wrapper'>
       <div class='main-header-content-toggle'/>
     </div>
-    <div class='main-header-content-wrapper'><div>
+    <div class='main-header-content-wrapper'>
+      {{ #items }}
+        <div role='button' id='{{ id }}'>{{ text }}</div>
+      {{ /items }}
+    </div>
   </script>
   <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
     <button class='text module-scroll-down__button {{ buttonClass }}' alt='{{ moreBelow }}'>

js/views/inbox_view.js

@@ -5,9 +5,7 @@
 /* global i18n: false */
 /* global Whisper: false */
 /* global textsecure: false */
-/* global Signal: false */
-/* global StringView: false */
-/* global storage: false */
+/* global clipboard: false */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -106,6 +104,7 @@
 
       this.mainHeaderView = new Whisper.MainHeaderView({
         el: this.$('.main-header-placeholder'),
+        items: this.getMainHeaderItems(),
       });
 
       this.conversation_stack = new Whisper.ConversationStack({
@@ -326,6 +325,30 @@
     onClick(e) {
       this.closeRecording(e);
     },
+    getMainHeaderItems() {
+      return [
+        this._mainHeaderItem('copyPublicKey', () => {
+         const ourNumber = textsecure.storage.user.getNumber();
+          clipboard.writeText(ourNumber);
+
+          const toast = new Whisper.MessageToastView({
+            message: i18n('copiedPublicKey'),
+          });
+          toast.$el.appendTo(this.$('.gutter'));
+          toast.render();
+        }),
+        this._mainHeaderItem('editDisplayName', () => {
+          window.Whisper.events.trigger('onEditProfile');
+        }),
+      ];
+    },
+    _mainHeaderItem(textKey, onClick) {
+      return {
+        id: textKey,
+        text: i18n(textKey),
+        onClick,
+      };
+    },
   });
 
   Whisper.ExpiredAlertBanner = Whisper.View.extend({

js/views/main_header_view.js

@@ -1,4 +1,4 @@
-/* global Whisper, textsecure, ConversationController, Signal */
+/* global Whisper, textsecure, ConversationController, Signal, i18n */
 
 // eslint-disable-next-line func-names
 (function() {
@@ -10,10 +10,14 @@
       templateName: 'main-header-placeholder',
       events: {
         'click .main-header-title-wrapper': 'onClick',
+        'click .edit-name': 'onEditProfile',
+        'click .copy-key': 'onCopyKey',
       },
-      initialize() {
-        const ourNumber = textsecure.storage.user.getNumber();
-        const me = ConversationController.getOrCreate(ourNumber, 'private');
+      initialize(options) {
+        this.items = options.items || [];
+
+        this.ourNumber = textsecure.storage.user.getNumber();
+        const me = ConversationController.getOrCreate(this.ourNumber, 'private');
 
         this.mainHeaderView = new Whisper.ReactWrapperView({
           className: 'main-header-wrapper',
@@ -24,10 +28,25 @@
         this.listenTo(me, 'change', update);
 
         this.render();
-
         this.$('.main-header-title-wrapper').prepend(this.mainHeaderView.el);
-        this.$content = this.$('.main-header-content-wrapper');
+
         this.$toggle = this.$('.main-header-content-toggle');
+        this.$content = this.$('.main-header-content-wrapper');
+        this.$content.hide();
+
+        this.registerCallbacks();
+      },
+      registerCallbacks() {
+        this.items.forEach(item => {
+          if (item.onClick) {
+            this.$(`#${item.id}`).click(item.onClick);
+          }
+        })
+      },
+      render_attributes() {
+        return {
+          items: this.items,
+        };
       },
       onClick() {
         // Toggle section visibility

js/views/toast_view.js

@@ -28,4 +28,13 @@
       setTimeout(this.close.bind(this), 2000);
     },
   });
+
+  Whisper.MessageToastView = Whisper.ToastView.extend({
+    initialize(options) {
+      this.message = options.message || '-';
+    },
+    render_attributes() {
+      return { toastMessage: this.message };
+    },
+  })
 })();

preload.js

@@ -7,6 +7,7 @@ const semver = require('semver');
 const { deferredToPromise } = require('./js/modules/deferred_to_promise');
 
 const { app } = electron.remote;
+const { clipboard } = electron;
 
 window.PROTO_ROOT = 'protos';
 const config = require('url').parse(window.location.toString(), true).query;
@@ -277,6 +278,8 @@ window.React = require('react');
 window.ReactDOM = require('react-dom');
 window.moment = require('moment');
 
+window.clipboard = clipboard;
+
 const Signal = require('./js/modules/signal');
 const i18n = require('./js/modules/i18n');
 const Attachments = require('./app/attachments');

stylesheets/_index.scss

@@ -33,6 +33,7 @@
   flex-direction: column;
   float: left;
   width: 300px;
+  position: relative;
 
   .tool-bar {
     margin-top: 8px;
@@ -53,6 +54,10 @@
     }
   }
 
+  .toast {
+    bottom: 78px;
+  }
+
   .content {
     overflow-y: auto;
     max-height: calc(100% - 88px);

stylesheets/_modules.scss

@@ -2186,10 +2186,25 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+
+  &:hover {
+    background-color: $color-dark-75;
+  }
 }
 
-.main-header-title-wrapper:hover {
-  background-color: $color-dark-75;
+.main-header-content-wrapper {
+  color: $color-dark-05;
+
+  div {
+    padding: 12px;
+    background-color: $color-dark-90;
+
+    cursor: pointer;
+
+    &:hover {
+      background-color: $color-dark-75;
+    }
+  }
 }
 
 .main-header-wrapper {
@@ -2206,7 +2221,7 @@
   align-items: center;
 }
 
-.main-header-content-toggle{
+.main-header-content-toggle {
   width: 3em;
   line-height: 3em;
   font-weight: bold;
@@ -2214,17 +2229,17 @@
   user-select: none;
   color: white;
   text-align: center;
-}
 
-.main-header-content-toggle::after {
-  -webkit-transition: all .35s;
-  -o-transition: all .35s;
-  transition: all .35s;
-  width: 3em;
-  line-height: 3em;
-  height: 3em;
-  content: '\25BE';
-  display: inline-block;
+  &:after {
+    -webkit-transition: all .35s;
+    -o-transition: all .35s;
+    transition: all .35s;
+    width: 3em;
+    line-height: 3em;
+    height: 3em;
+    content: '\25BE';
+    display: inline-block;
+  }
 }
 
 .main-header-content-toggle-visible::after {

stylesheets/_variables.scss

@@ -115,6 +115,7 @@ $color-dark-60: #797a7c;
 $color-dark-70: #414347;
 $color-dark-75: #292c33;
 $color-dark-85: #1a1c20;
+$color-dark-90: #121417;
 $color-black-008: rgba($color-black, 0.08);
 $color-black-008-no-tranparency: #ededed;
 $color-black-016-no-tranparency: #d9d9d9;