ewd

README.md

@@ -26,4 +26,17 @@ Adds a second row to the Obsidian toolbar on mobile devices, allowing for more q
 
 ---
 
+## Bottom Offset
+NEW: The plugin allows you to adjust the vertical position of the mobile toolbar to ensure it doesn't overlap with system gestures (like the home bar on iOS/Android) or other UI elements.
+
+- Usage:
+
+   1. Open Settings > Double Row Toolbar.
+
+   2. Use the Bottom Offset slider to move the toolbar up or down.
+
+The changes apply instantly in the editor.
+
+---
+
 <a href="https://www.buymeacoffee.com/lorens" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

bump.ts

@@ -5,7 +5,7 @@ import type { ForegroundColorName, BackgroundColorName } from "chalk";
 type Msg = [string, ForegroundColorName | "white", BackgroundColorName | null];
 
 // Define the package semver and app version
-const packageSemver = "1.0.2"; // Replace with your desired package semver
+const packageSemver = "1.0.3"; // Replace with your desired package semver
 const appVersion = "1.8.4"; // Replace with your desired app version
 
 // Paths to the JSON files

main.ts

@@ -1,13 +1,27 @@
-import { Editor, MarkdownView, Plugin, Platform, Notice } from 'obsidian';
+import { App, Editor, MarkdownView, Plugin, Platform, Notice, PluginSettingTab, Setting } from 'obsidian';
+
+interface DoubleRowToolbarSettings {
+	bottomOffset: number;
+}
+
+const DEFAULT_SETTINGS: DoubleRowToolbarSettings = {
+	bottomOffset: 25
+}
 
 export default class DoubleRowToolbarPlugin extends Plugin {
+	settings: DoubleRowToolbarSettings;
+
 	async onload() {
+		await this.loadSettings();
 
 		if (Platform.isDesktop) {
 			new Notice("'Double row toolbar' plugin is not supported on desktop devices.");
 			return;
 		}
 
+		// Apply the stored setting immediately on load
+		this.applyOffset();
+
 		this.addCommand({
 			id: "delete-current-line",
 			name: "Delete current line",
@@ -17,9 +31,55 @@ export default class DoubleRowToolbarPlugin extends Plugin {
 				editor.focus();
 			}
 		});
+
+		this.addSettingTab(new DoubleRowToolbarSettingTab(this.app, this));
 	}
 
-	onunload() { }
+	async loadSettings() {
+		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+	}
+
+	async saveSettings() {
+		await this.saveData(this.settings);
+		this.applyOffset();
+	}
+
+	// This updates the CSS variable you defined in styles.css
+	applyOffset() {
+		document.documentElement.style.setProperty('--double_row_mobile_toolbar_bottom_offset', `${this.settings.bottomOffset}px`);
+	}
+
+	onunload() {
+		// Optional: Clean up the variable when plugin is disabled
+		document.documentElement.style.removeProperty('--double_row_mobile_toolbar_bottom_offset');
+	}
 }
 
+class DoubleRowToolbarSettingTab extends PluginSettingTab {
+	plugin: DoubleRowToolbarPlugin;
 
+	constructor(app: App, plugin: DoubleRowToolbarPlugin) {
+		super(app, plugin);
+		this.plugin = plugin;
+	}
+
+	display(): void {
+		const { containerEl } = this;
+		containerEl.empty();
+
+		containerEl.createEl('h2', { text: 'Double Row Toolbar Settings' });
+
+		new Setting(containerEl)
+			.setName('Bottom Offset')
+			.setDesc('Adjust the distance from the bottom of the screen (Default: 25px).')
+			.addSlider(slider => slider
+				.setLimits(0, 100, 1) // Adjust range as needed
+				.setValue(this.plugin.settings.bottomOffset)
+				.onChange(async (value) => {
+					this.plugin.settings.bottomOffset = value;
+					await this.plugin.saveSettings();
+				})
+				.setDynamicTooltip()
+			);
+	}
+}

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "double-row-toolbar",
 	"name": "Double row toolbar",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"minAppVersion": "1.8.4",
 	"description": "Adds a second row to the toolbar on mobile devices, allowing for more quick access buttons.",
 	"author": "Lorens Osman",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "double-row-toolbar",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"description": "Adds a second row to the toolbar on mobile devices, allowing for more quick access buttons.",
 	"main": "main.js",
 	"scripts": {

styles.css

@@ -1,22 +1,22 @@
-  .mobile-toolbar {
+.mobile-toolbar {
     .mobile-toolbar-options-container {
-      height: 100%;
-      .mobile-toolbar-options-list-container {
-        border-radius: 5px;
-        bottom: 25px;
-        position: relative;
-        height: 70px;
+        height: 100%;
+        .mobile-toolbar-options-list-container {
+            border-radius: 5px;
+            /* The TS code above will override the 25px fallback */
+            bottom: var(--double_row_mobile_toolbar_bottom_offset, 25px);
+            position: relative;
+            height: 70px;
 
-        .mobile-toolbar-options-list {
-          padding-bottom: 2px;
-          padding-top: 2px;
-          display: grid !important;
-          grid-template-rows: 1fr 1fr;
-          grid-auto-flow: column;
-          row-gap: 4px;
-          height: 100%;
+            .mobile-toolbar-options-list {
+                padding-bottom: 2px;
+                padding-top: 2px;
+                display: grid !important;
+                grid-template-rows: 1fr 1fr;
+                grid-auto-flow: column;
+                row-gap: 4px;
+                height: 100%;
+            }
         }
-      }
-
     }
-  }
+}

versions.json

@@ -1,5 +1,6 @@
 {
 	"1.0.0": "1.8.4",
 	"1.0.1": "1.8.4",
-	"1.0.2": "1.8.4"
+	"1.0.2": "1.8.4",
+	"1.0.3": "1.8.4"
 }