#WorkFlowy を #FoldingText のTodo listっぽく

www.foldingtext.com
のビデオのTodo listsに似せて、あえてWorkFlowyのComplete機能を使わずに@doneタグを使う。

@todo(または#todo)タグを付けると以下のノードがチェックリストになる。
@done(または#done)タグを付けるとチェックが付き、灰色になり、取り消し線が入る。

材料

blog.workflowy.com
で紹介されているスクリプトと次のCSS

#pageContainer {
    font-family: "メイリオ", sans-serif;
    font-size: large !important;
}

.todo-proj > .children > .project .name .content:before {
    content: '☐';
}

.done-proj > .name .content:before {
    content: '☑' !important;
}

.done-proj > .name .content {
    color: #999;
    text-decoration: line-through;
}

ビデオのtimerの部分がタスクシュートっぽくて興味深い。