氦元素 - CUBA 应用程序新样式主题

    CUBA 框架一直以来定位的目标是业务系统的开发。业务系统的界面通常是给后台员工使用的,看重的是功能实现。多年来,界面外观和样式并不是后台管理系统的主要关注点,界面中的控件也更紧凑,唯一的原因就是:在单一屏幕中摆放尽可能多的控件,以提供足够多的功能。

    但是在最近十年里,人们使用了越来越多的小尺寸触控屏设备,游戏规则因此而改变。要有易于触控点击的控件,它们之间需要有足够的间距,防止被误点击。应用程序的配色也变得偏于使用杂色和对比色。所以,近些年的现代应用程序在设计上更注重样式,其中非功能性需求都占了很大的一部分。

    顺应趋势,我们很高兴推出新可视化主题 - 氦元素(Helium)!与以前的样式主题相比,氦元素主题更简洁、明亮,视觉噪音也更少。另外很重要的一点:能够以最少的工作量为最终用户和 CUBA 开发人员提供样式定制。

功能

    首先要提到的是,新主题是动态的,意味着您可以随时在线更改应用程序样式!以前,CUBA 使用 SCSS 变量定义颜色,这样每次修改过后都需要重新编译。而新主题依赖 CSS 定制属性 ,即使没有页面刷新或重新登录,这些属性也可以在运行时立即起效。

helium2

预设配色

    开箱即用支持两种预设的配色方案:浅色(light)和深色(dark)。

    终端用户可选择的主题需要通过下列属性配置(主题安装流程请参考后续章节):

cuba.theme.modes = light|dark
cuba.theme.defaultMode = light

    另外,也可以通过在线主题编辑器创建自定义的配色方案(点击下方的在线示例和编辑器章节名称了解更多细节)。

预设大小

    主题自带三种内置的控件大小配置:小(small),中(medium)和大(large)。

    跟配色方案类似,也可以通过主题属性修改:

cuba.theme.sizes = small|medium|large
cuba.theme.defaultSize = medium

设置界面

    设置界面可以通过主菜单的 Help -> Theme Settings 打开。这里可以让最终用户自定义他们喜欢的配色和控件大小。该界面带有几乎所有的主要控件,所以用户可以预览他调整之后的界面大概什么样。

在线示例和编辑器

helium3

    关于新主题的另一个重要部分就是其在线交互式编辑器。这里可以试试调整样式变量,马上就能看到调整结果 - 一旦样式满足您的需求,只需要点击下载按钮并按照提供的说明将其安装到您的 CUBA 应用程序中即可。

    其实,在线编辑器最好的一点是:不只是开发人员可以使用。将这个链接发送给您的追求极致的客户,这样他们可以根据自己的偏好自定义配色,然后下载并发送结果给开发人员,只需要几分钟便可以应用新的样式。同时,编辑器本身也允许导入颜色变量,这样可以基于已有的配色做修改。

    如需使用自定义配色,需要基于氦元素创建主题扩展

安装

    该主题是通过 扩展插件 的形式发布。该扩展兼容 7.1.5 以上的 CUBA 应用程序(注意,我们推荐您跟踪 CUBA 框架的 bugfix 版本并更新您的应用程序至最新版)。可以参考 Studio 的 相关章节 了解如何安装扩展插件。

    扩展安装完成后,可以通过下面的方式启用新的主题:
    启动应用程序,打开主菜单下的设置界面:Help -> Settings。在可视化主题选项中选择 Helium 即可。

    如需将氦元素主题设为默认主题,可以在 web-app.properties 中添加:

cuba.web.theme = helium

    如果之前自定义设置过 cuba.themeConfig 属性,别忘了也需要添加氦元素属性:

cuba.themeConfig = +/com/haulmont/addon/helium/web/helium-theme.properties

    如需自定义主题属性,可以在 web 模块的主包路径创建 helium-theme.properties,内容如下:

@include=com/haulmont/addon/helium/web/helium-theme.properties

cuba.theme.modes = light|dark
cuba.theme.defaultMode = light

cuba.theme.sizes = small|medium|large
cuba.theme.defaultSize = medium\

    然后在 cuba.themeConfig 属性中注册一下该文件:

cuba.themeConfig = +/com/example/project/helium-theme.properties

    如需深度定制该主题,包括应用自定义配色,则需要创建主题扩展。按照该说明操作。

路线图

    我们计划继续开发氦元素主题并添加新功能,包括:

  • 深色模式改进
  • 在主题编辑器中提供更有用的模板
  • 在浅色和深色模式之间自动切换
  • 提供可自定义的 border radius 变量,同样也基于 CSS 变量。
  • 提供 Figma 的 CUBA 套件。Figma 是 UI/UХ 设计师最流行的工具之一,他们可以用来创建界面模型。

总结

    我们很乐意看到新主题和在线编辑器能用在您的项目中,希望新主题能让您的应用焕然一新。如果您有任何问题,可以在我们的论坛创建主题讨论。项目源码可以在 Github 找到: 主题 / 编辑器。期待您的反馈!

4 个赞

滚动条有点格格不入的感觉,改一下吧 :wink:

.helium ::-webkit-scrollbar {
  width: 8px;
  height: 10px;
}
.helium ::-webkit-scrollbar-track {
  -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
  border-radius:10px;
}
.helium ::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(0,0,0,0.1);
  -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
.helium ::-webkit-scrollbar-thumb:window-inactive {
background-color:rgba(210, 204, 236);
}

image

1 个赞