Don't create exit button as child view

It gets us in to infinite loop when trying to show/hide a child view
when entering/leaving the parent view, because moving the cursor to child
view will mark mouse leaving the parent which then tries to hide the
child view.

This only happens for GTK+.

Author: zcbenz

lib/theme/dark/index.js

@@ -24,6 +24,8 @@ const darkTheme = {
     presenceColor: '#9FEAF9',
     presencePadding: 3,
     presenceRadius: 4,
+    exitButtonRadius: 7,
+    exitButtonXHeight: 5,
   },
   chatBox: {
     borderColor: '#E5E5E5',

lib/view/channel-exit.js

@@ -1,7 +1,6 @@
 const gui = require('gui')
 
 const ChatWindow = require('./chat-window')
-const ChannelExit = require('./channel-exit')
 const {theme} = require('../controller/theme-manager')
 
 class ChannelItem {
@@ -21,6 +20,7 @@ class ChannelItem {
     }
 
     this.hover = false
+    this.hoverExitButton = false
     this.isSelected = false
     this.disabled = false
 
@@ -30,23 +30,17 @@ class ChannelItem {
     this.view.onDraw = this._draw.bind(this)
     this.view.onMouseEnter = () => {
       this.hover = true
-      if (this.channelExit && this.channel.mentions === 0)
-        this.channelExit.view.setVisible(true)
+      this.hoverExitButton = false
       this.view.schedulePaint()
     }
     this.view.onMouseLeave = () => {
       this.hover = false
-      if (this.channelExit)
-        this.channelExit.view.setVisible(false)
+      this.hoverExitButton = false
       this.view.schedulePaint()
     }
     this.view.onMouseUp = this._click.bind(this)
-    if (this.channel.type === 'dm') {
-      this.channelExit = new ChannelExit()
-      this.channelExit.view.setVisible(false)
-      this.channelExit.view.onMouseUp = this._clickExit.bind(this)
-      this.view.addChildView(this.channelExit.view)
-    }
+    if (channel.type === 'dm')
+      this.view.onMouseMove = this._updateExitButtonHover.bind(this)
   }
 
   unload() {
@@ -120,9 +114,12 @@ class ChannelItem {
     // Draw mentions count.
     if (this.channel.mentions > 0)
       this._drawMentionsCount(painter, mentionsRadius, padding + textRect.width, bounds.height, textRect.height)
-    // Draw presence indicator.
-    if (this.channel.type === 'dm')
+    // Draw DM-specific items.
+    if (this.channel.type === 'dm') {
       this._drawPresenceIndicator(painter, bounds, attributes)
+      if (this.hover && this.channel.mentions === 0)
+        this._drawExitButton(painter, bounds, attributes)
+    }
   }
 
   _drawMentionsCount(painter, radius, x, height, textHeight) {
@@ -168,7 +165,56 @@ class ChannelItem {
     }
   }
 
+  _drawExitButton(painter, bounds, attributes) {
+    const {exitButtonXHeight, exitButtonRadius, padding} = theme.channelItem
+    const xPos = bounds.width - padding - exitButtonRadius
+    const arcPos = {x: xPos, y: bounds.height / 2}
+    painter.setStrokeColor(this.hoverExitButton ? theme.channelItem.selectedColor
+                                                : theme.channelItem.normalColor)
+    painter.beginPath()
+    painter.setLineWidth(1)
+    painter.arc(arcPos, exitButtonRadius, 0, 2 * Math.PI)
+    painter.translate({x: xPos, y: (bounds.height - exitButtonXHeight) / 2})
+    painter.moveTo({x: -(exitButtonXHeight / 2), y: 0})
+    painter.lineTo({x: exitButtonXHeight / 2, y: exitButtonXHeight})
+    painter.moveTo({x: - (exitButtonXHeight / 2), y: exitButtonXHeight})
+    painter.lineTo({x: exitButtonXHeight / 2, y: 0})
+    painter.stroke()
+  }
+
+  _updateExitButtonHover(view, event) {
+    if (this.channel.mentions > 0) {
+      this.hoverExitButton = false
+      this.view.schedulePaint()
+      return
+    }
+    const {exitButtonXHeight, exitButtonRadius, padding} = theme.channelItem
+    const bounds = view.getBounds()
+    const rect = {
+      left: bounds.width - padding - exitButtonRadius * 2,
+      top: bounds.height / 2 - exitButtonRadius,
+      right: bounds.width - padding,
+      bottom: bounds.height - exitButtonRadius,
+    }
+    const hoverExitButton = event.positionInView.x >= rect.left &
+                            event.positionInView.x <= rect.right &
+                            event.positionInView.y >= rect.top &
+                            event.positionInView.y <= rect.bottom
+    if (this.hoverExitButton != hoverExitButton) {
+      this.hoverExitButton = hoverExitButton
+      this.view.schedulePaint()
+    }
+  }
+
   _click(view, event) {
+    // Click on the exit button.
+    if (this.hoverExitButton) {
+      if (event.button === 1)
+        this._leave()
+      return true
+    }
+
+    // Click on the channel item.
     if (event.button === 1) {
       // Left click to open channel.
       this.parent.selectChannelItem(this)
@@ -190,12 +236,6 @@ class ChannelItem {
     }
   }
 
-  _clickExit(view, event) {
-    if (event.button === 1)
-      this._leave()
-    return true
-  }
-
   _popup() {
     const bounds = this.parent.mainWindow.chatBox.view.getBounds()
     new ChatWindow(this.channel, bounds)