Show disabled delete button when category can't be deleted

Continuing the discussion from Organizing Categories (overview needed):

When you’re just scanning the category Edit page to figure out how to delete the category, it’s not immediately obvious how to do just that:

I think it’d be better if we showed the delete button, clearly disabled. Clicking the delete button would invoke a popup modal explaining why the category can’t be deleted.

3 Likes

Sure that is a little bit cleaner, but is it really justified by the amount of engineering work?

e.g. complaint driven development: how many are actually complaining about this? Oh, I see. One famous complaint. I will accept that as a valid answer :wink:

4 Likes

Working on a PR for it.

I’m going to create a tooltip when over/click on the Delete button. I’m not reccomend to use a modal popup since we are already in a modal.

Is there any other place in the app where i can see disable btn design and little popup style?

This is a good one to work on, don’t use a tooltip though as those are invisible on mobile. Popping a dialog / alert on click is fine.

Here is the Pr for this issue: #4747

And here is how it look like in difference devices and different screen size:
Desktop:

Iphone5:

Nexus:

@codinghorrori used the .touch and .no-touch class to set up click or hover effect.

6 Likes

Hey there @designbygio, the new disabled button looks great! Just updated my site and one of my staff already noticed and mentioned how much they love the new look (we’re doing some reorganization at the moment).

We did, however, notice a small quirk with the warning bubble when hovering on the desktop. It seems that the trigger zone for the bubble is the area filled by the bubble when open, not just the disabled button. On a normal monitor this isn’t an issue, but if you’ve got a low resolution, or have shrunk the window on your screen this can prevent interaction with other elements on the screen. I’ve included a gif below to demonstrate.

4 Likes

@designbygio maybe just change it so it only shows up on “click” and not on hover.

3 Likes

@jomaxro yep the area is larger then the button, it was done in purpose in order to have a better visible area and don’t have that annying behaviour where popup close as soon as you try to click on the link :slight_smile:
But yeah look like that in small screen does more harm then good…

ok @sam i will keep just a click behaviour. It also look more consistent with the rest of the app

4 Likes

@jomaxro sorry it took me so long, here is the PR fixing this:

https://github.com/discourse/discourse/pull/4768

6 Likes

Please don’t feel the need to apologize! You’re doing work on software I get to use for free. I don’t get to have any expectations of speed when it comes to requests for changes in Discourse. Thank you for your efforts to make Discourse better!

4 Likes