Want a fresh breeze to your dated Vaadin App? Try the new Valo

Flow
1

I really liked the current “reindeer” default theme when it appeared in Vaadin. The previous “runo” was bit too toyish to taste. But time passed and especially “retina displays” have treated “reindeer” it in a cruel manner.

Our amazing graphic designer, Jouni Koivuviita, has been working with a new theme for long, maybe too long, but it is still not “production ready”. This is mostly due to our own java version of sass compiler, that don’t yet support all bells and whistles that Jouni heavily depends on. As discussed in
the recent blog entry
, the theme was again postponed to summer - something that made me bit upset.

That made me want to try it out with the original sass compiler already today.
I “forked” Jounis work
 in progress and modified its build so that anybody with maven installed can just check it out, optionally configure it, and build it for use today. It should be easy to pull in further modifications from Jouni.

It seems to work
pretty well with 7.1.13 today
. Jouni warned me, that e.g. drag and drop hints are not yet implemented, but if you decide to spice up your app with the new theme, I believe you’ll like the results. I do at least, really. It makes your apps feel modern - without changing single line of code. Even stack traces will look better :-)

cheers,
matti

2

Hello Matti!

Here is my problem! Before that theme i used a Button with a link-like style. For example, using the default Reindeer theme, i could say myButton.addStyleName(Reindeer.BUTTON_LINK).

Now in that theme it will not work for sure. Can u tell my an alternative solution for that problem?
( i need the button with link style coz i wanna open a window with this linkbutton)
thx

3

Hi,

I was missing the same style name as well. I
created an issue
 to Jouni’s repository.

There is “borderless” (or was it “frameless”?) that I used in the example app that is linked in original post. But that indeed don’t work if you have only text in you button. Without some decoration, there is no way to know if the “link” is a button at all.

cheers,
matti

4

Hi guys,

There are now both “borderless” and “link” style buttons included by default (see the
optional/_common-stylenames.scss
 file for all additional default styles).

5

Cool, now you are literally faster than mind. I had already actually merged this into the “dawn” fork. So git pull + mvn clean install should make your link style buttons work.

cheers,
matti

6

Haha, seems like so :slight_smile:

But we did have this conversation at the office a while back, I added the default stylenames after that. So Walter can thank you as well :wink:

7

well, it was solved quickly. :slight_smile:

work like a charm.
Thanks, Gentlemen!

8

guys, i have other problem. i cant see the dawn dependency on the maven central repository. (is it the standard state?)
can u fix it? thanks :slight_smile:

9

Just my point of view, but I would say 95% of Maven projects do not belong in Maven Central, and dawn is probably in that 95%. Maven Central is more for long-lived/permanent projects, and nothing should ever be removed from there.

The theme will come to Vaadin in time (and thus also Maven Central). In the meanwhile, it should be easy to compile and install it to your local repository or your company repository.

10

Sounds good. Thanks.

11

Hi,

My guess originally was that quite many will like to do some small parametrization to their theme and thus fork e.g. the dawn project and possibly uses it as a submodule in their multimodule maven project. It looks like quite many would be satisfied with the defaults as well, so maybe I should consider packaging dawn into Directory, especially if the official release date of Valo keeps getting forward. Then it would be available to almost every Vaadin users.

cheers,
matti

12

Hi,

VerticalSplitPanel is not showing the 2nd component while I tested my application with Valo theme. Is it a know issue?

13

Hi,

VerticalSplitPanel Second component is getting populated but it not visible in the sceen. Please find attached picture, its appearing adjacent to the first component outside the the screen view.

Please let me know how to correct this in my application. Thanks.

Thanks,
Arun
13578.png

14

Thanks for the report!

I was unable to reproduce the problem with a simple test case. Can you post your UI code here as a test case?

15

Thanks Jouni for your reply. Please find attached UI code from my application.

Below is the other UI Code on how I will attach the ProjectView Finally;

// Main Layout
HorizontalSplitPanel mainHSPLayout = new HorizontalSplitPanel();
//First Component is Accordion
//Second Component’s Main Layout is VerticalLayout

// Attached ProjectView UI will be added to the Second Component of the Main Layout inside Vertical Layout.

Please let me know if more information is required. Thanks.

13582.java (5.37 KB)

16

Hi Jouni,

I think I found out how to reproduce this issue;

    HorizontalSplitPanel mainHSPLayout = new HorizontalSplitPanel();
    mainHSPLayout.setSplitPosition(15, Unit.PERCENTAGE);
    mainHSPLayout.setMaxSplitPosition(15, Unit.PERCENTAGE);
    
    Accordion accLayout = new Accordion();

// accLayout.addTab(new Label(“TEST”));

    mainHSPLayout.setFirstComponent(accLayout);

    VerticalSplitPanel vSPanel = new VerticalSplitPanel();
    vSPanel.setFirstComponent(new Label("FIRST"));
    vSPanel.setSecondComponent(new Label("SECOND"));
    mainHSPLayout.setSecondComponent(vSPanel);
    setContent(mainHSPLayout);

I tried the above code in V7.1.15 and V7.3.0.alpha1 both resulted the same issue, somehow Valo theme is behaving weird while displaying the secondComponent of the VerticalSplitPanel when its a child of HorizontalSplitPanel but VerticalSplitPanel is working fine if it alone or not a child of HorizontalSplitPanel.

13588.png

17

I updated to version 2 of valo. But when I have a panel inside a vertical layout and this panel has content which grows vertically in a dynamic way scroll bar is not showing. Older release was showing it fine

18

Hi Arun,

Sorry to be so late on this, I somehow forgot about this issue. The bug is still there, a simple mistake on my part when nesting split panels inside each other. I made
ticket
 about it and I’ll fix it once I get back from vacation.

19

Hi Kareem,

Could you post a simple reduced test case for this issue, and I’ll promise to take a look at it when I get back from vacation. Thanks!

20

Thanks for your response, looking forward for the final complete version of Valo.