From 69c3034a8b5cb2c994f191caf0ec224f53fccc16 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Sun, 17 Oct 2021 22:17:33 +1100
Subject: [PATCH] rainbow indentation lines + block dragger bg fix

---
 repo/indentation-lines/client.css | 53 +++++++++++++++++++++++++++++++
 repo/indentation-lines/client.mjs | 45 +++++++++++++++++++++-----
 repo/indentation-lines/mod.json   |  2 +-
 3 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/repo/indentation-lines/client.css b/repo/indentation-lines/client.css
index 965c00e..5222138 100644
--- a/repo/indentation-lines/client.css
+++ b/repo/indentation-lines/client.css
@@ -4,6 +4,59 @@
  * (https://notion-enhancer.github.io/) under the MIT license
  */
 
+.notion-frame
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  [data-block-id],
+.notion-peek-renderer
+  > div
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  [data-block-id] {
+  background: var(--theme--bg) !important;
+}
+.notion-frame
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable,
+.notion-peek-renderer
+  > div
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable {
+  left: -42px !important;
+  background: transparent !important;
+}
+.notion-frame
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable
+  > .plus,
+.notion-peek-renderer
+  > div
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable
+  > .plus {
+  border-radius: 3px;
+  width: 18px !important;
+  padding: 0 1px !important;
+  background: var(--theme--bg) !important;
+}
+.notion-frame
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable
+  > .plus:hover,
+.notion-peek-renderer
+  > div
+  > [style*='position: absolute; top: 0px; left: 0px;']
+  [style*='position: absolute; top: 3px; left: -20px; width: 18px; height: 24px; pointer-events: auto; cursor: -webkit-grab;']
+  + .notion-focusable
+  > .plus:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
 .notion-page-content .notion-bulleted_list-block > div > div:last-child,
 .notion-page-content .notion-numbered_list-block > div > div:last-child,
 .notion-page-content .notion-to_do-block > div > div:last-child,
diff --git a/repo/indentation-lines/client.mjs b/repo/indentation-lines/client.mjs
index 16539bb..ad0300f 100644
--- a/repo/indentation-lines/client.mjs
+++ b/repo/indentation-lines/client.mjs
@@ -8,7 +8,8 @@
 
 export default async function ({ web }, db) {
   let style = 'solid',
-    opacity = 1;
+    opacity = 1,
+    rainbow = false;
   switch (await db.get(['style'])) {
     case 'dashed':
       style = 'dashed';
@@ -19,25 +20,53 @@ export default async function ({ web }, db) {
     case 'soft':
       opacity = 0.25;
       break;
+    case 'rainbow':
+      opacity = 0.7;
+      rainbow = true;
+      break;
   }
 
+  let css = '';
+  const colors = ['red', 'pink', 'purple', 'blue', 'green', 'yellow'];
+  colors.push(...colors, ...colors, ...colors, 'gray');
+
   for (const listType of ['bulleted_list', 'numbered_list', 'to_do', 'toggle']) {
     if (!(await db.get([listType]))) continue;
-    document.head.append(web.html`<style>
+    css += `
       .notion-page-content .notion-${listType}-block > div > div:last-child::before {
-        border-left: 1px ${style};
+        border-left: 1px ${style} var(--indentation_lines--color, currentColor);
         opacity: ${opacity};
+      }`;
+
+    if (rainbow) {
+      for (let i = 0; i < colors.length; i++) {
+        css += `
+          .notion-page-content ${`.notion-${listType}-block `.repeat(i + 1)}
+            > div > div:last-child::before {
+            --indentation_lines--color: var(--theme--text_${colors[i]});
+          }`;
       }
-    </style>`);
+    }
   }
 
   if (db.get(['table_of_contents'])) {
-    document.head.append(web.html`<style>
+    css += `
       .notion-page-content .notion-table_of_contents-block > div > div > a > div
-      > div:not([style*='margin-left: 0px']) > div::before {
-        border-left: 1px ${style};
+        > div:not([style*='margin-left: 0px']) > div::before {
+        border-left: 1px ${style} var(--indentation_lines--color, currentColor);
         opacity: ${opacity};
+      }`;
+
+    if (rainbow) {
+      for (let i = 0; i < colors.length; i++) {
+        css += `
+          .notion-page-content ${`.notion-table_of_contents-block `.repeat(i + 1)}
+            > div > div > a > div > div:not([style*='margin-left: 0px']) > div::before {
+            --indentation_lines--color: var(--theme--text_${colors[i]});
+          }`;
       }
-    </style>`);
+    }
   }
+
+  document.head.append(web.html`<style>${css}</style>`);
 }
diff --git a/repo/indentation-lines/mod.json b/repo/indentation-lines/mod.json
index 13839f0..67576ff 100644
--- a/repo/indentation-lines/mod.json
+++ b/repo/indentation-lines/mod.json
@@ -23,7 +23,7 @@
       "type": "select",
       "key": "style",
       "label": "style",
-      "values": ["solid", "dashed", "dotted", "soft"]
+      "values": ["solid", "dashed", "dotted", "soft", "rainbow"]
     },
     {
       "type": "toggle",