Detail panel (#3232)

* update dirent detail btn

* update icon

* add animation

* update

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -83,7 +83,7 @@ class LibContentContainer extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      currentDirent: null,
+      currentDirent: {},
       appMenuType: 'item_op_menu',
     };
 
@@ -286,6 +286,7 @@ class LibContentContainer extends React.Component {
               repoID={repoID}
               path={this.props.path}
               dirent={this.state.currentDirent}
+              currentRepoInfo={this.props.currentRepoInfo}
               onItemDetailsClose={this.onItemDetailsClose}
               onFileTagChanged={this.props.onFileTagChanged}
             />

frontend/src/pages/lib-content-view/lib-content-view.js

@@ -83,6 +83,10 @@ class LibContentView extends React.Component {
     });
   }
 
+  toggleDirentDetail = () => {
+    this.setState({ isDirentDetailShow: !this.state.isDirentDetailShow });
+  }
+
   closeDirentDetail = () => {
     this.setState({ isDirentDetailShow: false });
   }
@@ -538,6 +542,10 @@ class LibContentView extends React.Component {
     if (mode === this.state.currentMode) {
       return;
     }
+    if (mode === 'detail') {
+      this.toggleDirentDetail();
+      return;
+    }
     cookie.save('seafile-view-mode', mode);
     let path = this.state.path;
     if (this.state.currentMode === 'column' && this.state.isViewFile) {