Dashboard 0.6.0-RC6

helpers/HTMLView.js

@@ -2,10 +2,10 @@
 // ---------------------------------------------------------
 // HTML helper functions for use with HTMLView API
 // by @jgclark
-// Last updated 5.8.2023 by @jgclark
+// Last updated 8.8.2023 by @jgclark
 // ---------------------------------------------------------
 
-import { clo, logDebug, logError, logWarn, JSP } from '@helpers/dev'
+import { clo, logDebug, logError, logInfo, logWarn, JSP } from '@helpers/dev'
 import { getStoredWindowRect, isHTMLWindowOpen, setHTMLWindowId, storeWindowRect } from '@helpers/NPWindows'
 import { isTermInNotelinkOrURI } from '@helpers/paragraph'
 import {
@@ -245,7 +245,7 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
     if (styleObj) {
       tempSel.push(`color: ${RGBColourConvert(styleObj.color ?? '#96CBFE')}`)
       tempSel = tempSel.concat(convertStyleObjectBlock(styleObj))
-      output.push(makeCSSSelector('p i', tempSel)) // not just 'i' as otherwise it can mess up the fontawesome icons
+      output.push(makeCSSSelector('p emph', tempSel)) // not 'i' as otherwise it can mess up the fontawesome icons
     }
     // Set bold text if present
     tempSel = []
@@ -255,13 +255,15 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
       tempSel = tempSel.concat(convertStyleObjectBlock(styleObj))
       output.push(makeCSSSelector('p b', tempSel))
     }
+
     // Can't easily set bold-italic in CSS ...
 
     // Set class for open tasks ('todo') if present
     tempSel = []
     styleObj = themeJSON.styles.todo
     if (styleObj) {
-      tempSel.push(`color: ${styleObj.color ? RGBColourConvert(styleObj.color) : 'var(--tint-color)'}`)
+      tempSel.push(`color: ${RGBColourConvert(styleObj.color) ?? 'var(--tint-color)'}`)
+      tempSel = tempSel.concat(convertStyleObjectBlock(styleObj, false))
       output.push(makeCSSSelector('.todo', tempSel))
     }
 
@@ -270,7 +272,7 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
     styleObj = themeJSON.styles.checked
     if (styleObj) {
       tempSel.push(`color: ${RGBColourConvert(styleObj.color ?? '#098308A0')}`)
-      tempSel = tempSel.concat(convertStyleObjectBlock(styleObj))
+      tempSel = tempSel.concat(convertStyleObjectBlock(styleObj, false))
       output.push(makeCSSSelector('.checked', tempSel))
     }
 
@@ -280,7 +282,7 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
     styleObj = themeJSON.styles['checked-canceled']
     if (styleObj) {
       tempSel.push(`color: ${RGBColourConvert(styleObj.color ?? '#E04F57A0')}`)
-      tempSel = tempSel.concat(convertStyleObjectBlock(styleObj))
+      tempSel = tempSel.concat(convertStyleObjectBlock(styleObj, false))
       output.push(makeCSSSelector('.cancelled', tempSel))
     }
 
@@ -290,7 +292,7 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
     styleObj = themeJSON.styles['checked-scheduled']
     if (styleObj) {
       tempSel.push(`color: ${RGBColourConvert(styleObj.color ?? '#7B7C86A0')}`)
-      tempSel = tempSel.concat(convertStyleObjectBlock(styleObj))
+      tempSel = tempSel.concat(convertStyleObjectBlock(styleObj, false))
       output.push(makeCSSSelector('.task-scheduled', tempSel))
     }
 
@@ -404,29 +406,32 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
 
 /**
  * Convert NotePlan Theme style information to CSS equivalent(s)
- * Covers attributes: size, paragraphSpacingBefore, paragraphSpacing, font, strikethroughStyle, underlineStyle.
+ * Covers attributes: size, paragraphSpacingBefore, paragraphSpacing, lineSpacing, font, strikethroughStyle, underlineStyle.
  * @author @jgclark
  * @param {Object} style object from JSON theme
+ * @param {boolean} includeFontDetails? (default: false)
  * @returns {Array} CSS elements
  */
-function convertStyleObjectBlock(styleObject: any): Array<string> {
+function convertStyleObjectBlock(styleObject: any, includeFontDetails: boolean = true): Array<string> {
   let cssStyleLinesOutput: Array<string> = []
   if (styleObject?.size) {
     cssStyleLinesOutput.push(`font-size: ${pxToRem(styleObject?.size, baseFontSize)}`)
   }
+  if (includeFontDetails) {
+    if (styleObject?.font) {
+      cssStyleLinesOutput = cssStyleLinesOutput.concat(fontPropertiesFromNP(styleObject?.font))
+    }
+  }
   if (styleObject?.paragraphSpacingBefore) {
     cssStyleLinesOutput.push(`margin-top: ${pxToRem(styleObject?.paragraphSpacingBefore, baseFontSize)}`)
   }
   if (styleObject?.paragraphSpacing) {
     cssStyleLinesOutput.push(`margin-bottom: ${pxToRem(styleObject?.paragraphSpacing, baseFontSize)}`)
   }
   if (styleObject?.lineSpacing) {
-    const lineSpacingRem = Number(styleObject?.lineSpacing) * 1.5
+    const lineSpacingRem = Number(styleObject?.lineSpacing) * 1.4
     cssStyleLinesOutput.push(`line-height: ${String(lineSpacingRem)}rem`)
   }
-  if (styleObject?.font) {
-    cssStyleLinesOutput = cssStyleLinesOutput.concat(fontPropertiesFromNP(styleObject?.font))
-  }
   if (styleObject?.strikethroughStyle) {
     cssStyleLinesOutput.push(textDecorationFromNP('strikethroughStyle', Number(styleObject?.strikethroughStyle)))
   }
@@ -1319,8 +1324,8 @@ export function convertBoldAndItalicToHTML(input: string): string {
   let captures = output.matchAll(RE_BOLD_ITALIC_PHRASE)
   if (captures) {
     for (const capture of captures) {
-      // logDebug('makeParaContet...', `- making bold-italic with [${String(capture)}]`)
-      output = output.replace(capture[0], `<b><i>${capture[1]}</i></b>`)
+      // logDebug('convertBoldAndItalicToHTML', `- making bold-italic with [${String(capture)}]`)
+      output = output.replace(capture[0], `<b><em>${capture[1]}</em></b>`)
     }
   }
 
@@ -1329,7 +1334,7 @@ export function convertBoldAndItalicToHTML(input: string): string {
   captures = output.matchAll(RE_BOLD_PHRASE)
   if (captures) {
     for (const capture of captures) {
-      // logDebug('makeParaContet...', `- making bold with [${String(capture)}]`)
+      // logDebug('convertBoldAndItalicToHTML', `- making bold with [${String(capture)}]`)
       output = output.replace(capture[0], `<b>${capture[2]}</b>`)
     }
   }
@@ -1340,8 +1345,8 @@ export function convertBoldAndItalicToHTML(input: string): string {
   captures = output.matchAll(RE_ITALIC_PHRASE)
   if (captures) {
     for (const capture of captures) {
-      // logDebug('makeParaContet...', `- making italic with [${String(capture)}]`)
-      output = output.replace(capture[0], `<i>${capture[2]}</i>`)
+      // logDebug('convertBoldAndItalicToHTML', `- making italic with [${String(capture)}]`)
+      output = output.replace(capture[0], `<em>${capture[2]}</em>`)
     }
   }
   return output
@@ -1367,13 +1372,16 @@ export function simplifyNPEventLinksForHTML(input: string): string {
 
 // Simplify embedded images of the form ![image](...) by replacing with an icon.
 // (This also helps remove false positives for ! priority indicator)
+// FIXME: the leading ! is not getting removed from output for some reason
 export function simplifyInlineImagesForHTML(input: string): string {
   let output = input
   const captures = output.match(/!\[image\]\([^\)]+\)/g)
   if (captures) {
     // clo(captures, 'results from embedded image match:')
     for (const capture of captures) {
+      logInfo(`simplifyInlineImagesForHTML`, capture)
       output = output.replace(capture, `<i class="fa-regular fa-image"></i> `)
+      logInfo(`simplifyInlineImagesForHTML`, `-> ${output}`)
     }
   }
   return output
@@ -1386,11 +1394,10 @@ export function convertHashtagsToHTML(input: string): string {
   // const captures = output.match(/(\s|^|\"|\'|\(|\[|\{)(?!#[\d[:punct:]]+(\s|$))(#([^[:punct:]\s]|[\-_\/])+?\(.*?\)|#([^[:punct:]\s]|[\-_\/])+)/) // regex from @EduardMe's file
   // const captures = output.match(/(\s|^|\"|\'|\(|\[|\{)(?!#[\d\'\"]+(\s|$))(#([^\'\"\s]|[\-_\/])+?\(.*?\)|#([^\'\"\s]|[\-_\/])+)/) // regex from @EduardMe's file without :punct:
   const captures = output.match(/\B(?:#|＃)((?![\p{N}_]+(?:$|\b|\s))(?:[\p{L}\p{M}\p{N}_]{1,60}))/ug) // copes with Unicode characters, with help from https://stackoverflow.com/a/74926188/3238281
-  // const captures = output.match(HASHTAG_STR_FOR_JS) // TODO: from EM
   if (captures) {
     // clo(captures, 'results from hashtag matches:')
     for (const capture of captures) {
-      logDebug('makeParaContet...', `capture: ${capture}`)
+      // logDebug('convertHashtagsToHTML', `capture: ${capture}`)
       if (!isTermInNotelinkOrURI(output, capture)) {
         output = output.replace(capture, `<span class="hashtag">${capture}</span>`)
       }
@@ -1407,7 +1414,6 @@ export function convertMentionsToHTML(input: string): string {
   // const captures = output.match(/(\s|^|\"|\'|\(|\[|\{)(?!@[\d[:punct:]]+(\s|$))(@([^[:punct:]\s]|[\-_\/])+?\(.*?\)|@([^[:punct:]\s]|[\-_\/])+)/) // regex from @EduardMe's file
   // const captures = output.match(/(\s|^|\"|\'|\(|\[|\{)(?!@[\d\`\"]+(\s|$))(@([^\`\"\s]|[\-_\/])+?\(.*?\)|@([^\`\"\s]|[\-_\/])+)/) // regex from @EduardMe's file, without [:punct:]
   const captures = output.match(/\B@((?![\p{N}_]+(?:$|\b|\s))(?:[\p{L}\p{M}\p{N}_]{1,60}))/ug) // copes with Unicode characters, with help from https://stackoverflow.com/a/74926188/3238281
-  // const captures = output.match(NP_RE_attag_G) // TODO: from EM
   if (captures) {
     // clo(captures, 'results from mention matches:')
     for (const capture of captures) {

jgclark.Dashboard/CHANGELOG.md

@@ -1,21 +1,22 @@
 # What's changed in 🎛 Dashboard plugin?
 For more details see the [plugin's README](https://github.com/NotePlan/plugins/tree/main/jgclark.Dashboard/).
 
-## [0.6.0] - 2023-08-0???
+## [0.6.0] - 2023-08-???
 ### Added
 - adds tooltip on displayed tasks that allows task to be moved on to next day (`+1d`), next business day (`+1b`), this week's note (`wk`), next week's note (`+1w`). (If you're wondering, this uses the same syntax as my Repeat Extensions plugin.)
 - now truncates very long task/checklist items in the display
 - new setting 'Add dashboard auto-update trigger when dashboard opened?' that controls whether to add the auto-update trigger to the frontmatter to the current note when the dashboard is opened
 - new setting 'Exclude tasks that include time blocks?' that controls whether to stop display of open tasks that contain a time block
 - new setting 'Exclude checklists that include time blocks?' that controls whether to stop display of open checklists that contain a time block
-- support for new NP theme item 'working-on', invoked with a `>>` at the start of a task line
-- support for coloured (and curved) backgrounds on #tags, @mentions, priority highlights, `code` fragments and ==highlights== (if set in the theme)
-
+- support for new NP theme item 'working-on' (invoked with a `>>` at the start of a task or checklist line)
+- support for coloured (and curved) backgrounds on #tags, @mentions, priority highlights, `code` fragments and ==highlights== (if set in the theme).
 
 ### Changed
-- the auto-update trigger should now fire when an open task/checklist is edited, not just added ???
+- the auto-update trigger should now fire when an open task/checklist is edited, not just added
+- now ignores open tasks/checklists that are in the relevant calendar note, but have a scheduled `>date`
 - now will bring the Dashboard window to the front if run from the command bar or an x-callback, but will not take focus if it updates itself via a`` trigger.
 - better translation of NP theme vertical spacing to the HTML display
+- now hides the !, !!, !!! or >> 'priority markers'
 
 ### Fixed
 - background of tasks with !! or !!! priority markers sometimes wrong

jgclark.Dashboard/README.md

@@ -1,7 +1,7 @@
 # 🎛 Dashboard plugin
-![](dashboard-v0.5.0b1@2x.jpg)
+![](dashboard-0.6.0-RC5@2x.png)
 
-This plugin provides a **dashboard window** that in one place shows a compact list of just the:
+This plugin provides a **dashboard window** that in one place shows a compact list of just:
 - open tasks and checklists from today's note
 - scheduled open tasks and checklists from other notes to today
 - open tasks and checklists from this week's note
@@ -30,9 +30,9 @@ Other notes:
 - there's a UI toggle "Filter out lower-priority items?". If this is on, then items without any extra priority in calendar files will be hidden until there are no remaining priority items that haven't been completed. Priority items are currently indicated by having !!!, !! or ! at the beginning or end of the item.
 
 ### Updating automatically
-The dashboard window can automatically update when a change is made in the relevant calendar note(s) if you have [added a trigger to the frontmatter](https://help.noteplan.co/article/173-plugin-note-triggers) of the relevant daily/weekly/monthly note(s). This is most easily done by using the **/add trigger to note** command from my [Note Helpers plugin](https://github.com/NotePlan/plugins/tree/main/jgclark.NoteHelpers/).
+The dashboard window can automatically update when a change is made in the relevant calendar note(s) if you have [added a trigger to the frontmatter](https://help.noteplan.co/article/173-plugin-note-triggers) of the relevant daily/weekly/monthly note(s). Turn on setting 'Add dashboard auto-update trigger when dashboard opened?' (details below).
 
-Or add the following by hand:
+Or you can use the **/add trigger to note** command from my [Note Helpers plugin](https://github.com/NotePlan/plugins/tree/main/jgclark.NoteHelpers/) which adds this:
 ```yaml
 ---
 triggers: onEditorWillSave => jgclark.Dashboard.decideWhetherToUpdateDashboard
@@ -47,11 +47,14 @@ There are various other settings to change some of how it displays:
 - Ignore items with this phrase: If set, open tasks/checklists with this word or tag will be ignored, and not counted as open or closed. This is useful for situations where completing the item is outside your control.
 - Folders to ignore when finding linked items: If set, the contents of these folder(s) will be ignored when searching for open or closed tasks/checklists. This is useful where you are using sync'd lines in search results.
 - Include context for tasks? Whether to show the note link for an open task or checklist
+- Add dashboard auto-update trigger when dashboard opened?: Whether to add the auto-update trigger to the frontmatter to the current note when the dashboard is opened.
+- Exclude tasks that include time blocks?: : Whether to stop display of open tasks that contain a time block.
+- Exclude checklists that include time blocks?: Whether to stop display of open checklists that contain a time block.
 - Include folder name? Whether to include the folder name when showing a note link
 - #tag/@mention to show: (if set) will show all open tasks/checklists that include this #tag or @mention. This is one way of showing all `#next` actions, for example.
 
 ## Known Issue
-I'm trying to solve a problem when using this with its trigger, that NP hasn't finished updating itself before it re-calculates the Dashboard display.
+When using this with its trigger, it's normally the case that NotePlan hasn't finished updating itself before the Dashboard display updates. Therefore it can appear one change behind.
 
 ## Support
 If you find an issue with this plugin, or would like to suggest new features for it, please raise a [Bug or Feature 'Issue'](https://github.com/NotePlan/plugins/issues).

jgclark.Dashboard/plugin.json

@@ -8,7 +8,7 @@
   "plugin.author": "Jonathan Clark",
   "plugin.url": "https://github.com/NotePlan/plugins/tree/main/jgclark.Dashboard/",
   "plugin.changelog": "https://github.com/NotePlan/plugins/blob/main/jgclark.Dashboard/CHANGELOG.md",
-  "plugin.version": "0.6.0-RC5",
+  "plugin.version": "0.6.0-RC6",
   "plugin.lastUpdateInfo": "v0.6.0: adds tooltip on displayed tasks that allows task to be moved on to next day, week etc. Supports new '>>' working indicator in themes. Plus other visual polish and fixes.\nv0.5.1: display improvements + bug fixes.\nv0.5.0: Can now filter out lower-priority items. Can cancel or add tasks and checklists. New optional 'hastags/mentions to show' section.\nv0.4.2: various updates to window handling.v0.4.1: bug fix, polish and demo updates.",
   "plugin.requiredFiles": [
     "commsSwitchboard.js",

jgclark.Dashboard/requiredFiles/dashboard.css

@@ -62,7 +62,7 @@ table tr { /* turn on top and bottom border (from theme CSS) */
 .pad-right {	/* add space after icon */
 	padding-right: 0.4em;
 }
-.space-under {	/* add space after icon */
+.space-under {	/* add space under icon */
 	padding-bottom: 0.1em;
 }
 .scheduledDate {
@@ -107,17 +107,19 @@ div.content:hover {
 .fadeOutAndHide { /* Class to fade out an item, from https://stackoverflow.com/a/20910008 */
 	visibility: hidden;
 	opacity: 0;
-	transition: visibility 0s 2s, opacity 2s linear;
+	transition: visibility 0s 1.5s, opacity 1.5s linear;
 }
 /* Some headings specified from measuring the colour of NP sidebar elements */
 .sidebarDaily { font-size: 1.0rem; color: #d0703c;  }
 .sidebarWeekly { font-size: 1.0rem; color: #be23b6; }
 .sidebarMonthly { font-size: 1.0rem; color: #f5528b; }
 .sidebarQuarterly { font-size: 1.0rem; color: #e08008; }
 .sidebarYearly { font-size: 1.0rem; color: #efba13; }
+
 #error {
 	background-color: red;
-	padding-left: 10px; }
+	padding-left: 10px;
+}
 
 /* For fancy toggle as checkbox */
 /* from [Pure CSS3 iOS switch checkbox. A switch allows the user to quickly… | by Pedro M. S. Duarte | codeburst](https://codeburst.io/pure-css3-input-as-the-ios-checkbox-8b6347d5cefb)
@@ -193,6 +195,11 @@ input, label {
 }
 .tooltip .hoverExtraControls {
   visibility: hidden;
+  position: absolute; /* relative disrupts flow in different ways */
+  z-index: 1;
+	display: flex;
+  opacity: 0;
+	left: 3rem;
   /* width: 9rem; */ /* browser calculates better than I can */
   /* height: 1.2rem; */ /* browser calculates better than I can */
   line-height: 1.2rem;
@@ -202,13 +209,10 @@ input, label {
   /* color: rgb(113, 157, 171); */
   background: #88888820; /* hopefully OK for light and dark */
   border: 2px solid #88888820;
-  border-radius: 5px;
+  border-radius: 6px;
   /* text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px; */
   /* box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px; */
-  position: absolute;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 250ms 1000ms; /* after 1s fade in quite quickly */
+  transition: opacity 200ms 750ms; /* after 0.75s fade in quite quickly */
 }
 
 .tooltip .hoverExtraControls::after {
@@ -219,12 +223,11 @@ input, label {
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: #88888820 transparent transparent transparent; /* downwards arrow */
+  /* border-color: #88888820 transparent transparent transparent; /* downwards arrow */
   border-color: transparent transparent #88888820 transparent; /* upwards arrow */
   top: -50%;
-  left: 50%;
+  left: 20%;
 }
-
 .tooltip:hover .hoverExtraControls {
   visibility: visible;
   opacity: 1;

jgclark.Dashboard/src/dashboardHTML.js

@@ -501,10 +501,11 @@ export async function showDashboardHTML(shouldFocus: boolean = true, demoMode: b
           { displayString: "today", controlStr: "t", sectionDateTypes: ['W', 'M', 'Q'] }, // special controlStr to indicate change to '>today'
           { displayString: "+1d", controlStr: "+1d", sectionDateTypes: ['D'] },
           { displayString: "+1b", controlStr: "+1b", sectionDateTypes: ['D'] },
-          { displayString: "wk", controlStr: "+0w", sectionDateTypes: ['D', 'M'] },
+          { displayString: "→wk", controlStr: "+0w", sectionDateTypes: ['D', 'M'] },
           { displayString: "+1w", controlStr: "+1w", sectionDateTypes: ['D', 'W'] },
-          { displayString: "mon", controlStr: "+0m", sectionDateTypes: ['W', 'Q'] },
+          { displayString: "→mon", controlStr: "+0m", sectionDateTypes: ['W', 'Q'] },
           { displayString: "+1m", controlStr: "+1m", sectionDateTypes: ['M'] },
+          { displayString: "→qtr", controlStr: "+0q", sectionDateTypes: ['M>'] },
         ]
         const controlTypesForThisSection = possibleControlTypes.filter((t) => t.sectionDateTypes.includes(section.dateType))
         let tooltipContent = ''