edvin / tornadofx

Lightweight JavaFX Framework for Kotlin
Apache License 2.0
3.68k stars 272 forks source link

[Feature request] Add option to not rotate the sidebar in Drawer view #1267

Open Huy-Ngo opened 4 years ago

Huy-Ngo commented 4 years ago

For the Drawer view, the items are automatically rotated if they're placed on either side, and I suppose it is done by this method:

https://github.com/edvin/tornadofx/blob/904617a6e2e1582f810eae1ee569c600fcc2498d/src/main/java/tornadofx/Drawer.kt#L153-L159

I would like these items to be put horizontally so it can be read more easily. Basically, I want my drawer to look like this:

image

instead of this:

image

Since the method is private, I can't override it. I suppose that I can do that with CSS, but I don't know how. Here are the approaches I tried:

drawer {
    item("Item 1", expanded = true) {
        addClass(DrawerViewStyle.horizontalDrawerItem)  // no effect
        style { rotate = 0.deg } // no effect
    }
    style { rotate = 0.deg } // no effect
    addClass(DrawerViewStyle.horizontalDrawerItem)  // no effect
}

Stylesheet class:

class DrawerViewStyle: Stylesheet() {
    companion object {
        val horizontalDrawerItem by cssclass()
        val item by css class()
    }
    init {
        horizontalDrawerItem {
            rotate = 0.deg
        }
        button {  // no effect
            rotate = 0.deg
        }
        item {  // no effect
            rotate = 0.deg
        }
        toggleButton {  // no effect
            rotate = 0.deg
        }
    }
}

I didn't find any guide on this and the document doesn't really help. Is there any simple way I can handle this?

Huy-Ngo commented 4 years ago

I just tried to overriding the styling here:

https://github.com/edvin/tornadofx/blob/27ba7813b28900170073059b13f6583064d80770/src/main/java/tornadofx/Drawer.kt#L345-L355

my styling code:

    init {
        buttonArea {
            toggleButton {
                backgroundColor = multi(Color.RED)
                textFill = Color.BLUE
                rotate = 0.deg
            }
        }
    }

It also didn't have any effect. I thought it should be, since the classes are added to the elements, aren't they?

Huy-Ngo commented 4 years ago

Whoops, sorry, the last attempt did work - I just forgot to add the stylesheet. However, the toggle buttons are not filled to maximum width. Hopefully there is (will be) a way to make these button horizontal more conveniently.

Huy-Ngo commented 4 years ago

I would like to know if you would approve this feature, in which case I'm happy to make a PR.