Merge pull request #2 from nicosomb/add-width-setting

Add a new setting to define tab width

main.ts

@@ -2,10 +2,12 @@ import { App, Plugin, PluginSettingTab, Setting } from 'obsidian';
 
 interface ShrinkPinnedTabsSettings {
 	hideTitle: boolean;
+	tabWidth: number;
 }
 
 const DEFAULT_SETTINGS: ShrinkPinnedTabsSettings = {
 	hideTitle: false,
+	tabWidth: 60,
 }
 
 export default class ShrinkPinnedTabs extends Plugin {
@@ -32,6 +34,7 @@ export default class ShrinkPinnedTabs extends Plugin {
 
 	onunload() {
 		console.log('Unloading Shrink pinned tabs plugin');
+		this.updateStyle()
 	}
 
 	async loadSettings() {
@@ -46,13 +49,15 @@ export default class ShrinkPinnedTabs extends Plugin {
 
 	// update the styles (at the start, or as the result of a settings change)
 	updateStyle = () => {
+		console.log('Update style');
 		const tabs = document.querySelectorAll('.workspace-tab-header:has(.mod-pinned)');
 		if (tabs != null) {
 			for (var i = 0; i < tabs.length; i++) {
 				const title = (tabs[i].querySelectorAll('.workspace-tab-header-inner-title'));
 				if (title != null) {
 					title[0].toggleClass('mod-pinned-hide', this.settings.hideTitle);
 				}
+				tabs[i].style.width = this.settings.tabWidth + 'px';
 			}
 		}
 	}
@@ -81,5 +86,20 @@ class ShrinkPinnedTabsSettingTab extends PluginSettingTab {
 					this.plugin.refresh();
 				})
 			);
+
+		new Setting(containerEl)
+			.setName('Width tab')
+			.setDesc('Defines the width tab when shrinked')
+			.addSlider((text) =>
+				text
+					.setLimits(0, 160, 10)
+					.setValue(this.plugin.settings.tabWidth)
+					.setDynamicTooltip()
+					.onChange((value) => {
+						this.plugin.settings.tabWidth = value;
+						this.plugin.saveData(this.plugin.settings);
+						this.plugin.refresh();
+					})
+			);
 	}
 }

styles.css

@@ -1,8 +1,3 @@
-.workspace-tab-header:has(.mod-pinned) {
-	/* shrink if pinned */
-	max-width: 80px !important;
-}
-
 /* class to hide tab title */
 .mod-pinned-hide {
 	display: none;