Merge pull request #356 from Coding/middle-click

fix tab label icon height bug and middle click remove tab

Author: KevenYoung

app/commons/Tab/TabLabel.jsx

@@ -16,15 +16,16 @@ let TabLabel = observer(({tab, removeTab, activateTab, openContextMenu}) => {
       id={tabLabelId}
       data-droppable='TABLABEL'
       draggable='true'
-      onClick={e => activateTab(tab.id)}
+      onClick={e => activateTab(tab.id) }
+      onMouseUp={e => {e.button === 1 && removeTab(tab.id)}}
       onDragStart={e => {
         // Chrome 下直接执行 dragStart 会导致立即又出发了 window.dragend, 添加 timeout 以避免无法拖动的情况
         setTimeout(() => dnd.dragStart({ type: 'TAB', id: tab.id }), 0)
       }}
       onContextMenu={e => openContextMenu(e, tab)}
     >
       {dnd.target.id === tabLabelId ? <div className='tab-label-insert-pos'></div>: null}
-      {tab.icon ? <div className={tab.icon}></div>: null}
+      {tab.icon ? <div className={`icon ${tab.icon}`}></div>: null}
       <div className='title'>{tab.title}</div>
       <div className='control'>
         <i className='close' onClick={e => { e.stopPropagation(); removeTab(tab.id) }}>×</i>

app/styles/core-ui/Tab.styl

@@ -106,6 +106,10 @@ $tab-control-width = $tab-height*0.5;
   .tab-label-insert-pos {
     absolute(top 0px left -2px bottom 0);
   }
+  .fa {
+    height: $tab-height;
+    line-height: $tab-height;
+  }
 
   .title {
     text-overflow: ellipsis;
@@ -181,4 +185,3 @@ $tab-control-width = $tab-height*0.5;
     display: block;
   }
 }
-