(五)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
相关推荐
Mortal_hhh1 小时前
VScode的C/C++点击转到定义,不是跳转定义而是跳转声明怎么办?(内附详细做法)
ide·vscode·stm32·编辑器
电子云与长程纠缠10 小时前
UE5.3中通过编辑器工具创建大纲菜单文件夹
java·ue5·编辑器
lucky九年11 小时前
vscode翻译插件
ide·vscode·编辑器
真·Wild·攻城狮12 小时前
【码农日常】Vscode Clangd初始化失败(Win10)
ide·vscode·编辑器
七灵微12 小时前
【测试】【Debug】vscode中同一个测试用例出现重复
ide·vscode·编辑器
4U2471 天前
Linux入门之vim
linux·编辑器·vim·命令模式·底行模式
Liquor14191 天前
vim 编辑器
java·linux·c语言·开发语言·python·编辑器·vim
skywalk81631 天前
三周精通FastAPI:33 在编辑器中调试
python·编辑器·fastapi
188_djh2 天前
# vim那些事...... vim删除文件全部内容
linux·ubuntu·centos·编辑器·vim·vi·vim删除文件全部内容
虞书欣的62 天前
Python小游戏22——吃豆豆小游戏
python·算法·游戏·编辑器·pygame