test-slide-animation

haiwen · Jun 5, 2024 · 1a2c123 · 1a2c123
1 parent 199bacf
commit 1a2c123
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
@@ -102,6 +102,20 @@
   border-bottom: 1px solid #eee;
 }
 
+.cur-view-path:after {
+  position: absolute;
+  left: 16px;
+  right: 16px;
+  bottom: 0;
+  content: '';
+}
+
+.cur-view-path {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .cur-view-content {
   padding: 0rem 1rem;
   flex: 1;

diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -182,8 +182,8 @@ 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">
-            {this.props.isDirentSelected ?
+          <div className="cur-view-path" style={{ display:'block', transform: this.props.isDirentSelected ? 'translateY(-50px)' : '' }}>
+            <div className="ToolbarForSelectedDirents">
               <ToolbarForSelectedDirents
                 repoID={this.props.repoID}
                 path={this.props.path}
@@ -207,7 +207,9 @@ class LibContentContainer extends React.Component {
                 showDirentDetail={this.props.showDirentDetail}
                 currentMode={this.props.currentMode}
                 switchViewMode={this.props.switchViewMode}
-              /> :
+              />
+            </div>
+            <div className="CurDirPath" style={{display:'flex', justifyContent: 'space-between', marginTop: '20px'}}>
               <CurDirPath
                 repoID={repoID}
                 repoName={this.props.currentRepoInfo.repo_name}
@@ -241,9 +243,9 @@ class LibContentContainer extends React.Component {
                 onFileTagChanged={this.props.onToolbarFileTagChanged}
                 repoTags={this.props.repoTags}
               />
-            }
+            </div>
           </div>
-          <div className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}>
+          <div className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll} style={{ backgroundColor: '#fff', position: 'absolute', top: ' 48px', zIndex: 2, borderTop: '1px solid #e8e8e8'}}>
             {!this.props.pathExist && this.errMessage}
             {this.props.pathExist && (
               <DirColumnView