From 44a2cbb46c0ea1cd279363be02954ce78acc6a07 Mon Sep 17 00:00:00 2001
From: Szymon Pilkowski <szymon.pilkowski@gmail.com>
Date: Wed, 26 Apr 2017 08:23:01 +0200
Subject: [PATCH] Cleanup the multi-type context menu item

Fix #7816
---
 js/components/contextMenu.js | 28 ++++++++++++++++------------
 js/contextMenus.js           |  3 +--
 less/contextMenu.less        |  2 +-
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/js/components/contextMenu.js b/js/components/contextMenu.js
index 040b0d1d39..295c6b5009 100644
--- a/js/components/contextMenu.js
+++ b/js/components/contextMenu.js
@@ -21,9 +21,16 @@ class ContextMenuItem extends ImmutableComponent {
   get submenu () {
     return this.props.contextMenuItem.get('submenu')
   }
+  get items () {
+    return this.props.contextMenuItem.get('items')
+  }
   get hasSubmenu () {
     return this.submenu && this.submenu.size > 0
   }
+  get isMulti () {
+    return this.items && this.items.size > 0
+  }
+
   get accelerator () {
     const accelerator = this.props.contextMenuItem.get('accelerator')
     return accelerator && typeof accelerator === 'string'
@@ -138,17 +145,6 @@ class ContextMenuItem extends ImmutableComponent {
       return <div className='contextMenuItem contextMenuSeparator' role='listitem'>
         <hr />
       </div>
-    } else if (this.props.contextMenuItem.get('type') === 'multi') {
-      return <div className='contextMenuItem multiContextMenuItem'>
-        <span className='multiItemTitle' data-l10n-id={this.props.contextMenuItem.get('l10nLabelId')} />
-        {
-          this.props.contextMenuItem.get('submenu').map((subItem) =>
-            <div className='contextMenuSubItem'
-              onClick={this.onClick.bind(this, subItem.get('click'), false)}>
-              <span data-l10n-id={subItem.get('l10nLabelId')}>{this.getLabelForItem(subItem)}</span>
-            </div>)
-        }
-      </div>
     }
     const props = {
       className: cx({
@@ -156,7 +152,8 @@ class ContextMenuItem extends ImmutableComponent {
         hasFaIcon: faIcon,
         checkedMenuItem: this.props.contextMenuItem.get('checked'),
         hasIcon: icon || faIcon,
-        selectedByKeyboard: this.props.selected
+        selectedByKeyboard: this.props.selected,
+        multiContextMenuItem: this.isMulti
       }),
       role: 'listitem'
     }
@@ -194,6 +191,13 @@ class ContextMenuItem extends ImmutableComponent {
       }
       <span className='contextMenuItemText'
         data-l10n-id={this.props.contextMenuItem.get('l10nLabelId')}>{this.props.contextMenuItem.get('label')}</span>
+      {
+        this.isMulti && this.props.contextMenuItem.get('items').map((subItem) =>
+          <div className='contextMenuSubItem'
+            onClick={this.onClick.bind(this, subItem.get('click'), false)}>
+            <span data-l10n-id={subItem.get('l10nLabelId')}>{this.getLabelForItem(subItem)}</span>
+          </div>)
+      }
       {
         this.hasSubmenu
         ? <span className='submenuIndicatorContainer'>
diff --git a/js/contextMenus.js b/js/contextMenus.js
index da5871a5ec..9251041555 100644
--- a/js/contextMenus.js
+++ b/js/contextMenus.js
@@ -755,8 +755,7 @@ function hamburgerTemplateInit (location, e) {
     CommonMenu.separatorMenuItem,
     {
       l10nLabelId: 'zoom',
-      type: 'multi',
-      submenu: [{
+      items: [{
         label: '-',
         click: () => {
           ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_ZOOM_OUT)
diff --git a/less/contextMenu.less b/less/contextMenu.less
index 36946770f4..62da081907 100644
--- a/less/contextMenu.less
+++ b/less/contextMenu.less
@@ -107,7 +107,7 @@
       text-align: center;
     }
 
-    .multiItemTitle {
+    .contextMenuItemText {
       margin-top: auto;
       margin-bottom: auto;
       padding-right: 10px;