U4-11408 - Use the umb-toggle for the "True/False" property editor

Created by Jan Skovgaard 01 Jun 2018, 20:17:12 Updated by Sebastiaan Janssen 05 Jun 2018, 10:35:52

Tags: PR

Since v7.7.0 we have had this beautiful toggle, which is used for setting up user permissions and I thought why not use it for the "True/False" property editor too? It's a lot more awesome than the good ol' input checkbox and it much nicer looking out of the box and it's already part of the codebase so why not use it? :-)

I have made a PR here: https://github.com/umbraco/Umbraco-CMS/pull/2667

3 Attachments


Jan Skovgaard 03 Jun 2018, 14:21:02

Just added two screendumps to illustrate what it is that I have changed. In the PR I have replaced the "Toggle" (toggle-old.png) checkbox with the green toggle (toggle-new.png), which is used in the users section for group permissions using the umb-toggle directive, which is already aprt of the codebase.

Chriztian Steinmeier 03 Jun 2018, 17:54:09

The only downside to this is that the new one has a very "Yes! I'm ON" feel, which is not always what you want... E.g. one of the most frequent use cases is the Hide in navigation checkbox which could look a little misleading with the checkmark and green background, no?

Jan Skovgaard 03 Jun 2018, 18:06:14

@greystate By default it's set to the "Off" state - I realise that the screendump does not clearly reflect this. But the initial state is still "off"...It's still configurable on the prevalue editor where the default is set to "Off". It will still be configurable as it has always been. It's only the visuals that have been updates to be the toggle instead of the checkbox.

The reason why I included the screendumps was just to visualize the toggle if people had doubt about what I was rambling about :-)

I have added a screendump showing the "Off" state too. Hope this clarifies things?

Jan Skovgaard 03 Jun 2018, 18:25:52

@greystate re-read your comment - Misunderstood what you meant. #h5is.

Well I don't think it's too much of a problem. I see it more as "Yes I'm indeed hidden from navigation" if it's toggled on.

But that's of course a matter of taste and what the editors experience is. My current PR does not take into account that the toggle actually allows for configuring labels and the text of the labels. I did not want to implement this if the PR is not accepted. But if it is then a next step could be to adjust the settings in the prevalue editor to reflect the current options on the toggle directive.

Then it could perhaps also make sense to extend the umb-toggle directive with 2 attributes for "on" and "off" colors by a limited color theme that fits with the overall theme of the backoffice maybe? But this is another task that will of course require a new PR.

But before we get ahed of ourselves this is just meant as a nicer looking alternativ out of the box, which is already in the codebase. If people want something other than that Bjarne Fyrstenborgs wondeful Switcher package still exists https://our.umbraco.org/projects/backoffice-extensions/switcher/ :-)

But this will of course expand some of the built-ins a bit and maybe HQ don't want that because it's a bit more to handle and keep track of - So for now this is minor attempt to make the backoffice a little more nice to look at. If the PR gets accepted then I think we could look at the fine tuning options :) - But as mentioned there are still nice packages out there that allows for extending the backoffice with some more customized toggles than what is offered out of the box.

Priority: Normal

Type: Feature (request)

State: Fixed


Difficulty: Normal

Category: UI

Backwards Compatible: False

Fix Submitted: Pull request

Affected versions:

Due in version: 7.11.0


Story Points: