From b5bdeb108b6701f534e56646b0b6728fbc44446f Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Wed, 2 Dec 2020 19:10:35 +0700
Subject: [PATCH] move indentation lines from tweaks to its own mod (#287)
* move indentation lines from tweaks to its own mod
* changed indentation lines author to runargs
* refactor indentation lines to use the map function
---
repo/indentation-lines/mod.js | 105 ++++++++++++++++++++++++++++++++++
repo/tweaks/app.css | 36 ------------
repo/tweaks/mod.js | 14 -----
3 files changed, 105 insertions(+), 50 deletions(-)
create mode 100644 repo/indentation-lines/mod.js
diff --git a/repo/indentation-lines/mod.js b/repo/indentation-lines/mod.js
new file mode 100644
index 0000000..5a90bfb
--- /dev/null
+++ b/repo/indentation-lines/mod.js
@@ -0,0 +1,105 @@
+/*
+ * indentation lines
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 Alexa Baldon (https://github.com/runargs)
+ * (c) 2020 CloudHill
+ * under the MIT license
+ */
+
+'use strict';
+
+const { createElement } = require('../../pkg/helpers.js');
+
+module.exports = {
+ id: '35815b3b-3916-4dc6-8769-c9c2448f8b57',
+ tags: ['extension'],
+ name: 'indentation lines',
+ desc: 'adds vertical relationship lines to make list trees easier to follow.',
+ version: '1.0.0',
+ author: 'runargs',
+ options: [
+ {
+ key: 'style',
+ label: 'style',
+ type: 'select',
+ value: ['solid', 'dashed', 'dotted', 'soft'],
+ },
+ {
+ key: 'bulleted_list',
+ label: 'bulleted list',
+ type: 'toggle',
+ value: true,
+ },
+ {
+ key: 'numbered_list',
+ label: 'numbered list',
+ type: 'toggle',
+ value: true,
+ },
+ {
+ key: 'to_do',
+ label: 'to-do list',
+ type: 'toggle',
+ value: true,
+ },
+ {
+ key: 'toggle',
+ label: 'toggle list',
+ type: 'toggle',
+ value: true,
+ },
+ ],
+ hacks: {
+ 'renderer/preload.js'(store, __exports) {
+ document.addEventListener('readystatechange', (event) => {
+ if (document.readyState !== 'complete') return false;
+
+ const selectors =
+ ['bulleted_list', 'numbered_list', 'to_do', 'toggle']
+ .filter(l => store()[l])
+ .map(l => `.notion-page-content .notion-${l}-block > div > div:last-child`);
+
+ let style = 'solid';
+ let opacity = 1;
+ switch(store().style) {
+ case 'dashed':
+ style = 'dashed';
+ break;
+ case 'dotted':
+ style = 'dotted';
+ break;
+ case 'soft':
+ opacity = 0.25;
+ break;
+ }
+
+ if (selectors.length > 0) {
+ document
+ .querySelector('head')
+ .appendChild(
+ createElement(`
+ <style type="text/css">
+ .notion-app-inner {
+ --indentation-lines-style: ${style};
+ --indentation-lines-opacity: ${opacity};
+ }
+ ${selectors.join(',\n')} {
+ position: relative;
+ }
+ ${selectors.join('::before,\n')}::before {
+ content: "";
+ position: absolute;
+ height: calc(100% - 2em);
+ top: 2em;
+ left: -14.48px;
+ border-left: 1px var(--indentation-lines-style);
+ opacity: var(--indentation-lines-opacity);
+ }
+ </style>
+ `)
+ )
+ }
+ });
+ },
+ },
+};
diff --git a/repo/tweaks/app.css b/repo/tweaks/app.css
index 811a75d..3f2ccfe 100644
--- a/repo/tweaks/app.css
+++ b/repo/tweaks/app.css
@@ -54,42 +54,6 @@
margin-bottom: -1.5px !important;
}
-[data-tweaks*='[indentation_lines']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child,
-[data-tweaks*='[indentation_lines']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child {
- position: relative;
-}
-[data-tweaks*='[indentation_lines']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before,
-[data-tweaks*='[indentation_lines']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child::before {
- content: "";
- position: absolute;
- height: calc(100% - 2em);
- top: 2em;
- left: -14.48px;
- border-left: 1px solid;
-}
-[data-tweaks*='[indentation_lines_dashed]']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before,
-[data-tweaks*='[indentation_lines_dashed]']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child::before {
- border-left-style: dashed;
-}
-[data-tweaks*='[indentation_lines_dotted]']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before,
-[data-tweaks*='[indentation_lines_dotted]']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child::before {
- border-left-style: dotted;
-}
-[data-tweaks*='[indentation_lines_soft]']
-div.notion-selectable.notion-bulleted_list-block > div > div:last-child::before,
-[data-tweaks*='[indentation_lines_soft]']
-div.notion-selectable.notion-numbered_list-block > div > div:last-child::before {
- opacity: 0.25;
-}
-
[data-tweaks*='[scroll_db_toolbars]'] .notion-frame > .notion-scroller > [style*="overflow: visible;"],
[data-tweaks*='[scroll_db_toolbars]'] .notion-page-content .notion-collection_view-block > :first-child {
overflow-x: auto !important;
diff --git a/repo/tweaks/mod.js b/repo/tweaks/mod.js
index 04c0912..daa5a67 100644
--- a/repo/tweaks/mod.js
+++ b/repo/tweaks/mod.js
@@ -74,15 +74,6 @@ module.exports = {
type: 'toggle',
value: false,
},
- {
- key: 'indentation_lines',
- label: 'indentation lines for lists',
- desc:
- 'adds vertical indentation or relationship lines to make list trees\
- easier to follow',
- type: 'select',
- value: ['none', 'solid', 'dashed', 'dotted', 'soft'],
- },
{
key: 'scroll_db_toolbars',
label: 'scroll database toolbars',
@@ -123,11 +114,6 @@ module.exports = {
};
window.addEventListener('resize', addResponsiveBreakpoint);
addResponsiveBreakpoint();
- if (store().indentation_lines !== 'none') {
- document.body.dataset.tweaks += `[indentation_lines_${
- store().indentation_lines
- }]`;
- }
});
},
},