haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-26 15:26:19 +00:00
Code Issues Releases Wiki Activity

animated sidepanel (#7970)

Browse Source 
* animated sidepanel

* optimize

---------

Co-authored-by: zhouwenxuan <aries@Mac.local>
This commit is contained in:
Aries
2025-06-24 14:40:22 +08:00
committed by GitHub
parent 0ca794ad86
commit e1b6e1706f
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/side-panel.js
View File

@@ -22,10 +22,10 @@ const propTypes = {
class SidePanel extends React.Component { class SidePanel extends React.Component {
render() { render() {
const { children, isSidePanelFolded, style, eventBus } = this.props; const { children, isSidePanelFolded, style, eventBus, isSidePanelClosed } = this.props;
return ( return (
<div <div
className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !this.props.isSidePanelClosed })} className={classnames('side-panel', { 'side-panel-folded': isSidePanelFolded, 'left-zero': !isSidePanelClosed })}
style={isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : style} style={isSidePanelFolded ? { flexBasis: SIDE_PANEL_FOLDED_WIDTH } : style}
> >
<MediaQuery query="(max-width: 767.8px)"> <MediaQuery query="(max-width: 767.8px)">

12
frontend/src/css/layout.css
View File

@@ -19,6 +19,9 @@
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
transition: flex 0.3s ease-in-out;
-webkit-transition: flex 0.3s ease-in-out;
-moz-transition: flex 0.3s ease-in-out;
} }
.user-panel .side-panel-north { .user-panel .side-panel-north {
@@ -44,9 +47,12 @@
width: 300px; width: 300px;
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
height:100%; height:100%;
-webkit-transition: all 0.3s ease; -webkit-transition: left 0.3s ease, width 0.3s ease;
-moz-transition: all 0.3s ease; -moz-transition: left 0.3s ease, width 0.3s ease;
transition: all 0.3s ease; transition: left 0.3s ease, width 0.3s ease;
}
.side-panel.left-zero {
left: 0;
} }
} }