Present SRS metadata with a colored pill, instead of raw text attributes

roam-unofficial · Aug 23, 2020 · ffbae8c · ffbae8c
1 parent 40f3ab2
commit ffbae8c
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 3 deletions.
diff --git a/src/ts/core/srs/SM2Node.ts b/src/ts/core/srs/SM2Node.ts
@@ -1,7 +1,7 @@
-import {withDate} from '../roam/date/withDate'
-import {RoamNode, Selection} from '../roam/roam-node'
+import {NodeWithDate} from '../roam/date/withDate'
+import {Selection} from '../roam/roam-node'
 
-export class SM2Node extends withDate(RoamNode) {
+export class SM2Node extends NodeWithDate {
     constructor(text: string, selection: Selection = new Selection()) {
         super(text, selection)
     }

diff --git a/src/ts/core/srs/srs.ts b/src/ts/core/srs/srs.ts
@@ -1,8 +1,11 @@
+import {range} from 'lodash'
+
 import {Feature} from '../settings'
 import {SRSSignal, SRSSignals} from './scheduler'
 import {SM2Node} from './SM2Node'
 import {AnkiScheduler} from './AnkiScheduler'
 import {Roam} from '../roam/roam'
+import {injectStyle} from 'src/core/common/css'
 
 export const config: Feature = {
     id: 'srs',
@@ -20,3 +23,50 @@ export function rescheduleCurrentNote(signal: SRSSignal) {
     const scheduler = new AnkiScheduler()
     Roam.applyToCurrent(node => scheduler.schedule(new SM2Node(node.text, node.selection), signal))
 }
+
+
+const intervalStyle = (interval: string, nextReviewTip: string) => {
+    return `
+        [data-link-title^="[[interval]]:${interval}"] ~ [data-link-title]:last-child::before {
+            content: "review interval: ${nextReviewTip}";
+        }
+    `
+}
+
+const easeStyle = (ease: string, darkColor: string, lightColor: string) => {
+    return `
+        [data-link-title^="[[factor]]:${ease}"] ~ [data-link-title]:last-child::before {
+            border: 1px solid ${darkColor};
+            color: ${darkColor};
+            background: ${lightColor};
+        }
+    `
+}
+
+injectStyle(
+    `
+    [data-link-title^="[[interval]]:"], [data-link-title^="[[factor]]:"] {
+        display: none;
+    }
+    [data-link-title^="[[factor]]:"] ~ [data-link-title]:last-child::before {
+        font-style: italic;
+        margin-right: 6px;
+        padding: 3px 6px;
+        border-radius: 12px;
+        font-size: smaller;
+        white-space: nowrap;
+    }
+    ${intervalStyle('', '1+ month')}
+    ${intervalStyle('1.', '1 day')}
+    ${range(2, 6)
+        .map(days => intervalStyle(`${days}.`, `${days} days`))
+        .join('\n')}
+    ${range(7, 30)
+        .map(days => intervalStyle(`${days}.`, `${Math.floor(days / 7)} weeks`))
+        .join('\n')}
+    ${easeStyle('', 'darkgreen', 'honeydew')}
+    ${easeStyle('1.', 'darkred', 'mistyrose')}
+    ${easeStyle('2.', 'mediumblue', 'lightcyan')}
+    `,
+    'roam-toolkit--srs'
+)