Add customization options for dropdowns

[ghost]

Hello. Thx for your work!

Have a look at this screenshot:

As you can see, I’ve used your plugin to only show the dropdown button … but there occured some issues. I’ve added some CSS to get there (screenshot), but it is not a nice way to do it (that’s why I don’t show it here).

Here are the problems I ran through:

• the options-popover is aligned on the left edge of the button, for this reason the popover was cut off by the browser
• the dropdown-button is not customizable. can’t change the style or add classes like on the other buttons
• can’t change content of dropdown-button. you can only change the icon-class, but you can’t disable icons and use text instead or in addition

So it would be nice if you could add those features!

[vesper8]

I just opened https://github.com/gobrightspot/nova-detached-actions/issues/65 for the same reason

@JonathanDoelan could you please share the custom css you used to fix the problem? Even if it's hacky and not the ideal solution, I will gladly take that for now.

Many thanks

[ghost]

@vesper8 Due to the fact that I’ve posted this issue more than one year ago, I really don’t know if I picked the right part and what it means, but you can try the following ;)

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] {
    width: 100%;
    text-align: right;
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] > .trigger {
    max-width: 250px;
    width: 100%;
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] .dropdown-trigger {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    font-weight: 800;
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] .dropdown-trigger:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] .dropdown-trigger:after {
    content: "Create page";
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] .dropdown-trigger svg {
    display: none;
}

div[dusk="nova-menus-detail-component"] .card.mb-6.py-3.px-6 {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

[vesper8]

@vesper8 Due to the fact that I’ve posted this issue more than one year ago, I really don’t know if I picked the right part and what it means, but you can try the following ;)

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] {
    width: 100%;
    text-align: right;
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] > .trigger {
    max-width: 250px;
    width: 100%;
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] .dropdown-trigger {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    font-weight: 800;
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] .dropdown-trigger:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] .dropdown-trigger:after {
    content: "Create page";
}

.v-popover[dusk="detached-actions-invisible-buttons-dropdown"] .dropdown-trigger svg {
    display: none;
}

div[dusk="nova-menus-detail-component"] .card.mb-6.py-3.px-6 {
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

Thank you! I ended up solving it another way by overriding the invisible-actions vue component as part of a "general-overrides" custom Nova tool, and then I just changed bottom-end to bottom-start here https://github.com/gobrightspot/nova-detached-actions/blob/dc4975cb03c761f8fd9ba7d98e75acc41306af9b/resources/js/components/InvisibleActions.vue#L2

But your code above is very insightful in how you target the popover. Thank you for coming to my rescue : )