Commit 2b4eed12 authored by Tobias Kaupat's avatar Tobias Kaupat

Make smooth CSS animation for fullscreen toggle

parent 13109184
root = true
[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
[{*.js,*.ts}]
indent_style = space
indent_size = 4
[{*.json,*.yml}]
indent_style = space
indent_size = 2
\ No newline at end of file
......@@ -14,7 +14,7 @@ gulp.task("dev", ['inject', 'copy', 'webpack:server']);
/**
* Keeps files up to date that are not covered by Webpack
*/
gulp.task('watch', ["inject:tests", "copy:plugins"], () => {
gulp.task('watch', ["inject:tests", "copy:plugins"], function() {
gulp.watch("src/**/*.test.js", ["inject:tests"]);
gulp.watch("plugins/**/*", ["copy:plugins"]);
});
......
......@@ -7,4 +7,44 @@
z-index: 9999;
}
.menu-trigger {
position: fixed;
top: 0;
height: 11px;
width: 100%;
z-index: 1000;
/*border: red dashed 1px;*/
}
.topnav--hidden {
/*display: none !important;*/
min-height: 0 !important;
height: 0;
overflow: hidden;
-webkit-transition: all 1s, transform 1s;
transition: all 1s, transform 1s;
}
.topnav--visible {
min-height: 0 !important;
height: 40px;
overflow: hidden;
-webkit-transition: all 0.5s, transform 1s;
transition: all 0.5s, transform 1s;
}
.topnav--hidden + .ui.grid {
padding-top: 0!important;
-webkit-transition: all 1s, transform 1s;
transition: padding-top 1s, transform 1s;
}
.topnav--visible + .ui.grid {
-webkit-transition: all 0.5s, transform 1s;
transition: padding-top 0.5s, transform 1s;
}
/* END app.css */
\ No newline at end of file
......@@ -19,6 +19,11 @@ import * as Persistence from './persistence'
export class Layout extends Component {
constructor(props) {
super(props);
this.state = {hover: false};
}
onFullscreenKeyPress(e) {
console.log("key pressed", event.keyCode);
var intKey = (window.Event) ? e.which : e.keyCode;
......@@ -29,7 +34,7 @@ export class Layout extends Component {
componentDidMount() {
this.onFullscreenKeyPress = this.onFullscreenKeyPress.bind(this);
ReactDOM.findDOMNode(this)
.offsetParent
.addEventListener('keydown', this.onFullscreenKeyPress);
......@@ -38,20 +43,10 @@ export class Layout extends Component {
render() {
const props = this.props;
if (props.isFullscreen) {
return <div onKeyUp={(event) => this.onFullscreenKeyPress(event)}>
<div className="fullscreen-button">
<button class="ui large button" onClick={() => props.setFullscreen(false)}><i className="compress icon"></i></button>
</div>
<div className="container">
<div className="ui grid">
<WidgetGrid/>
</div>
</div>
</div>
}
var showMenu = !props.isFullscreen || this.state.hover;
console.log("Show Menu:", showMenu, "isfullscreen", props.isFullscreen);
return <div>
return <div onKeyUp={(event) => this.onFullscreenKeyPress(event)}>
<div>
<WidgetConfigDialog/>
<ImportExportDialog/>
......@@ -59,7 +54,15 @@ export class Layout extends Component {
<PluginsDialog/>
</div>
<div className="container">
<div className="ui fixed inverted main menu">
<div className={showMenu ? "" : "menu-trigger"}
onMouseOver={()=> { this.setState({hover:true})}}
onMouseEnter={()=> {this.setState({hover:true})}}
></div>
<div className={"ui inverted fixed main menu " + (showMenu ? "topnav--visible" : "topnav--hidden")}
onMouseOver={()=> { this.setState({hover:true})}}
onMouseLeave={()=> {this.setState({hover:false})}}
>
<div className="ui container">
<a href="#" className="header item">
{/*<img className="logo" src="assets/images/logo.png"/>*/}
......@@ -76,10 +79,11 @@ export class Layout extends Component {
Reset Everything!
</a>
<a className="item" onClick={() => props.setFullscreen(!props.isFullscreen)}>
<i className="angle double up icon"/> {/*expand*/}
<i className={ (props.isFullscreen ? "pin" : "angle double up") + " icon"}/> {/*expand*/}
</a>
</div>
</div>
{/* TODO: Use custom classes for everything inside the Grid to make it customizable without breaking semantic-ui */}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment