Apply custom chrome to conversation windows

js/conversation_panel.js

@@ -27,7 +27,8 @@
             if (conversation) {
                 window.document.title = conversation.getTitle();
                 var view = new bg.Whisper.ConversationView({
-                    model: conversation
+                    model: conversation,
+                    appWindow: windowInfo
                 });
                 view.$el.prependTo(body);
                 view.$('input.send-message').focus();

js/panel_controller.js

@@ -88,6 +88,7 @@
                 id: modelId,
                 url: 'conversation.html',
                 type: 'panel',
+                frame: 'none',
                 focused: true,
                 width: 300,
                 height: 440

js/views/conversation_view.js

@@ -26,7 +26,7 @@
         render_attributes: function() {
             return { group: this.model.get('type') === 'group' };
         },
-        initialize: function() {
+        initialize: function(options) {
             this.listenTo(this.model, 'destroy', this.stopListening);
 
             this.render();
@@ -41,6 +41,10 @@
             this.$('.discussion-container').append(this.view.el);
             this.view.render();
 
+            new Whisper.WindowControlsView({
+                appWindow: options.appWindow
+            }).$el.appendTo(this.$('#header'));
+
             setTimeout(function() {
                 this.view.scrollToBottom();
             }.bind(this), 10);

stylesheets/_global.scss

@@ -39,6 +39,10 @@ body {
   box-shadow: 0 -4px 3px 4px rgba(darken($header-color, 30%), 0.8);
   color: $blue;
   -webkit-app-region: drag;
+
+  button {
+    -webkit-app-region: no-drag;
+  }
 }
 
 .title-text {
@@ -71,7 +75,7 @@ button.back {
 
 .menu {
   position: relative;
-  float: right;
+  float: left;
   height: 36px;
   padding-left: 8px;
 

stylesheets/_index.scss

@@ -1,9 +1,5 @@
 .window-controls {
   text-align: right;
-
-  button {
-    -webkit-app-region: no-drag;
-  }
 }
 
 .gutter {

stylesheets/manifest.css

@@ -48,6 +48,8 @@ body {
   box-shadow: 0 -4px 3px 4px rgba(165, 165, 165, 0.8);
   color: #2090ea;
   -webkit-app-region: drag; }
+  #header button {
+    -webkit-app-region: no-drag; }
 
 .title-text {
   display: block;
@@ -75,7 +77,7 @@ button.back {
 
 .menu {
   position: relative;
-  float: right;
+  float: left;
   height: 36px;
   padding-left: 8px; }
   .menu .hamburger {
@@ -254,8 +256,6 @@ img.emoji {
 
 .window-controls {
   text-align: right; }
-  .window-controls button {
-    -webkit-app-region: no-drag; }
 
 .gutter {
   padding: 36px 0 0; }