Delete-button symbol and placement optimisation

[telmiger]

To avoid hitting the wrong element on mobile screens I suggest to move the delete-button to the right border, away from the checkbox on the left. I have replaced the × character on the button by a minus-sign-graphic in the background for two reasons:

• screenreaders (Safari VoiceOver) announce the × as "times"
• a graphic similar to × is used for closing tiddlers in several places in TW5, but here we remove

Additionally I think that highlighting list items targeted by checkbox/button could help users. Note: In order to achieve the red highlight for the delete button I had to change the order of the elements (now: checkbox > delete-button > item-body (label for checkbox).

I have set up a demo for you (and possibly @TiddlyTweeter) to check out here: http://tid.li/tw5/test/checklist-05.html

OT: You will also find a button there to hide checked items (globally) as suggested in https://github.com/tgrosinger/tw5-checklist/issues/17

Let me know what you think!

[TiddlyTweeter]

I like that. And not just because of the issue over "X". But because putting any controls on the left tends to bring in a slight visual dissonance. Seeing ONLY a checkbox on the left is, IMO, a visual improvement & small clarification of functioning.

When I saw the demo I immediately formed a further suggestion on styling for print ...

8 - STYLING FOR PRINT should remove "+", "-" and the "New Item" entry box.

Use case: Someone printing out a shopping list. Or printing a work tasks list. They need the checkbox, but they don't need anything else. Those controls are redundant on paper.

I'm not sure how difficult this is to do, but I think it would be an enhancement.

Josiah

[tgrosinger]

@telmiger I like the idea, and the check boxes being right next to delete has been an issue for me on mobile. Could we tone down the bright red to a softer or less-saturated red?

[TiddlyTweeter]

I agree with Tony. The Red is too amped. Given nothing else is like that in the interface a subtler colour will work just as well.

On 30 May 2017 at 16:03, Tony Grosinger notifications@github.com wrote:

@telmiger https://github.com/telmiger I like the idea, and the check boxes being right next to delete has been an issue for me on mobile. Could we tone down the bright red to a softer or less-saturated red?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tgrosinger/tw5-checklist/issues/32#issuecomment-304888191, or mute the thread https://github.com/notifications/unsubscribe-auth/AbfrTfrpcB1-uOUL2XU8f_YZtOWhmOLQks5r_CGmgaJpZM4NqIyl .

[telmiger]

I will reduce opacity to 25% next time my laptop is online.

TiddlyTweeter notifications@github.com schrieb am Di. 30. Mai 2017 um 16:57:

I agree with Tony. The Red is too amped. Given nothing else is like that in the interface a subtler colour will work just as well.

On 30 May 2017 at 16:03, Tony Grosinger notifications@github.com wrote:

@telmiger https://github.com/telmiger I like the idea, and the check boxes being right next to delete has been an issue for me on mobile. Could we tone down the bright red to a softer or less-saturated red?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub < https://github.com/tgrosinger/tw5-checklist/issues/32#issuecomment-304888191 , or mute the thread < https://github.com/notifications/unsubscribe-auth/AbfrTfrpcB1-uOUL2XU8f_YZtOWhmOLQks5r_CGmgaJpZM4NqIyl

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tgrosinger/tw5-checklist/issues/32#issuecomment-304905234, or mute the thread https://github.com/notifications/unsubscribe-auth/ADC-xzlHCn_T4dd8-RtthebZ7pfduUy5ks5r_C5BgaJpZM4NqIyl .

[telmiger]

The demo is updated. Besides a softer red color I applied print styles as suggested by @TiddlyTweeter so all unnecessary elements will not appear on paper. I made also a short test with my ToDoNow/Listreveal plugin: It seems, that I can remove all additional styling for presenting checklists that I had to use until now. :–)

[TiddlyTweeter]

Its looking good. And thankyou on the print styling. I really appreciate that. Simple change, but good.

On 30 May 2017 at 21:47, Thomas Elmiger notifications@github.com wrote:

The demo https://tid.li/tw5/test/checklist-05.html is updated. Besides a softer red color I applied print styles as suggested by @TiddlyTweeter https://github.com/tiddlytweeter so all unnecessary elements will not appear on paper. I made also a short test with my ToDoNow/Listreveal plugin: It seems, that I can remove all additional styling for presenting checklists that I had to use until now. :–)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/tgrosinger/tw5-checklist/issues/32#issuecomment-304987733, or mute the thread https://github.com/notifications/unsubscribe-auth/AbfrTWjO-vlorGKs5MKmgn2G4WYdhswoks5r_HJogaJpZM4NqIyl .

[telmiger]

I think this is resolved in the new version 0.0.14. (Print CSS is in #38)