diff --git a/main.ts b/main.ts index 9b79545..f8d76e3 100644 --- a/main.ts +++ b/main.ts @@ -12,17 +12,19 @@ import { enum Level { HidePrivate = "hide-private", + RevealOnHover = "reveal-on-hover", RevealAll = "reveal-all", } enum CssClass { RevealAll = "private-mode-reveal-all", + RevealOnHover = "private-mode-reveal-on-hover", } export default class PrivateModePlugin extends Plugin { statusBar: HTMLElement; statusBarSpan: HTMLSpanElement; - currentLevel: Level = Level.HidePrivate; + currentLevel: Level = Level.RevealOnHover; async onload() { this.statusBar = this.addStatusBarItem(); @@ -30,18 +32,27 @@ export default class PrivateModePlugin extends Plugin { this.statusBar.ariaLabel = "Toggle Private Mode" this.statusBar.setAttr("data-tooltip-position", "top") this.statusBar.onClickEvent(() => { - this.currentLevel = this.currentLevel == Level.HidePrivate ? Level.RevealAll : Level.HidePrivate; + switch (this.currentLevel) { + case Level.HidePrivate: this.currentLevel = Level.RevealOnHover; break; + case Level.RevealOnHover: this.currentLevel = Level.RevealAll; break; + case Level.RevealAll: this.currentLevel = Level.HidePrivate; break; + } this.updateGlobalRevealStyle(); }); this.statusBarSpan = this.statusBar.createSpan( { text: "" }); addIcon("eye", eyeIcon); + addIcon("eye-hand", eyeHand); addIcon("eye-closed", eyeClosedIcon); this.addRibbonIcon("eye-closed", "Hide Private", () => { this.currentLevel = Level.HidePrivate; this.updateGlobalRevealStyle(); }); + this.addRibbonIcon("eye-hand", "Reveal on hover", () => { + this.currentLevel = Level.RevealOnHover; + this.updateGlobalRevealStyle(); + }); this.addRibbonIcon("eye", "Reveal all", () => { this.currentLevel = Level.RevealAll; this.updateGlobalRevealStyle(); @@ -56,6 +67,15 @@ export default class PrivateModePlugin extends Plugin { }, }); + this.addCommand({ + id: "private-mode-reveal-on-hover", + name: "Reveal on hover", + callback: () => { + this.currentLevel = Level.RevealOnHover; + this.updateGlobalRevealStyle(); + }, + }); + this.addCommand({ id: "private-mode-reveal-all", name: "Reveal all", @@ -78,6 +98,7 @@ export default class PrivateModePlugin extends Plugin { removeAllClasses() { document.body.removeClass( CssClass.RevealAll, + CssClass.RevealOnHover ); } @@ -86,6 +107,10 @@ export default class PrivateModePlugin extends Plugin { case Level.HidePrivate: setIcon(this.statusBarSpan, "eye-closed") break; + case Level.RevealOnHover: + document.body.classList.add(CssClass.RevealOnHover); + setIcon(this.statusBarSpan, "eye-hand") + break; case Level.RevealAll: document.body.classList.add(CssClass.RevealAll); setIcon(this.statusBarSpan, "eye") @@ -95,8 +120,11 @@ export default class PrivateModePlugin extends Plugin { } -// https://icon-sets.iconify.design/ph/eye-closed-bold/ -const eyeClosedIcon = ``; +// https://icon-sets.iconify.design/ph/eye-closed/ +const eyeClosedIcon = ``; + +// https://icon-sets.iconify.design/ph/hand-eye/ +const eyeHand = ``; // https://icon-sets.iconify.design/ph/eye/ -const eyeIcon = ``; +const eyeIcon = ``; diff --git a/styles.scss b/styles.scss index fb011c2..f151dfb 100644 --- a/styles.scss +++ b/styles.scss @@ -30,7 +30,7 @@ $element-selectors: ( $reveal-templates: ( "" ".inline-title:focus-within", "" ".cm-active", - "" ":hover", + "body.private-mode-reveal-on-hover " ":hover", "body.private-mode-reveal-all " );