Merge pull request #2 from shmolf/version-1

feat(contrast): add background for contrast in the input area
shmolf · Mar 13, 2023 · e9b8166 · e9b8166
2 parents 271acc0 + c4607eb
commit e9b8166
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 14 deletions.
diff --git a/src/PluginSettings.ts b/src/PluginSettings.ts
@@ -5,12 +5,14 @@ interface PluginSettings {
   imageUrl: string;
   opacity: number;
   bluriness: string;
+  inputContrast: boolean;
 }
 
 export const DEFAULT_SETTINGS: Partial<PluginSettings> = {
   imageUrl: 'protocol:://domain.tld/path/to/image.png',
   opacity: 0.3,
   bluriness: 'low',
+  inputContrast: false,
 };
 
 export default class BackgroundPlugin extends Plugin {
@@ -30,18 +32,17 @@ export default class BackgroundPlugin extends Plugin {
 
   async saveSettings() {
     await this.saveData(this.settings);
-    console.log(this.settings.opacity);
     this.UpdateBackground()
   }
 
   UpdateBackground(){
     const container = app.workspace.containerEl;
 
-    console.log(this.settings.opacity);
     if (container) {
       container.style.setProperty('--obsidian-editor-background-image', `url('${this.settings.imageUrl}')`);
       container.style.setProperty('--obsidian-editor-background-opacity', `${this.settings.opacity}`);
       container.style.setProperty('--obsidian-editor-background-bluriness', `blur(${this.settings.bluriness})`);
+      container.style.setProperty('--obsidian-editor-background-input-contrast', this.settings.inputContrast ? '#ffffff17' : 'none');
     }
   }
 }
diff --git a/src/PluginSettingsTab.ts b/src/PluginSettingsTab.ts
@@ -43,12 +43,8 @@ export class UrlSettingsTab extends PluginSettingTab {
       .addText(
         (text) => text.setPlaceholder(`${(DEFAULT_SETTINGS.opacity || 1) * 100}`)
           .setValue(`${this.floatToPercent(this.plugin.settings.opacity)}`)
-          .onChange(async (value: any) => {
-              console.log({
-                raw: value,
-                calc: this.percentToFloat(value)
-              });
-              this.plugin.settings.opacity = this.percentToFloat(value);
+          .onChange(async (value) => {
+              this.plugin.settings.opacity = this.percentToFloat(Number(value));
               await this.plugin.saveSettings();
               }
           )
@@ -57,16 +53,28 @@ export class UrlSettingsTab extends PluginSettingTab {
     new Setting(containerEl)
       .setName('Image Bluriness')
       .setDesc('Increasing the can make the text more legible.')
-      .addDropdown(dropdown => {
-         dropdown
-             .addOption(blurLevels.off, 'Off')
+      .addDropdown((dropdown) => {
+          dropdown
+              .addOption(blurLevels.off, 'Off')
               .addOption(blurLevels.low, 'Low')
               .addOption(blurLevels.high, 'High')
-             .setValue(this.plugin.settings.bluriness)
-             .onChange(async(value) => {
+              .setValue(this.plugin.settings.bluriness)
+              .onChange(async(value) => {
                 this.plugin.settings.bluriness = value;
                 await this.plugin.saveSettings();
-             });
+              });
+      });
+
+    new Setting(containerEl)
+      .setName('Input Area Contrast Background')
+      .setDesc('This adds a translucent background for the input area, to make it clear where you can type.')
+      .addToggle((toggle) => {
+        toggle.setTooltip('Enable to increase the contrast of the input area.')
+              .setValue(this.plugin.settings.inputContrast)
+              .onChange(async(value) => {
+                this.plugin.settings.inputContrast = value;
+                await this.plugin.saveSettings();
+              });
       });
   }
 

diff --git a/styles.css b/styles.css
@@ -11,3 +11,7 @@
     opacity: var(--obsidian-editor-background-opacity);
     filter: var(--obsidian-editor-background-bluriness);
 }
+
+.cm-editor .cm-contentContainer {
+    background: var(--obsidian-editor-background-input-contrast);
+}