This is a collection of modified and extended CSS/JS originally created by cannibalox. It contains the CSS from the logtools plugin as well as the forked repo's CSS and JS.
Note: I've been using this CSS and JS and testing and fixing it, and while it's all still experimental I believe it's time to release it and let others try it out.
- Enhanced Kanban Workflow
- Inline-gallery (stashitems)
- Parallel Blocks
- Timeline
The Kanban implementation comes in 2 flavours: Basic and Query based.
Record_select-area_20230720151544.mp4
The basic Kanban Board workflow allows you to create 4 columns with coloured backgrounds for Todo, Doing, Done and Archive. Tasks are then created inside and manually moved around in the same way that you move Logseq blocks around. You are also in charge of properly marking items as doing/done while moving them.
This was the first implementation of Kanban I did in Logseq.
Below is the template for this board:
- # Kanban Board #.v-kanban #.v-kanban-w300
template:: Kanban Board (Manual)
template-including-parent:: true
- #todo
- #doing
- #done
- #archive
Record_select-area_20230720152526.mp4
The Query-based Kanban Board works far better for project management and supports tasks on the Project level based on this Project Management workflow. It will pick up tasks in the page that the Kanban Board is in, as well as tasks in any other page that include the project page as a tag. This means you can control your project's Kanban Board and easily add tasks in the Daily Journal, or have cross-project tasks.
Using this board is a little different to the basic one, because you can't manually position the tasks or drag them. You have to rely on priority and a special tag #sort0, #sort1 etc, to position tasks within the board. By default they are sorted by priority and then by sort tag.
Moving tasks through the workflow is done by the tasks todo/doing/done state, so all you need to do is click that to have it switch to the other boards automatically! The only exception is the Archive board, which requires the #archive tag and applies only to done tasks (they will move from Done to Archive).
Below is the template for this board including the queries:
- # Kanban Board #.v-kanban #.v-kanban-query #.v-kanban-w300
template:: Kanban Board (Query)
template-including-parent:: true
- #todo
- #+BEGIN_QUERY
{
:query [:find (pull ?b [*])
:in $ ?tag
:where
[?b :block/marker ?marker]
[(contains? #{"TODO" "NOW" "LATER" "WAITING"} ?marker)]
(page-ref ?b ?tag)
[?ref :block/name "project"]
(not [?b :block/refs ?ref])
]
:inputs [:query-page]
:result-transform (fn [result] (sort-by (fn [r] [ (get r :block/priority "Z") (get r :block/scheduled) (get r :block/content) (get r :block/deadline) ]) (map (fn [m] (assoc m :block/collapsed? true)) result)))
:breadcrumb-show? true
:table-view? false
}
#+END_QUERY
- #doing
- #+BEGIN_QUERY
{
:query [:find (pull ?b [*])
:in $ ?tag
:where
[?b :block/marker ?marker]
[(contains? #{"DOING"} ?marker)]
(page-ref ?b ?tag)
[?ref :block/name "project"]
(not [?b :block/refs ?ref])
]
:inputs [:query-page]
:result-transform (fn [result] (sort-by (fn [r] [ (get r :block/priority "Z") (get r :block/scheduled) (get r :block/content) (get r :block/deadline) ]) (map (fn [m] (assoc m :block/collapsed? true)) result)))
:breadcrumb-show? true
:table-view? false
}
#+END_QUERY
- #done
- #+BEGIN_QUERY
{
:query [:find (pull ?b [*])
:in $ ?tag
:where
[?b :block/marker ?marker]
[(contains? #{"DONE"} ?marker)]
(page-ref ?b ?tag)
[?ref :block/name "project"]
[?refarchive :block/name "archive"]
(not [?b :block/refs ?ref])
(not [?b :block/refs ?refarchive])
]
:inputs [:query-page]
:result-transform (fn [result] (sort-by (fn [r] [ (get r :block/priority "Z") (get r :block/scheduled) (get r :block/content) (get r :block/deadline) ]) (map (fn [m] (assoc m :block/collapsed? true)) result)))
:breadcrumb-show? true
:table-view? false
}
#+END_QUERY
- #archive
- #+BEGIN_QUERY
{
:query [:find (pull ?b [*])
:in $ ?tag
:where
[?b :block/marker ?marker]
[(contains? #{"DONE"} ?marker)]
(page-ref ?b ?tag)
[?ref :block/name "project"]
[?refarchive :block/name "archive"]
(not [?b :block/refs ?ref])
[?b :block/refs ?refarchive]
]
:inputs [:query-page]
:result-transform (fn [result] (sort-by (fn [r] [ (get r :block/priority "Z") (get r :block/scheduled) (get r :block/content) (get r :block/deadline) ]) (map (fn [m] (assoc m :block/collapsed? true)) result)))
:breadcrumb-show? true
:table-view? false
}
#+END_QUERY
I wanted to improve my workflow with the Whiteboards feature, and in order to do that I introduced a feature I named "StashSpace" which involves using a custom tag #stashitem on a block and it turns that block into an inline-gallery block, and each block after it will appear in a sort of gallery-like view.
The main idea behind this is to upload assets into Logseq and document them with tags for example #shippingcontainer #ship #stashitem, to create a database of tagged assets related to the tags in question.
The real power comes from the Linked References of the #stashitem page, which allows filtering for any number of tags. The CSS also applies to the results in the Linked References page.
Then, when in the Whiteboard view opening the sidebar with the #stashitem page becomes a filterable database of your media asset items, and dragging the blocks onto the Whiteboard places that image onto the board including the tags, and looks neat when collapsed.
In the long-run this avoids copying the same asset to your Whiteboard, increases the bi-directional linking of media items when using Whiteboards, and feels more in line with the "Logseq way" of managing these kinds of items in my opinion!
This is a simple way to put any blocks side by side in a column view, simply by adding the tags #parallel-2 to the 2 blocks, or #parallel-3 to the 3 blocks. Additionally, the tags #parallel-small and #parallel-big work to have 2 blocks side by side with one taking more space than the other, similar to having a sidebar.
Using an additional tag #parallel-float-left or #parallel-float-right allows for a block to be pinned to the left or right side. This allows content of other blocks to wrap around them rather than each block acting like a column.
Using the #timeline tag any block's children can be turned into a Timeline view. During this view, each block's first child retains the same indent level as the title, to keep within the style of the timeline.
The Parallel Blocks tags can be combined with the Timeline tags and the additional #timeline-small tag to create parallel content + a timeline.