最终效果:
![](https://i-blog.csdnimg.cn/direct/461d147c753348b485550e7d4700531f.png)
1..首先去掉顶部的logo,没什么用,还占用空间。
修改modeler.html文件,添加样式:
css
<style type="text/css">
#main-header{
display: none;
}
#main{
padding: 0px;
}
</style>
2.左边组件选择区域太宽了,一般用不到那么宽。
修改editor-app/editor.html文件。添加样式:
![](https://i-blog.csdnimg.cn/direct/b1e1cfead8874824b9103d3ca462e298.png)
同样的,下面改为 col-lg-10 总共加起来12格。
![](https://i-blog.csdnimg.cn/direct/676200d0295b4c3490e13d4de6601dc6.png)
![](https://i-blog.csdnimg.cn/direct/d8a9fea23e524c919c790437a28e3d06.png)
3.中间下方的属性编辑面板希望放到右侧去。
![](https://i-blog.csdnimg.cn/direct/06dd88b2ded84301a7dc00d18ed7f55b.png)
4.右侧属性编辑将一行2个改为一行1个。![](https://i-blog.csdnimg.cn/direct/28e8d128a03c41c3bdb362f1c960b96b.png)
css
html, body{
margin: 0px;
padding: 0px;
}
#main-header{
display: none;
}
#main{
margin: 0px;
padding: 0px;
}
.selected-item-section clearfix{
float: left;
width: 100%;
}
.selected-item-section .property-row{
float: none;
width: 100%;
display: flex;
height: 29px;
}
.selected-item-section .selected-item-body{
width: 100%;
height: 100%;
}
.selected-item-body > div {
overflow: auto;
margin: 0px;
}
.property-row span.title {
font-size: 13px;
font-weight: bold;
width: 90px;
text-align: right;
}
.property-row span.value {
flex: 1;
}
div.propertySection {
height: 100%;
background-color: #e8edf1;
}
5.中间流程设计器去掉滚动条。
发现设计器的高度是写死的1050px;
![](https://i-blog.csdnimg.cn/direct/bf13cbcefe754cf6bd8e2cda55bb0a4f.png)
在源码中查找1050:
![](https://i-blog.csdnimg.cn/direct/e2aa55223b6849fa92acec7afe643209.png)
此时还有设计器外面的div的高度计算要修改。
![](https://i-blog.csdnimg.cn/direct/e937dd728b2c42c0b31e86e7a7719111.png)
总结修改的文件有:
- modeler.html
- editor.html
- app.js
- oryx.debug.js