Can I have a DropDown with image? ```dropDown(tr("Dropdown with custom list"), icon = "far fa-image"...

# kvision

[Jörg Rade]

Can I have a DropDown with image?

dropDown(tr("Dropdown with custom list"), icon = "far fa-image", style = ButtonStyle.WARNING) {
    minWidth = 250.px
    image(require("img/cat.jpg")) { height = 170.px; margin = 10.px; title = "Cat" }
    separator()
    image(require("img/dog.jpg")) { height = 170.px; margin = 10.px; title = "Dog" }
}

suggests I can have either a FontAwesome icon plus text or an image.
What I want is a custom image with text.

[Robert Jaros]

You mean on the button or on the list ?

[Jörg Rade]

On the list and on the button.
I would like to replace the "Three Objects" FA icon with an Image as well have text right of the coulored gif + regular menu item behaviour, i.e. elicit an event on click.

[Jörg Rade]

kroviz can connect to two or more different servers at the same time. Each serverApp may have its own icon etc. I want to provide the user with visual feedback, which serverApp is in the 'foreground' and allow to switch between them.

[Robert Jaros]

to use image instead of icon for the button of the DropDown component just use image property (it's there, it's just not exposed in the constructor)

[Jörg Rade]

Thanks - I'll try (thought I already did ...)

[Jörg Rade]

The following code comes pretty close:

fun insertConnection() {
    mainEntry.separator()
    val resString = io.kvision.require("img/gift_48.png")
    val menuEntry = buildMenuEntryWithImage("Connection 1", image = resString, { LoginPrompt().open() })
    mainEntry.add(menuEntry)
}

private fun buildMenuEntryWithImage(label: String, image: ResString?, action: dynamic): Link {
    val link = Link(label, image = image, className = "dropdown-item")
    link.onClick { e ->
        val at = Point(e.pageX.toInt(), e.pageY.toInt())
        UiManager.position = at
        action()
    }
    return link
}

Can I scale the image (ResString) down?

[Robert Jaros]

Only with some css I'm afraid.

[Jörg Rade]

OK - no problem (I don't fear CSS anymore ;))

[Jörg Rade]

Thanks a lot for your help!

[Robert Jaros]

you can use Style object for this with pure kotlin 😉

[Jörg Rade]

resString.style doesn't suggest anythin in IJ ...

[Jörg Rade]

I got it:

val resString = io.kvision.require("img/gift_48.png") {style}

[Jörg Rade]

Have a nice day and stay healthy!

[Robert Jaros]

I was talking about:

val myStyle = style(".dropdown-item") {
    style("img") {
        width = 20.px
        height = 20.px
    }
}

[Jörg Rade]

I arrived at:

[Jörg Rade]

val resString = require("img/gift_48.png")
resString { addCssClass("app-icon") }

[Jörg Rade]

but it doesn't work - I'll follow your suggestion, though