Merge branch 'dashboard' into fix-language-mode-add-makefile

Author: Aaaaash

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/MonacoEditor/state.js

@@ -21,6 +21,8 @@ import {
 import codeEditorService from './codeEditorService'
 import ConditionWidget from './ConditionWidget'
 import initialOptions from './monacoDefaultOptions'
+import config from 'config'
+import { state as virtualKeyState } from '../VirtualKey'
 
 reaction(
   () => initialOptions.theme,
@@ -105,6 +107,7 @@ class EditorInfo {
     state.editors.set(this.uri, monacoEditor)
 
     monacoEditor.onDidFocusEditorText(() => {
+      virtualKeyState.show = true
       state.activeMonacoEditor = monacoEditor
       if (state.activeEditorListeners && state.activeEditorListeners.length > 0) {
         for (const activeEditorListener of state.activeEditorListeners) {

app/components/Notification/actions.js

@@ -4,6 +4,8 @@ import state from './state'
 export const NOTIFY_TYPE = {
   ERROR: 'error',
   INFO: 'info',
+  SUCCESS: 'success',
+  WARNING: 'warning'
 }
 
 export const NOTIFICATION_REMOVE = 'NOTIFICATION_REMOVE'
@@ -13,12 +15,14 @@ export const removeNotification = registerAction.normal(NOTIFICATION_REMOVE, (no
 })
 
 const NOTIFICATION_ADD = 'NOTIFICATION_ADD'
-export const addNotification = registerAction.normal(NOTIFICATION_ADD,
+export const addNotification = registerAction.normal(
+  NOTIFICATION_ADD,
   (notification) => {
     const notifKey = Date.now()
     let defaultNotification = {
       message: '',
-      action: 'Dismiss',
+      action: '',
+      notifyType: NOTIFY_TYPE.SUCCESS, // 默认弹出success弹窗
       key: notifKey,
       dismissAfter: 6000,
       onClick: () => removeNotification(notifKey)
@@ -28,7 +32,7 @@ export const addNotification = registerAction.normal(NOTIFICATION_ADD,
       defaultNotification = {
         ...defaultNotification,
         barStyle: { backgroundColor: 'red' },
-        actionStyle: { color: 'white' },
+        actionStyle: { color: 'white' }
       }
     }
 

app/components/Notification/index.jsx

@@ -4,40 +4,87 @@ import { NotificationStack } from 'react-notification'
 import * as actions from './actions'
 import state from './state'
 
-const barStyleFactory = (index, style) => {
-  return Object.assign({}, style, {
+const actionStyleFactory = (index, style) =>
+  Object.assign({}, style, {
+    color: '#ccc',
+    right: '-100%',
+    bottom: 'initial',
+    top: `${2 + index * 4}rem`,
+    zIndex: 20,
+    fontSize: '12px',
+    padding: '8px'
+  })
+const barStyleFactory = (index, style) =>
+  Object.assign({}, style, {
     left: 'initial',
     right: '-100%',
     bottom: 'initial',
     top: `${2 + index * 4}rem`,
     zIndex: 20,
     fontSize: '12px',
-    padding: '8px',
+    padding: '8px'
   })
-}
 
-const activeBarStyleFactory = (index, style) => {
-  return Object.assign({}, style, {
+const activeBarStyleFactory = (index, style) =>
+  Object.assign({}, style, {
     left: 'initial',
     right: '1rem',
     bottom: 'initial',
     top: `${2 + index * 4}rem`,
     fontSize: '12px',
-    padding: '8px',
+    padding: '8px'
   })
+
+function notificationMessageFactory (notifyType, message) {
+  let ClassName
+  let Color
+  switch (notifyType) {
+    case 'error':
+      ClassName = 'fa fa-times-circle'
+      Color = 'red'
+      break
+    case 'success':
+      ClassName = 'fa fa-check-circle'
+      Color = 'green'
+      break
+    case 'warning':
+      ClassName = 'fa fa-exclamation-triangle'
+      Color = 'orange'
+      break
+    case 'info':
+      ClassName = 'fa fa-info-circle'
+      Color = 'blue'
+      break
+    default:
+  }
+  return (
+    <span style={{ fontSize: 12 }}>
+      <span style={{ color: Color }}>
+        <i className={ClassName} aria-hidden='true' />
+      </span>
+      &nbsp;&nbsp;{message}
+    </span>
+  )
 }
 
 class Notification extends Component {
   constructor (props) {
     super()
   }
+
   render () {
-    const { notifications } = this.props
+    const notifications = this.props.notifications.map((v) => {
+      v.action = <i className='fa fa-close' aria-hidden='true' />
+      v.dismissAfter = false
+      v.message = notificationMessageFactory(v.notifyType, v.message)
+      return v
+    })
     return (
       <NotificationStack
         notifications={notifications}
         onDismiss={notification => actions.removeNotification(notification.key)}
         barStyleFactory={barStyleFactory}
+        actionStyleFactory={actionStyleFactory}
         activeBarStyleFactory={activeBarStyleFactory}
       />
     )