fix: 1.1.0 compatibility

manifest.json

@@ -1,10 +1,11 @@
 {
 	"id": "cmdr",
 	"name": "Commander",
-	"version": "0.4.1",
-	"minAppVersion": "0.16.0",
+	"version": "0.4.2",
+	"minAppVersion": "1.1.0",
 	"description": "Customize your workspace by adding commands everywhere, create Macros and supercharge your mobile toolbar.",
 	"author": "jsmorabito & phibr0",
 	"authorUrl": "https://github.com/phibr0",
+	"donation": "https://ko-fi.com/phibr0",
 	"isDesktopOnly": false
 }

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cmdr",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"main": "main.js",
 	"scripts": {

src/manager/commands/explorerManager.ts

@@ -99,14 +99,21 @@ export default class ExplorerManager extends CommandManagerBase {
 
 		const setNormal = (): void => {
 			btn.empty();
-			setIcon(btn, pair.icon, 12);
+			btn.style.setProperty("--icon-size", `12px`);
+			setIcon(btn, pair.icon);
 			btn.onclick = (): void => app.commands.executeCommandById(pair.id);
 		};
 		const setRemovable = (): void => {
 			btn.empty();
-			setIcon(btn, "trash", 12);
+			btn.style.setProperty("--icon-size", `12px`);
+			setIcon(btn, "trash");
 			btn.onclick = async (): Promise<void> => {
-				if (!this.plugin.settings.confirmDeletion || (await new ConfirmDeleteModal(this.plugin).didChooseRemove())) {
+				if (
+					!this.plugin.settings.confirmDeletion ||
+					(await new ConfirmDeleteModal(
+						this.plugin
+					).didChooseRemove())
+				) {
 					this.removeCommand(pair);
 				}
 			};

src/manager/commands/menuManager.ts

@@ -85,7 +85,8 @@ abstract class Base extends CommandManagerBase {
 				}
 
 			});
-			setIcon(optionEl, "more-vertical", 16);
+			optionEl.style.setProperty("--icon-size", `16px`);
+			setIcon(optionEl, "more-vertical");
 			item.dom.append(optionEl);
 
 			item

src/manager/commands/statusBarManager.ts

@@ -40,20 +40,22 @@ export default class StatusBarManager extends CommandManagerBase {
 				}
 
 				new Menu()
-					.addItem(item => {
-						item
-							.setTitle(t("Add command"))
+					.addItem((item) => {
+						item.setTitle(t("Add command"))
 							.setIcon("command")
 							.onClick(async () => {
-								const pair = await chooseNewCommand(this.plugin);
+								const pair = await chooseNewCommand(
+									this.plugin
+								);
 								this.addCommand(pair);
 							});
 					})
 					.showAtMouseEvent(event);
 			});
 
 			this.plugin.register(() => this.addBtn.remove());
-			setIcon(this.addBtn, "plus", 12);
+			this.addBtn.style.setProperty("--icon-size", `12px`);
+			setIcon(this.addBtn, "plus");
 			this.addBtn.onclick = async (): Promise<void> => {
 				const pair = await chooseNewCommand(this.plugin);
 				this.addCommand(pair);
@@ -93,12 +95,14 @@ export default class StatusBarManager extends CommandManagerBase {
 
 		const setNormal = (): void => {
 			btn.empty();
-			setIcon(btn, pair.icon, 12);
+			btn.style.setProperty("--icon-size", `12px`);
+			setIcon(btn, pair.icon);
 			btn.onclick = (): void => app.commands.executeCommandById(pair.id);
 		};
 		const setRemovable = (): void => {
 			btn.empty();
-			setIcon(btn, "trash", 12);
+			btn.style.setProperty("--icon-size", `12px`);
+			setIcon(btn, "trash");
 			btn.onclick = async (): Promise<void> => {
 				if (!this.plugin.settings.confirmDeletion || (await new ConfirmDeleteModal(this.plugin).didChooseRemove())) {
 					this.removeCommand(pair);

src/manager/commands/titleBarManager.ts

@@ -36,7 +36,8 @@ export default class TitleBarManager extends CommandManagerBase {
 			this.plugin.saveSettings();
 
 			this.plugin.register(() => this.addBtn.remove());
-			setIcon(this.addBtn, "plus", 12);
+			this.addBtn.style.setProperty("--icon-size", `12px`);
+			setIcon(this.addBtn, "plus");
 			this.addBtn.onclick = async (): Promise<void> => {
 				const pair = await chooseNewCommand(this.plugin);
 				this.addCommand(pair);

src/ui/components/AdvancedToolbarSettings.tsx

@@ -74,8 +74,11 @@ function render(containerEl: HTMLElement, plugin: CommanderPlugin) {
 					if (command.icon) {
 						setIcon(iconDiv, command.icon, 20);
 					} else {
+						iconDiv.style.setProperty("--icon-size", "20px");
 						const currentIcon = plugin.settings.advancedToolbar.mappedIcons.find(m => m.commandID === command.id)?.iconID;
-						currentIcon ? setIcon(iconDiv, currentIcon, 20) : bt.setButtonText("No Icon");
+						currentIcon
+							? setIcon(iconDiv, currentIcon)
+							: bt.setButtonText("No Icon");
 					}
 					bt.onClick(async () => {
 						const icon = await new ChooseIconModal(plugin).awaitSelection();

src/util.tsx

@@ -48,7 +48,8 @@ export function ObsidianIcon({ icon, size, ...props }: ObsidianIconProps): h.JSX
 
 	useLayoutEffect(() => {
 		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		setIcon(iconEl.current!, icon, size);
+		iconEl.current!.style.setProperty("--icon-size", `${size}px`);
+		setIcon(iconEl.current!, icon);
 	}, [icon, size]);
 
 	return <div ref={iconEl} {...props} />;

versions.json

@@ -1,4 +1,6 @@
 {
+	"0.4.2": "1.1.0",
+	"0.4.1": "0.16.0",
 	"0.1.1": "0.16.0",
 	"0.1.0": "0.15.0"
 }