repair heighlight bug

frontend/src/components/dialog/wiki-select-dialog.js

@@ -51,7 +51,7 @@ class WikiSelectDialog extends React.Component {
     return (
       <Modal isOpen={true}>
         <ModalHeader toggle={this.toggle}>{gettext('Choose a library as Wiki')}</ModalHeader>
-        <ModalBody>
+        <ModalBody className="dialog-list-container">
           <table>
             <thead>
               <tr>

frontend/src/components/wiki-list-view/wiki-list-item.js

@@ -9,10 +9,13 @@ import Toast from '../toast';
 import WikiMenu from './wiki-menu';
 import WikiRename from './wiki-rename';
 
-const itempropTypes = {
+const propTypes = {
   wiki: PropTypes.object.isRequired,
   renameWiki: PropTypes.func.isRequired,
   deleteWiki: PropTypes.func.isRequired,
+  isItemFreezed: PropTypes.bool.isRequired,
+  onFreezedItem: PropTypes.func.isRequired,
+  onUnfreezedItem: PropTypes.func.isRequired,
 };
 
 class WikiListItem extends Component {
@@ -21,7 +24,6 @@ class WikiListItem extends Component {
     this.state = {
       isShowWikiMenu: false,
       position: {top:'', left: ''},
-      isItemFreezed: false,
       isShowDeleteDialog: false,
       isShowMenuControl: false,
       isRenameing: false,
@@ -55,19 +57,21 @@ class WikiListItem extends Component {
     this.setState({
       isShowWikiMenu: true,
       position: position,
-      isItemFreezed: true,
     });
+    this.props.onFreezedItem();
   }
 
   onHideWikiMenu = () => {
     this.setState({
       isShowWikiMenu: false,
-      isItemFreezed: false,
+      isShowMenuControl: false,
+      highlight: '',
     });
+    this.props.onUnfreezedItem();
   }
 
   onMouseEnter = () => {
-    if (!this.state.isItemFreezed) {
+    if (!this.props.isItemFreezed) {
       this.setState({
         isShowMenuControl: true,
         highlight: 'tr-highlight',
@@ -76,7 +80,7 @@ class WikiListItem extends Component {
   }
 
   onMouseLeave = () => {
-    if (!this.state.isItemFreezed) {
+    if (!this.props.isItemFreezed) {
       this.setState({
         isShowMenuControl: false,
         highlight: '',
@@ -84,10 +88,12 @@ class WikiListItem extends Component {
     }
   }
 
-  onRenameToggle = () => {
+  onRenameToggle = (e) => {
+    e.nativeEvent.stopImmediatePropagation();
+    this.props.onFreezedItem();
     this.setState({
       isShowWikiMenu: false,
-      isItemFreezed: true,
+      isShowMenuControl: false,
       isRenameing: true,
     });
   }
@@ -114,10 +120,8 @@ class WikiListItem extends Component {
   }
 
   onRenameCancel = () => {
-    this.setState({
-      isRenameing: false,
-      isItemFreezed: false,
-    });
+    this.setState({isRenameing: false});
+    this.props.onUnfreezedItem();
   }
 
   onDeleteToggle = () => {
@@ -146,7 +150,7 @@ class WikiListItem extends Component {
     return (
       <Fragment>
         <tr className={this.state.highlight} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
-          <td>
+          <td className="name">
             {this.state.isRenameing ?
               <WikiRename wiki={wiki} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
               <a href={wiki.link}>{gettext(wiki.name)}</a>
@@ -154,7 +158,7 @@ class WikiListItem extends Component {
           </td>
           <td><a href={userProfileURL} target='_blank'>{gettext(wiki.owner_nickname)}</a></td>
           <td>{moment(wiki.updated_at).fromNow()}</td>
-          <td className="menu-toggle" onClick={this.onMenuToggle}>
+          <td className="menu-toggle">
             <MenuControl
               isShow={this.state.isShowMenuControl}
               onClick={this.onMenuToggle}
@@ -181,6 +185,6 @@ class WikiListItem extends Component {
   }
 }
 
-WikiListItem.propTypes = itempropTypes;
+WikiListItem.propTypes = propTypes;
 
 export default WikiListItem;

frontend/src/components/wiki-list-view/wiki-list-view.js

@@ -1,9 +1,9 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import WikiListItem from './wiki-list-item';
 
-const contentpropTypes = {
+const propTypes = {
   data: PropTypes.object.isRequired,
   renameWiki: PropTypes.func.isRequired,
   deleteWiki: PropTypes.func.isRequired,
@@ -11,6 +11,21 @@ const contentpropTypes = {
 
 class WikiListView extends Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isItemFreezed: false,
+    }
+  }
+
+  onFreezedItem = () => {
+    this.setState({isItemFreezed: true});
+  }
+
+  onUnfreezedItem = () => {
+    this.setState({isItemFreezed: false});
+  }
+
   render() {
     let {loading, errorMsg, wikis} = this.props.data;
 
@@ -32,9 +47,14 @@ class WikiListView extends Component {
           <tbody>
             {wikis.map((wiki, index) => {
               return(
-                <WikiListItem key={index} wiki={wiki}
+                <WikiListItem 
+                  key={index} 
+                  wiki={wiki}
                   renameWiki={this.props.renameWiki}
                   deleteWiki={this.props.deleteWiki}
+                  isItemFreezed={this.state.isItemFreezed}
+                  onFreezedItem={this.onFreezedItem}
+                  onUnfreezedItem={this.onUnfreezedItem}
                 />);
             })}
           </tbody>
@@ -44,6 +64,6 @@ class WikiListView extends Component {
   }
 }
 
-WikiListView.propTypes = contentpropTypes;
+WikiListView.propTypes = propTypes;
 
 export default WikiListView;

frontend/src/pages/wikis/wikis.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl } from '../../utils/constants';
 import WikiAdd from './wiki-add';
-import Toast from '../../components/toast';
+import toaster from '../../components/toast';
 import ModalPortal from '../../components/modal-portal';
 import NewWikiDialog from '../../components/dialog/new-wiki-dialog';
 import WikiSelectDialog from '../../components/dialog/wiki-select-dialog';
@@ -110,7 +110,7 @@ class Wikis extends Component {
     }).catch((error) => {
       if(error.response) {
         let errorMsg = error.response.data.error_msg;
-        Toast.error(errorMsg);
+        toaster.danger(errorMsg);
       }
     });
   }
@@ -123,28 +123,25 @@ class Wikis extends Component {
         }
         return item;
       });
-      this.setState({
-        wikis: wikis
-      });
+      this.setState({wikis: wikis});
     }).catch((error) => {
       if(error.response) {
         let errorMsg = error.response.data.error_msg;
-        Toast.error(errorMsg);
+        toaster.danger(errorMsg);
       }
     });
   }
 
   deleteWiki = (wiki) => {
     seafileAPI.deleteWiki(wiki.slug).then(() => {
-      this.setState({
-        wikis: this.state.wikis.filter(item => {
-          return item.name !== wiki.name
-        })
+      let wikis = this.state.wikis.filter(item => {
+        return item.name !== wiki.name;
       });
+      this.setState({wikis: wikis});
     }).catch((error) => {
       if(error.response) {
         let errorMsg = error.response.data.error_msg;
-        Toast.error(errorMsg);
+        toaster.danger(errorMsg);
       }
     });
   }
@@ -155,9 +152,11 @@ class Wikis extends Component {
         <div className="main-panel-center">
           <div className="cur-view-container" id="wikis">
             <div className="cur-view-path">
+              <div className="path-container">
                 <h3 className="sf-heading">{gettext('Wikis')}</h3>
-              <div style={{float:'right'}} className="operation">
-                <button className="btn btn-secondary operation-item" onClick={this.onAddMenuToggle}>
+              </div>
+              <div className="path-toolbar">
+                <button className="btn btn-secondary operation-item" style={{marginTop: '-0.25rem'}} onClick={this.onAddMenuToggle}>
                   <i className="fa fa-plus-square op-icon"></i>
                   {gettext('Add Wiki')}
                 </button>

media/css/seahub_react.css

@@ -163,6 +163,11 @@ ul,ol,li {
     user-select: none;
 }
 
+.dialog-list-container { /*for content is list dialog*/
+    height: 20rem;
+    overflow: auto;
+}
+
 /* UI Widget */
 
 /**** caret ****/
@@ -812,6 +817,10 @@ table .star .empty {
     color: #d0d0d0;
 }
 
+table .name {
+    line-height: 1.5rem; /*for wiki height*/
+}
+
 table .rename-container input {
     box-sizing: content-box;
     padding: 2px 3px;