Add ipad support

Author: chunqiuyiyu

app/commons/Tab/TabBar.jsx

@@ -7,7 +7,10 @@ import TabLabel from './TabLabel'
 import Menu from 'components/Menu'
 import ContextMenu from 'components/ContextMenu'
 import i18n from 'utils/createI18n'
-
+import * as SideBar from 'components/Panel/SideBar/actions'
+import config from 'config'
+import * as Panel from 'components/Panel/actions'
+import panelState from 'components/Panel/state'
 
 @defaultProps(props => ({
   addTab: () => props.tabGroup.addTab(),
@@ -43,6 +46,7 @@ class TabBar extends Component {
     } = this.props
 
     const tabBarId = `tab_bar_${tabGroup.id}`
+    const size = panelState.panels.get('PANEL_BOTTOM').size
 
     return (
       <div id={tabBarId}
@@ -67,12 +71,28 @@ class TabBar extends Component {
           </svg>
         </div>
         <div onDoubleClick={addTab} className='tab-dbclick-area' />
+        {(!config.isPad || tabGroup.id !== 'terminalGroup')
+          && <div className='tab-show-list'
+          style={{ marginBottom: '-2px' }}
+          onClick={e => { 
+            e.stopPropagation()
+            this.setState({ showDropdownMenu: !this.state.showDropdownMenu }) 
+          }}
+        >
+          <i className='fa fa-ellipsis-h' />
+          {this.renderDropdownMenu(size)}
+        </div>}
+        {tabGroup.id === 'terminalGroup' &&
         <div className='tab-show-list'
-          onClick={(e) => { e.stopPropagation(); this.setState({ showDropdownMenu: true }) }}
+          style={{ marginBottom: size ? '4px' : '-6px' }}
+          onClick={e => { 
+            e.stopPropagation()
+            !size ? Panel.expandPanel('PANEL_BOTTOM') 
+                  : Panel.shrinkPanel('PANEL_BOTTOM')
+          }}
         >
-          <i className='fa fa-sort-desc' />
-          {this.renderDropdownMenu()}
-        </div>
+          <i className={`fa fa-sort-${size ? 'desc' : 'asc'}`} />
+        </div>}
         <ContextMenu
           items={contextMenuItems}
           isActive={this.state.showContextMenu}
@@ -88,20 +108,26 @@ class TabBar extends Component {
     e.stopPropagation()
     e.preventDefault()
 
+    const rects = e.target.getBoundingClientRect()
+    const isPad = config.isPad
+
     this.setState({
       showContextMenu: true,
-      contextMenuPos: { x: e.clientX, y: e.clientY },
+      contextMenuPos: { 
+        x: isPad ? rects.x : e.clientX, 
+        y: isPad ? rects.y : e.clientY
+      },
       contextMenuContext: context,
     })
   }
 
-  renderDropdownMenu () {
+  renderDropdownMenu (size) {
     if (!this.state.showDropdownMenu) return null
     const dropdownMenuItems = this.makeDropdownMenuItems()
     if (!dropdownMenuItems.length) return null
-    return (<Menu className='top-down to-left'
+    return (<Menu className={`${size ? 'top-down' : 'bottom-top'} to-left`}
+      style={{ bottom: size ? 'initial' : '15px', right: '2px' }}
       items={dropdownMenuItems}
-      style={{ right: '2px' }}
       deactivate={e => this.setState({ showDropdownMenu: false })}
     />)
   }

app/commons/Tab/TabLabel.jsx

@@ -9,6 +9,7 @@ import * as Modal from '../../components/Modal/actions'
 import config from 'config'
 import dispatchCommand from 'commands/dispatchCommand'
 import { fileIconProviders } from 'components/FileTree/state'
+import { gtouchstart, gtouchend, gtouchmove } from 'utils/touch'
 
 const closeFileTab = async (e, tab, removeTab, activateTab) => {
   e.stopPropagation()
@@ -87,7 +88,7 @@ let TabLabel = observer(({ tab, removeTab, activateTab, openContextMenu, dbClick
       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) }}
       onDoubleClick={() => {
         if (!tab.isActive) {
@@ -99,7 +100,13 @@ let TabLabel = observer(({ tab, removeTab, activateTab, openContextMenu, dbClick
         // Chrome 下直接执行 dragStart 会导致立即又出发了 window.dragend, 添加 timeout 以避免无法拖动的情况
         setTimeout(() => dnd.dragStart({ type: 'TAB', id: tab.id }), 0)
       }}
-      onContextMenu={e => openContextMenu(e, tab)}
+      onContextMenu={e => config.isPad ? '' : openContextMenu(e, tab)}
+      onTouchStart={e => {
+        e.persist()
+        gtouchstart(() => { openContextMenu(e, tab) })
+      }}
+      onTouchEnd={gtouchend}
+      onTouchMove={gtouchmove}
     >
       {dnd.target.id === tabLabelId ? <div className='tab-label-insert-pos'></div> : null}
       {tab.icon && <TabIcon fileName={tab.title} defaultIconStr={tab.icon} />}

app/commons/Tree/TreeNode.jsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react'
 import config from 'config'
 import cx from 'classnames'
 import dnd from 'utils/dnd'
+import { gtouchstart, gtouchend, gtouchmove } from 'utils/touch'
 import icons from 'file-icons-js'
 import { fileIconProviders } from 'components/FileTree/state'
 
@@ -135,9 +136,20 @@ class TreeNode extends Component {
         })}
         data-droppable='FILE_TREE_NODE'
         onContextMenu={(e) => {
+          if (config.isPad) return
           selectNode(node)
           openContextMenu(e, node)
         }}
+        onTouchMove={gtouchmove}
+        onTouchEnd={gtouchend}
+        onTouchStart={e => {
+          e.persist()
+          gtouchstart(() => {
+            selectNode(node)
+            openContextMenu(e, node)
+          })
+          e.stopPropagation()
+        }}
         draggable='true'
         onDragStart={(e) => {
           e.dataTransfer.effectAllowed = 'move'
@@ -151,17 +163,19 @@ class TreeNode extends Component {
         <div
           className={cx('filetree-node', { focus: node.isFocused })}
           ref={r => (this.nodeDOM = r)}
-          onClick={e => selectNode(node)}
+          onClick={e => {
+            selectNode(node)
+            config.isPad ? openNode(node) : ''
+          }}
           onDoubleClick={e => openNode(node)}
-          onTouchStart={e => openNode(node)}
           style={{ paddingLeft: `${1 + node.depth}em` }}
         >
           {node.isLoading && <i className='fa fa-spinner fa-pulse fa-fw' />}
           {!node.isLoading && (
             <span
               className='filetree-node-arrow'
               onDoubleClick={e => e.stopPropagation()}
-              onClick={e => openNode(node, null, e.altKey)}
+              onClick={e => config.isPad ? '' : openNode(node, null, e.altKey)}
             >
               {node.isDir && (
                 <i

app/components/ContextMenu/store.js

@@ -2,6 +2,7 @@ import state from './state'
 import isFunction from 'lodash/isFunction'
 import isArray from 'lodash/isArray'
 import { createAction, handleAction, registerAction } from 'utils/actions'
+import config from 'config'
 
 const OPEN_CONTEXT_MENU = 'menu:open_context_menu'
 handleAction(OPEN_CONTEXT_MENU, ({ isActive, pos, contextNode, items, className }) => {
@@ -23,7 +24,14 @@ function openContextMenuFactory (items, margin, className) {
 const openContextMenu = createAction(OPEN_CONTEXT_MENU, (e, context, items = [], margin = { x: 0, y: 0, relative: false }, className = '') => {
   e.stopPropagation()
   e.preventDefault()
-  let pos = { x: e.clientX + margin.x, y: e.clientY + margin.y }
+
+  const rects = e.target.getBoundingClientRect()
+  const isPad = config.isPad
+
+  let pos = { 
+    x: (isPad ? rects.x + rects.width / 2 : e.clientX) + margin.x,
+    y: (isPad ? rects.y + rects.height : e.clientY) +  + margin.y
+  }
   if (margin.relative) {
     const rect = e.target.getBoundingClientRect()
     pos = { x: rect.x + rect.width + margin.x, y: rect.y + rect.height + margin.y }

app/components/Git/GitBranchWidget.jsx

@@ -7,7 +7,7 @@ import { connect } from 'react-redux'
 import * as GitActions from './actions'
 import Menu from '../Menu'
 import i18n from 'utils/createI18n'
-
+import config from 'config'
 
 // add withRef to deliver ref to the wrapperedcomponent
 @connect(state => state.GitState.branches,
@@ -28,7 +28,7 @@ export default class GitBranchWidget extends Component {
     const { current: currentBranch, local: localBranches, remote: remoteBranches } = this.props
     return (
       <div className='status-bar-menu-item'
-        onClick={e => { this.toggleActive(true, true) }}
+        onClick={e => { this.toggleActive(true, true); config.menuBars.push(this) }}
       >
         <span>
           <span className='fa fa-code-fork' style={{ fontWeight: 800, marginRight: '5px' }} />

app/components/MenuBar/MenuBar.jsx

@@ -114,6 +114,9 @@ class MenuBarItem extends Component {
           onClick={(e) => {
             e.stopPropagation()
             toggleActive(index, true)
+            if (config.isPad) {
+              config.menuBars.push(this.props)
+            }
           }}
           onMouseEnter={(e) => { if (shouldHoverToggleActive) toggleActive(index) }}
         >

app/components/MonacoEditor/MonacoReact/BaseEditor.jsx

@@ -194,6 +194,12 @@ class MonacoEditor extends React.PureComponent {
     this.containerElement = component
   }
 
+  removeMenus = () => {
+    // Hack tricks to remove active menu
+    const menuBars = config.menuBars
+    menuBars.map(menubar => menubar.toggleActive())
+  }
+
   render () {
     const { width, height } = this.props
     const fixedWidth = width.toString().indexOf('%') !== -1 ? width : `${width}px`
@@ -207,6 +213,7 @@ class MonacoEditor extends React.PureComponent {
       style={{ width: '100%', height: '100%' }}
       onWidthChange={this.handleResize}
       onHeightChange={this.handleResize}
+      onTouchStart={this.removeMenus}
     >
       <div className='react-monaco-editor-container' ref={this.assignRef} style={style} />
     </Div>)

app/components/Panel/Panel.jsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react'
 import cx from 'classnames'
 import PanelAxis from './PanelAxis'
 import PanelContent from './PanelContent'
-import { confirmResize } from './actions'
+import { confirmResize, expandPanel, shrinkPanel } from './actions'
 import ResizeBar from '../ResizeBar'
 
 const Panel = observer((props) => {

app/components/Panel/actions.js

@@ -39,3 +39,16 @@ export const primiaryPanelBlurControler = registerAction(PRIMIARY_PANEL_BLUR_CON
   state.primaryPanelAxis.blur = shouldShow
 })
 
+let initSize = 0
+export const PANEL_SHRINK = 'PANEL_SHRINK'
+export const shrinkPanel = registerAction(PANEL_SHRINK, (panelId) => {
+  const panel = state.panels.get(panelId)
+  initSize = panel.size
+  panel.size = 0
+})
+
+export const PANEL_EXPAND = 'PANEL_EXPAND'
+export const expandPanel = registerAction(PANEL_EXPAND, (panelId) => {
+  const panel = state.panels.get(panelId)
+  panel.size = initSize
+})

app/components/Terminal/Xterm.jsx

@@ -127,11 +127,17 @@ class Term extends Component {
     emitter.removeListener(E.THEME_CHANGED, this.onTheme)
     state.terminalManager.remove(this.terminal)
   }
+  
+  removeMenus = () => {
+    // Hack tricks to remove active menu
+    const menuBars = config.menuBars
+    menuBars.map(menubar => menubar.toggleActive())
+  }
 
   render () {
     const { tab } = this.props
     return (
-      <div className='ide-terminal'>
+      <div className='ide-terminal' onTouchStart={this.removeMenus}>
         <div className='terminal-container'>
           <div className='terminal-body' data-droppable='TERMINAL' ref={r => this.termDOM = r}></div>
         </div>