Do you have some custom CSS on top of the built-in Reindeer/Valo, and do you have any hard-coded sizes in your Java classes?
As for a specific issue in the screenshots, it looks like you’re using a header element (h1-h6) in the title. In Reindeer, those don’t have any special styles for margins, but Valo defines the top and bottom margins for those elements. You might want to start debugging from there.
Edit: also, what do you mean by “$v-unit-size: 20px; does not affect anything”? Are you specifying it in the right place (i.e. before the @import “…/valo/valo”;)? If so, have you compiled the theme again (should be automatic when productionMode==false).
The menu on the left is really nice, and I would like to do something like that, specially things like highlighting the selected menu and so son, but I still don’t know how to do that.
Is the menu on the left just a Horizontal Layout 100% with a VerticalLayout on the left side, and the items on it? Or is there a specific component for that?
How to highlight the selected menu? And add that number of notifications, like 123 on the right of “Text Fields”?
Is it possible to share the source code of this demo?
Once again, the new Valo UI is amazing! Congratulations to all involved in the development!
I downloaded the version 7.3.0 and was testing it on my mobile (Nexus 5) and it was different from the demo link.
Is the responsibe layout for smartphones not available yet on this version, or did I do something wrong?
Please take a look at both attachments. The version I downloaded on my localhost is <vaadin.version>7.3.0.rc1</vaadin.version>
There is still some last minute fine-tuning done for the theme demo app. The difference you see is due to viewport meta tag added to the application lately.
Would you try again with 7.3.0 that landed maven repositories just few hours ago :)
I’m playing with the brand new Valo theme, and I must say it rocks !
I need a panel with a button in the caption.
I found -almost- everything that I need in the online valo demo
here .
The code sample uses a little workaround to achieve that. Instead of using a Vaadin Panel, an
HorizontalLayout is used to create the caption, and then the
HorizontalLayout is embedded into a
CssLayout (see attachment) :
HorizontalLayout panelCaption = new HorizontalLayout();
panelCaption.addStyleName("v-panel-caption");
This works fine, but now I want to change the background color of the caption. Only the background color (I want to keep the font, the gradient,…etc.).
I can’t find a way to do this simple thing, I’m probably missing somthing.
I even tried to override a global variable in the file
mytheme.scss like this, but it doesn’t work (and I don’t want to change the caption of all panels in the application anyway) :
the demo already contains 3 examples for panels with a different background color. Have you tried to define your own style by including the “valo-panel-caption-style”-mixin?
.v-panel-caption-mycolor {
@include valo-panel-caption-style($background-color: #000000);
}
This is how it is done in the “tests-valo”-theme from the demo and i think it should also work for you.
I tried to play around with the code of the theme sampler and to create a simple view out of it.
Unfortunately, I don’t get the responsiveness of the menu to work (I mean only the transition from icons besides the caption to large icons, the menu button for very small screens is ignored right now).
I call
Responsive.makeResponsive(this)
in the UI-class.
Thats the code from the view:
public class MainView extends HorizontalLayout implements View {
public static final String NAME = "";
private CssLayout contentArea = new CssLayout();
private CssLayout menuArea = new CssLayout();
public MainView() {
setSizeFull();
menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);
contentArea.setPrimaryStyleName("valo-content");
contentArea.addStyleName("v-scrollable");
contentArea.setSizeFull();
addComponents(menuArea, contentArea);
setExpandRatio(contentArea, 1);
addMenu(buildMenu());
}
public void addMenu(Component menu) {
menu.addStyleName(ValoTheme.MENU_PART);
menuArea.addComponent(menu);
}
private Component buildMenu() {
CssLayout menu = new CssLayout();
menu.addStyleName(ValoTheme.MENU_PART_LARGE_ICONS);
menu.addComponent(getTitle());
menu.addComponent(getUserMenu());
menu.addComponent(getMenuItems());
return menu;
}
private HorizontalLayout getTitle() {
Label label = new Label("Title");
label.addStyleName(ValoTheme.LABEL_H3);
label.addStyleName(ValoTheme.LABEL_BOLD);
HorizontalLayout top = new HorizontalLayout();
top.setWidth("100%");
top.setDefaultComponentAlignment(Alignment.MIDDLE_LEFT);
top.addStyleName(ValoTheme.MENU_TITLE);
top.addComponent(label);
top.setExpandRatio(label, 1);
return top;
}
private MenuBar getUserMenu() {
MenuBar settings = new MenuBar();
settings.addStyleName("user-menu");
MenuItem item = settings.addItem("Username", new ThemeResource("img/main/profile-pic-300px.jpg"), null);
item.addItem("Preferences", null);
item.addSeparator();
item.addItem("Sign Out", null);
return settings;
}
private CssLayout getMenuItems() {
CssLayout menuItemsLayout = new CssLayout();
menuItemsLayout.setPrimaryStyleName("valo-menuitems");
menuItemsLayout.addComponent(getMenuItem("Item 1", FontAwesome.BAR_CHART_O, true));
menuItemsLayout.addComponent(getMenuItem("Item 2", FontAwesome.USERS, false));
return menuItemsLayout;
}
private Button getMenuItem(String label, Resource icon, boolean selected) {
Button button = new Button(label);
button.setIcon(icon);
button.setPrimaryStyleName(ValoTheme.MENU_ITEM);
button.addStyleName(selected ? "selected" : "");
button.setHtmlContentAllowed(true);
return button;
}
@Override
public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) {
}
public ComponentContainer getContentContainer() {
return contentArea;
}
}
The responsive menu is built in in the default compiled Valo theme, and you shouldn’t use the ValoTheme.MENU_PART_LARGE_ICONS style name yourself. That one is included only for the certain width-range in the theme.
If you only want the “tablet” and “desktop” versions of the menu, then you need to modify the default theme.
Ah I understand, great, thank you, everything worked by simply leaving out the ValoTheme.MENU_PART_LARGE_ICONS style name.
No, I just wanted to say that I did not implement the button as in the sampler for the very small screens, I don’t want to leave it out, but I simply didn’t include it.
That leads me to my next question: do I absolutely need to implement this menu button myself? Because I have ssen that for the small screens the menu simply goes to the top, shows the title and the user-menu, but not the other menu items? So those are not auto-magically put somewhere then, right?
The menu items are still there in the small screen version, just hidden outside of the viewport on the left side. The button just toggles the appropirate style name for the menu which shows it.
Ok, thank you. But I meant the toggle button itself then has to be implemented on my own, right? It is not automatically created somewhere on the menubar as far as I have seen.
One last question is still left: I wanted to try out the menu logo as seen in the buildTestMenu() method of the sampler source:
Label logo = new Label("Va");
logo.setSizeUndefined();
logo.setPrimaryStyleName("valo-menu-logo");
menu.addComponent(logo);
Unfortunately when trying it out, the logo does not get hidden for the small mobile menu, but stays on the left side of the screen. Is this intended or a bug?
