select files and right dir tools is show (#6581)

frontend/src/components/cur-dir-path/index.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Utils } from '../../utils/utils';
 import SortOptionsDialog from '../../components/dialog/sort-options';
 import DirPath from './dir-path';
-import DirTool from './dir-tool';
 
 const propTypes = {
   currentRepoInfo: PropTypes.object.isRequired,
@@ -15,17 +13,12 @@ const propTypes = {
   onTabNavClick: PropTypes.func,
   pathPrefix: PropTypes.array,
   isViewFile: PropTypes.bool,
-  updateUsedRepoTags: PropTypes.func.isRequired,
   fileTags: PropTypes.array.isRequired,
-  onDeleteRepoTag: PropTypes.func.isRequired,
   toggleTreePanel: PropTypes.func.isRequired,
   direntList: PropTypes.array,
   sortBy: PropTypes.string,
   sortOrder: PropTypes.string,
   sortItems: PropTypes.func,
-  currentMode: PropTypes.string.isRequired,
-  switchViewMode: PropTypes.func.isRequired,
-  isCustomPermission: PropTypes.bool,
   repoEncrypted: PropTypes.bool.isRequired,
   isGroupOwnedRepo: PropTypes.bool.isRequired,
   enableDirPrivateShare: PropTypes.bool.isRequired,
@@ -38,7 +31,6 @@ const propTypes = {
   filePermission: PropTypes.string,
   repoTags: PropTypes.array.isRequired,
   onFileTagChanged: PropTypes.func.isRequired,
-  viewId: PropTypes.string,
   onItemMove: PropTypes.func.isRequired,
 };
 
@@ -58,7 +50,6 @@ class CurDirPath extends React.Component {
   };
 
   render() {
-    const isDesktop = Utils.isDesktop();
     return (
       <div className="cur-dir-path d-flex justify-content-between align-items-center">
         <DirPath
@@ -87,23 +78,7 @@ class CurDirPath extends React.Component {
           repoTags={this.props.repoTags}
           onItemMove={this.props.onItemMove}
         />
-        {isDesktop &&
-        <DirTool
-          repoID={this.props.repoID}
-          repoName={this.props.repoName}
-          userPerm={this.props.userPerm}
-          currentPath={this.props.currentPath}
-          updateUsedRepoTags={this.props.updateUsedRepoTags}
-          onDeleteRepoTag={this.props.onDeleteRepoTag}
-          currentMode={this.props.currentMode}
-          switchViewMode={this.props.switchViewMode}
-          isCustomPermission={this.props.isCustomPermission}
-          sortBy={this.props.sortBy}
-          sortOrder={this.props.sortOrder}
-          sortItems={this.props.sortItems}
-          viewId={this.props.viewId}
-        />}
-        {!isDesktop && this.props.direntList.length > 0 &&
+        {!this.props.isDesktop && this.props.direntList.length > 0 &&
         <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
         {this.state.isSortOptionsDialogOpen &&
         <SortOptionsDialog

frontend/src/css/lib-content-view.css

@@ -379,3 +379,16 @@
 .custom-modal .file-list-col .file-chooser-search-input {
   padding: 0 1rem;
 }
+
+.cur-view-container .cur-view-path {
+  display: flex;
+  align-items: flex-start;
+  border-bottom: none;
+}
+
+.cur-view-container .cur-view-path .cur-view-path-left {
+  border-bottom: none;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
 import CurDirPath from '../../components/cur-dir-path';
+import DirTool from '../../components/cur-dir-path/dir-tool';
 import Detail from '../../components/dirent-detail';
 import DirColumnView from '../../components/dir-view-mode/dir-column-view';
 import ToolbarForSelectedDirents from '../../components/toolbar/selected-dirents-toolbar';
@@ -167,17 +169,14 @@ class LibContentContainer extends React.Component {
   };
 
   render() {
-    const { path, repoID, usedRepoTags } = this.props;
+    const isDesktop = Utils.isDesktop();
+    const { path, repoID, usedRepoTags, isDirentSelected } = this.props;
     let isRepoInfoBarShow = false;
     if (path === '/') {
-      if (Utils.isDesktop() && usedRepoTags.length !== 0) {
+      if (isDesktop && usedRepoTags.length !== 0) {
         isRepoInfoBarShow = true;
       }
     }
-    let curViewPathStyle = { 'borderBottom': 'none' };
-    if (this.props.isDirentSelected) {
-      curViewPathStyle.transform = 'translateY(-50px)';
-    }
 
     return (
       <div className="cur-view-container">
@@ -186,67 +185,86 @@ class LibContentContainer extends React.Component {
             {gettext('This library has been set to read-only by admin and cannot be updated.')}
           </div>
         }
-        <div className="cur-view-path d-block" style={curViewPathStyle}>
-          <CurDirPath
-            currentRepoInfo={this.props.currentRepoInfo}
-            repoID={repoID}
-            repoName={this.props.currentRepoInfo.repo_name}
-            repoEncrypted={this.props.repoEncrypted}
-            isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-            pathPrefix={this.props.pathPrefix}
-            currentPath={this.props.path}
-            userPerm={this.props.userPerm}
-            isViewFile={this.props.isViewFile}
-            onTabNavClick={this.props.onTabNavClick}
-            onPathClick={this.onPathClick}
-            updateUsedRepoTags={this.props.updateUsedRepoTags}
-            fileTags={this.props.fileTags}
-            onDeleteRepoTag={this.props.onDeleteRepoTag}
-            direntList={this.props.direntList}
-            sortBy={this.props.sortBy}
-            sortOrder={this.props.sortOrder}
-            sortItems={this.props.sortItems}
-            toggleTreePanel={this.props.toggleTreePanel}
-            currentMode={this.props.currentMode}
-            switchViewMode={this.props.switchViewMode}
-            isCustomPermission={this.props.isCustomPermission}
-            enableDirPrivateShare={this.props.enableDirPrivateShare}
-            showShareBtn={this.props.showShareBtn}
-            onAddFolder={this.props.onAddFolder}
-            onAddFile={this.props.onAddFile}
-            onUploadFile={this.props.onUploadFile}
-            onUploadFolder={this.props.onUploadFolder}
-            fullDirentList={this.props.fullDirentList}
-            filePermission={this.props.filePermission}
-            onFileTagChanged={this.props.onToolbarFileTagChanged}
-            repoTags={this.props.repoTags}
-            viewId={this.props.viewId}
-            onItemMove={this.props.onItemMove}
-          />
-          <ToolbarForSelectedDirents
-            repoID={this.props.repoID}
-            path={this.props.path}
-            userPerm={this.props.userPerm}
-            repoEncrypted={this.props.repoEncrypted}
-            repoTags={this.props.repoTags}
-            selectedDirentList={this.props.selectedDirentList}
-            direntList={this.props.direntList}
-            onItemsMove={this.props.onItemsMove}
-            onItemsCopy={this.props.onItemsCopy}
-            onItemsDelete={this.props.onItemsDelete}
-            onItemRename={this.props.onItemRename}
-            isRepoOwner={this.props.isRepoOwner}
-            currentRepoInfo={this.props.currentRepoInfo}
-            enableDirPrivateShare={this.props.enableDirPrivateShare}
-            updateDirent={this.props.updateDirent}
-            unSelectDirent={this.props.unSelectDirent}
-            onFilesTagChanged={this.props.onFilesTagChanged}
-            showShareBtn={this.props.showShareBtn}
-            isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-            showDirentDetail={this.props.showDirentDetail}
-            currentMode={this.props.currentMode}
-            switchViewMode={this.props.switchViewMode}
-          />
+        <div className="cur-view-path">
+          <div
+            className={classnames('cur-view-path-left', { 'w-100': !isDesktop })}
+            style={isDirentSelected ? { transform: 'translateY(-50px)' } : {}}
+          >
+            <CurDirPath
+              currentRepoInfo={this.props.currentRepoInfo}
+              repoID={repoID}
+              repoName={this.props.currentRepoInfo.repo_name}
+              repoEncrypted={this.props.repoEncrypted}
+              isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+              pathPrefix={this.props.pathPrefix}
+              currentPath={this.props.path}
+              userPerm={this.props.userPerm}
+              isViewFile={this.props.isViewFile}
+              onTabNavClick={this.props.onTabNavClick}
+              onPathClick={this.onPathClick}
+              fileTags={this.props.fileTags}
+              direntList={this.props.direntList}
+              sortBy={this.props.sortBy}
+              sortOrder={this.props.sortOrder}
+              sortItems={this.props.sortItems}
+              toggleTreePanel={this.props.toggleTreePanel}
+              enableDirPrivateShare={this.props.enableDirPrivateShare}
+              showShareBtn={this.props.showShareBtn}
+              onAddFolder={this.props.onAddFolder}
+              onAddFile={this.props.onAddFile}
+              onUploadFile={this.props.onUploadFile}
+              onUploadFolder={this.props.onUploadFolder}
+              fullDirentList={this.props.fullDirentList}
+              filePermission={this.props.filePermission}
+              onFileTagChanged={this.props.onToolbarFileTagChanged}
+              repoTags={this.props.repoTags}
+              onItemMove={this.props.onItemMove}
+              isDesktop={isDesktop}
+            />
+            <ToolbarForSelectedDirents
+              repoID={this.props.repoID}
+              path={this.props.path}
+              userPerm={this.props.userPerm}
+              repoEncrypted={this.props.repoEncrypted}
+              repoTags={this.props.repoTags}
+              selectedDirentList={this.props.selectedDirentList}
+              direntList={this.props.direntList}
+              onItemsMove={this.props.onItemsMove}
+              onItemsCopy={this.props.onItemsCopy}
+              onItemsDelete={this.props.onItemsDelete}
+              onItemRename={this.props.onItemRename}
+              isRepoOwner={this.props.isRepoOwner}
+              currentRepoInfo={this.props.currentRepoInfo}
+              enableDirPrivateShare={this.props.enableDirPrivateShare}
+              updateDirent={this.props.updateDirent}
+              unSelectDirent={this.props.unSelectDirent}
+              onFilesTagChanged={this.props.onFilesTagChanged}
+              showShareBtn={this.props.showShareBtn}
+              isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+              showDirentDetail={this.props.showDirentDetail}
+              currentMode={this.props.currentMode}
+              switchViewMode={this.props.switchViewMode}
+            />
+          </div>
+          {isDesktop &&
+            <div className="cur-view-path-right py-1">
+              <DirTool
+                repoID={repoID}
+                repoName={this.props.currentRepoInfo.repo_name}
+                userPerm={this.props.userPerm}
+                currentPath={path}
+                updateUsedRepoTags={this.props.updateUsedRepoTags}
+                onDeleteRepoTag={this.props.onDeleteRepoTag}
+                currentMode={this.props.currentMode}
+                switchViewMode={this.props.switchViewMode}
+                isCustomPermission={this.props.isCustomPermission}
+                sortBy={this.props.sortBy}
+                sortOrder={this.props.sortOrder}
+                sortItems={this.props.sortItems}
+                viewId={this.props.viewId}
+              />
+            </div>
+          }
         </div>
         <div
           className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`}