Small immediate upload?

Hi,

The new immediate upload is very cool, but is there a easy way to give a stylename to the button? I’d like to

upload.getButton().setStyleName("small");

But the button is not visible, only its caption. Setting the style for the upload itself is doesn’t work, since it’s actually the enclosing form, not the button div.

Is there a non-kludgy way to style the button?

I don’t know if this is exactly what you want - you can’t apply the “small” style this way to the button without copying the css into an own identifier.

Anyhow, workaround: Give the whole upload component a new style name and style the button relative to the upload component.

Code:

Java:

Window mainWindow = new Window("Test app");
setMainWindow(mainWindow);
upload = new Upload("foo bar", null);
upload.setImmediate(true);
upload.addStyleName("myCustomUpload");
mainWindow.addComponent(upload);
setTheme("testTheme");

CSS:

@import "../reindeer/styles.css";

.myCustomUpload .v-button {
	background: none;
	border: 1px solid black;
	height: auto;
	padding: 0 !important;
}

.myCustomUpload .v-button .v-button-wrap {
	height: auto;
	background: none;
	padding: 0 !important;
}

.myCustomUpload .v-button .v-button-wrap .v-button-caption {
	height: auto;
	padding: 2px;
}

Result:

So if you want to do your own theme for the button, that’d be the way I’d go. If you’d like to use something predefined, like the small-style, you’d have to copy the whole small style into your theme and add the .myCustomUpload in front of the names.

And yeah, the new immediate upload is quite nice! :slight_smile:

Yeah, that’s the kludgy way I’d like to avoid :slight_smile:

Well, the alternative seems to be to extend the whole component, extend the API and add the style name to the button, provided by the new API. :slight_smile:

I think I’ll wait, perhaps the API will include a setButtonStyleName() or something at some point… :wink:

Still imposible :frowning:

I don’t normally comment on things, but Jens’ solution helped me out quite a bit.

Modified it slightly to be in line with the Valo theme by doing

.myCustomUploadTiny .v-button { @include valo-button-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--tiny, $font-weight: null); } And could easily be adapted for other button styles in similar manner using the styles in

vaadin-themes-x.x.x.jar/VAADIN.themes.valo.components._button.scss

This works with
https://vaadin.com/directory#!addon/easyuploads
as well.

Hope this is helpful to someone else.

This is brilliant and simple. many thanks