Skip to content

Collection of modified CSS and JS tweaks for Logseq based on cannibalox's logtools and custom css/js projects

License

Notifications You must be signed in to change notification settings

elgatopanzon/logseq-logtools-custom

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 

Repository files navigation

logseq-logtools-custom

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.

Features

  • Enhanced Kanban Workflow
  • Inline-gallery (stashitems)
  • Parallel Blocks
  • Timeline

Enhanced Kanban Workflow

The Kanban implementation comes in 2 flavours: Basic and Query based.

Basic Kanban Board

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

Query-based Kanban Board

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

Inline gallery (stashitems) for enhanced Whiteboard workflow

Screenshot_select-area_20230708174602

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.

Screenshot_select-area_20230708175306

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.

Screenshot_select-area_20230708175525

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!

Parallel Blocks

Screenshot_select-area_20230707112512 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.

Timeline

Screenshot_select-area_20240221122601 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.

Screenshot_select-area_20240221122615 The Parallel Blocks tags can be combined with the Timeline tags and the additional #timeline-small tag to create parallel content + a timeline.

About

Collection of modified CSS and JS tweaks for Logseq based on cannibalox's logtools and custom css/js projects

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 82.9%
  • JavaScript 17.1%