<template>
    <div id="app">
        <Toolbar />
        <div id="workarea">
            <div id="main">
                <Editor />
            </div>
            <div id="right" ref="right">
                <Properties :panelHeight="panelHeight"></Properties>
            </div>
        </div>
    </div>
</template>
<script>
import Editor from './components/editor/Editor';
import Toolbar from './components/toolbar/Toolbar';
import Properties from './components/properties/properties';

export default {
    name: 'App',
    data() {
        return {
            panelHeight: 0
        }
    },
    components: {
        Editor,
        Toolbar,
        Properties
    },
    methods: {
        reLayout() {
            this.panelHeight = this.$refs.right.offsetHeight - 52;
        },
    },
    mounted() {
        this.reLayout();
        const that = this;

        window.onresize = function() {
            that.reLayout();
        };
    }
};

</script>
<style>
html,
body {
    height: 100%;
    width: 100%;
}

#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100%;
}

#workarea {
    position: absolute;
    width: 100%;
    height: auto;
    top: 42px;
    bottom: 0px;
    overflow: hidden;
    display: flex;
}

#right {
    width: 300px;
    border-left: 1px solid #e9eaec;
}

#main {
    flex: 1;
    overflow: auto;
    /*    height: 100%;
    margin-right: 301px;*/
    /*overflow: auto;*/
}

.ivu-layout {
    height: 100%;
}

.ivu-layout-content {
    overflow: auto !important;
    display: flex !important;
}

.ivu-transfer-no-max-height {
    width: 256px;
}

/*.ivu-form-item {
    margin-bottom: 6px !important;
}*/

</style>
