obsidian-plugin/lorens-osman-dev_double-row-toolbar
1
0
Fork 0
mirror of https://github.com/lorens-osman-dev/double-row-toolbar.git synced 2026-07-22 05:43:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add setting to control the bottom offset

Browse source
This commit is contained in:
Abu Bilal 2026-05-07 21:52:59 +03:00
parent cd56164480
commit d0a1d248ca
2 changed files with 80 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
main.ts
View file

@ -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 { export default class DoubleRowToolbarPlugin extends Plugin {
settings: DoubleRowToolbarSettings;
async onload() { async onload() {
await this.loadSettings();
if (Platform.isDesktop) { if (Platform.isDesktop) {
new Notice("'Double row toolbar' plugin is not supported on desktop devices."); new Notice("'Double row toolbar' plugin is not supported on desktop devices.");
return; return;
} }
// Apply the stored setting immediately on load
this.applyOffset();
this.addCommand({ this.addCommand({
id: "delete-current-line", id: "delete-current-line",
name: "Delete current line", name: "Delete current line",
@ -17,9 +31,55 @@ export default class DoubleRowToolbarPlugin extends Plugin {
editor.focus(); 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()
);
}
}

36
styles.css
View file

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