search

tgrosinger / tw5-checklist

Simple checklist widget for TiddlyWiki5:
https://tgrosinger.github.io/tw5-checklist/
51 stars 12 forks source link

Loss of Staring Space on Strikethrough #29

Closed TiddlyTweeter closed 7 years ago

TiddlyTweeter commented 7 years ago

Ciao. I love this little TW gizmo! I use it most alongside @telmiger's ToDoNow plugin for TW to which it is a great partner.

I noticed you continue to work on refining it and added useful options.

One small issue is the layout with strikethrough that loses the leading space (at least on Firefox on PC) ... Here's an example:

capture

Best wishes Josiah

tgrosinger commented 7 years ago

Ah, thanks for pointing that out. I will look into it.

telmiger commented 7 years ago

Hi Tony

I looked at it yesterday and plan to send you some serious pull requests in a few days. I hope you are open for improvements or at least discussions about suggestions … sorry time is limited today.

Kind regards, Thomas

tgrosinger commented 7 years ago

@telmiger that sounds great, I always appreciate any extra help I can get. While you are going through that process please let me know if there is any unclear documentation about building or installing from source.

telmiger commented 7 years ago

As I am not a real developer but just a TW hacker I will focus on the solution and work around the build and install docs. My personal workflow is: Develop in TW single page/text editor > copy-paste solution to Github > commit > PR I hope you can live with that ;–) While I make some progress new ideas keep coming up, so I put a demo online to show you where I am atm: https://tid.li/tw5/test/checklist.html – have a look at the tasks so see where I am heading …

Maybe I should send a PR for what I have before I move to far? Let me know what you think!

2017-05-22 16:36 GMT+02:00 Tony Grosinger notifications@github.com:

@telmiger https://github.com/telmiger that sounds great, I always appreciate any extra help I can get. While you are going through that process please let me know if there is any unclear documentation about building or installing from source.

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

telmiger commented 7 years ago

Forgot to mention: This inspired me heavily https://inclusive-components.design/a-todo-list/

2017-05-25 10:19 GMT+02:00 Thomas Elmiger thomas.elmiger@gmail.com:

As I am not a real developer but just a TW hacker I will focus on the solution and work around the build and install docs. My personal workflow is: Develop in TW single page/text editor > copy-paste solution to Github > commit > PR I hope you can live with that ;–) While I make some progress new ideas keep coming up, so I put a demo online to show you where I am atm: https://tid.li/tw5/test/checklist.html – have a look at the tasks so see where I am heading …

Maybe I should send a PR for what I have before I move to far? Let me know what you think!

2017-05-22 16:36 GMT+02:00 Tony Grosinger notifications@github.com:

@telmiger https://github.com/telmiger that sounds great, I always appreciate any extra help I can get. While you are going through that process please let me know if there is any unclear documentation about building or installing from source.

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

tgrosinger commented 7 years ago

That's looking good to me. Feel free to submit incremental pull requests. It will probably be easier to leave feedback that way.

TiddlyTweeter commented 7 years ago

I can't do pull requests as I am an idiot. But I know good software design when I see it. So I hope you may note my comments.

1 - @telmiger's modification with an iconed plus sign is not needed functionally. IF you guys think that needs to be shown for users to understand how to add an item I suggest a simpler TEXT "+". That keeps the minimalist aesthetic better IMO. But NO sign is needed. SO, why add any sign?

2 - The RECYCLE button at the bottom that unstrikes struck-through items is UN-needed as you can undo the strike-through already with a click on an item. Globally unstriking? I can't think of a use case that deserves it.

3 - ORDERING of items #1. That could be useful. An icon that re-orders items A-Z.... I'd still prefer that struck-through items remained at the bottom though. It doesn't make sense to mix them in with normal items for normal usage.

4 - ORDERING of items #2. Via Drag n' Drop now TW has it. That could be useful too. Not sure how difficult that would be to implement?

5 - STYLING. The only issues I had have been aesthetic. (a) indentation of long lines missing. (b) strikethrough losing leading space. Thomas addressed those, I think?

6 - OVERALL -- Try keep the minimalist design aesthetics. Its the minimalism of this gizmo that is the best thing about it IMO.

Tell me if you want me to test anything.

Very best wishes Josiah

TiddlyTweeter commented 7 years ago

I want to add one idea to my last message.

7 - Keeping the minimalism but adding a congruent sense of differentiation between items. Use COLOR. A limited colour pallet dropdown of say, 4 colors, on the left next to each item.

A use case would be a shopping list for someone trying to eat more healthily. Truly safe food in GREEN, ordinary food in normal BLACK, luxury danger foods in RED.

Just a thought.

telmiger commented 7 years ago

Josiah, you are the best user, critique and tester one could have!

I think we all agree on your number 6: minimalism has to be kept. Nothing more to say to that.

1 … why add any sign? – This is a good starting point to explain my objectives. Inspired by the article https://inclusive-components.design/a-todo-list/ liked in a prior statement, I try to make the resulting user interface more accessible, with better usability for a better, more efficient user experience on all devices. The article demonstrates techniques for this that are in parts applicable in TW (with my skills). Let me expand on this: better accessibility means e.g. that:

To give other users a better chance to adapt the design without touching the logic I tried to separate the two domains. Some CSS-savy users could overwrite the plugins stylesheet with their own. (But they would never touch the Javascript part of it.)

2 - The RECYCLE button … allready has a configuration option to make it visible/invisible. (I can think of usecases for this.) BUT it has a semantic flaw. The button is the last item in the list, even if it is not a task like the others – so I suggest to remove it from the list. I am not sure if I could do this so maybe Tony should look at this. The same is true for the form at the top.

3 - ORDERING of items #1 https://github.com/tgrosinger/tw5-checklist/issues/1 from A-Z ... let’s keep this tool simple ;–)

4 - ORDERING of items #2 https://github.com/tgrosinger/tw5-checklist/issues/2 via Drag n' Drop … yep, that could be nice. But it is not part of my plans atm.

5 - STYLING (a) indentation of long lines (b) strikethrough losing leading space. – Both are fixed, see my demo https://tid.li/tw5/test/checklist.html. 7 Applying colors to items would pose problems: a) how would a user apply them? any interface addon or code one would have to know would make the tool more complicated b) as your words imply a colorful list would break the minimalism.

Thanks again and keep the ideas coming!

2017-05-25 19:02 GMT+02:00 TiddlyTweeter notifications@github.com:

I want to add one idea to my last message.

7 - Keeping the minimalism but adding a congruent sense of differentiation between items. Use COLOR. A limited colour pallet dropdown of say, 4 colors, on the left next to each item.

A use case would be a shopping list for someone trying to eat more healthily. Truly safe food in GREEN, ordinary food in normal BLACK, luxury danger foods in RED.

Just a thought.

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

telmiger commented 7 years ago

I just sent the PR – please ask if anyting is not clear. I have updated the demo on https://tid.li/tw5/test/checklist.html – so if @TiddlyTweeter wants to test … please give it a try!

TiddlyTweeter commented 7 years ago

Ciao Thomas & Tony

Its looking good!

I'm glad the "+" is more humble than it was in the previous version :-)

There is an issue I forgot to mention. Maybe its not a Checklist issue per se? I don't know why but sometimes when the Checklist is inside a Transclusion it loses some spacing. Below is an example ...

Best wishes Josiah

Normal ... capture

Transcluded ... capture2

TiddlyTweeter commented 7 years ago

Apologies. I keep forgetting this is not Google Groups! :-) and my last comment about layout I should have put in new "Issue". I'm learning. J x