Hi.
There are a few issues in Valo that I would like to bring to your attention. Note that it is only Valo these issues exist on, all other themes behave correctly.
-
After ‘maximising’ or ‘minimising’ a window using the icons on the title bar, layouts are not rendered correctly until the user does something else on the client window (e.g. they resize, or press another button).
-
The ‘sort’ icon on table headers is mixed up (shows ascending when it should be descending…)
-
The MenuBar. When this is activated, the sub-menu pop-ups are shown automatically as you scroll the mouse over the top-menu headers. However, the sub-menu pop-up often just disappears when you stop moving the mouse (especially if you have been moving the mouse fast). It can be brought back be moving the mouse out of and back into a top-menu header again, but its fairly untidy for the user. You can see this behaviour on the valo theme demo.
You can see issues 1 & 2 in this small stand-alone program.
Start the dialog, and then resize using the “+” button. The table does not grow as it should. Resize the window, and only then does the table adjust. Same with minimise. Change the theme (to reindeer) and repeat the test, the table adjusts correctly immediately. We have lots of complicated re-sizable dialogs in our app, and this behaviour is a bit distracting!
[code]
import com.vaadin.annotations.PreserveOnRefresh;
import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Table;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
@PreserveOnRefresh
@Theme(“valo”)
public class MyUI extends UI
{
boolean valoTheme = true;
@Override
public void init(VaadinRequest vaadinRequest)
{
Button startButton = new Button("Show Dialog");
startButton.addClickListener(new ClickListener()
{
@Override
public void buttonClick(ClickEvent event)
{
showDialog();
}
});
setContent(startButton);
}
private void showDialog()
{
final Window w = new Window("Test Dialog");
VerticalLayout vl = new VerticalLayout();
vl.setMargin(true);
vl.setSpacing(true);
vl.setSizeFull();
Table table = new Table();
table.setSizeFull();
// Define two columns for the built-in container
table.addContainerProperty("Name", String.class, null);
table.addContainerProperty("Age", Integer.class, null);
table.addItem(new Object[]{"Adam", 40}, 1);
table.addItem(new Object[]{"Joe", 37}, 2);
table.addItem(new Object[]{"Zack", 21}, 3);
vl.addComponent(table);
HorizontalLayout hl = new HorizontalLayout();
hl.setSpacing(true);
Button b1 = new Button("Change Theme", new ClickListener()
{
@Override
public void buttonClick(ClickEvent event)
{
if (valoTheme)
{
setTheme("reindeer");
valoTheme = false;
}
else
{
setTheme("valo");
valoTheme = true;
}
}
});
b1.setSizeUndefined();
Button b2 = new Button("Close", new ClickListener()
{
@Override
public void buttonClick(ClickEvent event)
{
UI.getCurrent().removeWindow(w);
}
});
b2.setSizeUndefined();
hl.addComponent(b1);
hl.addComponent(b2);
vl.addComponent(hl);
vl.setExpandRatio(table, 1);
vl.setComponentAlignment(hl, Alignment.BOTTOM_RIGHT);
// build the window & show it
w.setModal(true);
w.setContent(vl);
w.setHeight("300px");
w.setWidth("400px");
UI.getCurrent().addWindow(w);
}
}
[/code]Great theme, and our users are going to love it!
Should be an easy fix, and as a workaround you can the override the corresponding mixins: