Tasks: Adjust checkbox design to Nextcloud

[jancborchardt]

We should adjust the checkboxes in Tasks to look like the core Nextcloud ones. :)

Compare:

See https://twitter.com/despens/status/1151098437875699719 by @despens

Documentation for how to do Nextcloud-style checkboxes are at https://docs.nextcloud.com/server/latest/developer_manual/design/html.html#checkboxes-and-radios

cc @nextcloud/tasks @nextcloud/designers

[raimund-schluessler]

I don't know, this looks really weird to me:

The checkbox is to small and it doesn't use the Tasks app icon anymore as the checkmark.

[jancborchardt]

The size of the checkbox is adjustable, right @skjnldsv @juliushaertl?

And then we can adjust the Tasks app icon too, being a checkmark in a box. I can do that. :)

[raimund-schluessler]

And then we can adjust the Tasks app icon too, being a checkmark in a box. I can do that. :)

My argument with the same icon does not work in this direction 😉 I don't think we should change the app icon. The icon is

• clear, simple and friendly
• unambiguously
• used for many years

If you really think we have to adjust the checkboxes, I can live with it. I just wonder if the nextcloud design checkboxes might be understood as selecting a task rather than completing it.

[despens]

I'd appreciate if the look of checkboxes was unified across Nextcloud apps.

Users see dozens of differently styled checkboxes all the time, in different desktop and web apps, not even to mention mobile apps. If it looks remotely like a checkbox they will assume it is a checkbox. :wink:

Also, there are tons of apps that use checkboxes for completing tasks, so for usability the exact styling is not an issue. But it would just be nice if at least within Nextcloud the visual clutter could be reduced and user interface elements provide the same functionality also look the same.

[juliushaertl]

I agree with @jancborchardt that the checkbox doesn't really fit into the rest of the UI, but also that the primary colored checkbox is more about something is selected then something is done.

How about this:

[raimund-schluessler]

I agree with @jancborchardt that the checkbox doesn't really fit into the rest of the UI, but also that the primary colored checkbox is more about something is selected then something is done.

How about this:

I would like this better than the primary colored checkbox, but this doesn't help in unifying the checkbox appearance all over Nextcloud.

[jancborchardt]

Cool, @juliushaertl's suggestion is nice as well. I do think unification of the form is already a good step, it doesn't all need to be primary color.

[raimund-schluessler]

Let’s do it like @juliushaertl suggested it then.

[raimund-schluessler]

Anyone up for sending a PR? 😉

[raimund-schluessler]

@juliushaertl Since we agreed on your design proposal, could you share the CSS for this (in case you have it). PR to adjust it is in https://github.com/nextcloud/tasks/pull/572.

[juliushaertl]

Not sure if the PR is actually still needed, it already looks quite fine for me on master. Just a small patch for some spacing issues:

diff --git a/css/src/style.scss b/css/src/style.scss
index 841a37f..dc9f06a 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -1199,9 +1199,14 @@
        border-radius: 3px;
        border: 1px solid var(--color-main-text);
        float: left;
-       margin: 9px;
+       padding: 9px;
+       margin: 7px 7px;
        opacity: 0.5;

+       &.icon-checkmark {
+           margin-top: 10px;
+       }
+
        &:not(.icon-checkmark) {
            background: unset;
        }

[juliushaertl]

Ah sorry, forgot to build the svg sprite. If you just remove the custom background image from the icon-checkmark class and use the server shipped one, it should already be fine. cc @jakobroehrl

[raimund-schluessler]

Have a look at #572.

[raimund-schluessler]

Fixed with #572.