[css+template] eisenhower matrix

here’s my attempt at an eisenhower matrix (priority matrix)

it works by combining a template and css rules :

  • the template will create a tree structure and tag the root block with #.v-eisenhower-matrix
  • the css will look for the block tagged with #.v-eisenhower-matrix and apply styling/layout modifications
  • at any time, you can revert to the standard outlining view by removing the tag (or changing its name) as shown is the gif
  • colors and styling can be customized at the beginning of the css
  • the captions can be modified in the template

installation

1. create the template

copy-paste the following lines in a document (I keep all my templates in a single document for easy management)

show the template :
## #.v-eisenhower-matrix
:PROPERTIES:
:template: v-eisenhower
:END:
### [[TODO]]
####
####
####
### [[DECIDE]]
####
####
####
### [[DELEGATE]]
####
####
####
### [[ELIMINATE]]
####
####
#### 

it will create a template called v-eisenhower that looks like this

2. the css

copy the css rules at the bottom of your custom.css or use the stylus addon to load them

CODE v20210306 :

/* WIP css eisenhower matrix by cannibalox v202100306 */
/* works best with the `v-eisenhower` template        */
/* activate with:  `/template v-eisenhower		      */
/* or tag a block with `#.v-eisenhower-matrix`        */  
/* define vars */ 
[data-refs-self*="eisenhower-matrix"]{
	--eisen-caption-color: #fff;
	--eisen-caption-bg: #0000;
	--eisen-scrollbar-thumb: #f9f9f99e;
	--eisen-scrollbar-track: #0000;
	--eisen-outercaption-color: #979797b8;
	--eisen-todo-bgcolor: #4bad00a8;
	--eisen-decide-bgcolor: #0067beb8;
 	--eisen-delegate-bgcolor:#bf8300c7;
 	--eisen-eliminate-bgcolor:#9c003ecc;
	--eisen-bullet-color : #d9d9d9;
	--eisen-clover-borderstyle: none; /*eg: 3px solid white */
}

/* optionnal : add captions around the diagram */
div[data-refs-self*="eisenhower-matrix"] > .block-children:before {
	content: "↑ IMPORTANT";
	position: absolute;
	color: var(--eisen-outercaption-color);
	font-size: 12px;
	left: 44%;
	top: 0.5rem;
}  
div[data-refs-self*="eisenhower-matrix"] > .block-children:after {
	content: "URGENT ←";
	position: absolute;
	color: var(--eisen-outercaption-color);
	font-size: 12px;
	left: -1rem;
	top: 50%;
}  
div[data-refs-self*="eisenhower-matrix"]:before {
	content: "↓ NOT IMPORTANT";
	position: absolute;
	color: var(--eisen-outercaption-color);
	font-size: 12px;
	left: 43%;
	bottom: -0.5rem;
}  
div[data-refs-self*="eisenhower-matrix"]:after {
	content: "→ NOT URGENT";
	position: absolute;
	color: var(--eisen-outercaption-color);
	font-size: 12px;
	right: -2rem;
	top: 50%;
}  

/* blocks / col */
div[data-refs-self*="eisenhower-matrix"] > .block-children > div.ls-block {
	display: inline-block;
	width: 46%;
	overflow: hidden;
	margin: 5px;
	height: 14rem;
	}
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block {
	border:var(--eisen-clover-borderstyle);}
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block:nth-last-child(4) 
	{border-radius: 0 2rem 0 2rem; background-color: var(--eisen-todo-bgcolor);}
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block:nth-last-child(3) 
	{border-radius: 2rem 0 2rem 0; background-color: var(--eisen-decide-bgcolor);}
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block:nth-last-child(2) 
	{border-radius: 2rem 0 2rem 0; background-color: var(--eisen-delegate-bgcolor);}
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block:nth-last-child(1) 
	{border-radius: 0 2rem 0 2rem; background-color: var(--eisen-eliminate-bgcolor);}

/* clover contents */
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block > .block-children {
	overflow: auto;
	height: 12rem;
}
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block > .block-children .bullet {
	background-color:var(--eisen-bullet-color) !important;
}

/* scrollbar for each block */
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block > .block-children::-webkit-scrollbar-thumb {background-color:var(--eisen-scrollbar-thumb); border-radius: 0px;}
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block > .block-children::-webkit-scrollbar-track {background:var(--eisen-scrollbar-track); }

/* block titles */
	div[data-refs-self*="eisenhower-matrix"] > .block-children > div.ls-block > .flex-1.flex-row > div > .block-content {
		font-weight: 700;
		font-size: 0.7rem;
		text-align: center;
		margin-left: -1rem;
	} 
	div[data-refs-self*="eisenhower-matrix"] > .block-children > div.ls-block > .flex-1.flex-row > div > .block-content .page-reference {
		background:var(--eisen-caption-bg);
		border-radius: 10px;
	} 
	div[data-refs-self*="eisenhower-matrix"] > .block-children > div.ls-block > .flex-1.flex-row > div > .block-content .page-ref {
		color:var(--eisen-caption-color);
	} 
	/* remove bullet of the block title */
	div[data-refs-self*="eisenhower-matrix"] > .block-children > div.ls-block > .flex-1.flex-row > div .bullet {
		visibility: hidden
	} 

/* remove indent line ~ margin-left of table cells */
div[data-refs-self*="eisenhower-matrix"] > .block-children > .ls-block > .block-children {
	border: 0;
    margin: 0px !important;
}
div[data-refs-self*="eisenhower-matrix"] > .block-children {
	border:none;
    margin: 0px 0px 0 30px !important;
}

/* =============== END OF EISENHOWER MATRIX =====================*/

usage

once you have created the template and saved the css rules, invoke the command:
/Template
then choose v-eisenhower

VIDEO DEMO

notes:

  • this should work with custom themes, but may require some tweaking for margins, etc…
  • this is a display mode, thus the inner structure of the notes still rely on indented bullets. if you want to exit the matrix, you can use TAB or SHIFT TAB to indent/unindent bullets until they are not part of the eisenhower matrix

I almost forgot : if you want to replace the tag #.v-eisenhower-matrix by the auto-expanding eye icon (as seen in the gif)
20210306_NUC8_Jz3c3eSTHu
you can add these css rules:

/* vismode icon component by cannibalox */ 
/* part of the ls-vizmods-suite         */ 
a.tag[data-ref*=".v-"]:before {
   content:"👁";
   font-size: 0.75rem; 
   line-height: 0.75rem;
   }
a.tag[data-ref*=".v-"]:hover:before {
   padding-right:0.3rem;
   }
a.tag[data-ref*=".v-"]:hover {
   font-size: 0.75rem; 
   line-height: 0.75rem;
   }
a.tag[data-ref*=".v-"]{
   font-size: 0px; 
   font-family: iosevka, fira code, consolas, source code pro;
   color: #88e165;
   background-color: #1a2d23;
   border: 1px solid #a1c65d; border-radius: 3px;
   padding: 0 2px;
   }

I will reuse the same taxonomy for my other css addons.

2 Likes

This is awesome. Thank you for building and sharing!

I find my frequent use case is to classify the results of the NOW page (or query). Is there a way at all to put the results of a query into the matrix?

Edit: @tienson pointed me to this:
You can add queries into the matrix, check this tweet

That’s awesome, thank you very much @tienson!

Logseq’s ability to live-edit the query results really rocks. I find that I can take chaotic and unorganized notes peppered with TODOs, and still get organized very easily!

Could you elaborate on what the query is and the NOW page? How you organize todos?

@cannibalox
This template is amazing. I’ve been using a slightly modified version of his for an OKR quad and very similar styling, but noticed it has broken with the latest beta. I"m assuming because of some changes in the way the beta perhaps handles styling or divs? Just wondering if you have an updated version of it since I am having trouble figuring out what has changed and broken (and you’re obviously amazing at this stuff.).

thanks!