Tiny Todolist Plugin RC 7: Create todo item with different categories

[Mohammad]

Announcement: Todolist Plugin

Date: July 19, 2019

Release: 1.0 release candidate 7

Change log

19th July 2019

[NEW] Priority button cycles through five levels of priority and use colors for levels

[NEW] New minimal interface

[NEW] New internal tiddlers explorer lets you to delete individual todo list

[NEW] Documentation example shows to create multiple todo list in a single tiddler

[Fixed] priority macros does not insert symbols any more

I highly appreciate to receive your feedback, comments and idea

If you like it star it at GitHib

Demo: https://kookma.github.io/TW-Todolist/

Code: https://github.com/kookma/TW-Todolist

Best wishes

Mohammad 

References

• https://groups.google.com/d/msg/tiddlywiki/oUGvi4hPEvw/gECfF4DsDwAJ
  
• https://groups.google.com/d/msg/tiddlywiki/GPCpShBbaYA/UZOQ_o2DEAAJ

[Watt]

Beautiful! Thanks a lot Mohammad, it's surely done now!

I tweaked the css a little for my use with Quinoid on a smallish Android phone. The tweaks worked for me but all phones are different of course, so maybe best to backup Mohammad's original css templates if you're tempted to use these;

$:/plugins/kookma/todolist/styles/main.css I changed to;

****************

/* Todolist main ui */
.kk-todolist-ui{
min-width:320px; /* controls the minimum width of whole ui */
}

.kk-todolist-ui svg{
fill:#aaaaaa;
}

.kk-todolist-ui button:hover svg {
fill: #888888;
}

/* Todolist header ui */

.kk-todolist-header-ui{
display: flex;
width: 100%; /* for larg screen width> 960px*/
}
.kk-todolist-header-ui > div{
margin: 1px;
flex-grow:0;
}
.kk-todolist-header-ui .kk-todolist-header-textbox{
flex-grow:1;
}

/* Todolist items ui */
.kk-todolist-row{
display: flex;
width: 100%; /* for larg screen width> 960px*/
flex-wrap: wrap;
}

.kk-todolist-row .kk-todolist-done,
.kk-todolist-row .kk-todolist-priority,
.kk-todolist-row .kk-todolist-delete {
flex-grow:0; width:15px;
}

.kk-todolist-row .kk-todolist-desc{
flex-grow:1;
width: calc(80% - 50px);
padding-left: 10px;
padding-right: 10px;
}
.kk-todolist-row .kk-todolist-delete {
opacity: 0.3;
}

.kk-todolist-row .kk-todolist-priority{
margin-right:5px;
}
.kk-todolist-row:hover {
background-color: #f6f6f6;
}
.kk-todolist-row:hover .kk-todolist-delete {
opacity: 1;
}

****************

And $:/plugins/kookma/todolist/styles/other.css I changed to;

****************

/* completed item */

.kk-todolist-item-done{
text-decoration: red line-through;
font-style: italic;
}

/* inputbox for add-task */
.kk-todolist-input-textbox {
width:90%;
padding-left: 3px;
border: none;
border-bottom: 1px dotted grey;
}

.kk-todolist-input-textbox:focus {
outline: none;
border-bottom: 1px solid #5778d8;
background: transparent;
}

****************

Sorry, no formatting or attachment options on mobile forum!

Thanks again Mohammad.

[Mohammad]

Thanks Watt!

 Hope mobile users enjoy this improvement!

Cheers

Mohammad

[Mohammad]

RC 7 updated with min-width=320px

On Friday, July 19, 2019 at 10:37:06 PM UTC+4:30, Watt wrote:

[Mohammad]

See also Todolist and Quinoid discussion

https://groups.google.com/d/msg/tiddlywiki/bgus0InFoJ4/_OmBzkmhEAAJ

--Mohammad