fix: path style (#6599)

* fix: path style

* feat: update code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

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>
             )}

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;
 }
 

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;
+}

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 {

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,10 +195,33 @@ 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)' } : {}}
-          >
+          <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}
@@ -221,30 +253,7 @@ class LibContentContainer extends React.Component {
                 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">