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 "
);