So I was able to answer my question partly myself.
I overrid some of the css of the valo-menu. The result looks like in the attached images (see attachments in next post, attach did not work in the first run).
I am sure that the scss is not perfect (I am no CSS-guru) and that there is a lot of optimization potential, but its just to try it out and to give others a starting point if they need something similar. I even do not know if this is a good solution, but its working at least mazbe someone has a better solution?
The drawback here is that I still have not looked into a solution on how to additionally have a side-menu. And I am still working on somehow getting the components (like the search bar in the image) to wrap on the smallest screen size and take the full width.
The following source code shows how to use it (basically nearly the same as for the original menu, you just have to assign a style called “top-menu”):
public class CoreView extends VerticalLayout implements View {
public static final String NAME = "";
private ComponentContainer topMenuArea;
private SingleComponentContainer contentArea;
@PostConstruct
public void init() {
setSizeFull();
initMenuArea();
initContentArea();
addMenu(buildMenu());
}
private void initMenuArea() {
topMenuArea = new CssLayout();
topMenuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);
topMenuArea.addStyleName("valo-menu-visible");
topMenuArea.addStyleName("top-menu");
addComponent(topMenuArea);
}
private void initContentArea() {
contentArea = new Panel();
contentArea.addStyleName(ValoTheme.PANEL_BORDERLESS);
contentArea.addStyleName(ValoTheme.PANEL_SCROLL_INDICATOR);
contentArea.setSizeFull();
contentArea.setContent(new Label("Content comes here!"));
addComponent(contentArea);
setExpandRatio(contentArea, 1);
}
public void addMenu(Component menu) {
menu.addStyleName(ValoTheme.MENU_PART);
topMenuArea.addComponent(menu);
}
protected Component buildMenu() {
CssLayout menu = new CssLayout();
menu.addComponent(buildTitle());
menu.addComponent(buildUserItems());
return menu;
}
protected ComponentContainer buildTitle() {
Label title = new Label("My <strong>App</strong>", ContentMode.HTML);
title.setWidthUndefined();
CssLayout group = new CssLayout();
group.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
group.setWidth(100, Unit.PERCENTAGE);
TextField search = new TextField();
search.addStyleName(ValoTheme.TEXTFIELD_SMALL);
search.setInputPrompt("Search...");
group.addComponent(search);
Button button = new Button("");
button.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
button.addStyleName(ValoTheme.BUTTON_SMALL);
button.setIcon(FontAwesome.SEARCH);
group.addComponent(button);
HorizontalLayout wrapper = new HorizontalLayout();
wrapper.setSpacing(true);
wrapper.setSizeFull();
wrapper.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT);
wrapper.addStyleName(ValoTheme.MENU_TITLE);
wrapper.addComponent(title);
wrapper.addComponent(group);
wrapper.setExpandRatio(group, 1);
return wrapper;
}
protected MenuBar buildUserItems() {
MenuBar bar = new MenuBar();
bar.setHtmlContentAllowed(true);
bar.addStyleName("user-menu");
// Simple item
bar.addItem("", FontAwesome.ENVELOPE, null);
// Item with badge
bar.addItem("<span class=\"valo-menu-badge\">15</span>", FontAwesome.GLOBE, null);
// User item
MenuItem item = bar.addItem("John Doe", new ThemeResource("img/main/profile-pic-300px.jpg"), null);
item.addItem("Preferences", FontAwesome.GEAR, null);
item.addSeparator();
item.addItem("Sign out", FontAwesome.LOCK, null);
return bar;
}
@Override
public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) {
}
}
Think I’ve found another one. When I create an Upload and use setImmediate(true), the element is still present in the right of the layout. It is visually indistinguishable from the background, but still clickable and triggers the upload/file chooser dialog.
Hi,
I’ve been testing valo demo project with vaadin 7.4.0.beta3 and menu responsiveness doesn’t work, until vaadin 7.3.9 it works very well, somebody could verify it?.
Hi Jouni,
i’m using Valo and I have table with progressBar as cutom component i want to change the color of indicator for each row , can you pride me please an example of the modified CSS ?
i tried this but it doesn’t work
Hi,
I’m using vaadin 7.4.6 and I have a problem with the vaadin calendar when I try to set it to full size. There is something wrong with the height of the cells (see attached images, the default theme works fine).
It looks like this is Valo’s calendar normal look. Please see the scss of the calendar component. Must be the line height I guess. You can then override it in your theme if you want.
Thank you for the suggestion, the following rule seems to work for me (but I don’t think is the correct way)
.v-calendar-bottom-spacer,
.v-calendar-spacer,
.v-calendar-bottom-spacer-empty,
.v-calendar-event-month {
margin-bottom: 0px;
}
Anyway, I think the calendar should be able to correctly resize himself just like every other component (ex. a Table).
It seems to works only if the height is UNDEFINED. If I set “setHeight(“100%”)” or “setHeight(“500px”)” the result is what you can see in the attached image: half of the last week row is outside the visible area and the numbers of the weeks (on the left) are not aligned with the rows.
Is this the intended behaviour?
I’m using Calendar of 7.5.0 version.
I guess you have a bug there, if you want to set the height and/or width size, then it does correctly.
BUT, when I do anything - listener, open a pop-up, scroll in a combo, then the height size change.
And when it does, it’s not about the height, it’s addin a v-calendar-spacer :
I had 8 in the first place, after 2 scrolls, it came to 10…
Could anyone confirm that ?
Thanks in advance,
Cheers,
Jeff
mazbe someone has a better solution?
