Thank you @gorelov
This there is turning into a beautiful one!! I like it.
The new Helium theme looks good to me. It works well on my iPad Air 3 !
I am not seeing any flaws, so I am wondering how soon will it be released ?
There was another colour option (blue) in earlier beta version but i don’t see that in BETA 4 version anymore.
By design, Helium will have two predefined color variants: light (default) and dark, with the ability to add custom color variants for a certain CUBA application. Blue and the other test color variants were included to the BETA.1
as an example.
Regards,
Gleb
@gorelov
Will there be an option in the add-on to add custom colour? That will be really fantastic, can’t wait for the final release.
In order to add custom color variants, you’ll need to extend the theme. The same is required to update an existing. By the time of release, we will prepare a guide on how to do this.
Regards,
Gleb
Assuming that the theme can be extended within the add-on so that the extended color variants are available where ever we use as add-on, is this assumption right?
Do you think it will be possible to make the corners of the tabSheet (currently almost 90% corners) similar to other components within this Helium theme?
Sure,
Not sure that I got your idea correct. As I mentioned earlier, in order to add custom color variants, you’ll need to extend the helium theme in a project that includes the Helium Theme add-on.
Regards,
Gleb
Any plan to integrate the Lumo Vaadin Theme into CUBA ?
It offers a very customizable editor.
Regards!
Lumo Vaadin Theme is used for Vaadin 14, CUBA uses Vaadin 8, so that we can’t integrate it. If you’re interested in why we don’t use Vaadin 14, you may find this article helpful: Vaadin 10+ as the Future of CUBA UI.
Regards,
Gleb
Hi everyone!
Helium theme has been released! Please read this post for more details: Helium theme and editor are released - CUBA.Platform.
Regards,
Gleb
Oh thank you for this information !
Yes I red your very good and detailed article about Vaadin, but I beleaved the Lumo theme was working with Vaadin 8 as well.
Shame, I would use the other themes then
Thank you for your answer !
Hi
I was wondering if this new theme is responsive and works properly both in desktop and mobile devices without requiring any intensive editing.
Thanks
Unfortunately, not. A theme itself can’t be responsive, it just changes UI components visual appearance.
Regards,
Gleb
Hi Gleb,
is it possible to customize helium
theme showing vertical line in the tables? How can I change the no-vertical-lines
predefined style?
Hi,
There are no predefined styles yet to show lines, but you can easily implement them, e.g.:
.c-table-composition.has-borders {
$table-inner-border: he-table-border(--table-inner-border-color);
.v-table-caption-container {
border-left: $table-inner-border;
}
.v-table-cell-content:not(:first-child) {
border-left: $table-inner-border;
}
.v-table-table {
.v-table-row,
.v-table-row-odd {
&:not(:first-child) td {
border-top: $table-inner-border;
}
}
}
}
Where has-borders
is a custom stylename that must be added to the table component.
Regards,
Gleb
Hi Gleb, thanks. It works.
So, the only way is create custom styles? There is not possibility to custom default features? There is a guide to know how to create my own stylename with other customization? For example to change foreground, font, size etc?
With hover
style I know how create custom stylename. For example I defined a red textfield with the follow features:
.name-field-red {
background-color: #E38E8E;
text-align: center;
font-size: 18px;
color: white;
font-family: Vivaldi;
}
If I try to add this code in helium-ext.scss
file, it works only for the text-align feature. The others are overwritten by the standard features of the helium textfields. So, can I do the same thing with helium UI? Probably in my application I need to custom not only components colors but also other features.
Thanks in advance.
Hi,
Indeed, you can implement custom styles for any component. The styles you provided work for me:
Of course, due to helium specific, some styles written for the other themes may need some changes. In order to implement correct styles, I would recommend using Browser Developer Tools to inspect specific component and see what styles it has (see the screenshot), but it’s general HTML/CSS staff.
Regards,
Gleb