目录

(五)activiti-modeler 编辑器初步优化

最终效果:

1..首先去掉顶部的logo,没什么用,还占用空间。

修改modeler.html文件,添加样式:

css 复制代码
<style type="text/css">
#main-header{
	display: none;
}
#main{
	padding: 0px;
}
</style>

2.左边组件选择区域太宽了,一般用不到那么宽。

修改editor-app/editor.html文件。添加样式:

同样的,下面改为 col-lg-10 总共加起来12格。

3.中间下方的属性编辑面板希望放到右侧去。

4.右侧属性编辑将一行2个改为一行1个。

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;

在源码中查找1050:

此时还有设计器外面的div的高度计算要修改。

总结修改的文件有:

  • modeler.html
  • editor.html
  • app.js
  • oryx.debug.js
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
kovlistudio1 小时前
红宝书第二十九讲:详解编辑器和IDE:VS Code与WebStorm
开发语言·前端·javascript·ide·学习·编辑器·webstorm
爱趣五科技13 小时前
H5DS编辑器教程——企业级雪花特效开发指南
前端·安全·编辑器·音视频
张屿秋13 小时前
在Unity中,如果物体上的脚本丢失,可以通过编写一个自定义编辑器脚本来查找并删除这些丢失的组件
unity·编辑器·游戏引擎
青花瓷14 小时前
VSCode中结合DeepSeek使用Cline插件的感受
ide·人工智能·vscode·大模型·编辑器·deepseek
向日葵.15 小时前
vscode使用方式
ide·vscode·编辑器
1alisa1 天前
Typora Markdown编辑器 for Mac
macos·编辑器
musk12121 天前
vim 中快速删除引号中的字符串
linux·编辑器·vim
花花鱼2 天前
vscode中的【粘滞滚动】的基本概念和作用,关闭了以后如何开启
ide·vscode·编辑器
点云SLAM2 天前
MD编辑器中的段落缩进怎么操作
编辑器·markdown·md编辑器·空格操作·css编辑器
周博洋K2 天前
VScode 玩 MCP的server
ide·vscode·编辑器