fix #167 UI adjust & tabs UI fix

electerm · Jan 4, 2018 · dc6e550 · dc6e550
1 parent b4ca43c
commit dc6e550
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 28 deletions.
diff --git a/src/client/components/control/tabs.jsx b/src/client/components/control/tabs.jsx
@@ -4,6 +4,7 @@
  */
 
 import React from 'react'
+import _ from 'lodash'
 import {Icon, Tooltip, Button, Dropdown, Menu} from 'antd'
 import Tab from './tab'
 import './tabs.styl'
@@ -12,42 +13,89 @@ import createName from '../../common/create-title'
 
 const ButtonGroup = Button.Group
 const MenuItem = Menu.Item
+const extraWidth = 113
 //todo: scroll controll and keyboard controll
 //todo: drag and drop
 
 
 
 export default class Tabs extends React.Component {
 
-  scrollLeft = () => {
+  componentDidMount() {
+    this.dom = document.querySelector('.tabs-inner')
+  }
+
+  componentDidUpdate() {
+    this.adjustScroll()
+  }
+
+  adjustScroll = () => {
+    let {width, tabs, currentTabId} = this.props
+    let index = _.findIndex(tabs, t => t.id === currentTabId)
+    let w = (index + 1) * (tabMargin + tabWidth) + 5
+    let scrollLeft = w > width - extraWidth
+      ? w - width + extraWidth
+      : 0
+    this.dom.scrollLeft = scrollLeft
+  }
 
+  scrollLeft = () => {
+    let {scrollLeft} = this.dom
+    scrollLeft = scrollLeft - tabMargin - tabWidth
+    if (scrollLeft < 0) {
+      scrollLeft = 0
+    }
+    this.dom.scrollLeft = scrollLeft
   }
 
   scrollRight = () => {
+    let {scrollLeft} = this.dom
+    scrollLeft = scrollLeft + tabMargin + tabWidth
+    if (scrollLeft < 0) {
+      scrollLeft = 0
+    }
+    this.dom.scrollLeft = scrollLeft
+  }
 
+  onClickMenu = ({key}) => {
+    let id = key.split('##')[1]
+    this.props.onChange(id)
   }
 
   renderList = () => {
     let {tabs = []} = this.props
-    debug(tabs, 'dd')
     return (
       <Menu onClick={this.onClickMenu}>
         {
-          tabs.map(t => {
-            debug(t, t.id)
+          tabs.map((t, i) => {
             return (
-              <MenuItem key={t.id}>{createName(t)}</MenuItem>
+              <MenuItem
+                key={i + '##' + t.id}
+              >{createName(t)}
+              </MenuItem>
             )
           })
         }
       </Menu>
     )
   }
 
+  renderAddBtn = () => {
+    return (
+      <Icon
+        type="plus-circle-o"
+        title="open new terminal"
+        className="pointer tabs-add-btn font16"
+        onClick={this.props.onAdd}
+      />
+    )
+  }
+
   renderExtra() {
     return (
       <div className="tabs-extra pd1x">
-        <ButtonGroup className="iblock mg1r">
+        {this.renderAddBtn()}
+        <ButtonGroup className="iblock mg1x">
           <Button
             icon="left"
             onClick={this.scrollLeft}
@@ -74,34 +122,39 @@ export default class Tabs extends React.Component {
     let addBtnWidth = 22
     let tabsWidthAll = (tabMargin + tabWidth) * len + 10
     let overflow = width < (tabsWidthAll + addBtnWidth)
-    let extraWidth = overflow ? 86 : 0
+    //let extraw = overflow ? extraWidth : 0
     return (
       <div className="tabs">
         <div className="tabs-bg" onDoubleClick={onAdd} />
         <div
           className="tabs-inner"
           style={{
-            paddingRight: extraWidth
+            width
           }}
         >
-          {
-            tabs.map((tab, i) => {
-              return (
-                <Tab
-                  {...this.props}
-                  tab={tab}
-                  key={i + 'tab'}
-                />
-              )
-            })
-          }
-          <Tooltip title="open new terminal" placement="rightTop">
-            <Icon
-              type="plus-circle-o"
-              className="pointer tabs-add-btn font16"
-              onClick={onAdd}
-            />
-          </Tooltip>
+          <div
+            className="tabs-wrapper"
+            style={{
+              width: tabsWidthAll + extraWidth + 10
+            }}
+          >
+            {
+              tabs.map((tab, i) => {
+                return (
+                  <Tab
+                    {...this.props}
+                    tab={tab}
+                    key={i + 'tab'}
+                  />
+                )
+              })
+            }
+            {
+              !overflow
+                ? this.renderAddBtn()
+                : null
+            }
+          </div>
         </div>
         {
           overflow

diff --git a/src/client/components/control/tabs.styl b/src/client/components/control/tabs.styl
@@ -54,6 +54,7 @@
   height 46px
   top 0
   right 0
+  box-shadow -3px 0px 3px 0px rgba(0,0,0,0.15)
   background #fff
   line-height 46px
   z-index 20
diff --git a/src/client/components/main/window-wrapper.jsx b/src/client/components/main/window-wrapper.jsx
@@ -16,7 +16,7 @@ export default class WindowWrapper extends React.Component  {
 
   computeHeight = () => {
     let hasHost = _.get(this.props, 'tab.host')
-    return window.innerHeight - 39 - 46 - (hasHost ? 37 : 0)
+    return window.innerHeight - 39 - 46 - (hasHost ? 36 : 0)
   }
 
   onChange = pane => {
@@ -33,7 +33,7 @@ export default class WindowWrapper extends React.Component  {
       height
     }
     return (
-      <div className="ui-wrapper">
+      <div className={'ui-wrapper ' + pane}>
         {
           host
             ? (

diff --git a/src/client/components/main/wrapper.styl b/src/client/components/main/wrapper.styl
@@ -1,6 +1,17 @@
+#container
+  min-width 600px
 .ui-wrapper
   .ant-tabs-bar
     margin-bottom 0
+.ssh
+  .ant-tabs-bar
+    .ant-tabs-tab
+      color #999
+    .ant-tabs-tab-active
+      color #fff
+  .ant-tabs-nav-wrap
+    background #333
+
 .common-err-desc
   &:hover
     text-overflow clip