Alternative needed for Helium GroupBox "light" style

Support
#1

Jmix version: 1.4.2
Jmix Studio plugin version: 1.4.0-221
IntelliJ IDEA 2022.1.4 (Community Edition)
Build #IC-221.6008.13, built on July 19, 2022
Runtime version: 11.0.15+10-b2043.56 x86_64
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
Kotlin: 221-1.7.20-release-201-IJ5591.52
Java 17.0.4 2022-07-19 LTS
Java™ SE Runtime Environment (build 17.0.4+11-LTS-179)
Java HotSpot™ 64-Bit Server VM (build 17.0.4+11-LTS-179, mixed mode, sharing)
Operating System: macOS 13.0.1 (22A400)
File System: Case-Sensitive Journaled HFS+ (APFS)
Datebase: PostgreSQL 13

Hello Everyone

Until now I have been using the Hover theme and I use the GroupBox “light” style extensively in order to better define my screens where I am using multiple CheckBoxGroups (image directly below). I did not like the use of only the CheckBoxGroup caption, so I basically replaced it with a GroupBox as a CheckBoxGroup container and used its label. (Sorry for the black-out text in the following images.)

Jmix_GroupBox_Hover_light_style_2023-01-09_01.anonym

The other GroupBox styles were not “visually clean” for so many CheckBoxGroups in my opinion. I began doing this with CUBA and during that time, I also tried to use the Helium theme but at that time there was no “light” style for it. Therefore, I requested a “light” style addition with this CUBA forum post:

And in the meantime, “light” is available for Helium and documented here:

but unfortunately it is not a reproduction of the Halo/Hover “light” style, and in my opinion, not appropriate for my screens. For example…

with “light” style with attribute “showAsPanel = true”

Jmix_GroupBox_Helium_light_style_w_showAsPanel_true_2023-01-09_01.anonym

and with “light” style with attribute “showAsPanel = false” (no GroupBox outline is shown)

Jmix_GroupBox_Hover_light_style_w_showAsPanel_false_2023-01-09_01.anonym

I would like to use Helium but this situation is preventing me from changing over from Hover.

In my opinion, the best option to solve this problem (for me) would be to add a new style for the CheckBoxGroup caption (not the GroupBox) with the exact same effect as the Halo/Hover GroupBox “light” style. This would allow me to remove all of my unnecessary GroupBoxes, thereby simplfying the screens, and also allow for an optional GroupBox when needed with any style. It could also be added to Halo/Hover without affecting any existing applications or it could be provided as a theme extension (sample code), so it could be applied to any theme by anyone. Unfortunately, I am not a CSS developer, so I cannot implement this myself.

Any suggestion(s) or solution(s)?

Best regards
Chris

#3

Hi,

That is not possible using only CSS. GroupBox uses several html element to achieve this visual representation.

As we don’t plan to alter Helium visual representation of GroupBox, I can suggest you the following custom implementation:

XML

<vbox width="AUTO">
    <cssLayout stylename="caption-wrapper">
        <label stylename="caption-start-deco"/>
        <label stylename="caption-text" value="Text Field"/>
        <label stylename="caption-end-deco"/>
    </cssLayout>
    <textField/>
</vbox>

Styles

.caption-wrapper {
  display: flex;
  align-items: center;
  gap: floor($v-unit-size / 7);
}

.caption-start-deco,
.caption-end-deco {
  height: 1px;
  background: var(--groupbox-border-color);
}

.caption-start-deco {
  width: floor($v-unit-size / 3);
}

.caption-end-deco {
  width: 100%;
}

Result
Screenshot 2023-01-16 at 12.02.32

Because you need this for several components, I can suggest you wrapping this implementation into Composite Component.

Regards,
Gleb

#5

Hi Gleb

Thank you very much for the explanation and the alternative solution; I really appreciate it. I will try it as soon as possible.

Best regards
Chris