Backup_Repos/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash synced 2025-12-27 18:53:20 +01:00
Code Issues Projects Releases Wiki Activity

improvement (UI): improve transitions

Browse source
This commit is contained in:
Mickael KERJEAN 2018-04-30 02:10:25 +10:00
parent 245210d223
commit 64fa1f868f
6 changed files with 30 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/pages/viewerpage/editor.js
View file

@ -82,7 +82,6 @@ export class Editor extends React.Component {
}
});
//debugger;
if(!('ontouchstart' in window)) editor.focus();
if(CodeMirror.afterInit){

6
client/pages/viewerpage/editor.scss
View file

@ -1,10 +1,8 @@
.component_editor{
height: 100%;
display: flex;
width: 100%;
> div{
width: 100%;
#editor{
width: 100%;
height: 100%;
flex: 1;
display: flex;

14
client/pages/viewerpage/ide.js
View file

@ -93,12 +93,14 @@ export class IDE extends React.Component {
</NgIf>
</MenuBar>
<Editor onSave={this.save.bind(this)} filename={this.props.filename}
content={this.state.contentToSave}
event={this.state.event.asObservable()}
onModeChange={this.onUpdate.bind(this, 'mode', false)}
onFoldChange={this.onUpdate.bind(this, 'folding', false)}
onChange={this.onUpdate.bind(this, 'contentToSave', false)} />
<ReactCSSTransitionGroup transitionName="editor" transitionAppear={true} transitionEnter={false} transitionLeave={false} transitionAppearTimeout={300} className="editor_container">
<Editor onSave={this.save.bind(this)} filename={this.props.filename}
content={this.state.contentToSave}
event={this.state.event.asObservable()}
onModeChange={this.onUpdate.bind(this, 'mode', false)}
onFoldChange={this.onUpdate.bind(this, 'folding', false)}
onChange={this.onUpdate.bind(this, 'contentToSave', false)} />
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup transitionName="fab" transitionLeave={true} transitionEnter={true} transitionAppear={true} transitionAppearTimeout={400} transitionEnterTimeout={400} transitionLeaveTimeout={200}>
<NgIf key={this.props.needSaving} cond={this.props.needSaving}>

14
client/pages/viewerpage/ide.scss
View file

@ -2,6 +2,20 @@
display: flex;
flex-direction: column;
height: 100%;
.editor_container{
height: 100%;
display: flex;
}
}
.editor-appear{
opacity: 0;
}
.editor-appear.editor-appear-active{
transition: opacity 0.3s ease-out;
opacity: 1;
}

2
client/pages/viewerpage/menubar.js
View file

@ -10,7 +10,7 @@ export const MenuBar = (props) => {
return (
<div className="component_menubar">
<Container>
<ReactCSSTransitionGroup transitionName="menubar" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={500}>
<ReactCSSTransitionGroup transitionName="menubar" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={550}>
<div className="titlebar" style={{letterSpacing: '0.3px'}}>{props.title}</div>
<div className="action-item">
<span className="specific">

7
client/pages/viewerpage/menubar.scss
View file

@ -44,6 +44,9 @@
}
.menubar-appear{
display: inline-block;
opacity: 0;
@ -52,6 +55,6 @@
.menubar-appear.menubar-appear-active{
opacity: 1;
transform: translateY(0px);
transition: all 0.15s ease-out;
transition-delay: 0.35s;
transition: all 0.25s ease-out;
transition-delay: 0.30s;
}