12.0 add buttons animation (#6167)

* add library container animation

* change animation and style

frontend/src/components/dropdown-menu/item-dropdown-menu.js

@@ -4,6 +4,7 @@ import listener from '../context-menu/globalEventListener';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import ModalPortal from '../modal-portal';
 
 const propTypes = {
   tagName: PropTypes.string,
@@ -158,17 +159,19 @@ class ItemDropdownMenu extends React.Component {
           onKeyDown={this.onDropdownToggleKeyDown}
           // onClick={this.onDropdownToggleClick}
         />
-        <DropdownMenu>
-          {menuList.map((menuItem, index) => {
-            if (menuItem === 'Divider') {
-              return <DropdownItem key={index} divider />;
-            } else {
-              return (
-                <DropdownItem key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{menuItem.value}</DropdownItem>
-              );
-            }
-          })}
-        </DropdownMenu>
+        <ModalPortal>
+          <DropdownMenu>
+            {menuList.map((menuItem, index) => {
+              if (menuItem === 'Divider') {
+                return <DropdownItem key={index} divider />;
+              } else {
+                return (
+                  <DropdownItem key={index} data-toggle={menuItem.key} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{menuItem.value}</DropdownItem>
+                );
+              }
+            })}
+          </DropdownMenu>
+        </ModalPortal>
       </Dropdown>
     );
   }

frontend/src/components/toolbar/selected-dirents-toolbar.js

@@ -336,7 +336,7 @@ class MultipleDirOperationToolbar extends React.Component {
       <Fragment>
         <div className="selected-dirents-toolbar">
           {selectedLen > 0 &&
-            <span className="cur-view-path-btn px-2" onClick={this.props.unSelectDirent}>
+            <span className="cur-view-path-btn px-2" style={{ marginLeft: '-10px' }} onClick={this.props.unSelectDirent}>
               <span className="sf3-font-x-01 sf3-font mr-2" aria-label={gettext('Unselect')} title={gettext('Unselect')}></span>
               <span>{selectedLen}{' '}{gettext('selected')}</span>
             </span>

frontend/src/css/layout.css

@@ -129,6 +129,20 @@
   margin-left: 2px;
 }
 
+.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: 200ms;
+}
+
 .cur-view-content {
   padding: 0rem 1rem;
   flex: 1;

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

@@ -4,6 +4,12 @@
 
 .cur-view-content.lib-content-container {
   padding: 0;
+  background-color: #fff;
+  position: absolute;
+  top: 48px;
+  z-index: 2;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
 }
 
 .view-mode-container {
@@ -41,7 +47,7 @@
 
 /*tree view */
 .tree-view {
-  margin-left: -9px;
+  margin-left: -12px;
   padding: 12px 12px 12px 0;
   line-height: 1.5;
   flex: 1;

frontend/src/css/toolbar.css

@@ -35,6 +35,63 @@
 
 /* end file-operation toolbar */
 
+/* begin view-mode toolbar */
+.view-modes {
+  padding: 2px;
+  background-color: #e5e6e7;
+  border-radius: 3px;
+  height: 32px;
+  width: 92px;
+  position: relative;
+}
+
+.sf-view-mode-btn {
+  width: 44px;
+  height: 28px;
+  padding: 0;
+  background-color: transparent;
+  color: #444;
+  font-size: 14px;
+  line-height: 2;
+  border: 0;
+  border-radius: 2px;
+  font-weight: normal;
+  position: absolute;
+  z-index: 2;
+  width: 48px;
+}
+
+.sf-view-mode-btn:hover {
+  background-color: transparent;
+}
+
+.sf-view-mode-btn:focus {
+  color: #444;
+  background-color: transparent;
+  border-color: none;
+  box-shadow: none;
+}
+
+.sf-view-mode-btn.btn-secondary:not(:disabled):not(.disabled):active:focus {
+  box-shadow: none;
+}
+
+.view-modes .view-modes-bg.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  background-color: #fff;
+  position: absolute;
+  width: 44px;
+  height: 28px;
+  top: 2px;
+  left: 2px;
+  z-index: 1;
+  opacity: 0.75;
+  border-radius: 3px;
+}
+/* end view-mode toolbar */
+
 #cur-folder-more-op-toggle {
   margin-left: 10px;
   margin-right: -4px;

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

@@ -173,6 +173,10 @@ class LibContentContainer extends React.Component {
         isRepoInfoBarShow = true;
       }
     }
+    let curViewPathStyle = { 'borderBottom': 'none' };
+    if (this.props.isDirentSelected) {
+      curViewPathStyle.transform = 'translateY(-50px)';
+    }
 
     return (
       <Fragment>
@@ -182,32 +186,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 ?
-              <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 d-block" style={curViewPathStyle}>
+            <div className="d-flex justify-content-between align-items-center CurDirPath" style={{height: '32px'}}>
               <CurDirPath
                 repoID={repoID}
                 repoName={this.props.currentRepoInfo.repo_name}
@@ -241,7 +221,33 @@ class LibContentContainer extends React.Component {
                 onFileTagChanged={this.props.onToolbarFileTagChanged}
                 repoTags={this.props.repoTags}
               />
-            }
+            </div>
+            <div style={{marginTop: '24px'}}>
+              <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>
           </div>
           <div className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}>
             {!this.props.pathExist && this.errMessage}