Fade or Remove Bullet for Checklist option

[katherine]

@senthil - Did you end up writing a userscript to hide or fade the bullets for checklists? If so, would you be willing to share it? I’d love to use it.

It looks so cluttered to have both bullets and checkboxes for the same item – and it also makes no sense. It’s redundant. With paper to-do lists, who draws a bullet point in front of a checkbox? I’m willing to bet very few people do. The checkbox IS a form of bullet.

It’s been like this for a long time and you’re actually the first person to propose this.

I understand the costs of changing something that your users have gotten accustomed to and that you have linked to features/actions, but ^this^ is not a good reason for persisting with a design that was not ideal in the first place. The potential issues you mentioned (e.g. the bullet point is for drag and drop, and can optionally be clicked on to zoom) are not tied to a bullet per se, and can be solved with an alternative.

Check out bullets/checkboxes in Bear and Taskade – the list is much easier to scan and digest when it’s visually cleaner. Bear also does a great job of mixing checklists and bullets (i.e. “children” of a checkbox item can be bullets, and are not prescriptively limited to also being checkboxes).

[Sarah]

This is one of the top issues i have with Dynalist - it’s extremely cluttered with all the extra bullet points. Makes it hard to scan quickly and therefore harder to use.

[MatthieuPiquemal]

I also share the sale feeling with check-box and bullet, I would also prefer to have either bullet or a check box for tasks (at same location than the bullet).

[BigChungus]

Maybe you could do it yourself with Custom CSS?

I don’t know how to identify items with checkboxes but I use Custom CSS someone on the forums wrote to customize my bullets somewhat because I didn’t like the default ones

.Node-self.is-collapsed.is-parent > .Node-bullet:before 
{
content: "\e90c";
}

.AppContainer:not(.is-using-bullet-to-zoom) .Node-self.is-parent.is-collapsed.is-hovering > .Node-bullet:before 
{
content: "\e90c";
}

.AppContainer:not(.is-using-bullet-to-zoom) .Node-self.is-parent.is-hovering > .Node-bullet:before 
{
content: "\e90c";
}

[Philipp]

Is there any update on this? I would love to see only checkboxes instead of bullets in checklists

[pottster]

+1

I stand by my earlier comment in this thread.

[Ricky_Gross]

I feel the same way. Google Tasks looked very clean with only check boxes. The suggestion of fading the bullet when the list is turned into a check list seems good.

[Krishna]

+1 from me

[BigChungus]

Here you go. Get yourselves a pro account and paste in the Custom CSS box.

/* dont render bullet if checkbox exists */
.Node-outer > .Node.is-checklist > 
.Node-self > .Node-bullet {
display: none;
}

[pottster]

Nice. Thanks George.

[Erica]

I’m curious how do you zoom or drag and drop after using this custom CSS. I’m guessing you’re using shortcuts to accomplish those tasks?

[BigChungus]

uh i never zoom a checkbox since they’re never parents. It’s my philosophy that all checkbox items ought to be managable bite size actions and so they’re never parents.

and I don’t drag and drop. I use move hotkey, I use ummmm that hotkey that lets items move up and down the list, and i indent/outdent items.

[Erica]

Ok, got it.

Having an intuitive way to zoom in is our biggest obstacle to add this. I agree with everyone here that it’s ugly, but zoom is important to Dynalist and I don’t want to assume other people’s checkbox items don’t have children too.

Glad to hear everyone’s genius ideas. We’ve considered double click, middle click, or control click, but they are all too hidden for such a core interaction

[BigChungus]

my css solved it imo

i agree the no-css version should have all the stuff a noobie could intuit. Having CSS options for picky users like me is perfect.

[anon77612580]

Took a cue from @Michael_Potter’s idea and made a mockup.

I have to admit this is not an easy or quick to implement solution. People may also confuse the ‘+’ for zooming with the existing ‘+’ and ‘-’ buttons for expand and collapse.

Since the bullet is the action tool, maybe the checkbox shape gets modified and the bullet remains unchanged. Here’s an example…the modified checkbox (left) in grey and the checkbox (right) as it is today

[BigChungus]

i like existing ui
concepts kind of ugly, because its confusing then a symbol is used sometimes and not other times without meaning anything different

[Michael_Potter]

Thanks for sharing the code. Makes it beautiful!

[minimalism]

I agree with @Michael_Potter, but with modifications. I can’t comment on color but checkboxes should replace bullets, it should be the default behavior, and there shouldn’t be an option to change it. Either bullet or checkbox, but not both at the same time.

[Michael_Schrottle]

For me that did not work.
Had to add this instead:

/* make bullets invisible if checkbox exists */
.Node.has-checkbox .Node-bullet {
opacity: 1% !important;
}

This way, just the bullet becomes invisible and all the fuctionality remains working.

… or you just toggle the view and use Article view for these docs.

[timers]

#cute, one of the oh-so trivially cute nice to haves…