Skip to content
This repository has been archived by the owner on Sep 28, 2024. It is now read-only.

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

Open
Huy-Ngo opened this issue Aug 20, 2020 · 3 comments · May be fixed by #1283
Open

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

Huy-Ngo opened this issue Aug 20, 2020 · 3 comments · May be fixed by #1283

Comments

@Huy-Ngo
Copy link

Huy-Ngo commented Aug 20, 2020 •
edited
Loading

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:

tornadofx/src/main/java/tornadofx/Drawer.kt

Lines 153 to 159 in 904617a

private fun configureRotation(button: ToggleButton) {
button.rotate = when (dockingSide) {
Side.LEFT -> -90.0
Side.RIGHT -> 90.0
else -> 0.0
}
}

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
Copy link
Author

Huy-Ngo commented Aug 22, 2020

I just tried to overriding the styling here:

tornadofx/src/main/java/tornadofx/Drawer.kt

Lines 345 to 355 in 27ba781

buttonArea {
spacing = 0.px
padding = box(0.px)
toggleButton {
backgroundInsets += box(0.px)
backgroundRadius += box(0.px)
and(selected) {
backgroundColor += c("#818181")
textFill = Color.WHITE
}
}

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
Copy link
Author

Huy-Ngo commented Aug 22, 2020

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 Huy-Ngo changed the title Change the rotation of drawer items [Feature request] Add option to not rotate the sidebar in Drawer view Aug 22, 2020
@Huy-Ngo
Copy link
Author

Huy-Ngo commented Aug 22, 2020

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

@Huy-Ngo Huy-Ngo linked a pull request Oct 5, 2020 that will close this issue
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Adding an option to make drawer with horizontal text Huy-Ngo/tornadofx
1 participant
@Huy-Ngo