From 6f5f1f0e0593d1b071ea4a5d6c6dd59679beb830 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?=
 <37972689+YangGuoXuan-0503@users.noreply.github.com>
Date: Wed, 21 Aug 2024 17:12:41 +0800
Subject: [PATCH] fix: path style (#6599)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: path style

* feat: update code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
---
 .../toolbar/dir-operation-toolbar.js          |   4 +-
 frontend/src/css/layout.css                   |  18 ++-
 frontend/src/css/lib-content-view.css         |  25 +++-
 frontend/src/css/selected-dirents-toolbar.css |  12 +-
 .../lib-content-view/lib-content-container.js | 127 ++++++++++--------
 5 files changed, 121 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index 5a40ffb28e..bf748963b2 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -239,7 +239,7 @@ class DirOperationToolbar extends React.Component {
               {this.props.children}
               <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
             </DropdownToggle>
-            <DropdownMenu onMouseMove={this.onDropDownMouseMove}>
+            <DropdownMenu onMouseMove={this.onDropDownMouseMove} positionFixed={true}>
               {opList.map((item, index) => {
                 if (item == 'Divider') {
                   return <DropdownItem key={index} divider />;
@@ -297,7 +297,7 @@ class DirOperationToolbar extends React.Component {
             {this.props.children}
             <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
           </DropdownToggle>
-          <DropdownMenu>
+          <DropdownMenu positionFixed={true}>
             {canUpload && (
               <DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
             )}
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 7ed10730cb..4f41d60990 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -95,6 +95,20 @@
   border-bottom: 1px solid #eee;
 }
 
+@keyframes displayDirPath {
+  from {
+    top: -32px;
+  }
+  to {
+    top: 0;
+  }
+}
+
+.cur-view-path .animation-children .cur-dir-path {
+  position: relative;
+  animation: displayDirPath .3s ease-in-out 1;
+}
+
 .cur-view-path .cur-dir-path {
   height: 32px;
 }
@@ -289,6 +303,7 @@ img[src=""],img:not([src]) { /* for first loading img*/
   word-break: keep-all;
   max-width: 80%;
   height: 24px;
+  overflow: hidden;
 }
 
 .path-container a, .path-container span {
@@ -306,7 +321,8 @@ img[src=""],img:not([src]) { /* for first loading img*/
   flex-shrink: 0;
 }
 
-.path-container span.path-file-name, .path-container span.path-repo-name {
+.path-container span.path-file-name,
+.path-container span.path-repo-name {
   flex-shrink: 1;
 }
 
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index fe666d983d..b478f28a91 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -259,16 +259,31 @@
 }
 
 .dir-view-path .path-item {
+  display: inline-block;
   min-width: 0; /* overwrite some styles */
   padding: 0 6px;
   font-size: 1rem;
   color: inherit;
   border-radius: 3px;
   text-decoration: none;
+  max-width: 172px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dir-view-path .dir-operation {
+  height: 24px;
   display: flex;
   align-items: center;
 }
 
+.dir-view-path .dir-operation .path-item {
+  display: inline-flex;
+  align-items: center;
+  max-width: 252px;
+}
+
 .dir-view-path .path-item:hover {
   background: #efefef;
 }
@@ -283,6 +298,7 @@
 
 .dir-view-path .path-split {
   padding: 0 2px;
+  flex-shrink: 0;
 }
 
 .custom-modal {
@@ -376,14 +392,19 @@
 
 .cur-view-container .cur-view-path {
   display: flex;
-  align-items: flex-start;
-  border-bottom: none;
+  align-items: center;
 }
 
 .cur-view-container .cur-view-path .cur-view-path-left {
   flex: 1;
+  overflow: hidden;
   border-bottom: none;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
 }
+
+.cur-view-container .cur-view-path .cur-view-path-right {
+  flex-shrink: 0;
+  margin-left: 10px;
+}
diff --git a/frontend/src/css/selected-dirents-toolbar.css b/frontend/src/css/selected-dirents-toolbar.css
index 30afa22483..bd2753a875 100644
--- a/frontend/src/css/selected-dirents-toolbar.css
+++ b/frontend/src/css/selected-dirents-toolbar.css
@@ -1,6 +1,16 @@
+@keyframes displayDirentToolbar {
+  from {
+    top: 24px;
+  }
+  to {
+    top: 0;
+  }
+}
+
 .cur-view-path .selected-dirents-toolbar {
-  margin-top: 24px;
   height: 24px;
+  position: relative;
+  animation: displayDirentToolbar .3s ease-in-out 1;
 }
 
 .cur-view-path .selected-dirents-toolbar .cur-view-path-btn {
diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js
index 28605b70cc..e2c7a06b95 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -110,6 +110,7 @@ class LibContentContainer extends React.Component {
     super(props);
     this.state = {
       currentDirent: null,
+      hasSelectedFile: false,
     };
 
     this.errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
@@ -119,6 +120,13 @@ class LibContentContainer extends React.Component {
     if (nextProps.path !== this.props.path || nextProps.updateDetail !== this.props.updateDetail) {
       this.setState({ currentDirent: null });
     }
+
+    if (!this.state.hasSelectedFile) {
+      const { isDirentSelected } = nextProps;
+      if (isDirentSelected) {
+        this.setState({ hasSelectedFile: true });
+      }
+    }
   }
 
   onPathClick = (path) => {
@@ -171,6 +179,7 @@ class LibContentContainer extends React.Component {
   render() {
     const isDesktop = Utils.isDesktop();
     const { path, repoID, usedRepoTags, isDirentSelected } = this.props;
+    const { hasSelectedFile } = this.state;
     let isRepoInfoBarShow = false;
     if (path === '/') {
       if (isDesktop && usedRepoTags.length !== 0) {
@@ -186,65 +195,65 @@ class LibContentContainer extends React.Component {
           </div>
         }
         <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 className={classnames('cur-view-path-left', { 'w-100': !isDesktop, 'animation-children': hasSelectedFile })}>
+            {isDirentSelected ? (
+              <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}
+              />
+            ) : (
+              <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}
+              />
+            )}
           </div>
           {isDesktop &&
             <div className="cur-view-path-right py-1">